Building a scalable design system for AI-assisted development
Unifying a fragmented 300+ page platform with reusable design tokens and engineering-aligned components.
overview
Savings is a 16-year-old affiliate platform supporting 300+ brands across 27 templates and 300+ pages, generating approximately $3.5M in annual profitability. During a company-wide rebrand, I led the creation of a scalable, engineering-aligned design system to establish consistency across the platform and streamline future development.
By combining a structured token architecture with AI-assisted workflows, I reduced token setup time by approximately 50% while establishing a shared foundation for design and engineering.
50%
Less Token Build Time
+20%
Engineer Speed
project timeline
Sep 2025 - Feb 2026 · 6 Months
my role
Product Designer
team
Two Engineers
my design skills in focus
Design Systems
Tokens
AI Development
the problem
A sixteen-year-old site built without a system
Through a site-wide audit, I found significant inconsistencies across key UI elements. Some button styles were not brand-compliant, and similar components appeared differently across pages.
These issues traced back to a core problem: Savings had no design system, no shared mocks, and no centralized source of truth, making it difficult to scale design consistently across a 300+ page platform.
system architecture
Building from the atomic level
To create clarity and scalability, I organized components using an atomic structure. I separated foundational elements from composed modules to ensure reusability and consistency across the system.
token structure
Developing a scalable token system with AI-assisted workflows
After defining core components, I rebuilt the design library using a structured token architecture to ensure a scalable, engineering-aligned foundation.
Building primitive tokens with ChatGPT
I started by setting up the primitive tokens, using my existing design system as a base for values like breakpoints and font weights. For color tokens, I turned to ChatGPT to generate a structured set of primitive values.
Building semantic tokens with Cursor
Next, I exported the primitive tokens to Cursor and prompted it to generate semantic token names for each component using Figma MCP links. This connected raw values (primitive tokens) to their contextual usage (semantic tokens) across components.
Importing tokens into Figma
After proofreading and adjusting names as needed, I had Cursor generate a JSON file of all semantic tokens, which I imported into Figma’s Tokens Studio plugin. This reduced token setup time by ~50%.
cross-functional alignment
Aligning on structure with engineers
To ensure the token system would work in practice, I held biweekly meetings with Khris and Yanush (engineers) to align on naming conventions and overall design system structure.
Breakpoints and containers
During token setup, I noticed my breakpoints didn’t match Yanush’s, which could have caused noticeable layout issues on the live site over time. I updated my variables to align with his. Containers also included built-in padding. For example, a mobile container measured 326px but had 4.5px padding on each side, effectively 317px. Removing these paddings was too risky, as it could affect other pages, so we agreed I could continue designing without them and handle any edge cases as they arose, since most content layouts wouldn’t be affected.
Legacy code constraints
The site’s legacy structure (built in Velocity) meant pages were highly interdependent and delicate. Changes made to one page could affect others. However, due to a tight timeline, the engineers wanted to reuse pre-existing elements where possible. Because pre-existing elements were coded inconsistently, some elements couldn't automatically implement the new tokens I had. I worked with the engineers to manually refactor these components. This collaboration gave me a deeper understanding of the engineering constraints and workflows.
cross-team documentation
Documentation as the single source of truth
Tokens
I created a dedicated page listing each primitive and semantic token in charts, organized by type (color, space, typography, etc.). My goal was to eliminate gaps between design and engineering, making it easy for engineers to follow the system as a single source of truth while coding.
Components
For components, I placed usage guidance directly alongside the design elements for designers to reference. Each component included detailed documentation covering anatomy, rules for toggling elements on and off, variants, and examples of real-world usage for designers, engineers, and product managers.
I documented precise rules like text line limits and clear guidance for adjusting component states via toggles and dropdowns. I also highlighted key details with icons for emphasis.
This is super informative and great, but it’s quite cramped and difficult to read all the notes.
Miriah (Designer)
I’d like to see the different hover states and edge cases of the designs.
Khris (Engineer)
Making adjustments
After gathering feedback, I realized my documentation needed more clarity and organization. I reorganized the documentation to make my notes more clear and digestible. Using the Specs plugin, I generated clean visual specs with padding and numerical pointers, ensuring component behavior was easy to understand for engineers.
reflection & next steps
Reflections on impact and growth
Impact 🎯
This design system reduced development time by ~20% and established a clear standard for alignment between design and engineering
Using AI tools to build token structures sped up token creation on the design side by ~50%, significantly improving overall design system build time
Collaborating closely with engineers also deepened my understanding of how components and tokens are implemented in code, strengthening my cross-functional knowledge for future projects
Challenges 💪🏻
Building a design system from scratch for a site with no existing mocks required defining rules and structures from the ground up
Learning to integrate Cursor into the workflow had a learning curve and required multiple tutorials, but once I got the hang of it, setup became much faster
Leveraging AI tools helped accelerate both token creation and overall system build, making the project manageable despite its large scale
Next Steps 🐾
For now, all documentation is maintained within Figma to keep things simple for our small team. In the future, I’d like to explore a more comprehensive documentation hub to centralize components, tokens, and guidelines. I experimented with using Cursor to generate a local documentation site, but without a domain to host it, we paused development. This will be a further opportunity for my team to improve accessibility and cross-team collaboration.