01Mess
Distyl ran on demos. AI strategists built them on site with clients. Some came from engineering, some from product, some from the industries they served. All smart. All different.
So every demo looked like whoever built it. A strategist who knew the front end shipped something solid, with real endpoints, in their own taste. Merge two demos and nothing matched. Hand one to another team and they started over.
I was the only designer. I couldn’t be in every room.
I’d watched this exact mess cost other teams a year.
02Reach
Distyl moved fast, and the work came in like a firehose. Hiring was never going to keep pace. Design had to scale without adding headcount.
Meanwhile I started the granular work myself in Figma. Every state, every name, every label. I expected it to take months. You can see it take hold, screen by screen.
The front-end team was small and heads down shipping. A Figma file nobody has time to build is a wish.
So the system had to live where the work already happened. In the code, and in the AI tools everyone was already using.




03Hackathon
Summer 2025. Teams were falling for Lovable. It made demos that looked close enough. Close enough is how you get six versions of the same button.
So at our hackathon I pitched the opposite. One system of record. Build it once and let it cascade through everything. Prompt it like Claude Code, and it pulls from the library instead of guessing.
I pulled in a couple of engineers and we built it together. We won. On an engineering-heavy team, a designer-led pitch taking the hackathon doesn’t happen much.
The tools weren’t there yet. Figma Make couldn’t hold the system. So we hard‑coded a slice of it into one repo. Colors, buttons, fonts. Consistent, mostly. It still wandered.
Right idea. Wrong year.
Demo to production in a straight line.
04Build
Early 2026. The tools caught up. Figma’s MCP got good. Claude Code got good. I’m not an engineer. I used the tools to teach me what I didn’t know.
The first goal was small. Get fonts, colors and buttons to match everywhere. If those match, the screens look like one company.
By February I had a package. A Figma plugin that rebuilt every token from scratch. Five lint rules that made the right way the only way. A CLAUDE.md that told the AI how the codebase actually worked.
Then I built the repo around it.
Two days to get version 1.0 standing in a repo. Token architecture, component scaffolding, a docs site. Then months of building it out, component by component, between everything else.
I called it Cognition.

05Receipts
Engineers don’t buy design opinions. They buy evidence.
An audit by hand meant weeks of side-by-side comparisons. I’d been reading about agent swarms, so I asked Claude Code to build one. Three subagents swept our three repos against the system at once. Clunky to set up. Perfect once it ran.
344 hard-coded hex values. 2,061 raw color utilities. Zero design tokens. Six parallel theme files and a pile of competing rules files, everyone working from their own.
Then the smoke test. I built a dark mode switch and told people to flip it. Anything on the system changes cleanly. Anything that glows the wrong way is off the system. Find it, fix it, flip it back.
The front-end team was all in. They just didn’t have the hours. Cognition sat low on a long list. Now the gap had a number, and the number moved it up.
I stopped talking design and started speaking engineering.

06Spread
I started sitting in on front-end meetings, then infrastructure and engineering standups. In some of those rooms I was the odd one out. So I said why. I’m here to learn how you put things together, so what I build plugs straight into it.
Same pitch every time. I built a tool. It makes your job faster. What am I missing?
At first it was a zip file. Claude skills, context docs on mission and intent, the system itself. Drop it in, prompt what you want, and you’re 80% there.
Then it went where the team already worked. Distributed as a skill across Claude Code, Cursor, Copilot and Windsurf. A token guard that blocks a production deploy on a bad color. A designer’s rule, enforced by the build.
Four releases in four months. 60+ components. Conversational UI built for how Distyl’s products actually talk.

07Proof
That summer we hired a front-end architect. His first week was the company offsite. He walked in expecting to build the foundation himself. Instead he had a head start. What got him most was that one designer built it.
The changelog says it plainly. System greenlit as platform infrastructure.
We moved into Storybook as the source of truth. I ran audits in VS Code and started shipping my own pull requests. Designer, in the repo, on purpose.
Engineers saw infrastructure. Designers saw expression. Leadership saw velocity with taste.
08Philosophy
Tokens are the easy part. The harder part is how a decision earns its way into the system.
I worked to three phases. Honestly, mostly for me. Nobody needed the philosophy. They felt the process.
Something I understand.
Sketches, concepts, early briefs. Just me, not yet in front of users.
Something we understand.
Prototypes and specs, tested with the team and a few early users.
Something they understand.
Polished, accessible, versioned, and shipped to everyone. Repeatable.
09What it changed
In October I left Distyl. The system stayed. It ships today as Folio, at the same address.
In 2023 I drew an AI teammate for a company that wanted a pair programmer. In 2026 I built one for a team that didn’t have one.
Software that builds software. Design that builds design. Same instinct.
