Humanforce · AI · Internal tooling

Built the AI-assisted Figma-to-code bridge that keeps the design system consistent across every prototype

I built an AI-assisted bridge between Figma and code that the design team now uses to build prototypes with the same components engineers use in production.

Annotation mode. Hovering any element outlines it and shows the selector the AI agent will receive, so the AI Agent sees exactly what the designer sees.

Humanforce's platform is composed of many products for workforce management (rosters, HR, payroll, timesheets, analytics, and several mobile apps), all built on Mango UI, our web-component design system. Designers used Figma; engineers wrote in code. The output from the teams often mismatched. This led to a situation where prototypes proposed patterns Mango UI did not support, engineers rebuilt components that already existed, design conventions were inconsistently applied from one product to the next.

I designed and built the tool with the design team; this tool was capable of mapping components between Figma and code, and the design team became the first to use it. The tool, the UX Design Agent, lets designers build prototypes in the browser using real Mango UI components, with a set of MCP servers keeping Figma and code in sync in both directions.

Designers can describe the intended change in plain english. The annotation is attached to the element it refers to.

I chose to enforce the design system in both directions, Figma to code and code to Figma, rather than build a “generate anything” tool. Slower to build, but the tool functions as a governance layer as much as a productivity boost. Every prototype the design team produces is reliable and easier to build in production.

Three pivotal decisions

First, the code is the source of truth: Mango UI's <mgo-*> components are the atoms; the Figma library mirrors them, not the other way around.
Second, dedicated MCP servers to move design and code back and forth: one for capturing feedback on prototypes, one for reading and writing Figma, one for driving Playwright to verify the result.
Third, support both Claude Code and Codex from day one: costs more to build, but the tool stays useful as either evolve.

Once the designer has commented on each element, the annotations are handed to the agent as one plain-text prompt, carrying both the comment and the full XPath so the AI knows which element each one refers to.

A working tool used daily by the design team. Each prototype built with it is deployable HTML using real Mango UI components, ready for engineering handover with a minimal alignment step.

Prototypes now come out matching Mango UI 1:1. The design team can build interactive prototypes without asking engineers to hand-craft each component. Discrepancies between design and code are caught up front rather than during handover or afterwards.