An hour-long firsthand account from a Shopify designer on integrating Claude Code into his day-to-day workflow. Product design at that scale means navigating design systems, production codebases, and cross-functional handoffs, which is a more realistic stress test for agentic coding tools than a clean demo. The shift from ​“designer who writes prompts” to ​“designer who ships code” is happening faster than most predicted.

Martin Rariga, Founding Product Designer at Equals, breaks down a practical AI-powered design engineering stack: Claude Code for big refactors and complex builds, Cursor for precise edits, and Figma (via MCP) to reference the new design direction while restyling.

Ridd walks through a workflow where Paper acts as a visual canvas that Claude can ​“proactively” explore and prototype in. The interesting bit is his framing of Claude Code as a coworker and Paper as a shared whiteboard. That’s exactly what I wanted when last week I commented on missing agents in Figma after spending more time in Cursor.

Jenny Wen leads design for Claude at Anthropic, and in the past, she was Director of Design at Figma, where she led the teams behind FigJam and Slides. At Lenny’s podcast, she lays out how AI is collapsing the classic ​“research → mock → iterate” workflow into two main jobs for designers: supporting rapid implementation alongside engineers, and setting shorter 3–6 month product visions that keep a swarm of agents and builders pointed in a coherent direction. Jenny describes the day-to-day at Anthropic as equal parts surfing internal prototypes, pairing with engineers, and doing last-mile implementation herself. She still sees Figma as critical for exploring many directions and fine visual decisions, but treats Claude as her primary stack for long-running tasks and front-end polish.

“Bringing Claude Code workflows directly into Figma lets developers, designers, and even hobbyists capture a real, functioning UI from a browser — in production, staging, or localhost — and convert it into editable frames on the Figma canvas. Code is powerful for converging — running a build, clicking a path, and arriving at one state at a time. The canvas is powerful for diverging — laying out the full experience, seeing the branches, and shaping direction collectively. Going from code to canvas helps teams move fluidly, so work can narrow when it needs to and open up when it’s time to collaborate.”

My guess is it’s based on the html.to.design technology that Figma acquired last year, which is a huge time saver and an essential part of my toolkit. I haven’t tested Claude Code to Figma yet, but the result in demos looks very similar to what I usually get from the plugin. Which makes me wonder why they limited it to Claude Code instead of making something like a universal ​“Send to Figma” browser extension?

On a recent livestream, Product Designer Megan Bednarczyk and Software Engineer Nile Phillips from Figma demonstrated how PDE teams can use AI-powered diagramming to tackle complex problems and visualize the bigger picture.

With the Figma MCP app in Claude, designers, developers, and product managers can now create AI-generated FigJam diagrams.