top of page

Building a Design System from Scratch with AI

After years of updates, Health2Sync’s website design files no longer matched the live site. I used the website as a single source of truth to build two levels of color tokens, responsive variables for three breakpoints, and 30 components, along with a WCAG contrast audit.

Problem Exploration

➊ From Maintaining to Building

In my previous role, I mainly maintained existing Design Systems. Building one from scratch was something I had always wanted to try.

➋ A Website with Limited Design Maintenance

Design resources focused on the Health2Sync App and PMP, leaving the website rarely maintained. Design files and the live site gradually drifted apart.

➌ Exploring AI-Assisted Design System Creation

As AI evolved, I wondered: how fast could I build a Design System with AI? So I started a self-initiated project using our website.

As the sole designer, I defined the scope, token structure, naming rules, and documentation, while AI helped speed up asset extraction.

First Step: Which Pages to Include?

Goal

Building Process

➊  Two-Layer Color Tokens

Mapped 23 primitives to 33 semantic tokens. Each color includes usage guidelines and website examples, shown directly in Figma’s color picker.

➋ Managing Responsive Breakpoints with Variable Modes

Created 86 responsive tokens using Figma Variable Modes for Desktop, Tablet, and Mobile. Switching modes automatically updates typography, spacing, and component sizes across all three devices, without redesigning each layout.

➌ 30 Components with Variants for Every State

Components are grouped into four categories: Navigation, Layout, Content, and Interactive & Forms.

Buttons: 4 styles × 2 sizes × 3 states = 24 variants.

Form Fields: 3 types × 4 states = 12 variants.

➍ Purpose-Based Naming Conventions

All tokens and variants are named by purpose, not appearance. Names describe where and how they’re used, rather than colors or values. Brand colors can be updated through primitive mappings without affecting components, while designers and developers can easily identify the right token.

➎ Component Documentation

Created a consistent documentation template for each component, covering Usage, Specs, States, Properties, and Do/Don’t guidelines. This helps designers and developers use components correctly without being involved in their creation.

➏ AI-Assisted Workflow: Human-in-the-Loop

The workflow has four stages: Audit, Extract, Build, and Validate. AI handles repetitive data extraction and structural setup, while I define scope, system architecture, and quality standards—speeding up creation while maintaining consistency.

Outcome

Current Progress

  • Completed responsive designs for 4 pages (Home, Cloud Care Platform, Contact, FAQ), all built with reusable components.

  • New pages can reuse components and switch breakpoints without redesigning layouts.

  • Breakpoints, naming, and states align with frontend conventions, ready for developer handoff.

If the Project Continues

  • This project demonstrates my approach to building a Design System from scratch: scope audit, token structure, naming rules, and component documentation. Core components and guidelines are in place, with room to expand. Next steps would include:

  • Extend components to the remaining pages.

  • Expand semantic tokens to support dark mode.

  • Refine colors based on accessibility audit results.

  • Align token naming with frontend developers.

bottom of page