Lime Song — Product Designer

Context

I was designing a chat builder modal for advertisers, a UI for setting up conversation automations. Multi-step flow, interactive states, a lot of edge cases to communicate across XFN. The blocker with AI prototyping is always the design system. Without it, Claude generates generic UI that looks nothing like your product. You spend more time correcting it than you would've in Figma.

Approaches

Before any of this, two fundamentals: 1. Connect the Figma MCP. It lets Claude read directly from your Figma files — components, properties, layout specs. 2. Give Claude the design system file. Point it at your actual design system file. This is what lets Claude understand your component library: what exists, how it's named, what the variants are. Together these give Claude a live reference. That's the foundation everything else builds on. I tried three methods. Here's the honest breakdown.Before any of this, two fundamentals:

1. Connect the Figma MCP. It lets Claude read directly from your Figma files — components, properties, layout specs.
2. Give Claude the design system file. Point it at your actual design system file. This is what lets Claude understand your component library: what exists, how it's named, what the variants are.

Together these give Claude a live reference. That's the foundation everything else builds on. I tried three methods. Here's the honest breakdown.

Method 1: Screenshot

Paste a screenshot of your design system components into Claude, describe what you need, let it infer the rest. This actually works — Claude reads visual layouts well enough to produce something reasonable. Good for a one-off. Not good if you're doing this regularly. Every new prototype starts from zero, and the output drifts depending on screenshot quality and what Claude decides to infer.

Method 2: Figma Make template code + connect a design system MCP

This is the one worth the setup time. Figma Make generates a code scaffold from your design. Ejecting it gives you the underlying file that Claude can read and work from. Connect a design system MCP on top of that, and Claude can query your components directly during generation: specs, variants, props. The real advantage: you save the template once and reuse it every time. Each new prototype starts from the same accurate foundation. The screenshot method can't do that.This is the one worth the setup time. Figma Make generates a code scaffold from your design. Ejecting it gives you the underlying file that Claude can read and work from. Connect a design system MCP on top of that, and Claude can query your components directly during generation: specs, variants, props.

The real advantage: you save the template once and reuse it every time. Each new prototype starts from the same accurate foundation. The screenshot method can't do that.

Method 3: Cursor

Also tried it. Solid tool, but optimized for a different context — the setup overhead wasn't worth it for web UI prototyping. Dropped it early.

Impact

The impact on reviews was immediate. Engineers could inspect real component structure. Turnaround with leadership, usually the slowest part, got noticeably shorter. The bigger payoff was longer-term: it set up a reusable foundation. The ejected Figma Make template and connected design system MCP became context I could carry into every future prototype instead of rebuilding from scratch each time. Each new project starts with Claude already knowing the component library, the naming conventions, and the patterns it should follow. The setup compounds. It also sharpened my own thinking. Building interactively forces you to specify states you'd leave ambiguous in Figma. I caught interaction problems during prototyping that would've surfaced later in handoff.The impact on reviews was immediate. Engineers could inspect real component structure. Turnaround with leadership, usually the slowest part, got noticeably shorter.

The bigger payoff was longer-term: it set up a reusable foundation. The ejected Figma Make template and connected design system MCP became context I could carry into every future prototype instead of rebuilding from scratch each time. Each new project starts with Claude already knowing the component library, the naming conventions, and the patterns it should follow. The setup compounds.

It also sharpened my own thinking. Building interactively forces you to specify states you'd leave ambiguous in Figma. I caught interaction problems during prototyping that would've surfaced later in handoff.

ContextContext

ApproachesApproaches

Method 1: ScreenshotMethod 1: Screenshot

Method 2: Figma Make template code + connect a design system MCPMethod 2: Figma Make template code + connect a design system MCP