cblocher.

Gamifying a style guide: Headline Hero

Content style guides are often boring and ignored. I wanted to turn ours into an interactive game using Gemini.

Headline Hero Laptop Mockup ## The Idea: "Vibe Coding" Reading and memorizing content guidelines can be a tedious task. To make it more engaging, I utilized an 8-page PDF outlining guidelines for headings and URLs. My goal was to completely "vibe code" an interactive game without writing a single line of code myself.
PDF Source Material
## The Build I provided the source PDF to Google Gemini and prompted it to generate the HTML, CSS, and JS necessary for an 8-bit, "Space Invaders" style game. The objective? Shoot down "Passive Voice" and "Jargon."
Prompting Gemini Canvas
Gemini Canvas rapidly generated the functional frontend code, iterating completely through conversational prompting.
Final HTML Code
## Deliver & Learnings I shared the preview link with the team, and finalized hosting it directly on GitHub Pages. The "Headline Hero" game received positive feedback from testers, proving that you don't need to be a software developer to create functional, engaging internal tools. **Next Steps:** Planning "Documentation Quest," a sequel featuring a "boss level."