Monday.com built an AI-powered system to convert Figma designs into production-ready code that adheres to their design system. Instead of directly generating code, they created a design-system MCP (Model Context Protocol) that exposes structured knowledge about components, tokens, and accessibility rules. An agentic workflow built with LangGraph breaks down design-to-code into 11 focused steps, analyzing layout, resolving tokens, identifying components, and planning implementation. The agent returns structured context rather than code, allowing different teams to generate code in their own style while ensuring design system compliance, accessibility, and proper component usage from the start.
Table of contents
Why Asking an LLM to “Just Write the Code” Didn’t WorkMaking the Design System Understandable to MachinesWhy We Needed an Agentic WorkflowConnecting the Workflow to the ChatWhat the Agent Actually DidFrom Figma Link to ProductionWhat ChangedOrchestration, Not Magic5 Comments
Sort: