DEVOURED
Building design system components with agent teams
Kaelig Deloumeau-Prigent built an eight-agent pipeline that transforms Figma files into production-grade React components, complete with accessibility and interaction testing.
What: Kaelig Deloumeau-Prigent designed a three-phase (Understand, Build, Verify) agentic pipeline for Intuit. It handles complex UI components like menus by using artifact-based handoffs and human-in-the-loop gates. It uses the Model Context Protocol (MCP) to integrate directly with design tokens and documentation, replacing manual prompts with a structured team of specialized agents.
Why it matters: The project demonstrates that high-quality, production-ready code generation is only achievable when human judgment is systematically integrated at specific 'gates' rather than attempting end-to-end full automation.
Takeaway: If you are building AI-assisted component pipelines, use this three-phase model: 'Understand' (spec extraction), 'Build' (coding), and 'Verify' (regression testing), and prioritize human gates for decisions like motion specs and accessibility tradeoffs.
Deep dive
- Implemented an eight-agent pipeline: Design Analyst, Library Researcher, Component Architect, Code Writer, Accessibility Auditor, Story Author, Visual Reviewer, and Quality Gate.
- Used artifact-based communication (Markdown files) to pass state between isolated agent contexts.
- Integrated Figma Console MCP and internal design system tools to resolve tokens.
- Implemented 'vibe RLHF'—an iterative process where human feedback is encoded as permanent rules into system prompts.
- Adopted 'diminishing returns' logic to prevent agents from endlessly tweaking visual artifacts.
- Structured the pipeline to treat human oversight as a primary design requirement, not an automation failure.
Decoder
- Model Context Protocol (MCP): An open standard that allows AI models to connect to external data sources, tools, and codebases consistently.
- Roving tabIndex: An accessibility pattern where only the currently active item in a list is in the tab order, allowing arrow-key navigation between elements.
- Vibe-coding: Developing software by interacting with an LLM in a conversational manner without strict, pre-defined architectural guardrails.
- Design Tokens: Design decisions (colors, spacing, typography) stored as raw data that can be used across multiple design and development platforms.
Original article
Full article content is not available for inline reading.
Explore all 58 articles in today's digest
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi