Home / Video

Designing With AI: Claude, Codex, Figma | Full Guide

UI Collective · UI Collective · ·87:43 ·61.9K views
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 [email protected] 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

  1. 0:00 An Introduction
  2. 0:52 AI is Not a Tool, AI is a Workflow
  3. 6:43 The AI Design Stack
  4. 7:32 Claude vs Codex
  5. 9:16 AI Design Setup (Figma Skills & Figma MCP)
  6. 16:31 Google Stitch
  7. 21:27 Where I Use Stitch In My Workflow
  8. 23:29 Claude Design
  9. 27:01 Claude Design Output
  10. 28:35 When to Use Google Stitch With Claude Design
  11. 31:44 Claude Design Limitation
  12. 32:35 Claude and Codex Comparison Experiment
  13. 38:25 Best Use of AI Tokens
  14. 40:45 Design Systems and AI
  15. 42:04 Claude Design Design System Limitations
  16. 45:32 Building Design Tokens with AI
  17. 49:01 Figma Variables and AI
  18. 52:26 Design System Components and AI
  19. 58:32 Training AI On Our Design System
  20. 61:34 Design System Claude Skills
  21. 68:04 Components and Claude Skills
  22. 73:48 Adding Claude Skills to Codex
  23. 75:09 AI and Design Research with Mobbin
  24. 77:24 Building Production UI’s with Claude Code
  25. 82:43 Building UI’s with Chat GPT
  26. 84:26 Refining Our AI Design
  27. 85:13 Pushing to Figma and Final Result
  28. 87:08 Outro
Watch on YouTube Content lives on the original publisher's site.
Curated for the Codex-Design community as a designer resource on designing with OpenAI Codex.