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. Even the first automated pipeline left a real gap: a single AI generation pass reproduced designs at only ~50–70%, and nothing machine-checked the build against the design, so the difference surfaced late in manual QA, or not at all.
The approach
- Conceived and architected the first 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), with 7 reusable prompt rule-sets (~180 KB) so each new page reuses the system rather than starting from scratch.
- Evolved it into a closed-loop, self-verifying agent driven by one command — `/locofy <jira-ticket>`: the Atlassian (Jira) MCP reads the ticket, the Locofy MCP pulls the live Figma design and exact assets, and a single AI runtime implements the page under an 'architect' rule (componentised, tokenised, responsive).
- Added the closing step the first pipeline lacked: the agent renders its own output with Playwright and compares it to the design — visual plus exact-token diff (colour, spacing, type, radii) — then repairs and re-renders in a bounded loop, emitting a residual-diff report before opening a PR. Humans stay only at creative design and final approval.
- Moved execution to the local dev machine via MCP (the Locofy tools are workspace-bound), skipping the Locofy→GitHub export and the CI pass entirely.
The outcome
- First pipeline: processed 23 design hand-offs across 51 automated runs spanning login, homepage, and reset-password modules in ~6 weeks — a repeatable ~8-minute automated pass per page.
- Closed-loop agent: validated end-to-end on a real marketing homepage — Jira ticket to self-verified PR with assets wired and responsive layouts, no human glue in between.
- Drove design fidelity from an unverified ~50–70% toward exact on measurable properties, replacing late manual QA with an automated, per-breakpoint verify-and-repair loop.
- Packaged the whole flow (architect rule + `/locofy` command + MCP config) as a cloneable template, so setup cost amortises to ~0 per new project.
Honest note: The first pipeline's run-count and ~8-min/page are measured from the repo. The closed-loop self-verifying agent is validated end-to-end on one real page; the ~80% time reduction (~2–3 dev-hours/page vs ~12–16 hand-coded) is an estimate pending multi-page calibration. Output is capped by what the Figma/Locofy conversion provides, and perceptual 'pixel-perfection' is asymptotic — the honest target is 'no visible difference.'