Design with Claude Code: The Designer’s Guide
Learn how to design with Claude Code from Anthropic in real product workflows with Figma MCP.
I cover what Claude Code is, how designers can use it, and how to turn it into a serious productivity multiplier for UX exploration, documentation, prototyping, and shipping faster.
If you’re a UI, UX, or Product Designer looking to build better products, work smarter with AI, and stay competitive in a rapidly changing industry, this guide is for you.
🔗 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/
🔗 VIDEOS TO WATCH
Build a Design System: https://youtu.be/opTANvl9G1g
Complex Design System 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/
📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective
kirkland@uicollective.co
VIDEO LINKS & MORE:
Installation: https://code.claude.com/docs/en/overview#terminal
For installation: /plugin install figma@claude-plugins-official
MCP documentation: https://code.claude.com/docs/en/mcp
https://www.pencil.dev/
0:00 An Introduction
0:53 Introduction to Claude Code
3:23 Claude Code & Opus 4.6
4:26 Setting Up Claude Code
6:07 Connecting Figma MCP
7:35 Building a Figma Design with Claude Code
11:59 Claude Code Desktop App
13:32 Pencil App Demo
14:31 Building a Design with Claude Code & Pencil
