The modern web is exhausted. It’s infinite, noisy, and designed to keep us scrolling forever. I missed the "finish line"—that feeling when you’ve read the news, checked the weather, and you are done.
So, for the Kiroween Hackathon, I decided to build Teletext Zero.
It’s a "Slow Web" browser that forces the chaotic internet into a strict 1980s TV format: 40 columns, 24 rows, 8 colors, and absolutely no scrolling.
Building a retro-constraint engine like this usually takes weeks of tedious CSS math and state management. I built it in a weekend using Kiro, an AI-native IDE.
Here is how I used Kiro’s "Hybrid Workflow" to switch between being a rigorous Architect and a creative Artist.
The Problem: Logic vs. Vibes
Every developer knows the struggle.
- The Architect Brain wants strict rules, type safety, and robust architecture.
- The Artist Brain wants to mess around with shaders, animations, and "feel."
Usually, you have to compromise. With Kiro, I didn't have to.
Phase 1: The Architect (Spec-to-Code)
To make Teletext Zero feel real, I couldn't fake the constraints. If the text wrapped wrong or the grid broke on a mobile screen, the illusion would die.
Instead of writing React components manually, I used Kiro's Spec mode. I wrote a requirements.md file that defined the laws of my universe:
- The Grid: Must be exactly 40x24 characters.
- The Input: Keyboard only (3-digit page dialing).
- The Palette: Only the standard 8 Teletext colors.
Kiro took this spec and generated the entire engine. But here is the kicker: it didn't just write the code; it wrote Property-Based Tests (using fast-check). It mathematically proved that no matter what text I threw at the engine, the layout would never break or scroll.
I had a bulletproof foundation in minutes.
Phase 2: The Artist (Vibe Coding)
Once the logic was solid, I needed it to look like a haunted TV found in an attic.
I switched Kiro to Vibe mode (conversational coding). This is where the magic happened. I didn't write CSS classes; I just described the aesthetic:
"Make it look like a 1980s Trinitron. Add scanlines, a phosphor bloom on the text, chromatic aberration on the edges, and a subtle screen curvature vignette."
Kiro generated complex CSS shaders and keyframe animations instantly. It tweaked the text shadows to simulate that fuzzy, glowing look of old cathode ray tubes. It was like pair-programming with a retro-graphics expert.
Phase 3: The "Kiroween" Twist
Since this was for a Halloween hackathon, I added a ghost in the machine.
Using Vibe mode, I instructed Kiro to build Page 666.
- The Logic: If the user dials 666, the system degrades.
- The Visuals: Random character corruption and background red flashing.
- The Audio: Kiro helped me wire up the Web Audio API to play static hiss that syncs with the visual glitches.
The Result
Teletext Zero isn't just a toy; it works.
- Page 200 pulls live BBC News via RSS.
- Page 300 pulls tech news from The Verge.
- Page 400 uses the browser's Geolocation to fetch live weather from Open-Meteo.
And because of the Spec-driven foundation, the Kiro-generated "Word Wrap" logic takes those long web articles and perfectly truncates them into 40-character summaries. It respects the grid.
Conclusion
Kiro changed my mental model of development. I used Spec to enforce rigor where it mattered (the engine) and Vibe to embrace chaos where it was fun (the aesthetics).
I didn't just write code; I directed a vision.
🔗 Try Teletext Zero here: https://rafi.is-a.dev/Teletext-Zero/
💻 Check the Repo: https://github.com/MdRaf1/Teletext-Zero
Have you tried AI-native IDEs yet? Let me know in the comments!
Built with #kiro
Top comments (0)