How to Design and Code with Claude Code and Figma MCP in 50 Min | Felix Lee

By Peter Yang

Categories: Product, Startup

Summary

Designer Felix Lee built production apps in 3.5 months using Claude Code and Figma MCP, proving designers can ship full-stack products without traditional engineers. He converted static designs into interactive components by feeding Claude screenshots and CSV data, automating everything from dark mode generation to real-time globe visualizations.

Key Takeaways

  1. Claude Code produces significantly higher quality output than competing coding agents; start with your personal website as a low-stakes experimental project to learn the workflow.
  2. Use Claude's vision capabilities to automate design variations: upload a light mode screenshot and ask Claude to convert it to dark mode instead of manually creating two versions.
  3. Feed Claude structured data (CSV exports) alongside design screenshots to generate functional components: export data from your backend and ask Claude to design interactive visualizations like the ADP list globe.
  4. Figma MCP integration automatically populates vector properties (colors, dimensions) so outputs become editable components, not screenshots—enabling designers to iterate without re-coding.
  5. Designers comfortable with no-code tools face lower friction adopting Claude Code than learning traditional programming; the 3.5-month timeline suggests rapid skill transfer from design to full-stack development.

Topics

Transcript Excerpt

A lot of designers first of all are not freaked out enough. They are really actually not on clot code or cursor today. Majority of them are still on Figma. Code produces a significantly higher quality output than compared to other coding agents that I've tried from a haste perspective. Cod code just wins it all. If you you do use the MCP, it actually automatically fills up all of these things. So that's the advantage. All of these are like vectors, right? So it's like SVGs. You can edit the colo...