[001] Problem
Handoff was still manual. It took days turning Figma designs into production UI.
The team had a mature design system, but handoff was still manual. Engineers spent days turning polished Figma screens into production ready components and flows.
[002] Constraints
Design intent shouldn't get lost in translation.
Small spacing and alignment errors kept slipping into releases because implementation relied on human interpretation. The product was also dark themed, with an architecture that wasn't ready for scalable theming, so adding light mode later would be expensive. Whatever we built had to enforce consistency and respect the existing design system.
[003] Insight
AI needs design system access and strict rules to be reliable.
AI generation alone wasn't enough. Left unconstrained, it produced inconsistent, one-off code. What made it reliable was pairing direct access to the design system with strict architectural rules, so design intent made it into production intact.
[004] Strategy
Automate translation without losing component quality.
I connected Figma, Claude and Cursor through MCP, then constrained generation with strict repo rules and an automated test feedback loop. The goal was to automate the translation layer without losing component quality, freeing developers to focus on state, APIs, and business logic.
[005] MCP Connection
Design intent pulled at the source, not reconstructed by hand.
Claude and Cursor agents read design structure directly from Figma, pulling layout, tokens, and component context at the source. This removed manual inspection and preserved design intent in the generated output.
| Reference file | When to read it |
|---|---|
references/figma-integration.md |
Implementing a Figma design, extracting design tokens, mapping variants to props |
references/component-generation.md |
Creating or scaffolding a new React component, writing interfaces, PrimeReact integration |
references/layout-responsive.md |
Working on CSS layout, responsive behavior, container queries, Grid/Flexbox, z-index |
references/commenting.md |
Adding or updating code comments, JSDoc headers, AI generation markers |
references/testing-quality.md |
Writing tests, running quality gates, post-generation validation |
references/storybook-docs.md |
Creating Storybook stories, writing documentation, play functions |
references/accessibility-wcag22.md |
Implementing keyboard nav, ARIA, focus management, WCAG 2.2 criteria |
[006] Rule Engine
Rules the AI can't break.
A hand crafted rules index enforces component structure, design tokenz usage, and layout patterns, mapping design patterns to predefined layout components. It prevents hardcoded values and one-off CSS.
[007] Testing Loop
Regressions caught before code reaches review.
Each generated view ships with tests and a correction loop. Regressions get caught before the code reaches review, improving visual fidelity and spacing consistency across releases.
[008] Workflow
3 - 4 days down to about 1.
The developer picks a target frame in Figma, passes the frame link and Jira PRD into Claude or Cursor, and the agent resolves the right structure from the rules to produce code plus tests. Engineers then check the business logic and ship, taking a typical feature UI from a 3 to 4 day build down to about one day.
[009] Execution
Hard guardrails over open ended generation.
I led the process design and rule architecture end to end, working with a tech lead and QA engineer to make the AI output production ready instead of just suggestive. The core trade off was deliberate: hard guardrails over open ended generation, accepting tighter constraints in exchange for reliable, consistent code.
[010] Validation
Delivery speed, spacing, and design token consistency.
The automated test loop checked each view against the design system before review, while engineers verified business logic. Output landed directly in a production ready component structure, measured on delivery speed spacing and design tokens consistency.
[011] Outcome
Less rebuilding. More shipping.
The result is a repeatable workflow:
• Design intent survives implementation
• Review cycles shorten
• Frontend delivery runs 70 to 75% faster
Engineering effort moved away from rebuilding UI structure toward higher leverage work like state management and APIs.