UI development often seems straightforward, but the reality is more complex. The challenge lies not in the actual coding but in the preparation: choosing components, setting props, ensuring accessibility, and applying design tokens. This process usually involves extensive documentation and design reviews, leading to a slow and error-prone workflow. The article explains how Monday.com tackled this issue using AI to convert Figma designs into production code, focusing on creating a structured approach rather than relying on naive AI code generation. Initial attempts at using AI to generate code directly from Figma links didn't yield satisfactory results. The generated output often violated design system principles, using hard-coded colors and improper typography. The AI lacked the necessary context about the design system, leading to messy code that required significant refactoring. Recognizing this flaw, the team developed the Model Context Protocol (MCP), which structures design system knowledge in a way that machines can understand, detailing components, props, and accessibility guidelines derived from real sources. To enhance the workflow, they built an agentic architecture using LangGraph. This architecture breaks down the design-to-code process into a series of focused steps, allowing the agent to generate a structured context rather than code. The agent analyzes design data, identifies components, resolves CSS tokens, and compiles a detailed implementation plan. Importantly, the output is context, not code. This maintains code ownership within teams and ensures that each codebase adheres to its specific standards. Ultimately, the approach streamlines the development process while ensuring compliance with design system rules.