Figma

Mapping the Figma-to-Code AI Pipeline

This article (published 2026-07-03) explains the practical layers and limits of current AI-driven design-to-code workflows. It defines a four-layer stack—(1) a Model Context Protocol (MCP) “pipe” that lets an LLM read design files, (2) project markdown files that capture rules and memory, (3) reusable "skills" (small recipes/scripts) that enforce repeatable tasks, and (4) a mapping layer (e.g., Code Connect) that wires Figma components to real code components in a codebase. The author highlights where each layer helps and what gaps remain (e.g., MCP reads design structure but not existing code components; markdown/skills can drift; mapping requires engineering and ongoing maintenance). The article gives guidance on which layers teams of different sizes should adopt and stresses that AI shortens the distance from design to code but does not replace product engineering or design judgment.

Skill engineering vs one-shot AI design

Paul Bakaus, creator of Impeccable, argues for 'skill engineering'—a discipline that encodes design vocabulary and domain knowledge so AI agents can be steered iteratively rather than producing one-shot redesigns. Impeccable began as an extension of Anthropic’s frontend design skill and evolved into an open-source system that maps designer adjectives (e.g., “bolder”, “quieter”) to operational concepts like hierarchy and typography. Bakaus stresses human-in-the-loop control, warns against fully automated 'auto' modes, and describes routing and mixture-of-experts patterns inside skills to improve efficiency and cross-harness compatibility. He sees designers moving closer to code and products toward hybrid workflows where AI produces an initial 80% and humans retain the final 20% of judgment and taste.

Trust you can verify: Figma is now ISO 42001 certified

Saying you use AI responsibly is easy, but proving it to an accredited auditor is harder. We decided that was a standard worth meeting.