Turn a rough UI idea into a build-ready design prompt
FreeTurn a vague UI idea into a precise, generation-ready design prompt — a one-line vibe, a named-colour design system, and a numbered page structure — that v0, Stitch, Lovable, or Claude can render into a polished first screen on the first try.
A copy-paste-ready design brief that an AI UI tool renders into a polished, on-brand first screen without asking any follow-up questions.
Your details
saved for every promptThis prompt
Turn the rough UI idea below into a single, generation-ready design prompt that an AI design tool can render into a polished, on-brand first screen — with no follow-up questions needed.
Context:
- Product: {{product}}
- Primary users: {{audience}}
- Target platform: {{platform}}
- Rough UI idea:
"""
{{ui_idea}}
"""
Do this first:
1. Read the idea and spot what is missing — page type, visual style/mood, colour direction, and the key components. Fill each gap with a sensible, on-brand default instead of asking me.
2. Name one clear visual vibe and sharpen it with 2-3 concrete adjectives (e.g. "calm, editorial, high-contrast" — not just "modern").
3. Replace every vague element with a real, named component: "a button" becomes "primary CTA button", "a menu" becomes "sticky top navigation bar", "some cards" becomes "3-up feature card grid".
Then write the design prompt in exactly this order:
1. One-line description — one sentence naming the screen's purpose and its vibe.
2. Design System — a short block that lists each colour as "Descriptive name (#hex) for [role]" (e.g. "Deep Ink (#0B1220) for page background"), plus a heading + body font pairing and a base spacing / corner-radius note.
3. Page Structure — a numbered, top-to-bottom list of sections; bold each section name, then give one sentence on its content and layout.
Output the result as clean, copy-pasteable text under those three headings, ready to drop into an AI design tool. If a detail is genuinely unknowable, pick a tasteful default and move on rather than leaving a blank.
Match the depth of the spec to the complexity of the idea — keep simple asks simple — and favour specific, buildable instructions over decoration.4 fields still empty — the {{like_this}} slots fill in as you type.
See it in action
What this prompt produces with example details filled in:
1. One-line description
A calm, reassuring iOS home screen that shows PrepPal's busy parents this week's dinner plan at a glance and makes weeknight cooking feel handled — warm, uncluttered, and quietly confident.
2. Design System
Colours
- Warm Oat (#F7F3EC) for the app background
- Deep Basil (#1F3D2B) for primary text and the active tab icon
- Fresh Sage (#5B9C6E) for the primary CTA button and progress accents
- Soft Clay (#E4805B) for the "Start cooking" highlight and today's meal tag
- Muted Stone (#8A867E) for secondary text and captions
- Pure White (#FFFFFF) for meal cards and elevated surfaces
Typography
- Headings: "Fraunces", a soft high-contrast serif, for a warm editorial feel
- Body & UI: "Inter", for clean, legible labels and captions
Foundations
- Base spacing unit: 8px (16px gutters, 24px section padding)
- Corner radius: 20px on cards, 14px on buttons
- Elevation: soft, low-spread shadows only — nothing harsh
3. Page Structure
1. **Status Bar & Greeting Header** — Standard iOS status bar above a warm greeting ("Good evening, Sam") with the date and a small circular profile avatar aligned right.
2. **This Week Summary Strip** — A horizontal row of 7 day-pills (Mon-Sun) with today highlighted in Soft Clay; each pill shows a tiny dot when a meal is planned so the whole week reads at a glance.
3. **Tonight's Meal Hero Card** — A large Pure White card featuring tonight's dish photo, name, and prep time, plus a full-width Fresh Sage "Start cooking" primary CTA button; this is the visual anchor of the screen.
4. **Upcoming Meals List** — A vertical stack of compact meal cards for the next 2-3 days, each with a thumbnail, dish name, day label, and a quiet "Swap" text button on the right.
5. **Quick Actions Row** — A 3-up row of soft icon buttons — "Add meal", "Shopping list", and "Browse recipes" — spaced evenly with labels beneath.
6. **Bottom Tab Bar** — A fixed 4-item iOS tab bar (Home, Plan, List, Profile) with a Deep Basil active state and Muted Stone inactive icons.Tips
- The more real your rough idea is — one true feeling plus one concrete element — the sharper the spec. 'A calm home screen showing this week's meals' beats 'a nice dashboard'.
- Paste the returned Design System and Page Structure straight into v0, Stitch, or Lovable. Want a different mood? Change only the vibe adjectives and re-run.
- To lock your brand, drop your real hex codes into the idea and the model builds the system around them instead of inventing colours.
- For a multi-screen flow, run it once per screen and reuse the same Design System block so the whole app stays consistent.
Built by Web Innoventix
Want the work done, not just prompted? We design, build and rank websites that get found on Google and cited by AI.
Get a free quoteMore prompts
Browse all →Design critique that returns prioritised fixes
Get a senior product-design critique of any screen — specific, located, severity-ranked usability fixes tied to real heuristics, not vague praise.
Design a first-run onboarding flow to your product's aha moment
A ready-to-paste ChatGPT prompt that interviews you about your product, then designs a first-run app onboarding flow that walks new users to their aha moment — delivered as a build-ready spec.
Plan your product's information architecture and sitemap
A paste-and-go ChatGPT prompt that interviews you about your product and users, then delivers a full information architecture and sitemap — navigation model, page hierarchy, URL scheme, and key user flows.
Interview a user and turn it into a UX research brief
A paste-and-go ChatGPT prompt that runs a professional UX discovery interview one question at a time, then synthesizes your answers into a structured, shareable UX research brief.
Generate a design token system with light and dark palettes
A paste-and-go ChatGPT prompt that briefly interviews you, then generates a complete light and dark design token system — primitives, semantic tokens, and WCAG-checked contrast — ready to export as CSS variables, DTCG JSON, or a Tailwind config.
Write a moderated usability test script for any product
A paste-and-go prompt that interviews you about your product, users, and goals, then writes a complete moderated usability testing script template — moderator intro, non-leading task scenarios, in-session probes, and post-task ease metrics.