Miles Free AI Library
← Back to resources
GuideAI EdgeApr 21, 2026

Client-Ready Design Work, Powered by Claude

A complete playbook covering design practice, a paste-and-go dashboard, and reusable prompts for real projects.

Get the full PDF

ai edge claude design playbook

Free
Download PDF
Copy
AI EDGE // V1.0 APRIL 2026

GIVING YOU THE EDGE ON AI

The Claude Design

Playbook

Everything you need to ship real work with Claude Design.

Practices, prompts, and a paste-and-go Personal OS.

PART ONE PART TWO PART THREE

Best Practices Personal OS Prompt Library

Prompt
How to ship Paste-and-go Ready-to-use
real work dashboard prompt project prompts
GIVING YOU THE EDGE ON AI

PART ONE

Best Practices

How to ship real work with Claude Design.

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 003

The Thesis

Claude Design is a brand operating system, not just a design tool. Most tutorials treat this as a prettier v0. It isn't. The real unlock is the three-layer system: Claude chat to plan, Claude Design to generate, Claude Code to ship. The tool is the least interesting part. The system is where the leverage lives.

01

// Set up the design system first. Always.

Every project you create after setup inherits your brand automatically - colors, typography, components, voice. Skip this step and you'll re-brief Claude Design on every single project, producing inconsistent output forever.

What it actually does

Claude Design generates a skill.md file - a machine-readable manifest of your brand. This file is what every future project reads to stay on-brand. It's the closest thing Claude Design has to persistent memory.

How to do it

Go to claude.ai/design fi bottom of home screen fi "Setup Design System." Feed it: (cid:127) A GitHub repo URL (or local folder) (cid:127) Brand fonts and logo files (cid:127) A detailed notes field with hex codes, typography rules, voice guidelines, and a banned list Takes 15-20 minutes to generate.

Tip

If you don't have a codebase, paste a screenshot of your existing website or any site with your target aesthetic. Visual anchors beat text descriptions every time.

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 004

02

// Feed real context, not vibes.

Every vague prompt produces a generic result. Every context-rich prompt produces something specific. This is the single biggest performance delta in Claude Design.

"Designs grounded in real context turn out better."

Copy
- Anthropic, official docs

What to feed it

(cid:127) PDF of a brief, vision doc, or existing product spec (cid:127) Screenshots of sites with your target aesthetic (cid:127) Figma files if you have them (.fig format) (cid:127) GitHub repos - Claude Design reads components and styling patterns (cid:127) Reference brand screenshots - five well-chosen references beat a paragraph of adjectives

The rule

If you find yourself writing descriptive adjectives like "modern" or "clean" or "sleek" - you're already losing. Replace adjectives with references.

03

// The questionnaire is the product.

When Claude Design asks clarifying questions, that's not friction. That's Claude thinking alongside you about constraints, audience, and blind spots most people skip. Rush through the questionnaire and you get generic output every time. Treat each question as a real design decision and you get output that looks like it came from a $30K agency.

Specific technique

When a question offers "Decide for me" - never pick it on the first pass. The one time to click it is after you've answered the other questions thoughtfully and you're genuinely indifferent on that variable.

Pattern to watch for

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 005

Claude often asks about audience, primary action, tone, and fidelity. These four questions drive 80% of the output quality. Give them weight.

04

// One task per project. Always.

Running two generations simultaneously freezes the interface, kills your queue, and can corrupt the in-flight project. This is confirmed behavior in the research preview, not a bug that's about to be fixed.

Fix when you hit it

Top-left of Claude Design fi Dispatch panel fi click arrow-down fi Clear background tasks. Then retry. Warning: Do not try to parallelize. Claude Design is a single-threaded tool in its current form.

04.5

// Wireframe before hi-fi for complex projects.

Wireframes strip away aesthetics so you can think about structure. Low-fidelity exploration of 2-3 directions before you commit to polishing one.

"Midfi wireframes are bad. Go lowest fidelity or go hi-fi. No half-pregnant."

Copy
- Greg Isenberg

WIREFRAME HIGH-FIDELITY

Exploring 3+ structural directions Structure is clear Complex information architecture Brand matters Early stakeholder alignment Shipping to production Tokens are a concern Most of what you'll build

Rule

If you can describe the structure in one sentence, skip wireframe and go hi-fi. If you can't, wireframe first.

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 006

05

// Tweak before you regenerate.

When the structure of your output is right but the details are off - colors, spacing, element visibility, section density - use the tweaks panel. It adjusts these live without burning a new generation.

The three tiers of edit precision

  1. Tweaks panel - Sliders for color, density, toggles. Instant. No new generation.
  2. Inline comments - Click an element, comment on it. Claude regenerates just that element.
  3. Full chat regeneration - Only when the structural approach is wrong. Expensive.

Rule

Start with the cheapest edit that solves the problem. Escalate only if needed. Most 'regenerate' requests should have been tweaks.

06

// Inline comments beat chat for edits.

For specific element edits, comment - don't describe. If you need to change the third testimonial card's avatar, don't write a paragraph in chat trying to describe its location. Click the card. Drop an inline comment. Claude edits exactly the element you pointed at.

Why this matters

Natural-language location descriptions are ambiguous. Claude guesses. Sometimes it edits the wrong element. Inline comments remove all ambiguity - spatial pointing beats verbal description.

Known limitation

Inline comments occasionally disappear before Claude reads them. Workaround: paste the comment text into the chat as well, as insurance.

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 007

07

// Structured prompts + banned lists.

Prompt
Every prompt ships with a banned list. Non-negotiable.
Without explicit bans, Claude Design defaults to the same generic AI aesthetic every other tool produces.
The model has strong priors. You override them by naming them.

The banned-list canon (steal this)

VISUAL BANS

Copy
purple-to-blue gradients · glowing brains · neural networks · nodes-and-edges diagrams · 3D
renders · stock photography · rounded-everything · cartoonish illustrations · empty-state
mascots

COPY BANS

Copy
revolutionize · transform · unleash · unlock · empower · supercharge · reimagine · seamless
· cutting-edge · next-gen · game-changing · paradigm shift

Prompt structure that works

  1. Context - what you're building and for whom
  2. Aesthetic direction with hex codes and reference brands
  3. Explicit section structure
  4. Motion and interaction rules
  5. BANNED list
  6. "Ask me clarifying questions before generating." Structure beats freeform. Every generic output is traceable to an unstructured prompt.

08

// Claude chat is the planning layer.

Don't write prompts freehand. Write them with Claude chat first. This is the workflow that produces the top 10% of Claude Design outputs.

The loop

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 008

  1. Describe the artifact you want to build in Claude chat
  2. Claude helps you write a structured brief with banned lists, references, hex codes, and explicit structure
  3. Paste the brief into Claude Design
  4. Mid-project, if output is off - screenshot it, paste into Claude chat, ask for critique
  5. Feed the critique back into Claude Design as a comment or follow-up prompt

Practical setup

Create a Claude Project called Design System OS. Upload your brand guidelines, banned list, past briefs, reference screenshots. Use this Project to draft every Claude Design prompt. This is your external memory layer.

09 fi

// Claude Design Claude Code.

Claude Design designs. Claude Code ships. Don't try to deploy from Claude Design. Its job is design and prototyping. Production is Claude Code's job. The handoff between them is the closed loop Anthropic marketed at launch.

The exact flow

  1. In Claude Design: Export button (top right) fi "Hand off to Claude Code"
  2. Claude Design generates a command: fetch the design file, read the README, implement the relevant aspects
  3. Copy the command
  4. Open Claude Code in a Next.js or Astro project, paste the command
  5. Claude Code fetches the design bundle, reads the README, implements components matching your project's existing patterns
  6. Push to GitHub fi Vercel auto-deploys fi live URL

Advanced pattern

Link your production repo to Claude Design during design system setup. Every design now pulls FROM your real code. Every handoff pushes BACK to your real code. Round-trip coherence.

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 009

10

// External memory stack.

Claude Design's built-in memory is the design system. It doesn't remember your preferences, past prompts, or your voice. For everything Claude Design doesn't remember, build external memory and feed it in.

The four-part stack

  1. Notion doc - every prompt you've tested, ranked by output quality. Update after every session. Your personal prompt library.
  2. Claude Project (chat) - called "Design System OS." Brand guidelines, banned list, past briefs, reference screenshots, hex codes. Used for drafting every Claude Design prompt.
  3. Screenshot folder - a dedicated folder of reference designs pulled from sites you admire. Drop these into Claude Design prompts as visual anchors.
  4. skill.md template - a reusable document you paste into every new Claude Design design system setup. Evolves over time.

Tools change. External memory compounds.

11

// The three-layer system.

LAYER 1 - PLANNING

Tool: Claude chat + Claude Projects Role: Brief writing, prompt engineering, banned-list creation, reference clustering. The thinking before the making.

LAYER 2 - GENERATION

Tool: Claude Design

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 010

Role: Paste the structured prompt. Answer the questionnaire. Iterate with tweaks panel and inline comments. One task at a time.

LAYER 3 - PRODUCTION

Tool: Claude Code + GitHub + Vercel Role: Handoff command, implement in real codebase, push, deploy. Design becomes a live URL.

Each layer has a specific role. Mixing them breaks the system. (cid:127) Planning in Claude Design = generic output (cid:127) Production in Claude Design = stuck at mockup

PART TWO

Personal OS

A single-screen command center that runs your day.

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 012

What you'll build

A single-screen dashboard that shows everything that matters in your life: your calendar, your tasks, your vitals, your current focus, your projects, your music, your finances. Editorial design, dark mode, updates live. You open it once in the morning and again at night. Below is a complete prompt. Fill in the bracketed fields with your own details, paste into Claude Design, and ship.

What the dashboard includes

Modules, rhythmically arranged on one screen: (cid:127) SESSION - greeting, live time, date, day-of-year (cid:127) OPERATOR - your name, role, current focus state (cid:127) CALENDAR - today's events + week strip (cid:127) INBOX - your top critical contacts only (cid:127) TASKS - with your own category tabs (cid:127) VITALS - steps, heart rate, sleep, activity rings (cid:127) LOCATION - city map, coordinates (optional) (cid:127) NOW PLAYING - music + waveform (cid:127) FINANCE - net worth, spend, investments (cid:127) ACTIVE PROJECT - current focus, progress, checklist (cid:127) READING - current book, progress Remove any module you don't want. The prompt handles the layout automatically.

How to use the prompt

  1. Open Claude Design at claude.ai/design
  2. Create a new prototype project (device: Desktop)
  3. Paste the prompt below

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 013

  1. Fill in the bracketed fields (don't skip the feeling question - it drives everything)
  2. Answer the questionnaire thoughtfully, then let Claude generate
  3. Iterate with the tweaks panel

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 014

The Prompt

Prompt
Paste this into Claude Design. Replace every bracketed field with your own answer.

COPY FROM HERE

Copy
Build a desktop personal operating system dashboard - a single-screen command center for
everything that matters in my life. Editorial, ultra-minimal, dark mode first. Think NY
Times morning briefing meets hacker terminal.
ABOUT ME
- Name: [YOUR FIRST NAME]
- Role: [YOUR ONE-LINE ROLE, e.g. "Founder, Acme" or "Independent writer"]
- Timezone: [YOUR TIMEZONE, e.g. "EST (UTC -5)"]
- Current focus state: [DEEP WORK / CREATIVE / ADMIN / TRAVELING / RECOVERY]
WHAT I WANT TO FEEL WHEN I OPEN THIS
[ONE SENTENCE - this is the single most important field. Be specific. Examples: "Calm and in
control." "Like I know exactly what today is about." "Focused on the 3 things that matter,
not the 30 that don't."]
AESTHETIC
Pick one and commit to it:
- [EDITORIAL - cream/paper background, serif + mono, magazine feel]
- [TERMINAL - deep black + accent color, hacker-adjacent]
- [ARCHITECT - warm grey + navy, Swiss restraint]
- [STUDIO - off-white + burnt sienna, analog warmth]
- [GALLERY - pure white + charcoal + one bold accent]
ACCENT COLOR
[Pick one hex code - burnt orange #C4511E / forest green #4A6B4E / cyan #0099CC / mint
#9FEBCE / oxblood #6B1F1F / or your own]
TYPOGRAPHY
- Display font (for name, greeting, song titles): [SERIF for editorial/studio, MONO for
terminal, SANS for architect/gallery]
- Body and labels: monospace (Geist Mono or JetBrains Mono), ALL CAPS for section labels
- Every module header formatted as: "NN // MODULE NAME" in mono caps
LAYOUT
Single full-bleed desktop dashboard, 1920x1080 or larger. No scrolling - everything visible
at once. Card grid is rhythmic, not uniform - different sizes create visual hierarchy. Let
dark space do work.
MODULES
Include these modules. Remove any I don't list. Arrange them rhythmically - larger modules
anchor each row, smaller modules fill gaps.

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 015

Copy
01 // SESSION
Greeting "Good [morning/afternoon/evening], [NAME]." with time-of-day word in display font
italic. Today's date + "DAY [N] OF 365" in mono. Live time HH:MM:SS right-aligned, large.
Timezone label.
02 // OPERATOR
My name, role, current focus state, status (DND/AVAILABLE), online indicator.
03 // VITALS
Today's step count vs goal [STEPS GOAL, e.g. 10000]. Percentage delta in accent color. Live
heart-rate graph (last 8 hours). Mini-stats grid: HEART / SLEEP [SLEEP GOAL, e.g. 8 hrs] /
HRV / WATER [WATER GOAL, e.g. 3L]. Three activity rings: MOVE / EXERCISE / STAND.
04 // CALENDAR
Day heading in display font. 7-day week strip. Today's events - use these as placeholder
content:
- [EVENT 1 - time, title, context]
- [EVENT 2 - time, title, context]
- [EVENT 3 - time, title, context]
- [EVENT 4 - time, title, context]
Mark current event with NOW marker in accent color.
05 // INBOX
Critical people only. 3-5 names + their role:
- [NAME - role]
- [NAME - role]
- [NAME - role]
Each row shows: initials avatar, name, URGENT/FYI tag, preview line, time-ago stamp.
06 // TASKS
My categories (pick 3-5 that match my life): [e.g. WORK / PERSONAL / HEALTH / FINANCE].
Active tab underlined in accent. Task list:
- [ 3 ] [completed task] ([category])
- [ ] [open task] ([category]) [HIGH if urgent]
- [ ] [open task] ([category])
- [ 3 ] [completed task] ([category])
- [ ] [open task] ([category])
Strikethrough completed, priority dot for HIGH.
07 // NOW PLAYING
Song: [FAVORITE SONG OR ALBUM] in display font italic. Artist + album in mono. Hand-drawn
waveform (not a default progress bar). Minimal transport: prev · play · next.
08 // FINANCE
Net worth: [PLACEHOLDER OR FICTIONAL FIGURE] with MTD delta. Monthly burn: [FIGURE] with %
of target. Income:Spend ratio bar. Investments ticker: [3-4 tickers I follow]. Next payment:
[description + date + amount].

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 016

Copy
09 // ACTIVE PROJECT
Project name: [YOUR BIGGEST CURRENT PROJECT]. Phase or version: [PHASE]. Due: [DEADLINE].
Progress: [%]. Checklist:
- [ 3 ] [completed sub-task]
- [ 3 ] [completed sub-task]
- [ ] [current sub-task]
- [ ] [upcoming sub-task]
- [ ] [upcoming sub-task]
10 // READING
Book: [CURRENT BOOK] in display font italic. Author: [AUTHOR] in mono. Progress: [%]. Next
up: [QUEUED BOOK].
ONE THING THAT MAKES IT UNIQUELY MINE
[ONE SENTENCE - something specific to your life that isn't on the standard list. Examples:
"A trading P&L; module." "A team standup tracker." "A writing word count streak." "A
sobriety counter." Put real thought here - this is what makes it yours, not a template.]
INTERACTION AND MOTION
- Generate live tweak sliders for: card density, accent color, typography mode
- Live clock updates seconds in real time
- Vitals graph animates subtly
- Now-playing waveform pulses at playback position
- Dark mode toggle genuinely flips palette
- Category tabs in tasks module switch content
- Hover states: subtle underline in accent
- No bouncy or decorative animations
MODULE HEADER CONVENTION
Every card: "NN // MODULE NAME" top-left in mono caps, status indicator top-right in mono,
subtle separator line below.
TOP STATUS BAR (full width, thin, mono)
"[NAME IN CAPS] OS // V1.0" on left. Right: city · temp · battery · net speed · timestamp.
Dark/light toggle top right.
BANNED
- AI/tech cliche iconography (brains, circuits, neural networks, circuit-board backgrounds)
- Purple-to-blue gradients, rainbow accents
- Stock photography, AI-generated portraits (use placeholder square with initials)
- Generic dashboard chart defaults
- Rounded-cartoon UI feel
- Emoji anywhere except moon phase
- Gamification (XP, levels, streak fire emojis)

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 017

Copy
Ask me clarifying questions before generating.

END COPY

PART THREE

Prompt Library

Ready-to-use Claude Design prompts.

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 019

Copy, paste, adjust, ship.

Five ready-to-use prompts for the most common projects you'll build in Claude Design. Replace the bracketed fields with your own content.

01

// Design system setup.

Use this in Claude Design at claude.ai/design fi bottom of home fi "Setup Design System." Paste the blurb into the company name field, and the notes template into the "Any Other Notes" field.

Company name + blurb field

Copy
[COMPANY NAME] - [ONE-SENTENCE DESCRIPTION of what you do and who it's for]. [SECOND
SENTENCE on what makes you different]. Brand feel: [3-4 adjectives, e.g. "editorial,
confident, premium"]. Think [REFERENCE BRAND 1] x [REFERENCE BRAND 2] x [REFERENCE BRAND 3].

Any other notes field

Copy
COLOR SYSTEM (exact hex codes)
- Background primary: [HEX - warm dark, never pure black]
- Background elevated: [HEX - for cards, raised surfaces]
- Primary text: [HEX - off-white, never pure white]
- Secondary text: [HEX - muted, for metadata]
- Brand primary: [HEX - your main accent]
- Brand highlight: [HEX - lighter version, for hover/glow]
- Borders: [low-opacity version of brand primary]
TYPOGRAPHY
- Headings: [FONT CHOICE - Geist-style sans, Inter, Neue Haas Grotesk]
- Body: same family, regular weight, relaxed line height
- Accents, numbers, technical labels: mono (Geist Mono or JetBrains Mono)
- Tight tracking on large headlines, normal tracking on body
- Never decorative. Never serif display (unless editorial brand).
VOICE
- Direct. Confident without being loud.
- "We ship" not "we empower." "Build" not "unlock."
- Numbers do the work.
- Tagline: [YOUR TAGLINE]

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 020

Copy
BANNED
- Purple-to-blue gradients. Generic AI blue.
- Glowing brain icons. Neural network visuals. AI/futuristic tropes.
- Stock photography. 3D illustrations.
- Words: revolutionize, transform, unleash, unlock, empower, supercharge, reimagine,
seamless, cutting-edge, next-gen.
- Rounded-everything. Cartoonish. Bubbly.
REFERENCE BRANDS
- [BRAND 1] - [what you're copying: clarity, dark mode, type system, etc.]
- [BRAND 2] - [specific attribute]
- [BRAND 3] - [specific attribute]
- [BRAND 4] - [specific attribute]
OUTPUT RULES
Every asset should feel like it belongs on the same homepage. Decks should feel like
dark-mode landing page sections, not PowerPoint templates. If an asset doesn't include [YOUR
BRAND ACCENT] somewhere, it's not on brand.

02

// Launch page prompt.

Prompt
New prototype project (Desktop) in your design system. Paste:
Build the launch page for [PRODUCT/COMPANY NAME] - [ONE-LINE DESCRIPTION of what you do and
who it's for].
CONTEXT: This is a real launch page. Production-quality design ready to hand off to Claude
Code for deployment. Not a mockup.
AUDIENCE
[WHO IS THIS FOR - be specific about role, stage, and what they want]
SECTIONS (in order)
1. Hero - animated WebGL/shader background, reacts to cursor. Bold headline (8 words max).
One-line value prop. Primary CTA: [WAITLIST / BUY / SIGN UP].
2. The problem - three pain points, specific to your audience. No generic "AI is changing
everything" energy.
3. Interactive demo - live, embedded, genuinely interactive. This is the centerpiece.
4. Feature grid - 3-4 features max. Benefit-led copy. Animated icons on hover.
5. Social proof - 3-5 testimonials with real roles, not just "CEO."
6. Pricing - two or three tiers. Live slider in tweaks panel for team-size adjustment.
7. FAQ - 6-8 expandable questions.

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 021

Copy
8. Final CTA - [REPEAT YOUR PRIMARY ACTION].
INTERACTION
- Scroll-triggered reveals throughout. Subtle.
- Hero shader reacts to cursor movement.
- Generate tweaks sliders for: accent color, hero intensity, section density.
- Mobile responsive. Desktop polished.
BANNED
- Generic AI/futuristic visuals. Purple-blue gradients. Stock photography.
- Words: revolutionize, transform, unleash, unlock, empower, supercharge.
- Long copy blocks. Every section readable in 10 seconds.
Ask me clarifying questions before generating.

03

// Investor pitch deck prompt.

Prompt
New slide deck project in your design system. Paste:
Build a VC-grade pitch deck for [COMPANY] - [ONE-LINE POSITIONING].
COMPANY CONTEXT
[2-3 sentences on what you do, who it's for, and your current traction]
Founder: [NAME] - [BACKGROUND, KEY CREDIBILITY NUMBERS]
THE RAISE
[$X round. Structure. Min check. Target check size. Use of funds.]
TONE
Sequoia-style clarity. Warm and human, not clinical. Numbers do the work.
Founder-led, first-person narrative. Short headlines. No hype language.
STRUCTURE (16 slides)
1. TITLE - company, tagline, raise
2. THE INSIGHT - why this moment, this thesis
3. THE PROBLEM - framed around your audience
4. WHAT WE'VE BUILT - product + traction snapshot
5. TRACTION - AUDIENCE - subscribers, followers, community numbers
6. TRACTION - REVENUE - ARR, growth rate, gross margin
7. THE THESIS - why this compounds
8. PRODUCT ONE - name, metrics, position

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 022

Copy
9. PRODUCT TWO - name, metrics, position
10. DISTRIBUTION / MOAT - CAC advantage, organic reach
11. BUSINESS MODEL - revenue streams, unit economics
12. MARKET - size, tailwinds, competitive landscape
13. TEAM - founder + key team
14. ROADMAP - 12-month and 3-year
15. THE ASK - amount, structure, use of funds
16. CLOSE - one line that lands
RULES
- First person throughout
- Every number visible on its slide
- Charts: custom, not template
- If there's a gap, invent a plausible number matching the business scale - don't add
"[placeholder]"
- Speaker notes for every slide - 2-3 sentences, conversational
Ask me clarifying questions before generating.

04

// Product page prompt.

Prompt
For physical or digital products. New prototype (Desktop) in your design system:
Build the launch product page for [PRODUCT NAME] - [ONE-LINE DESCRIPTION].
Match your existing launch page aesthetic.
PRODUCT
- Name: [PRODUCT NAME]
- Tagline: [ONE-LINE TAGLINE]
- Price: [$XXX]
- Availability: [TIMELINE]
DESIGN / MATERIALS
[DESCRIBE PHYSICAL DESIGN, MATERIALS, DIMENSIONS, KEY FEATURES]
Visual reference points: [2-3 products with similar aesthetic - e.g. Teenage Engineering,
Leica, Nothing]
PAGE STRUCTURE (8-10 sections)
1. HERO - full-bleed product render, 3/4 view, subtle glow underneath
2. THE CASE - three-line manifesto on why this exists
3. GALLERY - three product renders side by side

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 023

Copy
4. HOW IT WORKS - four horizontal blocks, left-to-right
5. INTERACTIVE DETAIL - close-up render with hotspots on key elements
6. SPECS - clean two-column table, mono font
7. IN THE WILD - three lifestyle renders (restrained, no models)
8. FROM THE FOUNDER - 3-4 sentence note, first person
9. RESERVATION/BUY - full-width section, single email field, brand CTA
10. FOOTER - minimal
PRODUCT RENDER STYLE
- Studio photography aesthetic - Apple press imagery, Teenage Engineering product
photography
- Deep background, device floating or resting
- Subtle brand-color glow from key element
- Subtle contact shadow for grounding
- NOT wireframe/CAD/3D-render look. Must feel photographed.
BANNED
- Generic tech-product page tropes (rotating ring graphics, particles)
- Stock imagery, model hands in lifestyle shots
Ask me clarifying questions before generating.

05

// Mobile app prompt.

Prompt
New prototype project (device: iPhone) in your design system:
Build the iOS [APP NAME] - [CORE USE CASE].
Match your existing app aesthetic. Dark mode only.
POSITIONING
[ONE-LINER - what this app does and for whom]
DESIGN PRINCIPLES
- Status over navigation - home screen is control panel, not a menu
- Gesture-first - swipe right for [primary action], swipe left for [secondary], long-press
for detail
- Type-heavy, image-light - mono font for data and timestamps
- Dark mode only - no light mode toggle, no illustrations
- Brand accent only on active states, never decorative
REFERENCE APPS

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 024

Copy
Linear Mobile (density and type), Things 3 (gestures), Arc Search (editorial dense UI),
Raycast iOS (command surface), Tesla app (live status).
SCREENS (6-8 total)
1. ONBOARDING - welcome, [core setup], notifications
2. HOME / DASHBOARD - main control panel, hero screen
3. DETAIL VIEW - individual item with action controls
4. QUEUE / LIST - sectioned, prioritized
5. ACTION FLOW - full-screen action with gesture controls
6. ADD / CREATE - voice primary, text fallback
7. ACTIVITY LOG - timeline, grouped by day
8. SETTINGS - grouped table, minimal icons
INTERACTION
- Brand glow on active items (2-3s cycle)
- Screen transitions under 300ms, no bounce
- Minimum body text 15pt
- Mono font for data/timestamps/labels
BANNED
- Any non-brand accents
- Illustrations or cartoons
- Purple or gradient anything
- Avatars or profile photos in task cards
- Empty-state mascots or friendly copy
- Light mode
- Rounded-square colorful iOS settings icons - use mono line icons instead
Show all screens as a connected clickable prototype.
Ask me clarifying questions before generating.

06

// Claude Code handoff.

Once your Claude Design project is ready to ship, hit Export fi Hand off to Claude Code. Claude Design generates a command like:

Copy
Fetch this design file, read the README, and implement the relevant aspects of the design in
this project.

Paste that command into Claude Code (open in your Next.js project). It will:

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 025

  1. Fetch the design bundle from Claude Design
  2. Read the README for design intent
  3. Implement components matching your existing code patterns
  4. Commit and push to GitHub
  5. Vercel auto-deploys fi live URL

Pre-flight checklist

n Next.js project created and pushed to GitHub n Vercel connected to the repo n Domain purchased and pointed to Vercel (if going custom) n Claude Code open in the project directory n Test handoff once before going live

07

// Reverse-engineer any site.

To match a specific website's aesthetic in your Claude Design output:

  1. Screenshot the site's key sections (hero, features, footer)
  2. Open Claude chat (not Claude Design)
  3. Upload the screenshots
  4. Paste the prompt below
  5. Take Claude's output and paste into Claude Design's notes field during design system setup
Copy
Analyze these screenshots. Extract the design system:
- Exact hex codes for primary background, text, accents
- Typography stack (what fonts, weights, tracking)
- Spacing rhythm (generous, dense, architectural)
- Motion language (if visible)
- Voice and copy tone
- What's working visually - and what I should avoid if I want my own brand to feel different
but related
Output as a structured "Any Other Notes" field I can paste into Claude Design's design

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 026

Copy
system setup.

The Rule

Every asset you build in Claude Design should pass one test:

Could this go live tomorrow and you'd be proud of it?

If no, iterate using tweaks, inline comments, Claude chat critiques. If yes, hand it off to Claude Code and ship it. The tool is fast. Your taste is the bottleneck. Build taste by shipping.

AI EDGE // THE CLAUDE DESIGN PLAYBOOK P. 027

Giving you the edge on AI.

Copy
AI EDGE
Continue exploring

What to watch next