Behind the Craft

Episode: Master Claude Code + Figma MCP for Design in 50 Min

Host: Peter Yang
Guest: Felix Lee (CEO, ADP List)
Date: March 22, 2026

Episode Overview

This episode explores rapid advances in design-to-code workflows using Claude Code and Figma's new MCP (multi-directional code plugin), with expert insights and live demos from Felix Lee. Felix shares practical examples, live workflows, and honest reflections on how AI tools are reshaping design, code, and product creation. The conversation is rich with technical details, implications for designers, evolving roles, and the challenges of replicating taste and craft at the cutting edge.

Key Discussion Points & Insights

1. Claude Code for Designers – A Paradigm Shift

• Speed & Quality:
  Felix stresses Claude Code offers "significantly higher quality output" than other coding agents and is the fastest way he has found to go from idea to interface.

  "From a haste perspective, Claude Code just wins it all." —Felix Lee [00:12, 17:39]

• Low-Code & Direct Iteration:
  Felix no longer starts in Figma for most projects; instead, he jumps straight into coding with Claude Code—leading to faster iteration and fewer dependencies on devs or design tooling.

  "Frankly, I did not start from Figma for any of these projects that you just seen." —Felix Lee [11:36]

• Real-World Demos:

  • Personal Website (felixlee.dev): Iterative experimentation using Claude Code, implementing dark/light modes and an AI chatbot via Anthropic's API. [01:17–03:45]
  • ADP List Globe: Visualization inspired by Shopify's globe, created by feeding CSV data and a reference screenshot to Claude Code, resulting in an interactive live data display. [04:00–06:45]
  • Growth Analyzer App: A more complex app providing landing page feedback, integrating Stripe and authentication. Showcases the integration of multiple models (Claude/Gemini) for tasks like visual hotspot detection. [07:47–10:47]

2. Honest Pain Points: Where AI Still Falters

• Visual Recognition Limitations:
  Models sometimes fail to properly identify UI hotspots in screenshots, requiring experimentation with different LLMs (Gemini Pro cited as best for some tasks). [09:49]
• Taste Replication:
  Replicating unique visual and interaction "taste" remains very difficult, even with advanced AI and skill files.

  "I've been trying to replicate taste... it's just been really hard." —Felix Lee [31:08]

• Getting AI to Use Skills Reliably:
  Felix points out that Claude often ignores "skills" unless explicitly prompted, adding friction to skill-based workflows. [37:58]

3. Figma MCP: Closing the Gap Both Ways

• Figma-to-Code, Code-to-Figma Loop

  • Figma ➔ Code:
    Felix demonstrates generating a working landing page prototype straight from a Figma file in under 15 minutes using Claude Code and Figma MCP.

    "If you do use the MCP, it actually automatically fills up all these things... It really becomes a component inside of Figma." —Felix Lee [22:56, 44:00]

  • Code ➔ Figma (newest feature):
    Sending live code output back to Figma, automatically creating vector-based, editable components—not just screenshots—ready for further collaboration. [42:25–44:42]

• Advantages Over Screenshots:
  MCP imports preserve vector data and assets, making edits/iteration much more powerful than static images.

  "All of these are like vectors, right? So it's like SVGs, you can edit the colors as well. It's not just a screenshot. It really becomes component inside of Figma." —Felix Lee [44:00]

• Automating Stakeholder Workflows:
  Traditional landing page creation would "take at least a day or two" across different teams—compared with 15 min end-to-end via new AI tooling. [13:20–22:06]

Detailed Notable Workflow Demos with Timestamps

Building a Personal Site with Claude Code — [01:17–03:45]

• Dark/Light mode auto-generated
• AI chatbot integrated with Anthropic API and Supabase for RAG

ADP List Globe Dashboard — [04:00–06:45]

• Real-time bookings visualized globally
• No 3D assets: "It just made a globe by itself...the most that I did was provide a screenshot." [06:46]

Growth Analyzer App — [07:47–11:24]

• Uploads landing page images/URLs, returns actionable optimization advice
• Challenges: Visual hotspot accuracy and copy suggestions
• Deep integration with Stripe and authentication flows

Figma MCP Demo: Designing & Iterating a Landing Page — [13:20–22:06]

• Converts Figma design ⇒ production-ready code almost instantly
• “Going to any developer” replaced with single flow from design to live site

Figma MCP New: Code → Figma Canvas — [42:25–44:42]

• Live code deployed back into Figma as editable assets/components
• Noted limitations: currently doesn’t auto-name layers; future needed improvements

Key Quotes and Memorable Moments

• On Current Designer Mindset & Change:

  "A lot of designers, first of all, are not freaked out enough. They are really actually not on code or cursor today. Majority of them are still on Figma." —Felix Lee [45:21], [00:00]

• Role of Figma as AI Evolves:

  "If you're on Claude Code or like me, using Figma would be a little bit of a bottleneck in some sense to what you're doing." —Felix Lee [28:38]

• On Standardization & Loss of Creativity:

  "I feel like design has got to a point where it's so standardized...the creative part of design is almost gone, man." —Peter Yang [47:28]

• On the Craft Gap (Industrial vs. Software Design):

  "You could be a really good software designer, but you would never design for Ferrari because designing hardware and designing for industrial stuff is entirely different ball game." —Felix Lee [47:59]

• On Skill Files & Instruction-based Workflows:

  "Skill is really just a set of instructions. You could write it in your own language to customize it how you want it or how you feel like your workflow should be." —Felix Lee [35:54]

Insights for Designers & Product Leaders

• AI is democratizing, speeding up, and raising the floor for design-to-code workflows—but mastery and “taste” still resist full automation.
• Figma MCP and Claude Code can drastically cut iteration times, and reduce dependencies/managers for “first version” UIs and experiments.
• Big workflow shift: Designers can—and should—learn coding agents and direct terminal/IDE work, rather than relying solely on visual tools like Figma.
• Collaboration use case remains for Figma—especially the last 10% (layer structuring, polish, or matching company design systems).
• True taste/craft, and advanced design intent, remain the current frontier for both LLMs/AI tools and the designers who use them.
• Don’t be complacent: the AI wave is real, and designers not experimenting with these tools risk falling behind.

Useful Timestamps

• Felix’s Background & Entry into Code-First Design: [01:17–03:45]
• ADP List Globe Live Data Demo: [04:00–06:45]
• Growth Analyzer + Landing Page Optimization: [07:47–11:24]
• Skipping Figma, Code-First Advantages: [11:36–13:07]
• Figma MCP Detailed Live Demo: [13:17–22:06]
• Vector vs. Screenshot (Why MCP is Better): [22:11–22:56], [44:00]
• Building Games from Flowcharts via Claude Code: [25:20–28:27]
• Taste Replication—Challenge for AI: [31:08–34:46]
• Skill File/Expert Review Automation in Claude Code: [34:09–36:39]
• Code-to-Figma Canvas Roundtrip: [42:25–44:42]
• Why Most Designers Are Stuck in Old Workflows: [45:21–47:07]
• Final Reflections on Craft, Intent, and Future of Design: [47:28–49:59]

Wrap-up

Felix's demos and candid commentary offer a roadmap for product leaders, designers, and makers grappling with a fast-evolving stack. The message is clear: embrace code-first AI tooling, understand Figma MCP’s strengths/limits, and strive to master taste and intentionality—the last real edge in a world where “the code is basically free at this point.”

Felix can be found at adplist.org or on X (Twitter).