Deliver·Design-to-Code·Automation·Emerging·DEL-052

Design-to-Code

Value hypothesis

Generates code that uses the design system reliably enough to enter the production pipeline, compressing cycle time from approved design to shipped code.

Quality · Velocity

AI generates production-quality code from prototypes or design specifications. The workflow is constrained by the team's design system and by guardrails established by development teams to use the correct components, respect token hierarchies, and follows established code patterns.

Risks in application

Shallow Solutions

Generated code may use correct component but misuse APIs, violate composition rules, or produce layouts that work in isolation but break across the broader context. Output that passes visual inspection can fail integration testing.

Constraint Blindness

Production code generated from design specifications may not account for state management, data binding, performance constraints, or cross-platform behaviour that design context cannot represent; code that looks production-ready in preview may require substantial rework for production deployment.

Expertise that differentiates

Design System Logic

For both designers and developers, requires understanding component architecture deeply enough to constrain AI to produce correct output. Coniderations include naming conventions for how design and code repositories are mirrored, how tokens cascade, and what hierarchy rules the system enforces.

Technical Feasibility

Evaluating whether generated code will function correctly in the target stack, build pipeline, and runtime environment, not just render correctly in preview.

AI Fluency that assures

Deployment Diligence

The output must be accurate enough to enter the build pipeline without full manual reconstruction.

Detecting and managing against danger zones where AI tends to fail without explicit guidance.

Related

Possible Indicators

First-pass accuracy

Proportion of generated code conforming to design system constraints without manual correction, relative to non-system-aware generation baseline

Design-to-build cycle time

Elapsed time from approved design to code entering the build pipeline

Sources

Wen (2025). Don't Trust the Design Process. Anthropic.

Healey and Hall (2025). Turning Handoffs into Handshakes: Integrating Design Systems for AI Prototyping at Scale. Atlassian Work Life.

Huba (2025). Dear LLM, here's how my design system works. UX Collective.

Irawati et al. (2025). Advancing Generative AI Collaboration in Design-to-Code Workflows: Insights from a CHI Study. ACM MUM 2025.

Tholeus and Djordjevic (2026). A design system that enables humans and machines to co-create production-ready UI - at scale. Into Design Systems AI Conference 2026.

Perez-Cruz (2026). Product Primitives: The New Material of Design System. Into Design Systems AI Conference 2026.

Yan and Giordimaina (2026). The Path to an AI-Enabled Design System. Into Design Systems AI Conference 2026.

Stockman (2026). I'm not an engineer but I ship code: How designers can ship production code and work like an engineer. Into Design Systems AI Conference 2026.

Gardner (2026). Context > Probability: Design systems as AI infrastructure. Into Design Systems AI Conference 2026.

Six (2026). Building real design systems with agents. Into Design Systems AI Conference 2026.

Morales Achiardi (2026). Encoding governance on agentic design systems. Into Design Systems AI Conference 2026.

Sun (2026). Vibe coding with zero drift - from Figma to Storybook to Production. Into Design Systems AI Conference 2026.

Wolosin (2026). Machine-Readable Design Systems for MCP and LLMs. Into Design Systems AI Conference 2026.

Fehre (2026). From falling for markdown to solving real problems with scripts. Into Design Systems AI Conference 2026.

Irawati et al. (2025). Advancing Generative AI Collaboration in Design-to-Code Workflows: Insights from Two Empirical Studies. ACM MUM '25.