Work

WorkDistyl2025–26

I couldn’t be in every room. So I built something that could.

TL;DR ↓

Distyl, 2025. One designer in a company of engineers and strategists, shipping AI demos to Fortune 500 clients. Every demo looked like whoever built it. One designer couldn’t be in every room. A system could.

ProjectCognition

Year2025–2026

ForDistyl AI

RoleDesign, system, code, evangelism

TypeDesign system for humans and AI

StatusShipped. Live today as Folio.

Distyl's front desk, with two people blurring past in motion
At Distyl, everyone was moving fast.

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.

An engineer-built routine editor: default blue buttons, pink graph nodes, a chat pane on the left
1.0   Inherited. Built by whoever was in the room.
The same editor with cleaner type, card-style graph nodes and an inline generate panel
1.1   First pass. Same bones, cleaner type.
Grayscale layout: chat on the left, routine canvas in the middle, step inspector on the right
1.2   Restructured. Chat, canvas, inspector.
Final routine editor in Distyl purple: step cards, version tabs and an editing panel with an action menu
1.3   Landed. One system, applied.

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.

The Cognition docs site, now titled Folio: intro copy, two buttons and three design principle cards
2.0   Cognition. Still live, now as Folio.

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.

Codebase audit page: 344 hard-coded hex values, 2,061 raw color utilities, 0 tokens defined, 26 rogue dark classes
3.0   Audit. 2,405 violations, one page.

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.

Tony in a mustard beanie and California sweatshirt, talking with two product people at a table during a Distyl event
4.0   Talking shop with product people.

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.

Belief

Something I understand.

Sketches, concepts, early briefs. Just me, not yet in front of users.

Truth

Something we understand.

Prototypes and specs, tested with the team and a few early users.

Coherence

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.

TL;DR

Problem

Every demo looked like whoever built it, and one designer couldn’t be in every room.

Movement

Build a system the AI can read, so design shows up without a designer in the room. Ship it where the team already works.

Outcome

Greenlit as platform infrastructure. Still live today as Folio.

Moment

The audit. 2,405 violations turned an opinion into a number.

1Designer
4Releases in four months
60+Components
2,405Violations found