UI PROMPT BUILDER

Build a better UI prompt in under two minutes.

Pick how it should feel. Pick the screen you are building. Copy a prompt that gives your coding model less room to fall back to generic UI.

1Choose a vibe
2Choose a screen
3Copy the prompt

Start with the UI direction → Not sure? Compare all 8

Why this saves tokens and rework No signup. Nothing leaves your browser.

BUILD YOUR PROMPT

Choose, choose, copy.

The prompt updates as you go. Project details are optional and can be added before you copy.

How should it feel?

Choose the closest direction. You can tune the details after the first build.

Selected: Editorial

See the full example Next: choose the screen ↓

What kind of screen is it?

Selected: Dashboard

Next: copy the prompt ↓

Add project details Optional, but makes the prompt specific to your product.

Project name Implementation stack What are you building?

Copy the prompt.

Prompt detail

Editorial Dashboard ≈ 550 tokens

Inspect the full prompt

# [Project name]

<product_brief>
[Describe what you are building, who it is for, and the primary action in 1-2 sentences.]
</product_brief>

<implementation>
Work inside the existing project stack and follow its established component and styling patterns.
Build a polished, working interface rather than a static mockup.
</implementation>

<screen_type name="Dashboard">
Use an overview-first dashboard layout. Include clear navigation, a compact page header, a responsive metric grid, and scannable data regions. Collapse navigation below 768px and stack cards without losing priority.
</screen_type>

<design_system name="Editorial">

**Mode:** Light

**Colours**
- Background: #FAFAF7 (warm white)
- Surface (cards/panels): #FFFFFF
- Text primary: #1A1A1A (near-black)
- Text secondary: #555555
- Accent: #0B1F3A (deep navy) — used sparingly, primary actions and links only
- Border: #E8E5DC (warm light grey)
- Success: #1F3A2E / Error: #5A1A1A / Warning: #8B6914

**Typography**
- Headings: Fraunces, Source Serif, or Newsreader (serif). 600-700 weight.
- Body: Inter, Söhne, or system-ui sans.
- Scale: 14 caption / 17 body / 22 lead / 32 small head / 48 section / 64-72 hero
- Line-height: 1.6 on body, 1.15 on headings
- Tracking: -0.02em on hero sizes; normal elsewhere

**Spacing**
- Base unit: 8pt scale
- Content max-width: 680px (reading column)
- Card padding: 24-32px
- Section spacing: 96-128px (very generous)

**Radii**
- Cards: 4px (minimal)
- Buttons: 4px
- Inputs: 4px

**Motion**
- Duration: 400-600ms (slow, considered)
- Easing: ease-out
- What gets animated: fade-ins on scroll, page transitions. Nothing bouncy.

</design_system>

<quality_bar>
- Build mobile-first for 375px, 768px, and 1280px. No horizontal scroll; touch targets are at least 44px.
- Use real product-specific content. No lorem ipsum, decorative emoji, or generic marketing copy.
- Define hover, active, focus, disabled, loading, empty, and error states where relevant.
- Use one icon library only. Prefer lucide. Keep motion and visual effects consistent with the chosen direction.
- Do not invent extra features, dark mode, gradients, or dashboard cards unless the brief requires them.
</quality_bar>