Replit Agent 4 Buildathon
Build-in-public story: building a design system generator in 3 weeks. Here’s day one.
Every vibe coding project I’ve seen — including my own — starts the same way.
You open a new project, describe what you want to build, and the AI gets to work. In minutes you have something functional. But it looks… generic. The colors are arbitrary. The spacing is inconsistent. The typography feels like it was chosen by committee.
That’s because it was. The AI is picking defaults. And defaults don’t have a soul.
This is the problem I’m trying to solve with Tokn.
What is the Replit Agent 4 Buildathon?
Three weeks ago I didn’t know this existed. Then I got an email from Andrew at Replit, we exchanged a few messages, and I ended up registering for their Agent 4 Buildathon — a 3-week challenge to take a creative idea from concept to launch using Replit’s new Agent 4.
The structure is tight:
- Week 1 (Explore): Define what you’re building
- Week 2 (Build): Use Agent 4 to turn it into a real product
- Week 3 (Ship): Find your first users, make noise, get traction
There are weekly checkpoints, a $50,000+ prize pool, and a live YouTube announcement on April 17th. No pressure.
The rules: your project must be created after March 24th, and the majority of it must be built in Replit. Everything else is fair game.
The idea: Tokn
I asked myself one question: what’s the thing that makes vibe-coded apps look cheap?
The answer is always the same. No design system. No shared source of truth. Every AI-generated project reinvents the wheel — new colors, new spacing scale, new typography choices that don’t connect to anything.
Tokn fixes that.
You describe your brand in plain language — “a fintech app for freelancers, clean and trustworthy, deep blue primary color” — and Tokn generates a complete design system: color palette, typography scale, spacing tokens, border radius, component styles.
Get fernandocomet’s stories in your inbox
Join Medium for free to get updates from this writer.
Then it exports everything in three formats:
- CSS Custom Properties — universal, no dependencies
- W3C Design Tokens (JSON) — the emerging standard, works with Style Dictionary, Figma Tokens, and anything else
- Tailwind config — for the majority of vibe coders living in that ecosystem
And here’s the part I’m most excited about: it also generates a design.md file.
Why design.md matters
When I asked Andrew from Replit about cross-project referencing — basically, can project B read from project A like Lovable does — his answer was simple:
“Just put agents in both projects into plan mode and explain what you are trying to do. They will need to be publicly deployed to speak to each other.”
That’s when it clicked. The design system doesn’t need to be a technical dependency. It just needs to be readable. By a human. By an AI agent. By anything.
design.md is a structured markdown file containing all your design specs — colors with hex values and usage notes, type scale with sizes and weights, spacing system, component patterns. You deploy it publicly once on Replit. Then on any new project, you put the agent in plan mode and say: "Before you build anything, read the design system at this URL."
The agent reads it. Understands it. Builds with it.
This is what makes Tokn stack-agnostic. It works with Replit, Claude, Lovable, Cursor — anything that can read a URL and follow instructions. The format is the interface.
Day one: from idea to live product
I built the first version of Tokn in one morning using Replit Agent 4.
The prompt I used was direct: build a web app called Tokn with a landing page and a generator that takes a brand description in plain language, produces design tokens, and exports them in three formats. Dark mode, lime green accent #c8f060, monospace fonts.
Four minutes later I had this:
The hero headline was exactly what I had in mind. The generator was functional. The API was working. Agent 4 even tested its own endpoint and fixed an error without me asking.
Before writing a single line of code I also did the strategy work — a full Lean Canvas to validate the idea:
You can check it online at https://www.fernandocomet.com/lab/tokn-lean-canvas.html
The problem is clear. The solution is specific. The unfair advantage is real: I’m a designer and a developer, I’ve lived in both worlds, and design.md as a universal AI context format is a first-mover position nobody else is occupying right now.
What’s next
This is week one — Explore. I have two more weeks to build and ship.
Week 2 I’ll focus on making the generator smarter: better token generation, Figma Variables API integration, and the first real demos using Tokn as the design foundation for three different projects.
Week 3 is about distribution: getting Tokn in front of real vibe coders, collecting feedback, and making the case to the judges that this is something people actually need.
I’ll be writing here every week. If you’re building with AI tools and care about the gap between “functional” and “beautiful”, follow along.
Try Tokn: https://tokn--fernandocomet.replit.app
