Building a component from a screenshot is a guessing game about spacing, color, and the states you cannot see. Pulling the design through an MCP connection instead gives the exact tokens, the real pixel values, and the variants that are not visible in a single frame. The workflow turns "looks about right" into "matches the source".

Read context, do not eyeball

The MCP server exposes the design's actual data, not an image of it. Instead of estimating a gap at "around 16px", I get the real value, the named color token, and the font definition straight from the file.

// via the design MCP
const ctx = await getDesignContext(nodeId);
// ctx.spacing, ctx.color tokens, ctx.typography, ctx.variants

That difference compounds. A screenshot hides the disabled state, the hover treatment, and the focus ring. The structured context lists every variant, so the component I build is complete on the first pass rather than discovered through review comments.

Map tokens to your system

The design's tokens rarely match your code's names exactly, so the one-time job is a mapping. Figma's primary/500 maps to your --acc, its spacing scale maps to your Tailwind steps. Once that table exists, every pull translates cleanly into the system you already have.

const tokenMap = {
  "primary/500": "var(--acc)",
  "surface/raised": "var(--bg-2)",
  "space/4": "1rem",
};

Build to the variants, not the frame

Because the context lists all states, the component is structured around them from the start. A button comes back with default, hover, disabled, and loading, so the props are obvious and nothing is bolted on later when someone notices the loading state was never built.

Keep a human in the loop

The workflow gets you a faithful first version, not a finished one. Pixel-faithful is not the same as correct, because the design might miss an edge case your real data hits, like a name long enough to wrap or a number wide enough to overflow. I treat the generated component as a strong draft and still test it against actual content.

Where it pays off most

The biggest win is on a design system with many small components. Pulling each one through MCP keeps them consistent with the source and with each other, instead of fifteen slightly different interpretations of the same spacing scale. The connection does the tedious, error-prone measuring, and that frees the attention for the parts that actually need judgment, the interaction details and the awkward real-world content the static frame never showed.