Apr 25, 2026

Vibe Design Manual

AI workflow for designers who care about craft

The Designer's AI Workflow. Ship production UI in 4 steps without losing design quality.

Heads up

This is a design execution guide ONLY. It assumes you already know what you're building.

PHASE 0 (if you are still in ideation phase)
Need help shaping the idea itself? (MVP scoping, feature prioritization, user journey, user research prompts)
I cover that on this reel → https://www.instagram.com/p/DVwmIH8ATbx/

STEP 1. Build foundation

1.1 Map the user flow (15 min)

Write down in Notion:

Actor: who uses this screen?
Goal: what are they trying to accomplish?
Trigger: where do they enter from?
Success: when is the flow complete?

1.2 Define the data model (10 min)

List entities and their relationships. Most designers skip this, but AI needs it to generate UI that matches real data structure.

Workspace → has many → Pages
Page → has many → Blocks
Page → belongs to → User
Block → has type (text/heading/list/image)

Workspace → has many → Pages
Page → has many → Blocks
Page → belongs to → User
Block → has type (text/heading/list/image)

Workspace → has many → Pages
Page → has many → Blocks
Page → belongs to → User
Block → has type (text/heading/list/image)

1.3 List edge cases (10 min)

Every screen has 4 states plus N edge cases. List them before prompting:

States:
☐ Empty (no data yet)
☐ Loading (fetching)
☐ Error (fetch failed)
☐ Success (happy path)

Edge cases:
☐ Long text (80+ char titles)
☐ Null values (null dates, count = 0)
☐ Many items (1000+ rows)
☐ Slow network (>2s)
☐ No permissions (read-only mode)

States:
☐ Empty (no data yet)
☐ Loading (fetching)
☐ Error (fetch failed)
☐ Success (happy path)

Edge cases:
☐ Long text (80+ char titles)
☐ Null values (null dates, count = 0)
☐ Many items (1000+ rows)
☐ Slow network (>2s)
☐ No permissions (read-only mode)

States:
☐ Empty (no data yet)
☐ Loading (fetching)
☐ Error (fetch failed)
☐ Success (happy path)

Edge cases:
☐ Long text (80+ char titles)
☐ Null values (null dates, count = 0)
☐ Many items (1000+ rows)
☐ Slow network (>2s)
☐ No permissions (read-only mode)

1.4 Lock your design tokens (15 min)

This is where designers have the strongest hand. Don't let AI decide. Define upfront:

COLORS
- Primary: #3FB984 (mint)
- Background: #FAFAF7 (warm off-white)
- Text: #1C1C1A
- Border: rgba(0,0,0,0.08)
- Semantic: success / warning / error

TYPOGRAPHY
- Display: Editorial New / Playfair Display
- Body: Söhne / DM Sans
- Mono: JetBrains Mono

SPACING (4px scale)
- 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64

RADIUS
- Small: 6px (input, button)
- Medium: 12px (card)
- Large: 20px (modal)

SHADOWS
- None at rest
- Subtle on hover only

COLORS
- Primary: #3FB984 (mint)
- Background: #FAFAF7 (warm off-white)
- Text: #1C1C1A
- Border: rgba(0,0,0,0.08)
- Semantic: success / warning / error

TYPOGRAPHY
- Display: Editorial New / Playfair Display
- Body: Söhne / DM Sans
- Mono: JetBrains Mono

SPACING (4px scale)
- 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64

RADIUS
- Small: 6px (input, button)
- Medium: 12px (card)
- Large: 20px (modal)

SHADOWS
- None at rest
- Subtle on hover only

COLORS
- Primary: #3FB984 (mint)
- Background: #FAFAF7 (warm off-white)
- Text: #1C1C1A
- Border: rgba(0,0,0,0.08)
- Semantic: success / warning / error

TYPOGRAPHY
- Display: Editorial New / Playfair Display
- Body: Söhne / DM Sans
- Mono: JetBrains Mono

SPACING (4px scale)
- 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64

RADIUS
- Small: 6px (input, button)
- Medium: 12px (card)
- Large: 20px (modal)

SHADOWS
- None at rest
- Subtle on hover only

Prompt for Step 1 (if you want AI to help brainstorm):

I'm designing [screen name] for [product description].
Target user: [persona].
MPV ideation: [paste all info related to MVP ideation from phase 0]

Help me think through:
1. User flow (entry point, goal, success state)
2. Data model (entities and relationships)
3. Edge cases I might be missing
4. Design tokens that fit this brand mood: [editorial/warm/minimal/playful]

Don't generate UI yet. I want to lock the foundation first.

I'm designing [screen name] for [product description].
Target user: [persona].
MPV ideation: [paste all info related to MVP ideation from phase 0]

Help me think through:
1. User flow (entry point, goal, success state)
2. Data model (entities and relationships)
3. Edge cases I might be missing
4. Design tokens that fit this brand mood: [editorial/warm/minimal/playful]

Don't generate UI yet. I want to lock the foundation first.

I'm designing [screen name] for [product description].
Target user: [persona].
MPV ideation: [paste all info related to MVP ideation from phase 0]

Help me think through:
1. User flow (entry point, goal, success state)
2. Data model (entities and relationships)
3. Edge cases I might be missing
4. Design tokens that fit this brand mood: [editorial/warm/minimal/playful]

Don't generate UI yet. I want to lock the foundation first.

Output of Step 1: a single Notion page with 4 sections. This is the brief you'll paste into Step 2.

STEP 2. Build MVP with Claude Artifact

2.1 Open Claude.ai, start a new chat

Make sure you're using Claude Opus 4.7 (model dropdown at the top). Stronger vision means better output.

2.2 Paste the master prompt template

This is the canonical prompt. Copy the full block, fill in the brackets:

Build [SCREEN NAME] for [PRODUCT].

CONTEXT
- User flow: [paste from Step 1.1]
- Data needed: [paste from Step 1]
- Brand tone: [editorial / warm / minimal / playful]

DESIGN SYSTEM
- Components: shadcn/ui only
- Primary color: [hex from Step 1.4]
- Background: [hex]
- Typography:
  - Display: [font name]
  - Body: [font name]
- Spacing: 4px scale (4/8/12/16/24/32/48)
- Radius: 6px small, 12px medium, 20px large
- No gradients, no decorative shadows

STATES (all required)
1. Empty: illustration, encouraging copy, primary CTA
2. Loading: skeleton matching final layout, no spinners
3. Error: friendly message, retry button
4. Success: happy path with realistic data

EDGE CASES (must handle)
- Long text: truncate at 40 chars, tooltip on hover
- Null values: show "N/A" or em dash character
- Zero values: show "0" explicitly, never blank
- Long numbers: format with commas (1,000)

QUALITY BAR
- Mobile responsive (test at 375px)
- WCAG AA accessible
- Touch targets at least 44px
- Visible focus rings
- Hover states on all interactive elements
- Animations under 300ms

Show me the loaded state first. I'll request other states next.

Build [SCREEN NAME] for [PRODUCT].

CONTEXT
- User flow: [paste from Step 1.1]
- Data needed: [paste from Step 1]
- Brand tone: [editorial / warm / minimal / playful]

DESIGN SYSTEM
- Components: shadcn/ui only
- Primary color: [hex from Step 1.4]
- Background: [hex]
- Typography:
  - Display: [font name]
  - Body: [font name]
- Spacing: 4px scale (4/8/12/16/24/32/48)
- Radius: 6px small, 12px medium, 20px large
- No gradients, no decorative shadows

STATES (all required)
1. Empty: illustration, encouraging copy, primary CTA
2. Loading: skeleton matching final layout, no spinners
3. Error: friendly message, retry button
4. Success: happy path with realistic data

EDGE CASES (must handle)
- Long text: truncate at 40 chars, tooltip on hover
- Null values: show "N/A" or em dash character
- Zero values: show "0" explicitly, never blank
- Long numbers: format with commas (1,000)

QUALITY BAR
- Mobile responsive (test at 375px)
- WCAG AA accessible
- Touch targets at least 44px
- Visible focus rings
- Hover states on all interactive elements
- Animations under 300ms

Show me the loaded state first. I'll request other states next.

Build [SCREEN NAME] for [PRODUCT].

CONTEXT
- User flow: [paste from Step 1.1]
- Data needed: [paste from Step 1]
- Brand tone: [editorial / warm / minimal / playful]

DESIGN SYSTEM
- Components: shadcn/ui only
- Primary color: [hex from Step 1.4]
- Background: [hex]
- Typography:
  - Display: [font name]
  - Body: [font name]
- Spacing: 4px scale (4/8/12/16/24/32/48)
- Radius: 6px small, 12px medium, 20px large
- No gradients, no decorative shadows

STATES (all required)
1. Empty: illustration, encouraging copy, primary CTA
2. Loading: skeleton matching final layout, no spinners
3. Error: friendly message, retry button
4. Success: happy path with realistic data

EDGE CASES (must handle)
- Long text: truncate at 40 chars, tooltip on hover
- Null values: show "N/A" or em dash character
- Zero values: show "0" explicitly, never blank
- Long numbers: format with commas (1,000)

QUALITY BAR
- Mobile responsive (test at 375px)
- WCAG AA accessible
- Touch targets at least 44px
- Visible focus rings
- Hover states on all interactive elements
- Animations under 300ms

Show me the loaded state first. I'll request other states next.

2.3 Iterate visually (3 to 5 rounds)

Don't accept the first output. Iterate the way you'd give feedback to a junior designer:

Example:

2.3 Iterate visually (3 to 5 rounds)
Don't accept the first output. Iterate the way you'd give feedback to a junior designer:

2.3 Iterate visually (3 to 5 rounds)
Don't accept the first output. Iterate the way you'd give feedback to a junior designer:

2.3 Iterate visually (3 to 5 rounds)
Don't accept the first output. Iterate the way you'd give feedback to a junior designer:

The loaded state looks good. Now refine:
- Use the display font for the title, not body
- Reduce card padding from 24px to 20px
- Card hover: subtle lift, no shadow
- Add a micro interaction on CTA click

The loaded state looks good. Now refine:
- Use the display font for the title, not body
- Reduce card padding from 24px to 20px
- Card hover: subtle lift, no shadow
- Add a micro interaction on CTA click

The loaded state looks good. Now refine:
- Use the display font for the title, not body
- Reduce card padding from 24px to 20px
- Card hover: subtle lift, no shadow
- Add a micro interaction on CTA click

Now the error state. Make the retry button primary.
Add a secondary "Work offline" option below it

Now the error state. Make the retry button primary.
Add a secondary "Work offline" option below it

Now the error state. Make the retry button primary.
Add a secondary "Work offline" option below it

Edge case test: render a row with a 100 char title
and another with a null date. Show me how it handles

Edge case test: render a row with a 100 char title
and another with a null date. Show me how it handles

Edge case test: render a row with a 100 char title
and another with a null date. Show me how it handles

2.4 Final review inside Artifact

Checklist before moving to Step 3:

All 4 states exist and feel polished
Edge cases handled gracefully
Mobile breakpoint responsive
Tokens consistent (no random hex or spacing)
Microcopy specific, not generic ("Save retreat" not "Submit")

Output of Step 2: a React component running in Artifact, visually approved.

STEP 3. Customize the design system

3.1 Customize tokens inside Artifact

Stay in the Artifact, prompt this:

Now customize the design system to match these specifics:

COLORS (replace shadcn defaults)
Update globals.css with these CSS variables:
- background: 60 20% 97% (warm off white)
- foreground: 60 5% 11% (warm near black)
- primary: 160 50% 42% (deep mint)
- primary foreground: 0 0% 100%
- muted: 60 10% 92%
- muted foreground: 60 5% 35%
- border: 60 8% 88%
- radius: 0.75rem

TYPOGRAPHY
- Import "Editorial New" for display (or Playfair Display as fallback)
- Import "Söhne" for body (or DM Sans as fallback)
- Update tailwind.config to add font display and font sans
- Use font display for headings, font sans for body

REFINE
- Tighter letter spacing on display headings (0.02em negative)
- Looser letter spacing on uppercase labels (0.05em positive)
- Body line height 1.6, headings 1.2
- Numbers use tabular nums for tables

Show me the updated component with new tokens applied

Now customize the design system to match these specifics:

COLORS (replace shadcn defaults)
Update globals.css with these CSS variables:
- background: 60 20% 97% (warm off white)
- foreground: 60 5% 11% (warm near black)
- primary: 160 50% 42% (deep mint)
- primary foreground: 0 0% 100%
- muted: 60 10% 92%
- muted foreground: 60 5% 35%
- border: 60 8% 88%
- radius: 0.75rem

TYPOGRAPHY
- Import "Editorial New" for display (or Playfair Display as fallback)
- Import "Söhne" for body (or DM Sans as fallback)
- Update tailwind.config to add font display and font sans
- Use font display for headings, font sans for body

REFINE
- Tighter letter spacing on display headings (0.02em negative)
- Looser letter spacing on uppercase labels (0.05em positive)
- Body line height 1.6, headings 1.2
- Numbers use tabular nums for tables

Show me the updated component with new tokens applied

Now customize the design system to match these specifics:

COLORS (replace shadcn defaults)
Update globals.css with these CSS variables:
- background: 60 20% 97% (warm off white)
- foreground: 60 5% 11% (warm near black)
- primary: 160 50% 42% (deep mint)
- primary foreground: 0 0% 100%
- muted: 60 10% 92%
- muted foreground: 60 5% 35%
- border: 60 8% 88%
- radius: 0.75rem

TYPOGRAPHY
- Import "Editorial New" for display (or Playfair Display as fallback)
- Import "Söhne" for body (or DM Sans as fallback)
- Update tailwind.config to add font display and font sans
- Use font display for headings, font sans for body

REFINE
- Tighter letter spacing on display headings (0.02em negative)
- Looser letter spacing on uppercase labels (0.05em positive)
- Body line height 1.6, headings 1.2
- Numbers use tabular nums for tables

Show me the updated component with new tokens applied

3.2 Test token cascading

After Artifact applies new tokens, run a quick test:

Test design system flexibility:
1. Change primary to deep coral (10 75% 55%), show how it cascades
2. Revert to mint
3. Change radius from 0.75rem to 1.25rem, show the effect
4. Revert

Goal: confirm tokens are wired correctly,
no hardcoded colors or radius values

Test design system flexibility:
1. Change primary to deep coral (10 75% 55%), show how it cascades
2. Revert to mint
3. Change radius from 0.75rem to 1.25rem, show the effect
4. Revert

Goal: confirm tokens are wired correctly,
no hardcoded colors or radius values

Test design system flexibility:
1. Change primary to deep coral (10 75% 55%), show how it cascades
2. Revert to mint
3. Change radius from 0.75rem to 1.25rem, show the effect
4. Revert

Goal: confirm tokens are wired correctly,
no hardcoded colors or radius values

3.3 Add brand specific touches

This is the layer where designers flex. Pick 2 or 3 micro decisions to give output a signature:

Add these brand details:
- Buttons: subtle inset shadow on press (not bouncy)
- Cards: 0.5px border, no shadow at rest, 
  shadow-sm and 1px lift on hover, 200ms ease
- Inputs: 1.5px bottom border only, 
  primary color when focused
- Empty state illustration: line art style, 
  primary color stroke, no fill
- Loading skeleton: 
  pulse from muted to muted/50, 1.5s ease in out

Add these brand details:
- Buttons: subtle inset shadow on press (not bouncy)
- Cards: 0.5px border, no shadow at rest, 
  shadow-sm and 1px lift on hover, 200ms ease
- Inputs: 1.5px bottom border only, 
  primary color when focused
- Empty state illustration: line art style, 
  primary color stroke, no fill
- Loading skeleton: 
  pulse from muted to muted/50, 1.5s ease in out

Add these brand details:
- Buttons: subtle inset shadow on press (not bouncy)
- Cards: 0.5px border, no shadow at rest, 
  shadow-sm and 1px lift on hover, 200ms ease
- Inputs: 1.5px bottom border only, 
  primary color when focused
- Empty state illustration: line art style, 
  primary color stroke, no fill
- Loading skeleton: 
  pulse from muted to muted/50, 1.5s ease in out

Each detail is small, but together they create identity. This is the craft layer.

3.4 Final visual QA

Before moving to Step 4:

Tokens in globals.css are the single source of truth
No hardcoded color or spacing in components
Typography hierarchy clear (6+ sizes, 2 fonts, 2 weights)
Hover, focus, active states feel cohesive
Switch dark mode (prompt: "add dark mode") and it still looks good

Output of Step 3: a component with brand identity, clean tokens, ready to ship.

STEP 4. Ship with Claude Code

4.1 One time project setup (5 min, do once)

Open terminal:

# Create new Next.js project
npx create-next-app@latest my-app
# When prompted: TypeScript yes, Tailwind yes, App Router yes

cd my-app

# Install shadcn
npx shadcn@latest init
# Pick: Default style, Slate base color, CSS variables yes

# Install Claude Code (if you don't have it)
npm install -g @anthropic-ai/claude-code

# Open Claude Code in this project
claude

# Create new Next.js project
npx create-next-app@latest my-app
# When prompted: TypeScript yes, Tailwind yes, App Router yes

cd my-app

# Install shadcn
npx shadcn@latest init
# Pick: Default style, Slate base color, CSS variables yes

# Install Claude Code (if you don't have it)
npm install -g @anthropic-ai/claude-code

# Open Claude Code in this project
claude

# Create new Next.js project
npx create-next-app@latest my-app
# When prompted: TypeScript yes, Tailwind yes, App Router yes

cd my-app

# Install shadcn
npx shadcn@latest init
# Pick: Default style, Slate base color, CSS variables yes

# Install Claude Code (if you don't have it)
npm install -g @anthropic-ai/claude-code

# Open Claude Code in this project
claude

Setup done. You're now in a Claude Code session, ready to paste artifact code.

4.2 Transfer artifact code (the right way)

In Artifact, click the copy button at the top of the artifact. The full code is now copied.

In Claude Code, paste this prompt with the code:

I prototyped a component in Claude Artifact. Here's the code:

[paste artifact code here]

Please integrate it into this Next.js project:

1. CREATE FILES
   - Component at: src/components/[component name].tsx
   - Page route at: src/app/[route]/page.tsx
   - Update src/app/layout.tsx if fonts need to be added

2. INSTALL DEPENDENCIES
   - Scan the code for imports
   - Install any missing shadcn components: npx shadcn@latest add [component]
   - Install any missing npm packages

3. APPLY DESIGN TOKENS
   - Copy CSS variables from the artifact into src/app/globals.css
   - Update tailwind.config.ts with custom fonts and color extensions
   - Replace any hardcoded colors with token references

4. CONNECT REAL DATA
   - Replace mock data with placeholder Supabase queries
   - Add proper TypeScript types for the data model
   - Wire loading and error states to real async behavior
   - Keep empty state working when query returns empty array

5. ROUTING AND NAVIGATION
   - Add this route to the main navigation
   - Set up Next.js metadata (title, description)

6. ENSURE QUALITY
   - All 4 states (empty, loading, error, success) work with real async data
   - Mobile responsive verified at 375px
   - Accessibility: keyboard nav, focus rings, aria labels
   - No TypeScript errors
   - No console warnings

Walk me through what you're doing. I'll review before commit

I prototyped a component in Claude Artifact. Here's the code:

[paste artifact code here]

Please integrate it into this Next.js project:

1. CREATE FILES
   - Component at: src/components/[component name].tsx
   - Page route at: src/app/[route]/page.tsx
   - Update src/app/layout.tsx if fonts need to be added

2. INSTALL DEPENDENCIES
   - Scan the code for imports
   - Install any missing shadcn components: npx shadcn@latest add [component]
   - Install any missing npm packages

3. APPLY DESIGN TOKENS
   - Copy CSS variables from the artifact into src/app/globals.css
   - Update tailwind.config.ts with custom fonts and color extensions
   - Replace any hardcoded colors with token references

4. CONNECT REAL DATA
   - Replace mock data with placeholder Supabase queries
   - Add proper TypeScript types for the data model
   - Wire loading and error states to real async behavior
   - Keep empty state working when query returns empty array

5. ROUTING AND NAVIGATION
   - Add this route to the main navigation
   - Set up Next.js metadata (title, description)

6. ENSURE QUALITY
   - All 4 states (empty, loading, error, success) work with real async data
   - Mobile responsive verified at 375px
   - Accessibility: keyboard nav, focus rings, aria labels
   - No TypeScript errors
   - No console warnings

Walk me through what you're doing. I'll review before commit

I prototyped a component in Claude Artifact. Here's the code:

[paste artifact code here]

Please integrate it into this Next.js project:

1. CREATE FILES
   - Component at: src/components/[component name].tsx
   - Page route at: src/app/[route]/page.tsx
   - Update src/app/layout.tsx if fonts need to be added

2. INSTALL DEPENDENCIES
   - Scan the code for imports
   - Install any missing shadcn components: npx shadcn@latest add [component]
   - Install any missing npm packages

3. APPLY DESIGN TOKENS
   - Copy CSS variables from the artifact into src/app/globals.css
   - Update tailwind.config.ts with custom fonts and color extensions
   - Replace any hardcoded colors with token references

4. CONNECT REAL DATA
   - Replace mock data with placeholder Supabase queries
   - Add proper TypeScript types for the data model
   - Wire loading and error states to real async behavior
   - Keep empty state working when query returns empty array

5. ROUTING AND NAVIGATION
   - Add this route to the main navigation
   - Set up Next.js metadata (title, description)

6. ENSURE QUALITY
   - All 4 states (empty, loading, error, success) work with real async data
   - Mobile responsive verified at 375px
   - Accessibility: keyboard nav, focus rings, aria labels
   - No TypeScript errors
   - No console warnings

Walk me through what you're doing. I'll review before commit

Claude Code will handle everything, asking confirmation on each file edit. Review each step and test locally.

Readme.md

UserFlow.md

If this helped, the best thank you from you is a follow + share with one designer friend who needs to see it! More breakdowns coming weekly!!!

— Serena