Hey there! This is an ⭐️ exclusive open edition of AI-First Designer ⭐️, to help designers transition into successful AI-First builders. Members get access to proven strategies, frameworks, and playbooks.
For more: 🔥 Apply to learn Vibe-Coding for Designers Course 🔥 | Claim your AI Design Guide for free | Get free 1:1 mentorship
If you’ve been reading this newsletter, you know I’m obsessed with what happens when designers start vibe-coding.
Now I’m taking it to Instagram 🎉 → short-form breakdowns of everything I’m building, the prompts behind it, what worked, and what I’d do differently.
Think of it as the visual companion to this newsletter: faster, messier, and way more behind-the-scenes. Whether you’re a designer dipping your toes into AI-assisted coding or a non-coder who wants to actually ship things, this is your corner of the internet now.
On to today’s guide →
Friends,
Your design to production workflow is delaying launches by 3x.
Everything you know about handing off to developers is wrong, because Figma MCP makes shipping 5x faster now.
After 100 days of vibe-coding as a designer, I found this to be the smoothest workflow for completing designs 5x faster (and with higher quality).
The new way: You ship it yourself! (bookmark this if you haven’t read it yet)
Felix Lee@felixleezd
Designers, this is the highest leverage skill you can learn this year. The future of design is here. Don't fall behind.
4:04 PM · Feb 8, 2026 · 231K Views
15 Replies · 69 Reposts · 1.18K Likes
Now, when you use Figma MCP, Claude Code can read your actual Figma -> every color, every spacing, component variant.
Literally no more design-to-dev translation loss.
I built this game in a one-shot using Figma MCP <> Claude Code. It’s insanely mind-blowing.
Felix Lee@felixleezd
Day 32 of vibe-coding as a designer I built a full Tetris game 👾 from a FigJam flowchart using Figma MCP - one shot! 🤯 Try it yourself.
5:00 PM · Jan 29, 2026 · 6.23K Views
7 Replies · 4 Reposts · 71 Likes
And a diagram to show you the 2026 workflow:
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ BEFORE (Handoff Hell) AFTER (Vibe Coding) │
│ ──────────────────── ─────────────────── │
│ │
│ Design Design │
│ ↓ ↓ │
│ Spec doc Claude reads Figma directly │
│ ↓ ↓ │
│ Dev interprets You prompt: "Build this" │
│ ↓ ↓ │
│ Review Production code │
│ ↓ ↓ │
│ Feedback loop ×10 Ship 🚀 │
│ ↓ │
│ "Close enough" Timeline: Minutes │
│ │
│ Timeline: Weeks │
│ │
└─────────────────────────────────────────────────────────────────────────┘No coding background required.
Here, I wrote a 101 guide on everything you need to know about working with Figma MCP and Claude Code.
Let’s set it up.
Step 1: Get your Figma Token
Figma.com → Click profile (top-left) → Settings → Security
→ Personal access tokens → Generate new token → Copy immediatelyStep 2: Connect to Claude Code
claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxxStep 3: Verify connection
In Claude Code, type: /mcp
You should see: figma ✓ connected┌─────────────────────────────────────────────────────────────────────────┐
│ YOUR FIGMA FILE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ WHAT CLAUDE CAN READ │ │
│ ├─────────────────────────────────────────────────────────────────┤ │
│ │ ✓ Layer names & hierarchy ✓ Auto Layout settings │ │
│ │ ✓ Colors (fills, strokes) ✓ Component variants │ │
│ │ ✓ Typography styles ✓ Spacing & padding │ │
│ │ ✓ Effects (shadows, blur) ✓ Constraints │ │
│ │ ✓ Design tokens/variables ✓ Text content │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ WHAT CLAUDE CANNOT READ │ │
│ ├─────────────────────────────────────────────────────────────────┤ │
│ │ ✗ Actual image pixels ✗ Prototype interactions │ │
│ │ ✗ Comments & feedback ✗ Version history │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘Phase 1: Analyze your full design 🧪
Read my Figma design at:
https://www.figma.com/design/[YOUR-FILE-ID]/[FILE-NAME]
Give me:
1. Overview of the page structure
2. List of main sections
3. Color palette being used
4. Typography styles
5. Any components you can identifyPhase 2: Extract design tokens 🪙
From the Figma file, extract and create:
1. A Tailwind config with:
- Custom colors matching the design
- Font families and sizes
- Spacing scale based on what you see
2. CSS variables file as backup
Format the colors as semantic names (primary, secondary, accent, neutral).Phase 3: Generate components ⚡️
Look at the [COMPONENT NAME] in my Figma file.
Generate a React component that:
- Matches the exact styling (colors, spacing, typography)
- Uses Tailwind CSS
- Supports all variants I've defined (if any)
- Is fully typed with TypeScript
- Includes hover/focus states based on the designPhase 4: Build full sections 🖥️
Generate the [SECTION NAME] section from my Figma design.
Requirements:
- Match the design exactly
- Make it responsive:
- Mobile (<768px): [describe layout]
- Desktop (≥768px): [describe layout]
- Use semantic HTML (section, nav, main, article)
- Include all text content from the design┌─────────────────────────────────────────────────────────────────────────┐
│ MCP IN ACTION │
└───────────────────────────────┬─────────────────────────────────────────┘
│
┌───────────────────────┼───────────────────────┐
▼ ▼ ▼
┌───────────────────┐ ┌───────────────────┐ ┌───────────────────┐
│ FIGMA DESIGN │ │ FIGJAM │ │ FIGMA MAKE │
│ ───────────── │ │ ───────────── │ │ ───────────── │
│ │ │ │ │ │
│ Design files │ │ Wireframes & │ │ AI-generated │
│ → Production │ │ user flows → │ │ UI → Inject │
│ code │ │ Working app │ │ into codebase │
│ │ │ │ │ │
│ ⭐ MOST USED │ │ 🎯 POWERFUL │ │ ⚡ FASTEST │
└───────────────────┘ └───────────────────┘ └───────────────────┘
│ │ │
▼ ▼ ▼
┌───────────────────┐ ┌───────────────────┐ ┌───────────────────┐
│ "Build my landing │ │ "Read my user │ │ "Take this Make │
│ page from this │ │ flow and create │ │ design and add it │
│ Figma design" │ │ the Next.js │ │ to my existing │
│ │ │ route structure" │ │ portfolio app" │
└───────────────────┘ └───────────────────┘ └───────────────────┘Figma MCP (FigJam) x Claude Code - from my AI First Designer School Tutorial
Workflow A: Design System → Full Site
STEP 1 STEP 2 STEP 3
───────────────────────────────────────────────────────────────────
"Read my design "Generate base "Build homepage
system file and components: Button, using these
extract all tokens" Card, Input, Badge" components"
│ │ │
└────────────────────────┴────────────────────────┘
│
▼
STEP 4: Add pages one by one
"Now build the pricing page"
"Now build the about page"Workflow B: speedrun a single page
"Read [URL], extract tokens, generate full page with all sections,
make it responsive, use Next.js + Tailwind. Go."
┌──────────────────────────────────────────────────────────┐
│ ⚠️ Works best when your Figma file is well-organized │
│ with proper naming and Auto Layout throughout │
└──────────────────────────────────────────────────────────┘Workflow C: component first (for matured designers)
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ Tokens │ → │ Atoms │ → │ Molecules│ → │ Sections│ → │ Page │
│ (colors,│ │ (button,│ │ (card, │ │ (hero, │ │ (full │
│ fonts) │ │ input) │ │ nav) │ │ footer) │ │ page) │
└─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘┌─────────────────────────────────────────────────────────────────────────┐
│ NAMING │
│ [ ] Layers use semantic names hero-section ✓ Frame 427 ✗ │
│ [ ] Components are clearly named Button/Primary ✓ Component 1 ✗ │
│ [ ] Variants have descriptive props size=lg ✓ variant=2 ✗ │
├─────────────────────────────────────────────────────────────────────────┤
│ STRUCTURE │
│ [ ] Auto Layout on ALL containers Flexbox ready ✓ Absolute mess ✗│
│ [ ] Flat hierarchy (minimal nesting) Clean DOM ✓ Div soup ✗ │
│ [ ] Sections clearly separated Easy parsing ✓ Chaos ✗ │
├─────────────────────────────────────────────────────────────────────────┤
│ TOKENS │
│ [ ] Colors defined as styles Extractable ✓ Hardcoded ✗ │
│ [ ] Typography as text styles Consistent ✓ Random ✗ │
│ [ ] Spacing is consistent Systematic ✓ Arbitrary ✗ │
└─────────────────────────────────────────────────────────────────────────┘🔖 (Recommended) You definitely want to bookmark this.
Some final pro-tips on using Figma MCP
1. NAME LAYERS LIKE CSS CLASSES
nav-links ✓ Group 5 ✗
2. WORK SECTION BY SECTION
Hero → Features → Testimonials → Footer
(Don't ask for entire page at once)
3. REFERENCE FIGMA DIRECTLY
"Look at the card in the Features section"
(Not: "Create a card with rounded corners")
4. EXPORT ASSETS FIRST
Images need manual export → /public folder
Then tell Claude: "Hero image is at /public/hero.png"
5. SHARE YOUR STACK UPFRONT
"I'm using Next.js 14 + Tailwind + TypeScript"
(Claude will match your conventions)Quick start reference:
I want to convert my Figma design to code.
Figma URL: [PASTE YOUR URL]
Stack: Next.js 14 + Tailwind CSS + TypeScript
Please:
1. First, analyze the design and tell me what you see
2. Extract the color palette and create a Tailwind config
3. Then I'll tell you which section to build first
Let's go step by step.And you’re all ready to go. 😉🔥 Thank you for reading!
This article is based on my full Vibe-Coding course (if you’d like to learn more and also support this). It includes:
Installation walkthroughs (Mac + Windows)
Claude Code + Cursor orientation
First project tutorial
GitHub + version control
Vercel deployment
Custom domains
Supabase + OpenAI integration
NEW chapters on AI agents and Figma MCP!
🏛️ Apply to join our community (AI-first designer school) as a founding member (full courses available): https://adplist.org/vibe-code-designers
If you find this guide helpful, ❤️ Like this to come back again, and 🔄 repost or forward it and share your thoughts. Because more designers can learn to build.
See you next week!
- Felix
let’s connect on LinkedIn!
Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.