Designing With AI: Claude, Codex, Figma | Full Guide
Learn how to design with AI using Claude from Anthropic, Codex from OpenAI, Google Stitch, Mobbin, and Figma. This full guide walks through how I use AI tools in real product design workflows, from early ideation and UX thinking to wirefra
Full description
Learn how to design with AI using Claude from Anthropic, Codex from OpenAI, Google Stitch, Mobbin, and Figma. This full guide walks through how I use AI tools in real product design workflows, from early ideation and UX thinking to wireframing, high-fidelity design, design systems, prototyping, and production-ready UI. We’ll look at where Claude, Codex, Google Stitch, Mobbin, and Figma fit into the design process, how to avoid generic AI-generated results, and how designers can move faster, make better decisions, and burn fewer tokens without losing taste, structure, or control. 🔗 KEY LINKS 📣 JOIN THE COMMUNITY: https://uicollective.co/ ❎ Follow me on X: https://x.com/KirkMDesign Why Join UI Collective Academy? Get access to premium courses, premium downloads, and so much more on the way (I am largely building this solo...trying to make design education available for all, support goes a long way!) ↪️ Need a design system? (also included in the academy): https://collectivekit.co/ 🔗 OTHER SYSTEM VIDEOS TO WATCH Build a Design System: https://youtu.be/opTANvl9G1g Complex Design System & Figma Variable Setup: https://youtu.be/L-tpK7Eeuow Claude Design Video: https://youtu.be/eXlSgQmz02E 🔗 MORE LINKS Let us build or fix your design system: https://designsystemlabs.co/ 📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective Google Stitch: https://stitch.withgoogle.com/ Claude Design: https://claude.ai/design kirkland@uicollective.co 0:00 An Introduction 0:52 AI is Not a Tool, AI is a Workflow 6:43 The AI Design Stack 7:32 Claude vs Codex 9:16 AI Design Setup (Figma Skills & Figma MCP) 16:31 Google Stitch 21:27 Where I Use Stitch In My Workflow 23:29 Claude Design 27:01 Claude Design Output 28:35 When to Use Google Stitch With Claude Design 31:44 Claude Design Limitation 32:35 Claude and Codex Comparison Experiment 38:25 Best Use of AI Tokens 40:45 Design Systems and AI 42:04 Claude Design Design System Limitations 45:32 Building Design Tokens with AI 49:01 Figma Variables and AI 52:26 Design System Components and AI 58:32 Training AI On Our Design System 1:01:34 Design System Claude Skills 1:08:04 Components and Claude Skills 1:13:48 Adding Claude Skills to Codex 1:15:09 AI and Design Research with Mobbin 1:17:24 Building Production UI’s with Claude Code 1:22:43 Building UI’s with Chat GPT 1:24:26 Refining Our AI Design 1:25:13 Pushing to Figma and Final Result 1:27:08 Outro
Chapters
- 0:00 An Introduction
- 0:52 AI is Not a Tool, AI is a Workflow
- 6:43 The AI Design Stack
- 7:32 Claude vs Codex
- 9:16 AI Design Setup (Figma Skills & Figma MCP)
- 16:31 Google Stitch
- 21:27 Where I Use Stitch In My Workflow
- 23:29 Claude Design
- 27:01 Claude Design Output
- 28:35 When to Use Google Stitch With Claude Design
- 31:44 Claude Design Limitation
- 32:35 Claude and Codex Comparison Experiment
- 38:25 Best Use of AI Tokens
- 40:45 Design Systems and AI
- 42:04 Claude Design Design System Limitations
- 45:32 Building Design Tokens with AI
- 49:01 Figma Variables and AI
- 52:26 Design System Components and AI
- 58:32 Training AI On Our Design System
- 61:34 Design System Claude Skills
- 68:04 Components and Claude Skills
- 73:48 Adding Claude Skills to Codex
- 75:09 AI and Design Research with Mobbin
- 77:24 Building Production UI’s with Claude Code
- 82:43 Building UI’s with Chat GPT
- 84:26 Refining Our AI Design
- 85:13 Pushing to Figma and Final Result
- 87:08 Outro