📋 Cheat Sheet · Day 3 · Thu 9 Jul · 10:00–11:00 AM · VIP Room 3
Beautiful apps. Every URL. Every move.
Today's complete reference — claude.ai/design, the inspo stack, 2026 trends, brand-from-scratch + concept-to-code flows, all gotchas. Open this alongside the slide deck. By 12:30 PM your product looks designed.
⏰ Today's 90 minutes · 10:00–11:00 AM · VIP Room 3
11:00–11:10
Opening + 3 tracks. Show of hands · pick your track · the "designed" promise.
11:10–11:25
Chat · Cowork · Design. When to use which. 👥 Pair discuss (90 sec).
11:25–11:45
🎨 claude.ai/design deep dive. Tweaks window · inputs · exports · 5 best practices · run P00.
11:45–11:55
Steal like an artist. Mobbin spotlight · 6 inspo sites · 6 reference brands · 2026 trends.
11:55–12:15
🅰️ A P01 → P02 (5 directions) → P03 brand creator. OR 🅱️ B P04 → P05 tokens + components.
12:15–12:25
🛠 Build (P07) + QA (P08). One polished screen + design QA. 30-min cap.
12:25–12:30
🎉 Share back (5 min). Each builder · 30 sec · what you made + proudest design choice.
🎯 By 12:30 PM you have
Three tangible things.
- 🎨 One claude.ai/design artifact · a polished visual (page · component · slide) you made today
- 🎯 A brand token set · palette · typography · spacing · radius · paste-ready CSS or Tailwind
- 🚀 One shipped change · the token set lives in your actual product before you leave
💡 Bonus stretches: Run P02 (5 directions) before committing · do design QA pass on entire product · bookmark Mobbin folder for the rest of the sprint.
⚙️ Claude tools · when to use which
3 surfaces. 1 brain. Different jobs.
💬 CONVERSATIONAL
Claude Chat
Brainstorm. Think. Quick answers. One question → one answer. No files. No actions.
Best for: brand intake (P01) · 5 directions (P02) · vision analysis of uploaded image (P04).
claude.ai ↗
🤖 AGENTIC
Claude Cowork
Real work across files + tools. Multi-step. Accesses your folders. Edits files.
Best for: "build me a kit" · "fix all image filenames" · "organize brand assets folder."
🎨 VISUAL CREATIVE
Claude Design
Polished visual artifacts. Conversation-driven. Tweaks window. Exports everywhere.
Best for: brand systems (P03) · components (P05) · heros (P07) · pitch decks · marketing visuals.
claude.ai/design ↗
The 60% rule: Most users only use one. Pros use all three in the same session — Chat to think, Cowork to act, Design to ship the visual.
🎨 claude.ai/design · power-user moves
The tweaks window · most-missed feature.
What it is: A live property panel that lets you tweak your artifact via sliders + toggles instead of re-prompting.
Where: Right side of the canvas. If you don't see it, ask Claude: "open the tweaks window and add a color slider + radius slider + density toggle."
Properties to add EVERY session
- Primary color slider — preview any brand color in 2 sec
- Radius slider — from sharp to pill, see what fits
- Density toggle — compact / comfortable / spacious
- Light/dark switch — instant theme test
- Shadow intensity — flat to dramatic
⚠️ Pro tip: Add ALL 5 properties before you generate v1. Then iterate via sliders, not chat retries. Saves you 70% of the back-and-forth.
Inputs · 3 ways in.
- Text prompt — "A pricing page for a Latvian dance school. Warm, premium, no clichés."
- Web capture tool — point at your existing site → Claude grabs the visual DNA so new artifacts match real product.
- Brand assets upload — logo, screenshots, Nano Banana hero, ChatGPT image — Claude pulls palette + style.
Exports · 5 ways out.
- Claude Code — bundle straight to your IDE · most powerful path · keeps tokens reusable
- HTML — drop into Lovable / Cursor / repo · works as-is
- PDF / PPTX — pitch decks, one-pagers, investor docs
- Canva — hand off to a marketer to edit collaboratively
- Share link — team members chat with Claude on the same project simultaneously
Recommended: Export to Claude Code by default. Code path keeps your tokens as variables so future changes are global.
5 best practices · copy these.
- Prep your brief in your existing AI chat first. Then paste into claude.ai/design. Saves 5 minutes of re-explaining your product.
- Always feed brand context first. Screenshot OR 3 inspo URLs. Never start cold.
- Open the tweaks window early. Add 3-4 properties BEFORE iterating.
- Iterate small. "Make hero feel more confident" beats "redo it."
- Reuse the same project. Don't start fresh per artifact — Claude builds on context.
⭐ Mobbin · the one site you'll open 100 times
If you only use one inspo tool: Mobbin.
1,150+ real apps · 608K screens · 323K user flows · searchable by feature, screen type, industry, even color.
3 ways to use it daily
- Stuck on a screen? Search "onboarding for fintech" → see 50 real ones → pick 3 to model.
- Need a pattern? Filter by flow (signup · checkout · empty state) → see how real apps solve it.
- Researching competitors? Browse the app → screenshot any screen → feed it to claude.ai/design as inspiration.
Cost: Free tier exists. Paid (~$15/mo) unlocks everything.
Worth it for the month. mobbin.com ↗
📚 Inspo stack · bookmark all 6
Where designers actually steal.
PRODUCT UI
Mobbin
1,150+ apps · 608K screens. Gold standard for product UI research.
mobbin.com ↗
VISUAL CRAFT
Godly
Award-worthy landing pages. Free. "10/10 craft RIGHT NOW."
godly.website ↗
CONVERSION
Land-book
Long-running curated library. Heroes · pricing · features. Conversion patterns.
land-book.com ↗
UX PATTERNS
Refero
UX flows from real products. Onboarding · empty states · settings · checkout.
refero.design ↗
FRONTIER
Awwwards
Cutting-edge interactive sites. Wild frontier. Steal motion + interaction ideas.
awwwards.com ↗
LANDING REF
Lapa Ninja
10,000+ landing pages by category. Filter by industry. Conversion-tuned.
lapa.ninja ↗
⭐ 6 reference brands · study religiously
The set the bar in 2026.
DARK MASTERY
Linear
Fast · focused · minimal. Animation as feature.
linear.app ↗DEV STORY
Stripe
One-sentence positioning. Code snippets as hero. Color shifts.
stripe.com ↗DUAL AUDIENCE
Vercel
Animated build logs. Talks to devs AND CTOs.
vercel.com ↗EDITORIAL B2B
Mercury
Banking that feels editorial. Calm · confident · premium.
mercury.com ↗PLAYFUL UTILITY
Notion
Playful · accessible · million sub-personas served.
notion.so ↗BENTO MASTERS
Ramp
B2B fintech that doesn't look B2B. Bento layouts.
ramp.com ↗
🚀 2026 trends · with clickable examples
6 trends · pick one.
⚠️ Don't pick more than ONE trend per project. Bento + Glass + Bold Color = visual soup. One trend, executed crisp.
🅰️ Track A · brand from scratch · step-by-step
The "I don't know what I like" track.
- P01 · Brand intake (5 questions). ICP · 3 adjectives · 3 anti-examples · trend pick · 3 references → saves
brand-brief.md
- P02 · 5 directions ideator ★ NEW. Claude asks 5 vibe questions, generates 5 DISTINCT directions + palettes → saves
5-directions.md → you pick one
- P03 · Brand creator. Takes your chosen direction → full palette + type + spacing + voice + 1 hero → exports Claude Code bundle
- P06 · Design → code. Lives in your app
🅰️ Why P02 is the unlock: You don't have to know what colors you like. Claude generates 5 wildly different directions. You react to them. Picking is easier than creating from nothing.
🅱️ Track B · existing brand → design system
The concept → code flow.
- Concept image. Nano Banana 2 (best for photoreal + brand) · ChatGPT Images 2.0 (best for layouts + dense text) · screenshot of a site you love · your existing landing page.
- P04 · Screenshot → tokens. Upload to Claude Chat (vision) or claude.ai/design. Get palette · type · spacing · radius · mood → saves
design-tokens.md
- P05 · Tokens → components. In claude.ai/design with tokens loaded. Get button · input · card · nav · hero → exports Claude Code bundle
- P06 · Design → code. Lovable/Cursor diffs each change before committing
Nano Banana vs ChatGPT Images 2.0: Use Nano Banana 2 for photorealism, brand work, fast iteration. Use ChatGPT Images 2.0 for layouts, dense or multilingual text, multi-panel sequences. Pros mix both: hand outputs back and forth.
Sample token output from P04.
Here's what good design tokens look like (Build Sprint's own system):
:root {
--primary: #6366F1; /* indigo */
--secondary: #8B5CF6; /* violet */
--accent: #F43F5E; /* rose */
--bg: #FAF8F1; /* cream */
--text: #0F1729; /* navy */
--font-sans: 'Outfit', sans-serif;
--font-serif: 'Instrument Serif', serif;
--font-mono: 'JetBrains Mono', monospace;
--space-1: 4px; --space-2: 8px; --space-3: 16px;
--space-4: 24px; --space-5: 32px; --space-6: 48px;
--radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px;
}
Paste-ready. Reusable everywhere. This is the goal for today.
📖 Quick reference · all URLs (clickable)
⚠️ Common gotchas
Things that trip people up.
- Skipping the brand brief. Going straight to claude.ai/design without P01 = generic output. Always run P01 first.
- Skipping P02 (5 directions) when you don't know what you like. Best unlock for vibe coders.
- Forgetting the tweaks window. 80% of users never open it. You're not them anymore.
- Picking 3 trends instead of 1. Bento + glass + bold color = visual chaos.
- Re-prompting instead of sliding. Sliders > retries. Iterate via the tweaks window.
- Starting a new project per artifact. Reuse the same claude.ai/design project so context compounds.
- Exporting HTML when Claude Code exists. Code path keeps tokens reusable.
- Looking at 0 inspo sites before designing. Open Mobbin BEFORE you prompt.
- Polishing v1 to perfection. Ship v1 ugly, iterate beautiful. Done > perfect.
Megan's 5 golden rules.
- Steal taste, then encode it. Originality is overrated.
- Brief before pixel. 5 questions, then design.
- Always open the tweaks window. 80% of pros forget it.
- Tokens before screens. Palette + type + spacing first.
- Ship v1, iterate forever. Don't polish in vacuum.
Tomorrow: Take the system you built today → extend to 3 more screens. By Demo Day your product will look like it should win.