Developing an AI-powered design system builder
Connecting three AI skills to turn designs into organized variables, reusable components, and documentation.
overview
I built an AI workflow in Claude with three task skills and a coordinator to help designers turn exploratory Figma work into a tokenized, componentized, documented design system. It works in batches, with the designer reviewing changes and approving each stage. I developed the workflow on test designs, then tested the tokenization skill on an existing design system with successful results. I later packaged the skills for other designers and shared them through GitHub and our organization’s Claude workspace.
67%
Time Saved
20 min
9 Docs Generated
6 designers
Given Access
project timeline
Oct 2026 · 7 days
my role
Product Designer
with input from
Two Engineers — Doc Requirements
Design Manager — Scope and Feedback
my design skills in focus
Design Systems
Designing With AI
the problem
Keeping a design system consistent takes hours of manual work
My team maintains design systems alongside ongoing project work, leaving limited time for cleanup. Over time, near-duplicate colors accumulate, token names become inconsistent, and components diverge across files. Auditing colors, typography, and spacing by hand can take five or more hours. Applying the fixes means inspecting thousands of nodes and making hundreds of small decisions, stretching cleanup across weeks or months between projects.
the solution
Building a design system through three connected AI skills
I built the workflow to handle repetitive work while keeping design decisions with the designer. A coordinator skill guides Claude through three task skills in a fixed sequence, with designer approval between each stage:
Tokenize: Creates primitive and semantic variables and typography styles from exploratory frames, asking the designer to clarify ambiguous choices.
Componentize: Builds component sets and variants, binding applicable properties to those tokens.
Documentation: Documents each component’s anatomy and variants.
the process
How I built the skills with Claude
Turning a reference library into repeatable AI skills
I gave Claude an existing design library from my team as a reference for token structure, components, and documentation. This gave the skills a concrete standard to follow.
For each skill, I defined the goal and requirements with Claude, tested the output, and refined the instructions when gaps surfaced. Most of my effort went into specifying behavior: when to ask for input, what to leave unchanged, and how much to process at once.
Note: I began tokenization in the Figma agent and continued in Claude after reaching the AI credit limit.
Ex: Documentation I gave the agent to reference
Ex: What the agent produced
Design principles
Work in batches
Keep each round manageable for the designer to review
Confirm before acting
Ask for approval before applying changes
Surface ambiguity
Ask a multiple-choice question when the intended use is unclear
Leave assets untouched
Exclude illustrations and other assets
Offer recommendations
Suggest improvements for the designer to consider
Refining the skills on test designs
I used a landing and pricing site exploration for Fieldnote, a fictional journal brand built via Figma agent, to iterate without affecting a system my team relies on. This gave me room to refine the workflow before trying it on an existing library.
Tokenize Skill
Organizing inconsistent values into primitive and semantic variables
The skill created variables for color, spacing, and radii, alongside typography styles that bring text properties together. It used context to propose semantic bindings, flagged inconsistencies such as different CTA text styles, and confirmed token structures with me before applying changes.
300 annotations at once made the canvas overwhelming
The agent added annotations to explain its findings, but showing more than 300 at once overwhelmed the canvas. I updated the skill to review issues in batches and clear annotations as they were resolved. I could then focus on one group of decisions at a time.
Before: Multiple topics, 300+ annotations in one batch
After: Separating each topic into batches
Reviewing in batches helped, but inconsistencies remained between them
Breaking the work into batches made review easier, but the skill initially evaluated each batch independently. Halfway through, the agent noticed inconsistent token names and similar colors, including two similar yellows, that had been kept separately.
I added a check against previously reviewed batches so values and token names stayed consistent as the agent progressed. This brought the comparison into each batch instead of leaving it until the end. In the rest of that test, it handled these comparisons accurately.
Componentize Skill
Turning repeated elements into reusable components
The next skill replaced elements with the appropriate component instances while keeping their content intact. It also suggested states I had not designed, such as hover, pressed, and disabled, and automatically included instances/booleans where it made sense. recognized illustrations and other assets to leave untouched. It identified unrelated content, including Figma’s component purple and an imported Atlassian UI kit, for exclusion.
By doing so, it successfully replaced 140 individual elements with instances of 14 components, including buttons, navigation, and pricing cards.
I carried the annotation and pacing lessons from Tokenize into this skill’s requirements. It worked in manageable batches and added annotations with clearer context from the start. I also updated it to group the generated components into labeled sections so they were easier to navigate.
Follow-up questions still left the referenced element unclear
Even with annotations, I sometimes could not tell which element the agent meant. Asking it to clarify did not always resolve the confusion. I updated the skill to include a screenshot of the relevant element or elements with its questions, giving me a clearer reference for each decision.
Before: Agent ignoring my question
After: Agent clarifying via screenshots
Generated components needed a clearer structure
The first output placed the generated components together without a clear organization. I updated the skill to build them in labeled sections. It uses existing component pages where available; if there is no suitable page, it creates an organized page for the components and their documentation. This makes the output easier to navigate and build on.
Before: Unorganized components
After: Organized components with clear labeling
Documentation Skill
Turning components into clear, usable documentation
The final skill documents component anatomy, variants, usage rules, and accessibility guidance. It works in phases and places documentation beside the relevant components, using existing pages or those created by Componentize.
I also separated shared foundations from component guidance: primitive and semantic variable tables, color swatches, and typography scales live under Brand guidelines, while component documentation lives under Components.
Engineering feedback made code snippets optional
I initially asked the skill to generate code snippets for every component. After speaking with two engineers I work with closely, I learned that their AI-assisted workflows often reference existing implementations, making generated snippets less useful when components are already built.
I updated the skill to ask whether code is needed before generating it. When it is, the skill asks which development stack to use, with options based on those commonly used at our company.
The design doc would have to be based on the tech stack of the project so you wouldn't want to add in react examples if the project runs on PHP [for example]. Would you be accounting for that?
Thomas
Front-End Engineer
The first output had the information, but needed a clearer hierarchy
The initial documentation was difficult to follow. Anatomy labels were unclear, variants weren’t grouped by size, and some examples blended into the background. It also repeated every token within each component’s documentation and included unnecessary labels distinguishing original variants from AI suggestions.
I used references from a design system I had previously built to refine the skill’s layout rules. I specified clearer anatomy callouts, grouped variants, contrasting backgrounds, and separate pages for shared variables. The revised output was easier to scan, with documentation neatly organized beside each component.
Before: Component documentation unclear
After: Accurate labeling and clear sectioning
The skill generated documentation for six components and three brand-guideline pages in about 20 minutes. I estimate creating the same documentation manually would have taken me about a week.
Applying the agent to an existing design system
Reorganizing BBN’s color system in two hours
After testing the skills on exploratory designs, I reached out to another team to see where the agent could help. Their manager suggested BBN, where years of contributions from different designers had left inconsistent values and designs. Another designer had already spent a couple of workdays on manual color cleanup, finding it tedious to identify and organize the inconsistencies.
Working with the agent, I completed the scoped color cleanup in about two hours, including reviewing each batch and redirecting it where needed. I estimate the same work would have taken me about six hours manually—roughly four hours saved.
Starting with colors while the team refined the components
The team was still working through component decisions, so the manager asked me to focus on colors first. The file contained unrelated Atlassian UI-kit content, fragmented variable collections, and many elements bound to color styles rather than variables.
I scoped the skill to the component pages and asked it to ignore unrelated UI kits, preserve existing variables and collections, add color primitives to the Primitive collection, and create a new Semantic collection. The agent also recommended saving a version-history checkpoint before making changes.
Reviewing and organizing colors in batches
Across 14 component pages, the agent identified inconsistent and hidden colors while flagging unrelated UI-kit content for exclusion. I reviewed its proposals in batches, deciding what to merge, retain, or leave unbound.
Automatically identified irrelevant UI kit elements
It built an organized primitive and semantic color system and rebound the relevant designs, with approximately 9,300 bindings reported in the final audit. Some elements attached to old color styles were initially missed, but the agent corrected them after I redirected it.
Before: Unorganized semantic color tokens
After: Consistent semantic color tokens
Giving the team a foundation to build on
The manager was excited to see the color system organized and saw an opportunity to use the agent for further cleanup once the team had worked through its component decisions.
Seeing the team’s response showed me the agent’s potential beyond my own workflow. It could help other designers tackle the same tedious cleanup and give their teams a more organized foundation to build on.
This looks super great. This is all what we need!!!
Bri
Design Manager
Sharing the workflow
Making the skills available beyond my own chat
Once I had built the task skills, I added the coordinator to guide the full sequence with approvals between stages. I then used Claude Cowork to package the skills into one folder and push them to a new GitHub repository so other designers at my company could access them.
I set up Cowork to commit and push future updates when I ask, making it easier to maintain the skills as I refine them. I also published the package to our organization in Claude so colleagues can access it directly there.
the results
Reducing manual design system work and sharing the skills across teams
3× faster color cleanup
BBN’s color system organized in 2 hours versus my estimated 6 hours manually
9 docs in 20 minutes
Documentation for six components and three brand-guideline pages
Made accessible to all
Published in our Claude organization and shared through GitHub for other designers to use
The workflow reduced the manual effort involved in organizing and documenting a design system, while keeping me involved in the decisions. BBN’s positive response showed its potential to support other teams, and publishing the skills gives colleagues a starting point they can use and adapt to their own projects.
reflection
Building a useful AI workflow taught me how to make the next one even better
Designing a clearer review process 🥛
Approval checkpoints only helped when I could understand what the agent was showing me. The annotation overload and unclear element references taught me to define how the designer reviews the work upfront. Next time, I would specify the context, pacing, and visual references needed for each decision from the start.
Checking what people need before deciding what AI should generate 🔎
I initially assumed code snippets would make the documentation more useful. Conversations with engineering showed that their value depended on the project and existing implementation. Next time, I would involve the people using the output earlier, before turning assumptions into skill requirements.
Turning individual fixes into a workflow others can use 🤝
Lessons from Tokenize improved Componentize, and testing on BBN exposed issues the exploratory designs hadn’t. Building those findings into the instructions made the skills more reusable. Sharing them with colleagues also shifted my focus toward how the workflow could support different projects. My next step is to gather feedback from other designers and use it to refine the skills further.