Designer AI Workflow Map

Use this when

You want designers to use AI as a production multiplier, not a random image or layout generator.

The path is role-specific:

1. Brief the work until the job, user, hierarchy, constraints, and production surface are clear.
2. Explore in Paper when speed, variations, and composition matter.
3. Normalize in Figma when components, tokens, states, and team review matter.
4. Implement with Codex or Claude Code when the design is ready to become code.
5. Review the result with a design skill before it ships.

Workflow map

| Stage | Tool | Designer owns | AI helps with | Output | | --- | --- | --- | --- | --- | | Brief | Claude / ChatGPT | User goal, taste bar, constraints | Spec structure, missing-state checklist | Buildable UI spec | | Explore | Paper | Direction, hierarchy, references | First-pass layouts, variations, quick iteration | Chosen direction | | Normalize | Figma | Components, tokens, states | Cleanup checklist, naming, handoff notes | Design-system aligned file | | Implement | Codex / Claude Code | Acceptance criteria and QA | Route, component, CSS, responsive implementation | Working screen | | Review | Claude / Codex | Final judgment | Structured findings and fix plan | Ship-ready revision |

Designer path

| Week | Focus | Ship | | --- | --- | --- | | 1 | Brief to UI spec | One buildable UI spec for a real client or product screen | | 2 | Paper exploration | Three directions, one selected, with rationale | | 3 | Figma normalization | Components, states, tokens, and handoff notes | | 4 | Codex / Claude Code implementation | Working route plus screenshot QA |

Assets to pair with this path

• UI Design Review Skill Pack
• Brief to UI Spec prompt
• Paper to Production Handoff prompt
• Design Ops: Design with Paper and Figma course
• From Prompt to Prototype course
• Claude Code Essentials for Operators course

Review gates

• The screen has one clear primary action.
• The layout is dense enough for the workflow and not dressed like a landing page.
• All repeated elements use the same component rules.
• Copy fits on mobile and desktop.
• Empty, loading, error, selected, hover, and focus states are named.
• The implementation uses existing tokens and components before inventing new ones.