Live insurance platform

Design-to-Code Automation Pipeline

Turned Figma designs into review-ready Pull Requests automatically — no manual front-end hand-coding.

AI AutomationCI/CDFigmaReactWorkflow Architecture
51
automated design-to-PR runs in ~6 weeks
~8 min
automated pass per page
23
design hand-offs across 3 core modules

The problem

Front-end delivery on a live platform depended on repetitive manual hand-coding from designer output — slow, inconsistent, and costly to repeat for every new page.

The approach

  • Conceived and architected an automated Figma → Locofy → GitHub → AI → Pull Request workflow: a 4-stage CI flow (push detection → auto-PR with backup branch → AI code generation → preview deploy).
  • Defined 7 reusable prompt rule-sets (~180 KB), including dedicated QA passes, so each new page reuses the system rather than starting from scratch — preserving existing business logic and coding standards.
  • Standardised the design-to-development hand-off into a repeatable, review-ready output.

The outcome

  • Processed 23 design hand-offs across 51 automated runs spanning login, homepage, and reset-password modules in ~6 weeks.
  • Replaced manual front-end hand-coding with a repeatable ~8-minute automated pass per page, cutting repetitive effort and cost.
  • Designed a next-generation evolution: a fully autonomous, self-verifying Figma→test-ready pipeline where a Jira trigger spawns an agent that authors the spec, generates the UI, and self-verifies against the Figma source in a visual-diff repair loop.

Honest note: Run-count and ~8-min/page are measured from the repo. The next-generation autonomous pipeline is architected/designed (targeting a first-pass fidelity lift from ~60% toward ~90%+) — framed as projected until built and measured.