Design in Claude Code Like This

Description

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