🎨 Day 3 · Thu 9 Jul · 10:00–11:00 AM · VIP Room 3

Beautiful apps. 10 prompts.

Today your app gets a real brand system + one shipped screen. These prompts work in Claude Chat, claude.ai/design, OR your builder. Use in order — each one builds context for the next.

📋 All 10 prompts · use in order
🎯 OPENER · prep in your chat first, then paste to claude.ai/design
P00

claude.ai/design opener

2-step move: (1) Draft this brief in your EXISTING AI chat (the one that already knows your product) — fill in blanks with that chat's help. (2) Copy the filled-in version into a fresh claude.ai/design project.
⏱ 4 min 💬 Your AI chat first 🎨 → claude.ai/design ⚙️ tweaks window 
# STEP 1 · paste in YOUR existing AI chat
"Help me fill in the blanks below — use everything you know about my product. Don't ask what you already know."

# BRIEF (the part you'll fill in + then copy to claude.ai/design)
Today (Day 3) I'm using claude.ai/design to make my app feel designed.

- Product: [1-line description]
- Who it's for: [1 person]
- Builder: [Lovable / Cursor / Replit / Claude Code / v0 / Bolt]
- DB: [Supabase / Lovable Cloud / etc]
- Current brand state: [no brand / rough vibe / strong brand]
- Today's track: [🅰️ A from scratch / 🅱️ B existing brand]
- 2026 trend I'm drawn to: [bento / glass / bold color / nostalgia / 3D / calm minimal]
- 3 sites I want it to feel like: [A · B · C]

# STEP 2 · paste filled version into claude.ai/design
Then tell Claude Design:
1. Restate in 3 lines what you understand
2. Ask the ONE question that will most improve what you make next
3. Open the tweaks window · add: color slider · radius slider · density toggle · dark-mode switch
4. Generate v1 of the most useful artifact for today

# RULES
- 2026 design language (no 2022 gradients · no Stripe-2018 boxes)
- Match the FEEL of references, not the look
- Always show tweaks window controls so I can iterate via sliders, not retries
🧠 INTAKE · 5 sharp questions before any pixel
P01

Brand intake · 5 questions

When: Right after P00. Use Claude Chat (conversation works better here). Forces real answers before designing.
⏱ 5 min 💬 Claude Chat 📁 brand-brief.md 
# ROLE
You are a brand strategist who has launched 50+ products (Linear · Notion · Mercury level). Ruthless about specificity. You don't accept vague answers.

# GOAL
Help me make 5 sharp brand decisions before any pixel is drawn.

# YOUR QUESTIONS · ASK ONE AT A TIME
Wait for my answer. Push back if I'm vague.

**1.** Who EXACTLY uses this? Name a real person if possible.
**2.** 3 feeling adjectives this brand should evoke. (not "modern" — be specific)
**3.** 3 anti-examples ("not like X · Y · Z"). What it must NOT feel like.
**4.** Which 2026 trend fits best? bento / glass / bold color / nostalgia / 3D / calm minimal
**5.** 3 reference sites it should FEEL like + 1 sentence why each.

# AFTER MY 5 ANSWERS
Output a 1-page brand brief:
- ICP (the one person)
- Personality (3 adjectives + why)
- Don't-list (3 anti-examples)
- Trend pick (1 line on why this fits)
- References (3 sites + the lesson from each)

# DELIVERABLE
Save as `brand-brief.md`. We'll reference this in every prompt today.
🅰️ TRACK A · brand from scratch
P02

5 directions ideator ★ NEW

The "I don't know what I like" prompt. Claude asks 5 vibe questions, then generates 5 DISTINCT visual directions + palettes. Pick one before running the brand creator.
🅰️ Track A ⏱ 8 min 💬 Claude Chat OR Design 📁 5-directions.md 
# ROLE
You are a senior brand designer with taste. You've shipped 50+ identities (Linear · Notion · Mercury level). You can explore wildly different directions for the same product.

# GOAL
Generate 5 DISTINCT visual directions for my product so I can pick one. I don't know what I like — help me find out.

# ASK ME THESE 5 FIRST (one at a time, wait for each answer)
1. Mood: bright+energetic / calm+premium / playful+warm / sharp+serious / dreamy+soft / wild+experimental
2. Color temperature: warm / cool / mixed / monochrome
3. Loudness 1-10 (1 = whisper, 10 = shout)
4. Vintage feel OR 2026-current?
5. Should it feel: handmade / engineered / editorial / cinematic / illustrated

# THEN OUTPUT · 5 DISTINCT DIRECTIONS
For EACH direction:
- **Name** (memorable, 1-3 words · like "Forest Editorial" or "Tokyo Neon")
- **Vibe statement** (1 sentence)
- **5-color palette with HEX** (named: primary · secondary · accent · 2 neutrals)
- **Type pairing** (display + body, Google Fonts)
- **1 reference site URL** it feels like
- **Who this direction is for** (1 sentence)

CRITICAL: Make them ACTUALLY different. Not 5 shades of one idea — 5 REAL choices.
Direction 1 could be soft pastels · Direction 2 could be neon brutalist · Direction 3 could be editorial monochrome · etc.

# AT THE END
1. Recommend YOUR pick + why, given my answers
2. Ask: "Which one feels right? Pick by name."

# SAVE
Save as `5-directions.md`. We'll feed the winner into P03 next.

# BONUS · IF I'M DOING TRACK B INSTEAD
Same prompt, but base the 5 directions on the screenshot/image I'll upload. Show me 5 different ways to evolve the existing vibe.
P03

Brand creator · build the chosen direction

When: Right after P02. In claude.ai/design (tweaks window FIRST). Paste this with your chosen direction name. Full brand system materializes.
🅰️ Track A ⏱ 10 min 🎨 claude.ai/design ⚙️ tweaks window open 
# ROLE
You are a senior brand designer at a top studio (Linear · Mercury · Notion-level work). You design complete brand systems in one session.

# CONTEXT
- Brand brief: `brand-brief.md` (from P01)
- 5 directions: `5-directions.md` (from P02)
- My chosen direction: [paste direction name from P02]

# GOAL
Take my chosen direction and build it out into a complete visual system.

# DELIVER · in this order

## 1 · Palette (6 colors, HEX)
Build on the 5 from my chosen direction. Add semantic (success/warn/error). Show contrast ratios.

## 2 · Typography (Google Fonts)
Use the pairing from my chosen direction. Add full size scale: h1/h2/h3/body/small/caption. Line-height + weight for each.

## 3 · Spacing + radius
- Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64
- Radius scale: none / xs / sm / md / lg / pill

## 4 · Voice tokens
- 5 phrases that ARE on-brand
- 5 phrases that AREN'T (what to avoid)

## 5 · One hero example
- A landing-page hero using everything above
- Light + dark mode

# TWEAKS WINDOW · ADD
- Primary color slider · radius slider · density toggle · light/dark switch

# EXPORT
Claude Code bundle. I'll paste into [Lovable / Cursor / Replit] next.

# DELIVERABLE
Save the system. Hand me: (a) CSS :root block, (b) Tailwind config block, (c) the hero artifact.
🅱️ TRACK B · existing brand → design system
P04

Screenshot → design tokens

When: You have an image — Nano Banana 2 hero, ChatGPT Images 2.0 render, screenshot of a site you love, or your existing landing page. Upload it. Run this.
🅱️ Track B ⏱ 5 min 💬 Claude Chat (vision) 📁 design-tokens.md 
# ROLE
You are a design tokens specialist. You translate visual references into reusable, named systems. You don't guess — you analyze pixel-by-pixel.

# INPUT
The image I just uploaded: [describe in one line — "Nano Banana hero" / "screenshot of Linear" / "ChatGPT render"]

# OUTPUT · in this exact order

## 1 · Palette (HEX, named semantically)
- primary (most saturated / most used)
- secondary · accent (where the eye should go)
- 3 neutrals (bg / text / border)
- semantic (success / warn / error)

## 2 · Typography
- Display font · closest Google Fonts match
- Body font · closest Google Fonts match
- Size scale (px): h1 / h2 / h3 / body / small / caption
- Line-heights + weights

## 3 · Spacing scale (px)
- 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64
- Which one used most? (this is your default)

## 4 · Radius scale (px)
- xs · sm · md · lg · pill
- Which radius dominates?

## 5 · Design mood
- 5 adjectives describing the feel
- 1 trend tag: bento / glass / bold / nostalgia / 3D / calm minimal
- What it's NOT (3 anti-mood adjectives)

# DELIVERABLE
1. Save as `design-tokens.md`
2. CSS :root block · paste-ready
3. Tailwind config block · paste-ready
4. Flag any token where you're <80% confident

# IF I UPLOAD MORE THAN ONE IMAGE
Find the COMMON tokens across all. Drop outliers.
P05

Tokens → component system

When: Right after P04. In claude.ai/design with `design-tokens.md` loaded. Tweaks window open. Build the library.
🅱️ Track B ⏱ 10 min 🎨 claude.ai/design ⚙️ tweaks window 
# ROLE
Senior product designer building a component system that scales across a product.

# GOAL
From `design-tokens.md`, design my core component library.

# BUILD · in this order

## 1 · Button
- Variants: primary · secondary · ghost · destructive
- Sizes: sm · md · lg
- States: default · hover · active · disabled · loading

## 2 · Input field
- Variants: text · email · password · search
- Label + helper text + error state

## 3 · Card
- Default · elevated · interactive (hover)
- Header + body + footer slots

## 4 · Navigation
- Top bar (desktop) · mobile hamburger + drawer

## 5 · Hero block
- Headline + subhead + CTA + visual slot
- Use my brand voice (from brand-brief.md)

# TWEAKS WINDOW · ADD
- Density slider · light/dark · radius · shadow intensity · primary color picker

# 2026 TREND
My pick: [bento / glass / bold / nostalgia / 3D]
Bake this trend in subtly. Don't overdo it.

# EXPORT
Claude Code bundle. I'll paste into [Lovable / Cursor / Replit] next.
🚀 SHIP · design → code in your builder
P06

Design → code in your builder

When: You have the Claude Code export from P03 (Track A) or P05 (Track B). Open your builder. Paste this with export attached.
⏱ 10 min 💻 builder → shipped change 
# ROLE
You are a senior frontend engineer. You replace placeholder UI with on-brand components without breaking anything.

# CONTEXT
- Builder: [Lovable / Cursor / Replit / Claude Code]
- DB connected: [yes / no]
- Auth working: [yes / no / partial]
- I'm pasting a design system from claude.ai/design (tokens + components, attached export)

# GOAL
1. Install tokens as global CSS variables (or Tailwind config)
2. Replace existing buttons / inputs / cards with the new ones
3. Update my landing hero to use the new style
4. Don't break ANY existing functionality
5. Show me the diff before committing

# STEPS · CONFIRM EACH
1. Show me where the tokens go (file path + why)
2. Show me the diff for the global styles
3. Replace one component at a time · let me approve each
4. Hero last — biggest visual change, most reversible

# DELIVER
- Diff of every change
- Preview link (or 1-line summary)
- 1 follow-up suggestion

# HARD RULE
If a change would touch > 5 files, STOP and ask before proceeding.
🛠 BUILD · ship one polished screen
P07

Build one polished screen

When: The "ship something today" prompt. In claude.ai/design with brand context loaded. Pick: landing hero / auth page / pricing / empty state.
⏱ 30 min cap 🎨 claude.ai/design → shipped to builder 
# GOAL
Make a polished [landing hero / auth page / pricing page / empty state] using my brand, ready to paste into my builder.

# CONTEXT
- Brand tokens: in `design-tokens.md`
- 2026 trend I picked: [bento / glass / bold / nostalgia / 3D]
- 3 sites I want it to feel like: [A · B · C]
- Builder: [Lovable / Cursor / etc]

# BUILD STEPS
1. Generate v1 — use tweaks window, don't ask preferences
2. Adjust 3 things via chat ("more confident" · "more breathing room" · "make CTA pop")
3. Show me 2 alternate directions (one bolder, one calmer)
4. Pick the winner together
5. Export Claude Code bundle

# THEN
Hand me a paste-ready prompt for my builder to:
- Replace the existing screen with this
- Preserve routes / functionality
- Test mobile + desktop

# HARD RULE
30 min cap. If not shipped → ship v1 and iterate tomorrow. Done > perfect.
🧐 VERIFY · gut-check what you shipped
P08

Design QA · gut check

When: After P07 ships. Run every time you make a new screen.
⏱ 5 min 🔍 ruthless 
# ROLE
Design critic with no patience for excuses. Stripe-tier standards. Linear-tier eye.

# INPUT
Screenshot OR URL of what I just built: [paste]

# SCORE 0-10 ON EACH
1. **Hierarchy** — does the eye go where you want?
2. **Spacing** — breathing room right?
3. **Type** — fonts harmonize?
4. **Color** — purposeful or random?
5. **CTA** — clear what to do next?
6. **2026-current** — of this moment or 2022?
7. **Detail polish** — corners · shadows · alignment

# 3 MOST USEFUL FIXES
Rank top 3 by leverage (impact ÷ effort). Be specific:
- "Increase H1 from 32 to 48px" — not "make H1 bigger"

# THE PRO MOVE
What's ONE move a Stripe / Linear designer would make that I haven't?

# GUTSY SCORE
Overall: X/70. Demo-Day-ready? (yes / no / almost)
🚨 EMERGENCY · if stuck > 15 min
🚨

"I'm stuck" · emergency triage

When: Blocked > 15 min on same thing. Triage + 3 paths in 90 sec.
🚨 panic mode ⏱ 5 min 
# ROLE
Senior designer sitting next to me at 12:15 PM. We have 15 min left. Calm. Methodical.

# CONTEXT
What I was trying: [1 sentence]
What's broken: [the actual symptom — screenshot if visual]
What I've tried: [bullets]
Time left: [N min]

# 3 PATHS RANKED

## A · Bypass (5 min)
Keep moving · accept v1 imperfection

## B · Cut + ship v1 (10 min)
Strip the problem feature · ship without it

## C · Fix proper (20 min)
Only if I have time + energy

# YOUR PICK
Tell me Path A/B/C and the very next click.

# IF EVEN PATH A FAILS
"Ship v1 ugly" is always valid. Beautiful next week.

# HARD RULE
30+ min on same issue → tell me to PICK PATH B. Don't let me hero this.