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:    • Build a Design System - Full Course   Complex Design System Setup:    • Design System & Figma Variable Set Up - Fu...   AI & Design Systems:    • AI + Design Systems in 2026: The Workflow ...   🔗 MORE LINKS Let us build or fix your design system: https://designsystemlabs.co/ 📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective [email protected] VIDEO LINKS & MORE: Installation: https://code.claude.com/docs/en/overv... 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