Design-to-code moves faster when your agent has the right context at each step. I’ll show how the Model Context Protocol (MCP) lets you stitch together servers so the agent can pull structured design signals from Figma – variables, components, design notes, and Code Connect mappings – and pair them with your editor/project rules to make grounded implementation choices. From there, adding a few more servers for documentation, runtime checks in a real browser, and version control gives the agent richer, verifiable inputs instead of guesswork. The payoff: fewer “rogue” detours because decisions are anchored to real sources and less context-switching since developers stay in the IDE while the agent gathers what it needs. It’s a practical path from design intent to production-ready changes – powered by composable context rather than one-off integrations.
This talk has been presented at JSNation US 2025, check out the latest edition of this JavaScript Conference.