DESIGN SYSTEM / R&D
CHANDRA GARRE · SELECTED WORK
Ask an AI to build a screen and you get something competent that belongs to nobody. I built Weave so agents build in my system, and developers can take any component and use it as is.
THE WORKING SYSTEM
Open Storybook
Left: an illustration of where a screen drifts when nothing is decided for it. Type, colour and shape change from card to card. Right: the same screen, designed with Weave’s components and tokens. The real, unedited agent runs are in chapter 01.
Before Storybook
After Storybook
- Five typefaces on one screen.One type family and one scale.
- Seven accent colours, none with a job.Teal means one of four things, nothing else.
- Three button styles for the same action.One button, one meaning.
- No summary, so you read every card to know your day.One line, one chart and one goal tell you the day.
- Developers rebuild each component by eye, from a screenshot.Developers open a component, set the props and use it as is.
- Agents guess, and guess differently next session.Agents read the rules first, then build with what exists.
Agents get one file.
AGENTS.md loads before the first line of code: the tokens, the rules, and what to do when something is missing.
Developers get one link.
Open the Storybook, set the props with live controls, and use the component exactly as you see it.
Open the Storybookweave.whychandra.in for developers. AGENTS.md for agents.
Competent, and not mine. Two runs of one prompt picked the same arbitrary indigo, the same typeface and a product name I never chose.
The model is not the problem. It has nothing to build from.
So it decides for itself. Then it decides again next session.
Developers pay for it too. Every generated screen gets rebuilt by hand before it can ship.
Four runs, one prompt. Layout varies in both pairs because the brief was open. In the Weave pair, nothing else does.
Developers browse the Storybook.
Scan the variants
Flip the states
Change the props live
Agents read AGENTS.md.
Cannot click a swatch
Need the rules in plain text
Before the first tag is written
Change the props. See it live. That simple.
01
Open a component
Every one of the 35 has a live reference page.
02
Customise it
Set variant, tone, size and state with real controls. The component updates as you click.
03
Use what you see
The prop names in the table are the ones you write, and the ones an agent reads.
This is the real Button page, not a recording. Change a control and the button above it changes.
What AGENTS.md hands an agent
Token mappings. Design intent becomes scoped custom properties.
Negative constraints. No raw hex, no primitives, no arbitrary margins, no inline styles outside tokens.
Fallback protocol. Pattern missing? Compose from existing components and log the gap. Never a silent workaround.
- 01Teal-700 (#006b73) carries white at 6.27:1. Teal-600 is 4.21:1 and fails, so the rule is encoded, not remembered.
- 02Eight OKLCH ramps share one lightness curve, so step 600 weighs the same in every hue. Contrast is computable from position alone.
- 03Three layers: primitives, semantics, components. Nothing reaches past semantic. That one rule is why dark mode is automatic.
Decide it
Every visual decision made in Figma before any code existed. Named well enough for a human.
Name it
The same file rebuilt so nothing is implied. Every value named by purpose, every state written out, every constraint on canvas instead of in my head.
Hand it over
The two files look nearly identical. Only one can be handed to an agent, or to a developer who was not in the room.
“Both controls meet the 44px hit area even though they are drawn smaller.”
The feature I documented but never built
The controls were drawn at 32px, with no hit-area expansion anywhere in the CSS.
A linter cannot catch it. There is no code to flag.
A design review cannot catch it. The docs say it is handled.
The tool made the same error twice
FAILURES REPORTED
IMAGINARY
First audit: it flattened translucent dark mode tokens against white and reported contrast failures that did not exist.
It caught its own error, logged it and explained the cause.
Second audit: same mistake.
Knowing about a mistake does not stop you repeating it. Turns out that applies to machines about as well as it applies to me.
I had agents build a working dashboard using nothing but Weave, and logged every place the system could not be used as written.
Hardcoded widths. Card was fixed at 600px and ListItem at 260px, so every card in a grid needed an override, whether an agent or a developer was building it.
Missing pieces. No calendar and no stat tile, the two most common things on a dashboard. Both builds hand-assembled their own and they came out different.
Ten are fixed. Card and ListItem fill their parent, Calendar and Stat are real components, and Card now does what its docs promised.
Eight are open. Six of them are docs describing a slightly different system: shadows Button never drew, seven Tag tones where the code has five.
CURRENT, 1.75:1
Email address
WCAG MINIMUM, 3:1
Email address
It is the library default. Raising it changes how every form in the system looks.
I scoped it to one token instead of a value buried deep in MUI.
I have not decided yet. Hover, focus and error states all clear 4.5:1.
Encoding contrast into tokens, enforcing semantic boundaries tightly enough for an agent to traverse, wiring an accessibility gate that actually blocks a release. I wanted to know what those cost and what they catch before proposing any of it to a team that depends on the answer.
01
Drift is invisible until something checks it.
I wrote a rule, documented it as met and never built it. That happens to every system over time, and no review process I have worked in would have caught it.
02
A gate that fails everything gets switched off in a week.
Mine first failed 173 of 236 stories because isolated components have no main landmark. Scoping matters more than strictness.
03
Automated findings need verification, not trust.
The agent made the same measurement error twice. I read every finding against the source before accepting it.
Open the live Storybook