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.
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.
.png)
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