Back
Tools Used
An AI workflow to generate design tokens faster & implemented an AI-assisted audit process to detect inconsistencies.
Tools Used
An AI workflow to generate design tokens faster & implemented an AI-assisted audit process to detect inconsistencies.
Design tokens are structured values that store visual decisions
Design tokens are structured values that store visual decisions
Instead of manually applying styles across screens, designers reference tokens, ensuring consistency across products and platforms.
Instead of manually applying styles across screens, designers reference tokens, ensuring consistency across products and platforms.
What are Tokens?
What are Tokens?
Despite their importance, creating tokens is typically a time consuming and manual process
Despite their importance, creating tokens is typically a time consuming and manual process
Repetitive setup across multiple scales
Repetitive setup across multiple scales
01
01
Every token must be logically named and organized
Every token must be logically named and organized
02
02
Inconsistencies are usually caught late, forcing manual audits and rework.
Inconsistencies are usually caught late, forcing manual audits and rework.
03
03
The Problem
The Problem
I built this workflow because I was tired of doing what AI can do faster.
I built this workflow because I was tired of doing what AI can do faster.
So,
So,
Connect Figma MCP
Building Rules to inform the AI
Building a command on generating tokens using Cursor
Using Token Studio to import to Figma
The Flow- Tokens and Variables
The Flow- Tokens and Variables
Connect Figma MCP
Building Rules to inform the AI
Building a command on
generating tokens using Cursor
Using Token Studio to import to Figma
The Flow- Tokens and Variables
Connect Figma MCP
Building Rules to inform the AI
Building a command on Reusable
Design-Check Command using Cursor
Using the three-tiered token approach
Building Rules to inform the AI
Brand Collection Rules
Brand Collection Rules
Alias Collection Rules
Alias Collection Rules
Mapped Collection Rules
Responsive Collection Rules
Responsive Collection Rules
Mapped Collection Rules
Using the three-tiered token approach
Using the three-tiered token approach
Building Rules to inform the AI
Building Rules to inform the AI
A simple prompt won’t produce meaningful results.
A simple prompt won’t produce meaningful results.
Building a command on generating tokens using Cursor
The more input you provide, the better the output. By defining a detailed, rule-based command, I was able to guide AI to consistently generate structured design tokens.
The more input you provide, the better the output. By defining a detailed, rule-based command, I was able to guide AI to consistently generate structured design tokens.
Building a command on generating
tokens using Cursor
AI can’t invent a structured token system from nothing.
AI can’t invent a structured token system from nothing.
Copying Raw Color Scales from Figma
Copying Raw Color Scales from Figma
The more input you provide, the better the output. By defining a detailed, rule-based command, I was able to guide AI to consistently generate structured design tokens.
The more input you provide, the better the output. By defining a detailed, rule-based command, I was able to guide AI to consistently generate structured design tokens.
AI Generated JSON File
Token Studio
AI Generated JSON File
Token Studio
The AI-generated JSON file was imported into Token Studio
The AI-generated JSON file was imported into Token Studio
Using Token Studio to import to Figma
Using Token Studio to import to Figma
Instantly converting the structured token system into usable Figma variables
Instantly converting the structured token system into usable Figma variables
I created variables for colors, text styles, spacing, and responsive sizes so every design uses the same rules.
I created variables for colors, text styles, spacing, and responsive sizes so every design uses the same rules.
Final Output
Final Output
They act as a single source of truth, keeping the UI consistent and easy to update.
They act as a single source of truth, keeping the UI consistent and easy to update.
Tokens/Variables help in consistency, but maintaining that consistency requires constant manual checking.
Tokens/Variables help in consistency, but maintaining that consistency requires constant manual checking.
Now,
Now,
While designing, I was always stopping to see if designs followed the tokens made.
While designing, I was always stopping to see if designs followed the tokens made.
01
01
Spacing, text sizes, and colours slowly stopped matching across screens.
Spacing, text sizes, and colours slowly stopped matching across screens.
02
02
Sometimes, I noticed problems too late
Sometimes, I noticed problems too late
03
03
The Problem
The Problem
Consistency depended on me checking everything manually
Consistency depended on me checking everything manually
Compare UI elements against defined tokens
01
Detect deviations instantly
02
Provide actionable feedback
03
The Goal
What if I made an assistant that tells me if something's wrong
Reduce manual review effort
03
What if I made an assistant that tells me if something's wrong
Compare UI elements against defined tokens
01
Detect deviations instantly
02
Provide actionable feedback
03
Reduce manual review effort
04
The Goal
Connect Figma MCP
Building Rules to inform the AI
Building a command on Reusable Design-Check Command using Cursor
The Flow- AI assisted Audit
Building Rules to inform the AI
Building Rules to inform the AI
Building a command on Reusable Design-Check Command using Cursor
Building a command on Reusable
Design-Check Command using Cursor
Final Output
Final Output
My Figma filed is scanned and compares every element against the tokens I defined.
My Figma filed is scanned and compares every element against the tokens I defined.
Anything that doesn’t follow the tokens is flagged instantly, making audits faster
Anything that doesn’t follow the tokens is flagged instantly, making audits faster
Like many designers today, I’m exploring how AI fits into the creative process, but instead of using it to generate outputs, I focused on using it to improve my workflow.
This project shaped how I see AI in design: not as a replacement for thinking, but as infrastructure that protects consistency, reduces cognitive load, and allows me to focus on decisions that actually require judgment.
Like many designers today, I’m exploring how AI fits into the creative process, but instead of using it to generate outputs, I focused on using it to improve my workflow.
This project shaped how I see AI in design: not as a replacement for thinking, but as infrastructure that protects consistency, reduces cognitive load, and allows me to focus on decisions that actually require judgment.
To Conclude..
To Conclude..
👋Thanks for stopping by! It means a lot that you’re here.
SELECTED WORK
LET’S CONNECT
👋Thanks for stopping by! It means a lot that you’re here.
SELECTED WORK
LET’S CONNECT