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

Descripción

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 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 (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. 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.

Lo que aprenderás

• 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: W3C 3-tier 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

Requisitos

• Basic familiarity with Figma (a free account is enough) — you don't need to be an expert
• 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