There's a reason AI-made apps sometimes look amateur, even when they work: they have no design system. Every screen the AI generates on its own uses different colors, different spacing, different buttons — and the result looks like it was made by five people who never talked to each other. The fix isn't to \"polish\" each screen; it's to build ONE design system and make the AI respect it every time. And the most common mistake is leaving it for the end: the FIRST thing you should ask your AI for, before any screen, is to build your design system. In this guide you'll see which sections it must have (the same ones premium products use), what a truly professional one looks like, and two ready-to-use prompts so your AI —Claude, Codex, Cursor, v0— builds you one at Silicon Valley level.
You ask the AI for a screen and it turns out fine. You ask for another, and it uses a different shade of purple, a different button size, different spacing. A third one, and a shadow shows up that wasn't on any of the others. Each screen, on its own, isn't bad — but put together, your app looks like it was made by five people who never talked to each other. That's what makes something look amateur, even when it works perfectly.
A design system is a single document with ALL the visual rules of your product: which colors exist and what for, which text sizes, how much space between things, what buttons look like, cards, animations. The AI reads it, and from then on every screen it generates comes out cohesive — because it no longer improvises, it follows the rules.
Here's the mistake almost everyone makes: asking for screens first and thinking about design "later, when I have time". By then you already have twenty inconsistent screens and fixing them is a never-ending patch job. The FIRST thing you should ask your AI for, before the first screen, is to build your design system. That way everything that comes after is born cohesive. It's the decision that lifts your product's finish the most, and it costs almost nothing.
A serious design system isn't "a color palette". It's exhaustive. These are the sections that enterprise-grade systems have (the same ones products like Linear, Vercel, or Raycast use), and that your prompt should ask for:
So you can see the LEVEL of detail you should demand, here's a snippet of the kind of system we use to build premium products. Notice the precision — it doesn't say "use purple", it says exactly which purple and at what opacity for each situation:
BRAND COLOR (accent) — appears ONLY on the interactive/active, never decorative Primary: #8B5CF6 · Light: #A78BFA (text/icons) · Deep: #7C3AED (pressed) SURFACES (5 depth levels, not "flat black"): surface-1 #0A0A0A (background) · surface-2 #0D0D0D (sidebar) · surface-3 #111111 (cards) surface-4 #1A1A1A (dropdowns) · surface-5 #222222 (active on elevated) TEXT (by opacity, not by color): Primary #FFFFFF · Secondary rgba(255,255,255,0.70) · Tertiary 0.45 · Muted 0.28 TYPOGRAPHY — Inter · base 14px · weights ONLY 400/500/600/700 (never 300/800/900) BODY 12px · TITLE 16px · HERO 24px · letter-spacing 0.07em on uppercase labels SPACING — 8px grid (4px micro). Never odd numbers (3,7,9,11px). RADIUS — inputs 8px · cards 12px · modals 16px (children ALWAYS less than the parent) ANIMATION — only opacity/transform/box-shadow · hover scale 1.02–1.05 · never animate width/height
If you don't have a defined brand, let the AI propose the aesthetic and assemble the whole system. Copy it and paste it to your design/code agent:
Before building any screen, I want us to create my product's DESIGN SYSTEM, so that everything you generate afterward is cohesive. My product is: [describe your app and who it's for]. Aesthetic I like: [e.g. "dark premium, Linear-style" / "clean and friendly" / "not sure, you propose it"]. Create a COMPLETE and exhaustive design system document, with these sections, each with EXACT VALUES (not approximations): 1. Philosophy/identity and design pillars. 2. Color: brand color + surface/background scale by levels + text scale by opacity + borders + semantic colors (success/error/warning/info) + chart palette. 3. Typography: font, exact size scale, allowed weights, line heights, letter-spacing. 4. Spacing and grid (base unit and multiples). 5. Border-radius per element type. 6. Shadows/elevation by levels. 7. Components (buttons, cards, inputs, modals, badges, tooltips, dropdowns) with their values. 8. Motion/animation (durations, easing, what animates and what doesn't). 9. States (rest, hover, focus, active, disabled, error, success). 10. Iconography, layout/grid, empty states, and a list of ANTI-PATTERNS (what never to do). IMPORTANT: clearly mark what is FLEXIBLE (adaptable, e.g. the brand color) and what is NON-NEGOTIABLE (the exact values that don't get touched). The goal: the result should look indistinguishable from a premium Silicon Valley product. Save this system and respect it on EVERY screen we build from now on.
If you already have colors, a logo, or an identity, use this one so the AI assembles the complete system while respecting them:
I want to create my product's complete DESIGN SYSTEM from my current brand, before building screens. My brand: color(s) [paste your colors/hex], typography [if you have one], and this style/feel [describe: serious, fun, luxurious, etc.]. My product is [describe it]. From my brand, build a COMPLETE and exhaustive design system with EXACT values, covering: philosophy, color (my brand + surfaces + text + borders + semantics + charts), typography (scale, weights, heights), spacing/grid, border-radius, shadows, components (buttons, cards, inputs, modals, badges, tooltips), motion/animation, states, iconography, layout, empty states, and anti-patterns. Rules: respect my brand colors as the base; derive the variants (light, dark, opacities) from them; mark what's flexible and what's non-negotiable; and make the finish look premium. When you're done, respect it on every screen we build.
So you don't start from zero, here's a complete, professional design system — dark premium aesthetic, neutral and generic. Copy the whole thing, paste it to your AI, and tell it "build everything respecting this system". Or change the brand color (the only flexible thing) and make it yours. It's the same level of rigor Silicon Valley products use: every value is tuned, nothing is random.
Build EVERYTHING respecting this design system. The only flexible thing is the brand color; the rest are exact values, don't change them. === PHILOSOPHY === Dark premium interface, minimalist and precise (Linear/Vercel style). Depth through layers, not flat. The brand color appears ONLY on the interactive/active, never as decoration. Hierarchy through size+weight+opacity, not color. === COLOR === Brand (FLEXIBLE — swap for yours): Primary #8B5CF6 · Light #A78BFA (text/icons) · Deep #7C3AED (pressed). Surfaces (5 depth levels): surface-1 #0A0A0A (background) · surface-2 #0D0D0D (sidebar) · surface-3 #111111 (cards) · surface-4 #1A1A1A (dropdowns/tooltips) · surface-5 #222222 (active on elevated). Never skip levels. Text (by white opacity): primary #FFFFFF · secondary rgba(255,255,255,0.70) · tertiary 0.45 · quaternary 0.28 · muted 0.20. Borders (white with opacity): strong 0.20 · normal 0.10 · subtle 0.08 · hairline 0.06. Semantics: success #10B981 · warning #F59E0B · error #EF4444 · info #3B82F6 (background at 0.07-0.10, border 0.15-0.22, text full color). === TYPOGRAPHY === Font: Inter (variable), antialiased, tabular-nums on numbers. Base 14px. Scale (px): micro 9 · caption 10 · small 11 · body 12 · base 13 · subhead 14 · title 16 · heading 18 · display 20 · hero 24. Weights ONLY: 400 (body) · 500 (labels/nav) · 600 (titles/buttons) · 700 (numbers/KPIs). NEVER 300, 800, or 900. Line heights: labels/buttons 1.0-1.2 · body 1.55 · code 1.6. Uppercase labels: 10-11px, weight 600-700, letter-spacing 0.07em, color opacity 0.28-0.40. Never body text in uppercase. === SPACING === 8px grid (4px only for internal micro-spacing). Values: 4·8·12·16·20·24·32·40·48·64. NEVER odd numbers (3,7,9,11px) for layout. === BORDER-RADIUS === badges 4-6px · inputs/dropdown-items 8px · cards 12-14px · modals 16px · hero 20px · circle 50%. Rule: children ALWAYS with smaller radius than the parent. === SHADOWS === cards: border only (no shadow) · dropdowns: 0 8px 28px rgba(0,0,0,0.55) · modals: 0 32px 80px rgba(0,0,0,0.75). Brand glow on hover for interactive cards: 0 0 0 1px rgba(BRAND,0.40), 0 8px 32px rgba(BRAND,0.16). === COMPONENTS (exact values) === Standard button: padding 8px 16px, radius 8px, font 12px weight 600. Primary: bg rgba(BRAND,0.20), border rgba(BRAND,0.40), text Light. Ghost: bg rgba(255,255,255,0.05), border 0.08, text 0.45. Card: padding 12-16px, radius 12-14px, border rgba(255,255,255,0.05), bg rgba(255,255,255,0.02). Hover: bg 0.045. Input: padding 8px 12px, radius 8px, bg rgba(255,255,255,0.04-0.06), border 0.10. Focus: border rgba(BRAND,0.40) + shadow 0 0 0 3px rgba(BRAND,0.12). Modal: bg #111111, border 0.10, radius 16px, overlay rgba(0,0,0,0.72). Badge: 9px weight 700, padding 2px 6px, radius 4px. Active nav item: bg rgba(BRAND,0.15), text Light, weight 600. Rest: transparent, text 0.45, weight 400. === MOTION === Animate ONLY opacity, transform (scale/translate), and box-shadow. NEVER width/height/padding/margin (they cause reflow). Durations: tap 0.08s · tooltip 0.12s · enter/exit 0.15s · standard transition 0.18-0.22s · ambient (pulse) 2s+. Button hover: scale 1.02-1.05 · tap: scale 0.93-0.97. Standard easing: cubic-bezier(0.16, 1, 0.3, 1). === STATES (each interactive element) === Rest · Hover (tint + scale, 80-180ms) · Focus (brand border + ring) · Active (scale 0.93-0.97) · Disabled (opacity 0.35-0.50, no pointer) · Error (red border + error text) · Success (green flash 1800ms). === ICONS / LAYOUT / EMPTY === Icons: lucide, 12-16px standard, color inherits from text. Layout: sidebar 64px (icon) or 176px (expanded), panels 280-320px, content flex-1, max 1440px. Empty state: muted icon 0.15 + title 0.35 + subtitle 0.20 + ghost CTA. === ANTI-PATTERNS (never) === Never weight 300/800/900 in UI · never a named gray color (use white rgba) · never odd spacing numbers · never animate layout · never "transition: all" · never the brand color on more than 15-20% of the screen · never the same radius (or larger) on a child than on its parent. Goal: the result should look indistinguishable from a premium Silicon Valley product. Respect these values on EVERY screen.
#8B5CF6) for yours. If you want something more tailored, use Prompt 1 or 2 above to have your AI generate your own with this same structure.CLAUDE.md (or your agent's instructions file) and, every so often, ask it to check whether any screen drifted from the rules. The habit: no new screen without it respecting the system. It's the same as the C-A-R protocol, but for design.Join 4,200+ builders. No credit card. Build your first app with AI in minutes.