How AI shows up in my design systems workflow

01 / Where AI helpsThe unglamorous middle

Design systems have a lot of unglamorous middle work. Writing prop tables from a component's TypeScript. Generating an accessibility checklist for a new pattern. Diffing a Figma library against the code. Drafting a migration guide from a semver diff. Turning a redline into a token proposal. Auditing an inherited system for hardcoded values.

None of it is hard. All of it is time. And it's exactly the shape of work AI is good at — structured, referenceable, and tedious.

My rule is simple: if I'd have to say the same thing three times, I write a prompt instead. If I'd have to compare two things character-by-character, I let the model diff them. If I'd have to write boilerplate around a real decision, the boilerplate gets generated and I review it.

02 / Where AI needs to stay outThe parts that need me

There's a category of design systems work AI shouldn't touch first. Not because it can't — because the value of me doing it is the thinking, not the output.

The initial API design for a new primitive. Props are language. Language is where a system either scales or doesn't. I want to hand-shape the first version, then have AI stress-test it against use cases.
The judgment call on whether a pattern belongs in the system. AI will tell you yes to almost anything. My value is knowing what to say no to.
The first read on a contribution. The first review sets the tone for the relationship. I want the contributor to hear from a person.
Anything voice-facing. Docs, changelog entries, RFCs — AI can draft, but the last edit is always mine. Otherwise everything I write starts to sound the same.

03 / The prompts I actually useSmall, boring, effective

The good prompts are boring. They point at a specific input, ask for a specific output, and give the model my house style as context. No cleverness. No "act as a." Just here's what I have, here's what I need, here's how it should sound.

Example: token audit

"Here's a component file. List every raw hex value, every raw pixel, and every magic number. For each, suggest the semantic token that should replace it based on this token file. Output a table with three columns: current value, suggested token, notes."

Example: migration guide

"Here's a diff from v1.4 to v2.0. Write a migration guide that lists every breaking change, the codemod name if one exists, and a one-sentence "why" for each change. Match the tone of the existing migration guides in this folder."

Example: accessibility notes

"Here's a component's Storybook stories and its JSX. Write the a11y section for its docs: what ARIA it uses, what keyboard interactions it supports, what focus behavior to expect, what to watch for when consuming it. Don't invent — if something isn't in the code, don't claim it."

The good prompts are the ones I wouldn't have shown you a year ago. They're plain — because plainness is what works.

04 / ReceiptsReal work, real numbers

Building this site has been my personal AI-native design systems project. Below is a real log of the work — what I used AI for, what tool, and what the tradeoff was. Numbers are approximate but honest.

Receipts · Liseland site build · Aug 2026

First-pass HTML for a case study page

Claude

Gave the model the deck contents, my design tokens, and one existing case study as reference. It scaffolded the page structure. I rewrote roughly 60% of the copy and adjusted every layout section.

Time to first draft

~20 min

Time to my version

~2 hrs

Estimated saved

~3 hrs

Palette audit & contrast check

Claude

Asked for every color combination in use across the site, contrast-checked against WCAG AA. Caught three failing combinations I would have shipped.

Time spent

~10 min

Issues caught

Value

Real

Voice pass on the playbook

Claude + me

Model drafted the phase structure fast. First draft sounded like AI — three-part parallelism, "properly scoped," "closes the loop." I did a full pass to rewrite it in my voice. The pattern held; the words became mine.

Draft time

~30 min

Voice pass

~90 min

Kept from draft

~20%

Component inventory doc

Claude

Read every HTML file, extracted every reusable pattern, produced a categorized inventory. I reviewed, renamed a few, and merged duplicates. Would have taken me a full afternoon by hand.

AI time

~15 min

My review time

~45 min

Estimated saved

~4 hrs

Palette exploration

Claude + Cursor

Iterated through five palettes with the model rendering swatches inline. Got to "Twilight Bloom" faster than I would have alone, but the final call was mine — and I've overridden the model's suggestion multiple times since.

Rounds

~12

Kept

Overrides

~30

Roadmap gap analysis vs. a job description

Claude

Handed the model a JD and my roadmap. Asked what was missing. Got a prioritized list that shaped the current 12-stage plan. The AI didn't tell me what to build — it made the tradeoffs visible faster.

Time

~5 min

Stages added

Stages kept

05 / What this changes about the roleCraft leadership, at a different tempo

The parts of design systems leadership that matter more now:

Judgment. When the cost of producing options drops to near-zero, the value of knowing which one to pick goes up.
Voice. When every team can generate copy in ten seconds, the systems whose docs, RFCs, and changelogs sound like a specific person become the ones designers actually read.
Guardrails. Generative UI without a design system produces mediocre UI faster. The system is the guardrail.
The context layer. Whatever AI you're pointing at your codebase, it's only as good as the context you give it. Tokens, primitives, docs, examples — all of it gets consumed. That's the new deliverable.

I've stopped thinking of AI as a co-worker and started thinking of it as an infrastructure layer — invisible when it works, obvious when it doesn't. My job is to make sure the infrastructure has good inputs, and to protect the parts of the work that are still mine.

The system I ship is better because AI is in the loop. It's mine because I'm still the one making the calls.