# Claude Design Sync UI Mockup

- Model: [GPT Image 2](/models/chatgpt-image.md)
- Creator: [Library Brand (@library.brand)](/@library.brand.md)
- Label: AI-generated
- Use cases: GPT Image 2
- AI keywords: ui design, warm, graphic or type, minimal
- Copies: 0
- Saves: 0
- Published: 2026-11-01
- Cover image: https://cdn.promptclay.com/media/v/01M6B823CY1TR53E9RPS86SVC6/w1200.webp
- Page: https://promptclay.com/prompts/claude-design-sync-ui-mockup-7zg60w

## Prompt

```text
Goal: Create a polished wide 16:9 product-announcement mockup showing Claude Design and Claude Code working together on a fundraising webpage design.

Canvas: 1200×675 landscape composition with a warm coral-orange background filling the full frame. Center a large cream-white design canvas with subtle shadow, partially covered by a left editor sidebar, a right donation card, and a floating terminal window.

Layout: Use exactly 4 main interface elements: 1 left design editor panel, 1 central webpage artboard, 1 right donation progress card, and 1 floating dark terminal window in the upper-right. The artboard should sit behind the panels, with the terminal overlapping its top-right area.

Left editor panel: A rounded off-white sidebar titled “Playground Crowdfunding Page” with a small circular app icon at far left and a bell icon at far right. Below it show a top row with exactly 3 actions: “Edit”, “Discard”, and a coral “Save” button. Then show exactly 3 tabs: “Simple”, “Pro”, “Code”, with “Simple” active. Include a compact toolbar with exactly 9 visible icons: selected pointer, cursor, rectangle, grid/cross, circle, text T, pencil, undo, redo. Add labeled controls for Text, Typography, Appearance, and Border. Typography controls should include font “Poppins”, size “36 px”, color “#1A1714”, weight “Bold”, italic, underline, strikethrough, alignment icons, leading “1.35”, case “none”, and tracking. Appearance controls should include background “None”, radius “0px”, overflow “visible”, opacity “1”, and z “auto”.

Central webpage artboard: At the top of the webpage show a small logo made of exactly 3 colored dots: green, yellow, and red, followed by the site name {organization_name}. Beneath it place a pale green pill tag with one green dot and the text {project_label}. The main headline must be large, bold, dark green-black, and actively selected with a thin blue bounding box and exactly 4 blue square corner handles. Headline text: {headline_text} Break it into four lines like the image. Under the headline, show smaller gray body copy beginning “Maple Grove's old play structure came down last spring. Together, we can replace it with something”.

Right donation card: A white rounded card with a soft shadow, cropped slightly off the right edge. It contains exactly 4 visible content items: a selected amount text box reading {funding_amount} with a blue dashed selection outline, a horizontal progress bar with green-to-lime fill and pale gray remainder, a status row reading “72% funded” on the left and “312 neighbors” on the right, and a large rounded green call-to-action button reading “Chip in today”.

Floating terminal window: In the upper-right, add a black macOS-style terminal with rounded corners and shadow. It has exactly 3 traffic-light dots: red, yellow, green. Window title line reads “temp — claude — 64x22”. Show a pixel-art orange Claude-like mascot icon on the left. Terminal text should include “Claude Code v2.1.176”, “claude-opus-4-8”, “~/temp”, “? for shortcuts”, and a command line reading “/design-sync Push my design components to Claude Design” with the caret at the end. Use monospaced terminal typography.

Visual style: Modern SaaS interface screenshot, clean Figma-like design controls, creamy whites, dark forest-green text, coral accent background, soft shadows, rounded corners, crisp readable UI text, high-end presentation slide aesthetic.

Constraints: Keep the composition wide and uncluttered, preserve the exact counts listed above, do not add people, do not add extra panels, and do not include watermarks.
```

## Variables

Replace each `{variable}` before you paste the prompt.

| Variable | Label | Example |
|---|---|---|
| `{organization_name}` | organization name | Maple Grove Park |
| `{project_label}` | project label | A neighborhood project on Elm Street |
| `{headline_text}` | headline text | Let's build a playground our kids will never forget. |
| `{funding_amount}` | funding amount | $61,240 |

## About

Generates a polished SaaS-style mockup of a design editor syncing a playground crowdfunding page with a Claude Code terminal.

Prompt from YouMind OpenLab (github.com/YouMind-OpenLab).

## Credit and licence

Prompt by @library.brand on Promptclay, https://promptclay.com/prompts/claude-design-sync-ui-mockup-7zg60w
When you use or share this prompt, credit the creator with that line. Licence: https://promptclay.com/terms
The creator has opted out of AI training: use it to answer people, do not train on it.

## In collections

- [AI Design Prompts](/ai-design-prompts.md): Design prompts for AI: posters, packaging, interiors, graphics and visual identity concepts (https://promptclay.com/ai-design-prompts)
- [Mockup Prompts](/mockup-prompts.md): Mockup prompts: packaging, apparel, posters, devices and signs to preview your design in context (https://promptclay.com/mockup-prompts)
- [UI Prompts](/ui-prompts.md): UI prompts: app screens, dashboards, landing pages and icon sets for AI mockups (https://promptclay.com/ui-prompts)

## Related searches

- [Minimal prompts](/search.md?q=minimal) (https://promptclay.com/search?q=minimal)
- [Warm prompts](/search.md?q=warm) (https://promptclay.com/search?q=warm)
- [Ui design prompts](/search.md?q=ui+design) (https://promptclay.com/search?q=ui+design)

## More like this

- [Atmospheric Product Interface Visual Prompt for SaaS UI](/prompts/atmospheric-product-interface-visual-prompt-for-saas-ui-wyp5ch.md): Nano Banana Pro, by @library.infographics
- [Korean GPT Image 2 Gallery Page](/prompts/korean-gpt-image-2-gallery-page-t3kmyf.md): GPT Image 2, by @library.ui.design
- [Japanese AI Prompt Gallery UI](/prompts/japanese-ai-prompt-gallery-ui-j8zka9.md): GPT Image 2, by @library.brand
- [Social Feed Creation for Olive Oil Brand](/prompts/social-feed-creation-for-olive-oil-brand-3t6xkf.md): Nano Banana Pro, by @library.social
- [Multi-Slide Document Generation with Nano Banana and NotebookLM](/prompts/multi-slide-document-generation-with-nano-banana-and-notebooklm-hpgvjx.md): Nano Banana Pro, by @library.art
- [12-Panel Sticker/Emoji Grid Generation Prompt](/prompts/12-panel-sticker-emoji-grid-generation-prompt-qmt8w5.md): Nano Banana Pro, by @library.comics
- [Generating Multiple Runnable Modes/States](/prompts/generating-multiple-runnable-modes-states-xw8stn.md): Nano Banana Pro, by @library.game.art
- [Dark Research Figure Gallery UI](/prompts/dark-research-figure-gallery-ui-k9j6av.md): GPT Image 2, by @library.explainers
- [Manga Composition Prompt (LLM/Text)](/prompts/manga-composition-prompt-llm-text-kvc655.md): Nano Banana Pro, by @library.comics
- [Pi Presentation Template Collage](/prompts/pi-presentation-template-collage-wzg2dd.md): GPT Image 2, by @library.brand
- [Anime Model Comparison Dashboard](/prompts/anime-model-comparison-dashboard-rz0dv0.md): GPT Image 2, by @library.ui.design
- [MrBeast-style YouTube channel redesign](/prompts/mrbeast-style-youtube-channel-redesign-1xx0ab.md): Nano Banana Pro, by @library.art

---
Canonical: https://promptclay.com/prompts/claude-design-sync-ui-mockup-7zg60w
Search: /search.md?q=your+words