A design system and agents for a one-designer team

A React kit aligned with Figma, a skills pack for Claude Code and a Notion index an agent can read: governance through the tool rather than the document.

Role: Design system and product management
Period: April to July 2026
Team: Sole designer, with product and technical leadership
Scope: Design system, skills, product management

Summary

Context: Angular in production, React for everything new, one designer: a written rule does not hold. The system had to be read by the tools the team already uses, Claude Code included.
My role: Design of the design system in Figma and React, writing of the skills, overhaul of the product management model and its index for agents.
Design systemtokens, components, demos
Skillsrules read by Claude Code
Figma and codeaudit and alignment
Product managementsingle chain, index for agents
Deliverables: React component kit
89 files, Tailwind v4 tokens
Figma design system
13 text styles, nearly 1,300 variants
Skills pack
4 public, 5 internal
Notion index for agents
written guardrails

89
component files in the React kit: 13 styles
of type, from the 64 px display to the 11 px caption: 15 scenarios
in the product management stress test

The design system

One designer, Angular in production, React for everything new: what is shared is the tokens. In Figma, 13 type styles and nearly 1,300 component variants, named as in the React kit, its alter ego.

Tessan-UI: browsing the catalog

Tessan-UI: tokens, color, type, motion

Tessan-UI: a dialog

Tessan-UI: mobile and booth components

01 / 04

The design system’s color ramps, in Figma

Skills so that every generation respects the system

As the only designer facing three stacks, I wrote the design system rules in a form Claude Code reads at every session: tokens, components, motion doctrine, patient vocabulary. The pack holds four skills in the public repository and five in the internal June version, with a written precedence between the React kit and the Angular SDK. Teams generate interfaces that are already aligned, without one more dependency. No adoption metric was instrumented.

The skills pack: the five skills of the internal version

A rule from the skills pack, and the kit rendered from those tokens

The React kit skill, and the rendered catalog

The motion skill, and a dialog of the kit

Figma and code, both ways

The audit of the Smile system crossed the code with the Figma variables and named the mechanism of the drift. On the app side, five read-only sub-agents went through the screens on June 25: five bar heights, a back target of 24 px instead of 44 on 15 of 23 screens, a single cause, the lack of a Header component. It was built the same day, then deployed on 24 screens.

The palette in Figma and the tokens in code

The buttons in Figma and the component in the React kit

Component audit of the patient app, June 25: five sub-agents, one root cause

Running and building with agents

A Notion page written for agents describes the databases, the statuses and the reading recipes. The agent answers “where does the mobile app stand?”, proposes a signed triage and never changes a priority without human validation; the stress test of 15 scenarios called for 7 fixes. On the delivery side, developers receive seven epics, 25 user stories, 40 screens and a CLAUDE.md template that carries the regulatory prohibitions, and they implement with Claude Code.