Notes from Building
1. Clients are moving from “send us a PDF” to “send us a DESIGN.md” — and those are not the same experience.
PDFs and Figma files implied something you browse and judge visually. DESIGN.md implies a contract something else will consume, namely agents.
But if you’re in the middle, getting a file from a designer, trying to take a quick glance at a thing… looking at monospaced markdown is tough to judge. It reminds me of the days when a client would try to open an Illustrator file preview and just get an extension icon. “Can you send me a screenshot?”
2. Multiple formats, one parser, more flexibility.
This is a new and evolving format. The world has not yet landed on exactly what this format looks like. You’ll find formats like @google/design.md but there’s also a whole world of other takes on this idea. And that’s kind of the thing: an agent can interpret that. Our tool just needs to read each md file generously: frontmatter, tables, **Name** (#hex), component lines, CSS variables.
3. The file shouldn’t cost you to visualize it.
This markdown file is meant for an agent, but that implies passing the file to an agent, burning tokens, iterating, and a lot of non-deterministic actions. What if you just want a quick glance? This lets you do that without cost, without a paid account. Just one quick deterministic glance. No tokens.
4. With .MD formats still being novel-ish, this visualizes what you want, where you’re most likely to interact with it.
We started with just a workbench page. That was enough to paste and iterate, but not enough when the file shows up in Gmail as an attachment preview. So we made it a Chrome extension.
Hard to picture a design system when you are only reading design.md as raw markdown in your inbox. The floating Preview DESIGN.md button reads the open file and opens the style guide in a modal, right there. Because style guides were always meant to be seen.
