Building an AI-Native
Design System
Our legacy app was too rigid to grow.
We rebuilt everything from the ground up: backend, frontend, and design system.
I led the creation of a new semantic design system and built a full working prototype to prove it could scale with AI.
AI generation based on PNG screenshots of the app
Symantic design system integration with Figma MCP server
OVERVIEW
Rebuilding from the Ground Up
Our legacy app had reached a breaking point: a rigid backend, costly maintenance, and feature bottlenecks made iteration nearly impossible. We rebuilt everything from scratch. In a one-month "bakeoff" with our CTO, I rebuilt a working version of the app with a pixel-perfect front-end, powered by Cursor, Supabase, Figma's MCP server, and a new semantic design system.
SKILLS
Design System Architecture
Product Design
AI-Prototyping
ROLE
Product Designer
TIMELINE
July, 2025
CHALLENGE
I inherited a disjointed Sketch library with missing components and inconsistent styles, and transformed it into a unified, semantic system in Figma.
ACTION
A new semanitic deisgn system
Inconsistent, irregular, and fragmented components with no single source of truth for developers or AI.
A unified, semantic design system providing a single source of truth for ready for MCP server deployment.
SCALABLE PROCESS
Building with Cursor + Figma's MCP
The Figma MCP server exposed our components, tokens, and constraints as structured data. With real semantic context, AI could finally generate pixel-perfect UI instead of guessing from screenshots.
IMPACT
Faster Builds. Lower Costs. Higher Fidelity.
After four weeks, I presented a working prototype of the app, providing viability. Since then, we're now building all front-end styling for the app with Cursor, using the new design system as the source of truth.
• Pixel-perfect AI-generated front-end
• Unified semantic design system
• Agentic code review to decrease refactoring time
4 weeks
From 0 to a fully functioning app
5x faster
Time to develop and QA a screen or feature
NEXT STEPS