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

YouTube

A designer-focused walkthrough of Claude Code for non-technical users. Covers what Claude Code is, how it differs from the Claude chat model, and how to set it up via terminal or desktop app. Demonstrates connecting Figma via MCP for two-way sync, allowing designs to be generated in Claude, pushed to Figma for iteration, and pulled back. Also introduces Pencil (pencil.dev) as a more designer-friendly interface for Claude Code, with built-in UI kits, though it currently lacks Figma export.

Design with Claude Code: The Designer’s Guide