Role: Lead product designer, system architect
Tools: Figma, Claude Code, Figma MCP, GitHub
Scope: Tokens, components, docs, QA, workflow
Outcome: v0.1.0 shipped, QA clean

At a Glance

• 195 design tokens, Light and Dark

• 34 components

• 235 variants

• 64 vector icons

• 22 text styles

• 17/17 text pairs pass WCAG AA in both themes

• 0 issues in the final library QA

• 60–80% less production time (my estimate)

The Challenge

AI can draw screens. Can it respect a design system?

Left alone, AI tools invent their own buttons, colors and spacing, and every screen drifts a little further from the system. I wanted the opposite: an AI teammate that builds only from the library, asks before it invents anything, proves its work is clean, and keeps every designer and developer on the same version.

Process

From two brand directions to a published system.

I made every decision; Claude Code did the production work through the Figma MCP, one checked step at a time.

1. Explore. I explored two brand directions side by side, a wealth-management look and a SaaS look, and chose the SaaS one for a dense work tool.

2. Tokens. 195 variables in six collections: primitives, semantic colours with Light and Dark values, spacing, radius, size and type.

3. Components. 34 components and 235 variants, every value bound to a token, with focus states and clear properties.

4. Document. One page per family: usage, properties, labelled variant grids, examples and contrast tables.

5. QA. A script checks bindings, styles, contrast, layer names and code syntax. The first run found 15 issues; the final run found 0.

6. Sync. The component registry and the check's key tables are regenerated and pushed to GitHub.

How I use Claude Code

Rules in a repository, hands in Figma

Claude Code runs on a folder of instruction files that I wrote. A CLAUDE.md file loads the rules automatically, a registry tells Claude which component to use for what, and the Figma MCP lets it build directly in the file. I review plans, not pixels.

Four guardrails keep the AI on-system

• Reuse table. Before building, every element is mapped to a library component. Anything missing is flagged.

• No improvising. Claude never draws a missing component. It stops and proposes adding it to the library properly.

• The check. A read-only script proves a screen file uses only library components, tokens and styles.

• Library QA. Every change keeps the library at zero issues before it is published.

Team Workflow

Designers and developers pull the same truth

Figma holds the designs. GitHub holds the rules, the component registry and the checks. After every library publish, Claude regenerates the registry and the key tables, I commit and push, and the whole team pulls.

• Designers pull and their Claude knows every new component, so screens stay on-system.

• Developers pul and every token already carries its CSS name, such as var(--lw-color-bg-brand), visible in Dev Mode.

• Nobody drifts. Skip a pull and the check flags it immediately.

Link: View the repository on GitHub → github.com/ptksl/loopwise-design-ops

Key features

Built like a product, not a sticker sheet

A three-layer token architecture. Raw primitives, semantic colors with Light and Dark values, and components that only ever use the semantic layer. A theme or brand change happens in one place.

34 components with real states. Buttons, inputs, selection controls, navigation, feedback, tables, overlays and page patterns, each with documented properties and keyboard focus.

Dark mode for free. The same screen in Light and Dark. The Dark version is a copy with one variable switch; not a single layer was recolored.

Accessible by default. All 17 text and background pairs pass WCAG AA in both themes, focus is always visible, and status never relies on color alone.

Impact

Hours of production became minutes of review

Claude Code took on the repetitive production work: creating and binding tokens, building 235 variants, laying out documentation, running QA and keeping the repository in sync. My time moved to the decisions that matter. By my estimate it cut production time by 60 to 80 percent compared with building the same system by hand.

What I learned

• AI is only as consistent as the rules it is given. Writing the rules is design work.

• Proof beats trust: a script that says "clean" settles debates faster than a review meeting.

• The best use of AI in design is not faster pixels, it is more time for decisions.

What's next

New component families (date and time, filters, drawer, charts) added through the same reviewed process, Code Connect once the components exist in code, and product screens built only from the library and proven clean.

Links: View on GitHub • Open the Figma file