Design in Claude Code Like This

Learn how to make AI designs look human using a proven workflow with prompting, design systems, and tools like Figma, Claude AI, and Claude Code.

This tutorial covers AI UI design, UX workflows, prompt engineering, and how to generate clean, production-ready interfaces fast with Claude Skills & Figma Skills.

🔗 KEY LINKS
📣 JOIN THE COMMUNITY: https://uicollective.co/
❎ Follow me on X: https://x.com/KirkMDesign
📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective
Figma Skills: https://www.figma.com/community/skills

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/

🔗 DESIGN SYSTEM VIDEOS TO WATCH
Build a Design System: https://youtu.be/opTANvl9G1g
Complex Design System & Figma Variable Setup: https://youtu.be/L-tpK7Eeuow
AI & Design Systems: https://youtu.be/XfezMs8B-O8

🔗 MORE LINKS
Let us build or fix your design system: https://designsystemlabs.co/
kirkland@uicollective.co

0:00 An Introduction
0:54 Design Token Prep Inside Figma
2:13 Connecting Figma MCP
2:42 Building Claude Skill
4:39 Training AI on Components
7:47 Training AI on Designs We Like
10:12 Connecting Figma Skills
11:28 Generating Our AI Design
13:17 Reviewing Generated Output
14:20 Reviewing Design System Drift
15:31 Outro