AI Process

AI runs through every step of my process. I use it to move faster and think wider, with a human-in-the-loop review at each step to keep the work consistent. The tooling changes constantly; the judgement doesn’t.

01
Intent
Context, scope, references
Claude
02
Foundations
Tokens, styles, layout + brand
Figma / Tokens
03
Prototype
Initial screens + feedback loop
Claude / Cursor
04
Build
Design system + screens in code
Code + MCP
05
Ship
Handover to devs & push to repo
Git

My three principles for designing with AI

1

Intent before output: Strategy and context are the foundation of every project. Defining scope, references, and constraints up front keeps AI working inside deliberate guardrails instead of guessing. The output is only as good as the setup.

2

Keep humans in the synthesis: I deliberately don’t hand qualitative research and analysis to AI. Sitting with the interviews and the messy detail is how empathy forms and how the real problem surfaces. Automating it strips out the emotion the work depends on — keeping the emotion in the loop.

3

Prototype fast: The long, frontloaded UX process is mostly over. Rather than documenting for weeks before anything is visible, I prototype early, get something real in front of people, and let feedback steer direction. Momentum beats polish in the early stages.

Resources

Github — Claude Design MD
Day 1 release exploration into claude.md
Figma Plugin — Variable binder for AI outputs
Scan your AI design outputs and bind variables
Claude Skill — figma-component-generator
Generate production-ready Figma components from a Tokens Studio JSON file
Claude Skill — spec-to-figma-components
Build native Figma design system components from a foundation spec via Claude Code
Claude Skill — design-token-extractor
Extract a full design token audit from any live website using Claude in Chrome
Claude Skill — design-system-synthesis
Turn a token audit into a foundation spec and DTCG-structured token file in one pass
Claude Skill — tokens-studio-ready
Convert a DTCG token file into a Tokens Studio for Figma import
Claude Skill — ui-design-system
Generate design tokens, type scales, component docs, and developer handoff
Claude Skill — cursor-context-scaffold
Scaffold a Cursor-ready project with AI context rules and docs structure