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

Lee shows his personal website, which includes a Supabase-backed chat that uses Anthropic’s API and cites sources from a database about him and ADPList. He also built an interactive globe from ADPList booking data and a Growth Analyzer that reviews landing pages and suggests improvements. The globe took about 12 hours; the Growth Analyzer took more than 48 hours over three weeks.

Lee uses Figma MCP to turn an ADPList ebook landing page into an interactive prototype in under 15 minutes. He adds the form’s after-submission state, fixes a missing logo, makes the book image sticky, and connects the download button to a PDF. He says MCP can pull in design assets automatically, reducing the back-and-forth he encountered when working from screenshots.

Lee asks FigJam AI to create a flowchart for a simple Flappy Bird game, then has Claude Code read the board through Figma MCP and build the game. The result includes animations, clouds, settings, and a scoreboard, though Lee notes that the controls need adjustment. He describes Figma as useful for collaboration and refining details, while suggesting AI may reduce the remaining manual polish over time.

Lee has Claude create a flexible UX reviewer skill for assessing screenshots and mockups, with room to add roles such as a visual polisher. He explains that a skill is a text file of instructions and says prompts may need to explicitly name the skill to ensure it is used. The review returns structural issues and priorities for the landing page.

Lee and Yang send a locally running Growth Analyzer into a Figma file, where its elements are editable vectors and components rather than a flat screenshot. Lee notes that the exported layers still need better names. He argues designers should learn coding agents such as Claude Code or Cursor, and connects strong digital craft to the patience and intentionality of industrial design.