Case Study
Design to Dev Pipeline
An AI-assisted six-stage pipeline that takes a Figma component directly to production-ready code — with automated artifacts, test coverage, and a human approval gate at every stage.
Overview
Built for an enterprise Participant Experience team as part of a design system rollout, the pipeline collapses six handoff steps into one orchestrated flow — keeping design intent intact from Figma through Angular, Drupal, and end-to-end QA.
The problem
Design and engineering operated on separate workflows with no shared language. A designer would update a color or component in Figma, document it in Confluence, and a developer would eventually find it, copy the value, and update SCSS manually — with no guarantee of accuracy or timeliness. The result was inconsistent UI, accessibility regressions, and slow delivery. Token updates that should take minutes were taking 30–60 minutes, and Figma, Confluence, and the codebase routinely fell out of sync.
How it works
The pipeline is triggered with a Figma URL and runs six stages in sequence, each producing verified artifacts before the next stage begins.
Stage 1
Design contract
The AI agent reads the Figma component via MCP (Model Context Protocol) and extracts all tokens, states, variants, and interactions into a normalized implementation contract — the single document that governs every subsequent stage.
Stage 2
HTML prototype
Generates a browser-testable static prototype with full JavaScript interactions and visual state coverage, ready for stakeholder review.
Stage 3
UAT gate
Validates the prototype against the acceptance criteria from Stage 1. A deliberate human hold point — a UX director or design lead reviews the prototype before a single line of Angular or Drupal code is written. Design intent stays in control.
Stage 4
Angular component
Builds a production Angular 18 component with unit tests, matching the verified design contract exactly.
Stage 5
Drupal Twig
Generates a Drupal 11 Twig template with test coverage for the live CMS.
Stage 6
Final QA
Runs end-to-end Playwright tests across all three build targets and publishes a summary report with screenshots.
Projects
Choice Card
The first end-to-end pipeline run on a production component used in retirement planning onboarding to present fund selection options. The pipeline produced a full design contract, a working HTML prototype with all interactive states, and an Angular component covering four variants: single-response, multiple-response, response card, and mobile layout.
Design token migration
Systematic replacement of hardcoded hex values and legacy SCSS variables across the Participant Experience app with 90 semantic CSS custom properties. Covered color (54 tokens), typography (27), spacing (6), and border radius (3). Achieved 96.3% Figma-to-CSS parity, verified by automated diff against the live Drupal theme.
Design pipeline dashboard
A companion web app providing a live operational view of the pipeline. Connected to Jira (sprint board, 23 active issues), Wrike (design task tracking), geographic health monitoring, and design token state. Built for design leads and engineering managers to track progress without needing direct access to any individual tool.
Outcome
Token update time dropped from 30–60 minutes to around 5. Figma became the single source of truth — design decisions now flow directly to code with no Confluence intermediary. The acceptance criteria written in Stage 1 are the exact criteria QA tests against in Stage 6: one artifact, one truth, end-to-end. The framework is reusable across the full component library.
Gallery
Pipeline outputs
Click any screen to open the full-size view. Use the arrow keys to step through.