AI-Era Design Process

Overview

Traditional design process (discovery → diverge/converge → mock → iterate) is largely dead. Two types of design work now exist:

1. •Execution Support — Helping engineers implement, polish, and stay aligned as they ship rapidly using AI coding tools
2. •Direction Setting — Creating 3–6 month prototyped visions (not decks) that point teams toward a coherent north star

Based on frameworks from Jenny Wen (Head of Design at Anthropic/Claude).

When to Use

• •Deciding between mockups vs code prototypes
• •Advising design teams on AI tool adoption
• •Evaluating designer hiring/roles
• •Setting quality standards for fast-shipping teams
• •Navigating designer-engineer collaboration
• •Planning design vision cycles

Tool Decision Framework

digraph tool_decision {
    rankdir=TB;
    node [shape=diamond];

    "Explore directions or communicate intent?" -> "Use Gemini/Wireframes" [label="yes"];
    "Explore directions or communicate intent?" -> "AI model behavior involved?" [label="no"];
    "AI model behavior involved?" -> "Skip wireframes → Claude Code prototype" [label="yes"];
    "AI model behavior involved?" -> "Direction chosen, time to build?" [label="no"];
    "Direction chosen, time to build?" -> "Claude Code implementation" [label="yes"];
    "Direction chosen, time to build?" -> "Already built but rough?" [label="no"];
    "Already built but rough?" -> "Last-mile polish in Claude Code" [label="yes"];
    "Already built but rough?" -> "Stakeholder alignment needed?" [label="no"];
    "Stakeholder alignment needed?" -> "Gemini hi-fi mockup → then Claude Code" [label="yes"];

    "Use Gemini/Wireframes" [shape=box];
    "Skip wireframes → Claude Code prototype" [shape=box];
    "Claude Code implementation" [shape=box];
    "Last-mile polish in Claude Code" [shape=box];
    "Gemini hi-fi mockup → then Claude Code" [shape=box];
}

Tool Stack

Handoff Rule: Gemini owns work until direction is chosen and layout is agreed. Claude Code takes over when it's time to build, prototype AI behavior, or polish live implementation.

Core Principles

1. Stop Gatekeeping Shipping

Engineers can spin up scrappy versions with AI tools. Steer quality and direction — don't approve before anything ships.

2. Explain Why, Not Just What

• •❌ "Move this button here."
• •✅ "We need a button here because research shows users don't realize they can prompt this."

3. Prototype AI Features in Code

Non-deterministic AI behavior cannot be accurately mocked in static designs. Build real prototypes to see actual states, edge cases, and failure modes.

4. Last-Mile Polish Is a Design Task

When engineers ship first versions, go directly into the codebase to polish spacing, color, micro-interactions. This is a core design responsibility.

5. Point Engineers to the Design System

Claude Code won't always pick up design system components automatically. Include coded components, tokens, and documentation in your prompts.

6. Build Trust Through Speed

• •Ship early with "Research Preview" label if value outweighs roughness
• •Publicly commit to iterating and make commitment visible
• •Respond to user feedback fast
• •Trust erodes when you ship rough then go silent — not from shipping rough itself

7. Shorten Vision Cycles

• •Retire 2–5 year vision decks — technology changes too fast
• •Replace with 3–6 month working prototypes
• •Run quarterly direction sessions

Time Allocation Shift

Designer Archetypes (Hiring)

Feature Maturity Tiers

Common Mistakes

Tone

Direct, experienced, practical. No jargon for jargon's sake. Give concrete examples. Default to recommending action over discussion. Acknowledge the process is still evolving — "this might look different in 3 months" is okay.