Pair-Designing With AI: How I Actually Work as a Design Engineer

I'm a designer maintaining a design system at scale. Over the past few months I've shifted most of my workflow to be AI-collaborative, across both the maintenance work and the actual designing of new features.

The shift

Design systems are mostly NOT about pixels. They're about consistency at scale: thousands of bindings, hundreds of components, dozens of token decisions that need to stay aligned. The kind of work that, done by hand, would take weeks and still have leaks.

Claude isn't a substitute for taste, it can't tell me if a layout feels right or if a flow makes product sense. What it can do is reason over the design system I've already built. With access to the tokens, components, and production codebase via Claude Code, it can propose new feature designs that use what already exists. And it can do the maintenance work I'd never have the patience to do manually: querying every component, spotting inconsistencies, executing bulk rebinds, migrating tokens.

My actual workflow

1. I notice something feels off. "Surface/action-subtle is invisible on white." "Why does the icon look darker than the text?"

2. I describe the issue in plain language. No pre-diagnosis. I describe what I'm seeing; Claude reverse-engineers the technical cause.

3. Claude inspects first, then proposes. Before changing anything, it queries contrast ratios, bindings, usage counts, then lays out 2–4 options with trade-offs.

4. I pick a direction. The decision stays mine. Claude is execution-rich; I know what the product needs.

5. Claude executes, and I verify. Bulk rebinds, mass renames, file-wide audits. Then I look at the actual file. Always.

Things I've learned

Ask before deleting. Standing instruction: "ask me before you delete or change something always." One rule, dozens of disasters prevented.

Be honest about the boundary. Claude can't load every font or click in the UI. We split the work: Claude preps (12 style shells with correct names + bindings); I do the manual flip.

Audit first. How many uses? What's the contrast ratio? What's the cascading effect? I used to change typography by feel; now I do it with usage data.

What "design engineering" means to me now

I work at the variable layer, every text node binds to a variable, one collection, no pile of hex codes
Claude generates Code Connect mappings, .figma.tsx files ready for the uikit repo
Tokens Studio exports JSON; the build pipeline picks it up, handoff is almost trivial
My Storybook for @gls-nxt/uikit is synced with Claude Code, so the same model that audits my Figma file also knows what the live React components look like, how they're named, what props they expose. When I rename or restructure something in design, Claude can flag the code-side implications without me cross-referencing manually.
Documentation lives in the file: Changelog, descriptions, Typography showcase, Claude writes the changelog from each session

The bottleneck isn't translating designs to code anymore. It's making good design decisions. The Figma file, the uikit repo, and the Storybook are all readable by the same AI, and the AI keeps them aligned. Naming drift, prop drift, and "designed-but-never-implemented" stop being separate problems to chase down.

Honest about the limits

Claude alone can't: decide if a design feels right, sense product nuance, negotiate with stakeholders, sign off on the final shipped experience.

Claude does (and I won't do by hand again): file-wide audits (5,879 text nodes in seconds), bulk token migrations (12,000+ bindings), cross-file consistency checks, changelog writing, usage stats before pruning.

The mental model

Treat the AI like a very fast coworker who has your facts and a deep memory of your system, but doesn't make the final aesthetic or strategic calls. It asks great questions if trained to, executes precisely, and proposes well, but the curating and the strategy stay with you. The unlock: "I don't know, let me ask Claude to inspect before I change it."

Example: swapping our entire icon library

~160 custom icons, inconsistent strokes and naming, engineers building a parallel set in code. I wanted Lucide, 1,500+ icons, consistent 2px strokes, importable via lucide-react. Weeks of work if anyone had found the time.

Inventory, usage map in a minute: what's used, what's dead, what's duplicated
Mapping table, Claude proposed Lucide equivalents (~75% correct first pass); I called the ambiguous ones
Import, 1,460 Lucide icons, namespaced under Lucide/, one pass
Mass swap, ~1,500 instance swaps across buttons, alerts, nav, forms
Keep GLS-specific icons, parcelLocker, Last-Mile, brand logos, separate GLS/ namespace
Update icon-wrapper preferred values, usable icons in the dropdown, not 1,500 to scroll through
Code Connect, Figma icons map to real lucide-react imports in Dev Mode

One afternoon. By morning: 1,460 production-ready icons, code-importable, clean namespace separation. Three weeks by hand; one session with Claude.

Example: designing a new feature with Claude Code

I recently designed an entire new feature without doing the from-scratch sketch-and-iterate dance. Claude Code had access to the @gls-nxt/uikit repo, the Figma file, the Storybook, and every existing pattern. I described the user need, the constraints, and the surfaces involved. Claude proposed a layout that used existing components in expected ways, flagged where I'd need a new variant, and laid out the screens.

I edited the proposal, moved things around, killed a panel that felt redundant, swapped a Tooltip for a Popover. But the bulk of "what does this look like in our system?" was already done.

This is a different kind of design work than the bulk-migration stuff. Not "AI generates designs for me", more like "AI proposes a first pass using the system I've already built, and I edit from there." Faster than a blank canvas. I'm still the curator; the system itself does most of the constraining.

Closing the loop: automating the broadcast

The work is one half. The other half is telling the team what changed.

For a long time that was the part that broke. I'd finish a token migration on a Wednesday afternoon and forget to write the changelog, or write it three days later when half the context had evaporated. Engineers using the DS would learn about a breaking token rename by hitting the broken build, not by reading a message.

This week I closed the loop. Now the same Claude session that does the work also publishes it:

I say publish DS update
Claude reads the session's task list, every audit, rebind, deletion, addition we did
It drafts a Slack message in the team's voice, headline, bulleted changes, who's affected, link to the Figma file
It drafts a row for the Figma Changelog page using the existing table format
I review both drafts in one turn
On "yes", Slack message posts to #design-system-sync, and the Changelog row appends to the Figma file

The whole "publish" step takes 90 seconds. Before, it would either not happen at all, or take 20 minutes of context-switching to write up half a day later when I no longer remembered the details.

What this unlocked: I stopped batching announcements. Now every session that touches the DS publishes itself. The team's mental model of "what's in the system today" stays current because the broadcast cost dropped to near-zero.

This is the meta-move I'm most excited about. The first level of automation was getting Claude to do my bulk work. The second level is getting it to handle the workflow around the bulk work, the boring administrative bookkeeping that exists between "thing is done" and "team knows about it."

If you're a designer maintaining a system, this is the layer to automate next. The work isn't done until people know it's done.

Closing thought

I still draw, pixel-push, and argue about CSS. But the rote migration work, changelog writing, and typography audits are done by the time I've finished my coffee.

If you're a designer thinking "I'd love to do that audit but it'd take three weeks", that's the work to bring to AI first. You'll get it done by Tuesday.

Back to home