AI-Assisted Design System (iOS Liquid Glass)
Overview:
This project explored how AI can support the creation of scalable design systems by generating structured colour tokens, variables, and styles aligned with modern iOS “liquid glass” design patterns.
Design systems often require significant manual effort to define, organise, and maintain tokens consistently across platforms. The goal was to use Claude AI to accelerate this process—generating token structures, naming conventions, and scalable styles that could be directly integrated into Figma.
The system was implemented using Tokens Studio, enabling token management via JSON and supporting a more developer-aligned workflow.
My Role:
Product Designer & AI-Assisted System Builder
- Defined the structure and requirements of the design system
- Used Claude AI to generate colour tokens, naming conventions, and variable structures
- Designed scalable token hierarchies aligned with iOS patterns
- Implemented tokens in Figma using Tokens Studio
- Managed token structure via JSON for consistency and scalability
- Refined and validated outputs to ensure usability and alignment with design needs
Tools:
- Claude AI
- Figma
- Tokens Studio (Figma plugin)
The Problem:
Creating and maintaining design systems can be:
- Time-consuming and repetitive
- Prone to inconsistency in naming and structure
- Difficult to scale across themes (e.g. light/dark, states)
- Misaligned between design and development
This often leads to fragmented systems and inefficient workflows.
The Challenge:
- Structuring tokens in a scalable and logical way
- Maintaining consistency across colours, states, and themes
- Translating design decisions into systemised variables
- Integrating AI-generated outputs into real design tools
- Aligning token structure with developer-friendly formats (JSON)
Approach:
- Defined system requirements (colour roles, themes, states)
- Used Claude AI to generate token structures and naming conventions
- Prompted AI to create scalable colour systems aligned with iOS design patterns
- Iterated on outputs to refine clarity, hierarchy, and usability
- Implemented tokens into Figma using Tokens Studio
- Structured tokens in JSON for consistency and reuse
- Tested system flexibility across different use cases
Solution:
A scalable, AI-assisted design system built around structured tokens and variables.
Key features:
- Colour token system
Defined base, semantic, and component-level tokens - Consistent naming conventions
Clear, scalable structure across all tokens - Theme support
Designed for light/dark modes and state variations - Figma integration
Tokens implemented using Tokens Studio plugin - JSON-based structure
Enables alignment between design and development - iOS-aligned styling
Inspired by modern “liquid glass” UI patterns
Outcome:
- Accelerated creation of a structured design system using AI
- Reduced manual effort in defining tokens and variables
- Improved consistency and scalability across styles
- Created a developer-friendly token structure using JSON
- Demonstrated how AI can support system-level design, not just UI
This project highlights how AI can be used to streamline and enhance design system workflows.
My Design Process:
- Defining system goals and requirements
- Using Claude AI to generate token structures and naming systems
- Iterating through prompting to refine outputs
- Implementing tokens in Figma via Tokens Studio
- Structuring and managing tokens in JSON
- Testing scalability and consistency across use cases
Design
Sed vel semper massa. Mauris convallis dui sit amet ante feugiat volutpat. Donec nec imperdiet ex. Proin sit amet tellus id elit consectetur laoreet. Curabitur mi erat, auctor aliquam sem sit amet, molestie condimentum sem. Duis aliquet vulputate nisl, at condimentum metus lobortis at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse aliquam pharetra turpis vitae auctor. Aenean nec leo eget elit feugiat ultricies. Maecenas ac leo non ante mollis accumsan.
Product:
A scalable design system built in Figma using AI-generated tokens and variables, enabling:
- Consistent visual design across products
- Faster design and iteration workflows
- Alignment between design and development
- Flexible theming and future scalability
Outcome:
This project demonstrates my ability to use AI beyond ideation—applying it to system design, tooling, and scalable workflows that improve both design and development efficiency.
Visuals:
Examples of token structures, Figma implementation, and system usage are shown below, highlighting hierarchy, naming, and application.
