Claude AI UI/UX: Complete Workflow from Brief to Figma

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: 20 STEPS · 8 PHASES · 3 WORK ZONES

1. 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.
2. Zone 2 — Produce (Phase 4). 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.
3. Zone 3 — Finish (Phases 5-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) and a Figma account. No coding required.

Let's get started.