Case Study

Foundations: Tokens and Architecture

The system runs on three layers of tokens: primitives, semantic tokens, and component-specific tokens. Tokens are defined in Figma with Tokens Studio, transformed with Style Dictionary, and land in a single CSS variables file that is the source of truth in code. Spacing and type use clamp(), rem and vw so layouts scale, while Figma stays in pixels, a gap I call out below.

Building the Components

Each component is written in Lit, shown in Storybook and designed to work with a keyboard and a screen reader first. I worked with one co-designer, and both of us are comfortable in code, which kept design intent and implementation close. Form components use the browser's form association so they behave like native inputs.

Accessibility is part of the component, not a later audit. I worked from WCAG and WAI-ARIA patterns such as the multi-select listbox (using aria-selected without checkboxes), form validation that rewards early and punishes late, skip links, and clear contrast across button and input states. One example is a three-part table options overlay (overlay, table and row), modeled on SharePoint's selection experience.

Teaching Claude the System

A model does not know your design system, so I wrote it down for one. I built a set of markdown files that describe how Unity works: the token names and what each is for, how components are structured and named, the accessibility rules, and the conventions for building new work. I update them as the system changes.

The rules are specific, because vague rules produce generic output. For example:

• Match Figma heading levels with real semantic tags.
• Use the exact token name, not a color that looks close.
• Use the shared layout utilities and the spacing scale, not one-off values.
• Check the existing icon set before adding a new icon.
• Form components must be form-associated, and any change to shared infrastructure is flagged before it is made.

I also wrote a prompt template for starting a prototype build, so anyone on the team begins from the same structure instead of a blank chat.

From Figma to Working Prototype

With the files in place, I connected Claude Code to Figma through the Figma MCP, which lets it read the structure, styles and components of a design directly. The flow is simple. I fill in the prompt template, paste the Figma links, and Claude Code builds a click-through prototype in the repo using real UWC components and tokens, not lookalikes.

I review every build against the fidelity rules above, then fix the markdown file when it gets something wrong, so the next build starts better. The prototype is built from the same components engineers ship, which shortens the distance between design intent and production code.

Skills for the Team

A design system only scales if people can use it without asking me. So I packaged the knowledge as skills the team can run themselves.

• Design briefs and personas. Cursor skills that walk a designer through a consistent brief or persona, so the output has the same structure every time.
• Design with the system. A skill for Claude and Cursor that lets product managers and designers create designs from the Unity design system, which is mapped for a model to read instead of living only in Figma.

Product managers are starting to use it in their flow, which brings them onto the same components as design and engineering. Designers keep the judgement calls; the skill handles the repeatable parts.

Rollout and Adoption

I own the rollout roadmap and work with engineering to bring each product onto UWC, which is how fragmented designs turn into one framework. Angular teams are the primary audience, with a React wrapper and plain JavaScript supported. Documentation lives in zeroheight and Storybook, so designers read guidance and engineers see working components.

Because six designers, a Director and several dev teams were standardizing at the same time, I chose tools that fit that scale, not the lightest option available.

Decisions, Trade-offs and What AI Does

What I decided.

• Web Components over a framework library, so no team is locked in and every team can adopt at its own pace.
• No Tailwind. The existing token files already give a richer semantic system, so Tailwind would have been redundant.
• No third-party component architecture laid over Unity, since it would have replaced the system I was building.
• zeroheight, after first rejecting it. At this scale, with six designers, a Director and several dev teams standardizing together, the overhead was justified.

What AI does, and what I do. Claude Code and Cursor write first drafts of components and prototypes quickly. I decide the architecture, the token model, the accessibility behavior and the conventions, and I review what comes back against them in Storybook and against WCAG and WAI-ARIA patterns. When a result is wrong, I fix the instruction file, not just the output.

What is still open. There is no automated pipeline that pushes Figma changes into the components, so Figma and code are aligned by naming and by review. Figma tokens are in pixels while the CSS uses clamp(), rem and vw. Closing that gap is on my roadmap.