AI Practice Experiment
AI-assisted design system practice
A hands-on experiment with Cursor, design-system rules, automated checks, and the places where designer judgment still matters.
- My role
- I used Claude’s starter design system as the test environment, then made the design decisions and used Cursor to critique, explore, and implement changes in the code.
- What changed
- I used the exercise to make concrete system changes: semantic token updates, a teacher-facing variant, revised color meaning, explicit product rules, and verification checks the agent could add or tighten while existing safeguards stayed protected.
- Scope & context
- I kept the exercise intentionally focused so I could work deeply through the system decisions. I wanted to understand which tasks AI could help with and which decisions needed closer review.
- What I learned
- AI became most useful when I made the rules explicit. Semantic tokens and acceptance criteria gave Cursor stronger context, but the key lesson was governance: without protected rules, the agent could change a check to make its own work pass.
Why I ran the experiment
Claude generated a small starter design system. I used Cursor as the coding agent to test how AI behaves inside a design system with semantic tokens, product rules, automated checks, and real implementation constraints.
The question was straightforward: where can AI make design-system work faster and more consistent while keeping design judgment with the designer?
Starting system & practice goals
I started with a lightweight system of color, typography, spacing, and radius tokens plus a small set of core components. That gave me enough structure to test changes that reveal how well a system holds together.
I focused on practical system skills: propagating a token change, adding a state or variant, finding opportunities to consolidate values and patterns, checking accessibility, and documenting the decisions I made.
Making the system explicit
The key shift was moving from visual preference to explicit system logic. Tokens needed clear roles. Components needed defined states. Reuse needed a reason. Accessibility and responsive behavior became part of the rule itself.
With that intent documented, both I and the AI agent had a clearer basis for making and evaluating changes.
AI-assisted system work
I used Cursor as a working partner for critique, alternatives, consistency checks, and implementation support. The most useful rhythm was iterative: make a change, inspect how it affected the system, refine the rule, and try again.
I owned the system decisions: what belonged in it, which recommendations made sense, and whether each change improved consistency and usability.
Verification & refinement
I treated AI output as a proposal to verify against system intent, the rendered result, and effects beyond the immediate component or token.
That became the loop: evidence first, intentional change, rendered review, then a reusable rule once the change proved sound.
What happened
Cursor handled routine system changes quickly and consistently. The more revealing results came when a change ran into a product rule.
- Routine changes stayed consistent. A text-size request landed in one token line and updated every student surface without touching a component. A teacher variant came back as a proper modifier with its own teacher tokens.
- Product logic still needed a designer. Cursor used the character in the student’s story as the student’s name, and gave teachers a one-at-a-time “Add to small group” action for what is really a batch workflow. The checks passed both.
- Protecting the rules changed the behavior. I made the learning principle explicit: the coach can point and ask, but the student still does the writing. I also protected the verification rules from being changed just to make a requested update pass. With the same request in a new chat, Cursor recognized the conflict and offered a smaller step: point the student more precisely to where to look for evidence.
- Color meaning needed its own rule. Burnt orange on actions and progress read more like an error signal than forward progress, which felt too cautionary for students already unsure about writing. Contrast still passed, making this a place where human judgment added value beyond the automated check. I turned that judgment into a color-meaning rule, then gave Cursor narrow permission to add or tighten verification checks when it found a gap, while existing safeguards stayed protected. With that governance in place, the color fix landed entirely in semantic tokens.
What I took from it
The experiment changed how I think about using Cursor in design-system work. Routine changes got faster. The real work moved to defining what “right” means, encoding that intent clearly, and protecting it.
Clear semantic tokens gave Cursor a safer path for system-wide changes. Rules and checks protected intent, but they still measured only part of the experience. The useful lesson was that designer judgment could be turned into clearer system guidance and reinforced with checks, while existing safeguards stayed protected. My role shifted toward setting intent, encoding it clearly, and reviewing the product logic, workflow fit, and emotional signals the checks could not see.
