Agentic Design System

Components, design rules, and review tools that help AI agents build consistent interfaces.

Four application shells built from the Super AI Components registry: home, chat, studio and notebook — Four of the application shells in Super AI Components, captured from the live registry.

Status: Three systems, built June to August 2026
Tools: React, TypeScript, Storybook, shadcn registry, CI gates
Links: Open the registry Registry source

Three design systems in ten weeks: a client rebuild, a public registry and a personal kit. Agents did the volume. The design rules lived in gates, hooks and skills that check every change, which kept each system consistent while it grew.

The Minimal Design System docs home in four states: neutral and warm brands, light and dark. Four screenshots, crossfaded. Only the token layer changes between them.

Decisions

Put each rule where it can be enforced

If a CI gate can catch a mistake, it is a gate. If a gate cannot catch it but a risky tool call can be refused, it is a deny-hook. Only what survives both becomes prose in a skill.

Coverage as a list of debts

Components declare what they can do, and CI derives what each declaration owes: a component that claims keyboard support owes the story that proves it. Older debts sit in a baseline that new code cannot grow.

Storybook Rules page listing rule records with pattern, scope, exemptions, fix and reason — The Rules page in Storybook, rendered from the kit's rule records.

The method checks this site too

This portfolio has its own token gate. An agent that tries to hardcode a colour here is stopped mid-edit and pointed at the token it should use.

Super AI Components Minimal Design System Full story →

Next project

Jobsmith