| name | ai-era-design-process |
| description | Use when making design decisions, choosing between Claude Code and image generation tools like Gemini, advising on design team workflows, evaluating designers, or navigating AI-accelerated product development |
AI-Era Design Process
Overview
Traditional design process (discovery โ diverge/converge โ mock โ iterate) is largely dead. Two types of design work now exist:
- Execution Support โ Helping engineers implement, polish, and stay aligned as they ship rapidly using AI coding tools
- 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
| Tool | Purpose | When |
|---|
| Claude Code | Implementation, last-mile polish, AI feature prototypes, codebase edits | Anything that needs to exist in code |
| Gemini/Image Gen | Design exploration, mockups, wireframes (lo-fi and hi-fi) | Non-linear visual exploration, direction divergence, communicating intent before coding |
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
| Activity | Old | New |
|---|
| Mocking/prototyping | 60โ70% | 30โ40% |
| Jamming with engineers | 20โ30% | 30โ40% |
| Direct code implementation | ~10% | Remaining |
Designer Archetypes (Hiring)
| Archetype | Description | Best For |
|---|
| Execution Partner | Comfortable in Claude Code, works with engineers, does last-mile polish directly | High-velocity shipping |
| Direction Setter | Systems thinker, builds 3โ6 month prototyped visions, aligns teams | Complex products with parallel contributors |
| Craft Specialist | Deep visual/interaction taste, high-quality output on flagship surfaces | Brand-defining features |
Feature Maturity Tiers
| Tier | Description | Requirements |
|---|
| Research Preview | Early, known flaws, ships with promise to iterate | Public acknowledgment + visible fix cadence |
| Polished Release | Full design coverage, production-ready | Complete design coverage |
Common Mistakes
| Mistake | Fix |
|---|
| Using Gemini for AI feature prototypes | Skip wireframes โ Claude Code prototype with real model |
| Creating 2โ5 year vision decks | Build 3โ6 month working prototypes instead |
| Approving before engineers ship | Steer quality and direction instead of gatekeeping |
| Leaving polish to engineers | Do last-mile polish in Claude Code yourself |
| Generic "move this here" feedback | Always explain the principle behind the change |
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.
