Claude AI UI/UX: Complete Workflow from Brief to Figma
Claude Design & Claude Cowork to Figma: AI UI/UX workflow from brief to design system, prototype & Figma MCP handoff
Claude Design & Claude Cowork to Figma: AI UI/UX workflow from brief to design system, prototype & Figma MCP handoff
This course contains the use of artificial intelligence.
What if you could take a rough client brief and ship a complete, hi-fi Figma prototype — on your own, in a fraction of the usual time?
This is a hands-on, project-based course on the AI UI/UX design workflow — you'll learn how to design with AI, combining Claude AI and a modern Figma AI workflow to go from brief to a real, developer-ready interface.
That's exactly what you'll do here. No dry theory, no toy exercises. You'll watch one real project — Pika, a mobile booking app for a pickleball court chain — travel the entire journey from a vague client email to a polished, token-based Figma file with a working clickable prototype. And you'll build it with me, step by step.
I've been a designer since 2011. I've watched the market shift from Photoshop to Figma — and now to AI. Here's the truth: designers who master an AI workflow now ship in days what used to take weeks. This course hands you that exact workflow.
THE METHOD: 17 STEPS · 8 PHASES · 3 WORK ZONES
Zone 1 — Think (Phases 1-3). 80% of an interface's quality is decided before the first pixel. Inside Claude Cowork you'll dissect the brief, interrogate the business model, analyze competitors, define a North Star metric, build four personas, and turn it all into a feature list, sitemap and user flows.
Zone 2 — Produce (Phases 4-5). Pack every decision into one master-spec file, feed it to Claude Design with a truly visual, prescriptive prompt, refine the result with screenshot feedback, and export the entire app as HTML.
Zone 3 — Finish (Phases 6-8). The part most courses skip. Extract your UI into a real design system — three W3C token files, Figma variables, text and effect styles — then let Claude drive Figma MCP to build a component library with states, swap instances into your screens, wire the clickable prototype, and package everything for developer handoff.
Along the way you'll internalize the mindset that makes AI work for you instead of against you: AI is the engine, you are the director. You set gates between phases, you judge what's good enough, and you handle the edge cases AI won't see on its own.
By the end, you won't have a folder of scattered exercises. You'll have one complete, portfolio-ready project — and a repeatable system you can run on your very next client brief.
Note: you'll need the Claude desktop app on a paid plan (Pro at minimum), a Figma account, and ChatGPT Plus (the course uses Codex to generate the images). No coding required.
Let's get started.
FAQ area empty
Import the HTML UI into Figma
214Import tokens and styles into Figma
456Connect Figma MCP to Claude
313Turn the icons into components
134Component inventory
63Build components, turns 1–2: button, chip, booking
280Build components, turns 3–4: input, progress, feedback
140Build components, turns 5–6: list, card
188Build components, turns 7–8: hero, navigation, overlay
393Swap the components into the screens
1088Basic familiarity with Figma. A paid plan is recommended; a free plan works with a small token-kit change shown in the course
A Claude account with the desktop app — Cowork requires a paid plan (Pro at minimum, Max recommended for heavy use)
No coding skills required — everything is done with prompts, plugins and guided step-by-step workflows
A ChatGPT Plus plan: the course uses Codex (included in ChatGPT Plus) to generate the images
Run a complete UI/UX project end-to-end: from a rough client brief to a hi-fi Figma design with a clickable prototype ready for developer handoff
Use Claude AI (Cowork) to dissect a brief, research the business and users, and build personas, feature lists, sitemaps and user flows
Generate hi-fi UI with Claude Design from one master spec file, refine it with visual feedback, and export the whole app as HTML
Turn AI-generated UI into a real design system: two-tier Primitive + Semantic tokens, Figma variables, text and effect styles, and a component library
Automate Figma with Figma MCP: build components with full states, swap instances into your screens, and wire a clickable prototype
Adopt the "AI is the engine, you are the director" mindset — use gate checkpoints so AI speeds you up without lowering quality
0 Student
1 Course
0 Review