DEV Community

Cover image for How We Vibe-Coded The Daily Token with Grok Code
Darko from Kilo
Darko from Kilo

Posted on • Originally published at blog.kilo.ai

How We Vibe-Coded The Daily Token with Grok Code

This post was written by Kilo DevRel Engineer, Brendan O'Leary/ Sharing it in its original version:

We knew the day was coming. Like winter in Westeros or service charges for parties of six, the free ride with Grok Code Fast couldn't last forever.

We knew it would be a watershed moment for our community. Our community---builders, AI enthusiasts, developers from every corner---united by shipping fast and having fun doing it. The vibes? Immaculate.

The Weight of the Moment

Here's the thing about major shifts in the AI landscape: You can mourn them or meme them.

I chose option two. What if we covered the "crisis" of losing free Grok access like breaking news? What if we built our own Onion-style parody using Grok Code Fast, the very tool we're losing?

The answerThe Daily Token.

The method: Pure vibes.

(https://dailytoken.kilocode.ai/)

Building with Maximum Vibes

I fired up Kilo Code in Architect Mode with Claude Sonnet 4.5 with a simple request:

Make a plan for a satirical news website parodying the "crisis" of losing free Grok AI access.

But here's where things get interesting. I used the "enhance prompt" feature and ended up with this beast:

Design the structure and layout for a satirical news website parodying the "crisis" of losing free Grok AI access. Include sections for hero (breaking news banner, ticker, live indicator), featured articles (3 satirical pieces), video placeholder, interactive elements (crisis calculator, survival guide), t-shirt giveaway, and live newscast elements. Specify HTML structure, CSS classes, and key design elements to achieve a serious news site aesthetic with red accents, professional typography, and animations. Ensure the design enhances the absurdity through deadpan presentation. Provide a detailed plan including file organization, responsive considerations, and how elements fit together. Only perform this planning work and signal completion with a summary of the design plan.

Since Sonnet supports images, I threw in a screenshot of an actual news site to help set the tone. Kilo Code immediately understood the assignment---we weren't just building a joke site, we were building a professionally executed joke site.

Enter the Orchestra

This is where the magic happened. Since Sonnet had created a comprehensive plan, I fed it into Orchestrator Mode and it started delegating tasks to Grok Code Fast 1 (still free at this point---timing is everything).

The first task went something like:

Create the HTML structure for the satirical news website based on the provided design plan. Use the specified HTML structure with semantic elements and CSS classes. Create a new file at /dont-panic/index.html with the full HTML document including doctype, head (with title "Don't Panic: The Grok Crisis", meta tags for responsiveness, and links to style.css and interactions.js), and the body with the hero, main sections (articles, video, interactives, giveaway, newscast), and footer. Include placeholders for content (e.g., lorem ipsum or brief descriptions) in each section to match the structure. Ensure the structure is ready for styling and scripting. Only create this HTML file and signal completion with a summary of what was created.

True to its name - orchestrator mode is able to handle this switching between "bigger" and more expensive modes for planning and then delegating very specific tasks (the next was all about styling and CSS) to cheaper (or free??) models.

Getting the "funny" right

Now, a satirical news site without funny content is just... a bad news site. So I switched over to Claude Opus 4.1 for the writing. Not because the other models couldn't write, but because when you want that perfect balance of deadpan delivery and absurdist humor, Opus just gets it.

I asked:

can you add a /opinion subpage that the opinion link links to that has our "daily token" header but content that matches the overall theme of a satirical news website parodying the "crisis" of losing free Grok AI access

The results were chef's kiss---headlines about "Token Hoarding Reaches Record Levels" and "Local Developer Discovers How to Code Without AI, Immediately Forgets." You can find them on opinion and other subpages of The Daily Token.

The Devil in the Details

Of course, no project ships perfect on the first try. The news ticker was scrolling faster than De Mosselman can sing:

The @/components/newswire.tsx ticker is way too fast to read. can you make it much slower?

And the mobile view left...well a lot to be desired:

Can you help fix the header on mobile?

Done. 30 seconds vs. 30 minutes of debugging CSS media queries.

Why low-cost models shine: Give them specific tasks you could do yourself, but they'll do faster. Multiple iterations? No problem when you're paying pennies.

Adding an Easter Egg (or two)

You can't have a proper developer-focused parody site without an easter egg (or two). I had this tweet about our upcoming CLI that I'd been using for marketing, and I thought: what if developers who open the console see something fun?

So I showed Grok the tweet image and asked:

Attached is a picture of a tweet that is advertising our soon to be CLI. Can you make a hidden easter egg of a cool looking console.log style thing like this in the console of the browser so that if developers open it they see a similar message?

Now, any developer who opens their console gets a little surprise---a recruitment message styled like a terminal output, complete with ASCII art.

The Meta Nature of It All

The perfect irony: Using AI coding tools to build a satirical website about losing access to AI coding tools.

This was pure fun---no stakeholders, no sprint planning. Just me, a Thursday afternoon, and a silly idea that shipped in two hours.

The winning strategy: Pick the right tool for each job.

  • Architect Mode with Sonnet → planning

  • Orchestrator Mode delegating to cheaper models → coordination

  • Grok Code Fast → heavy lifting with great prompts written by "larger" models

  • Opus → comedy writing

  • Back to Grok → refinements

Each model doing what it does best. That's how you ship.

What This Really Means

The numbers: Two hours. Maybe $4-8 in tokens. Less than a San Francisco sandwich for a fully functional, responsive satirical news site with animations and easter eggs.

Free Grok Code Fast unlocked something bigger than cost savings. It proved there's a massive market of builders waiting to happen---people with ideas but not all the technical skills. People who know enough to be dangerous but need that boost to actually ship.

Bottom line: As we say goodbye to free Grok Code Fast, I'm not mourning. We've proven AI coding assistants aren't toys or threats. They're democratizing tools that turn ideas into reality.

The free ride might be over, but the journey? Just getting started. Models change. Great workflows keep going.

Top comments (0)