HHacker News is probably my favorite place on the internet. I’ve been part of the community for over a decade, and I’ve learned so much from the incredibly smart and thoughtful people there.
I love the site. But it’s ugly.
There’s a certain charm to that brutal simplicity, and I know a lot of engineers love it—but as a designer, it’s not for me. For a while now, I’ve been thinking I should just build an extension that adds a few styles—a little more breathing room, better typography, and a dark mode would go a long way.
So over two weekends, I built Zen Hacker News—a Chrome extension that redesigns Hacker News with better typography, a customizable layout, and full keyboard navigation.
The two main features I’d like to call out are customization and keyboard navigation.
Customization comes in a bunch of different forms. The extension adds light and dark color modes, as well as a contrast mode. Typography is important to me, so I’ve added options to change typefaces. There are now system defaults plus some personal favorites like IBM Plex Sans, Literata, and Recursive.
Theming was another big one. There are 22 color themes adapted from Radix. I know probably only the designers on the forum can tell the difference between Zen, Slate, Sand, Olive, and Sage—but that’s ok. There are also fun ones like Cyan, Iris, and Tomato.
The feature I spent the most time on is keyboard navigation. There’s something I really love about keyboard-driven applications—if you use a tool a lot, it’s just easier to interact with it via keyboard.
The extension has high-level shortcuts for navigating pages—G, B for Best, G, P for Profile, and so on. But the real value is being able to use the keyboard to navigate and take action on comments. Hit U on a focused comment to toggle upvoting. Hit Space to collapse or expand it. Hit Shift + Arrow Key to quickly jump between sibling comments.
I also built a chord indicator that shows which keys you’ve entered as you type a shortcut sequence. It’s probably a little overkill, so there’s a setting to disable it—but I think it makes the keyboard experience feel much more intentional.
There’s also a little easter egg—hit G, R and you’ll jump to a random submission from Hacker News history. It’s a small thing, but I keep finding fascinating old threads I never would have stumbled on otherwise.
Uncertain Vibes
I’d been wanting to build this extension for a while, but what finally pushed me to do it was a desire to learn AI-assisted coding. Last week I wrote about Steve Yegge’s Gastown, and his vision of agents managing agents was provocative enough to make me give these tools another shot. I needed a project to learn on, and Zen HN was the perfect excuse.
But how exactly does one vibe code?
There was a lot of fumbling at first. I downloaded OpenCode after seeing recommendations on HN and tried to one-shot some apps—a link-in-bio site, a CRM scaffold. Nothing stuck. I didn’t yet have a feel for how to direct an agent or what to expect from one.
What got me over the plateau was watching someone work through real projects on YouTube. His videos on Warp and the OpenCode CLI helped me understand the rhythm of working with an agent rather than just prompting one.
I experimented with local models too—Qwen 3 Coder 30B is surprisingly capable, but painfully slow for coding tasks. It’s like comparing dialup to fiber. The vast majority of this project was built using Claude Code with Opus 4.5, which ended up being the best balance of price, speed, and quality. I burned through a week of Codex 5.2 tokens in a few sessions. It’s a better coding agent, but the cost adds up fast.
Learning
Once I found my rhythm, building with an agent was surprisingly easy. A few things stood out.
The more specific you are about what you want, the better the output. Vague prompts produce vague code. When I didn’t know how to be specific—when I wasn’t sure what to ask for—I’d use plan mode to go back and forth with the agent until the direction was a little more clear. It would lay out several options, and I could work from there.
My debugging workflow didn’t change much either. If functionality wasn’t working, I’d ask it to add logging so we could troubleshoot what was going on. I’d send the logs back, explain the behavior I was seeing and ask how I could help troubleshoot. This worked quite well.
I will say—even robots have a hard time with CSS. They were all terrible at it—writing overly specific selectors, duplicating styles, ignoring what they’d already written. For a while I’d push back and make them reuse existing classes, but I gave up on that pretty quickly. I was trying to timebox this project, and honestly, the agent is the one who’ll have to deal with the messy CSS in the future anyway. Well, at least partially.
We were able to get the UI mostly to where I wanted. If there was an issue in the interface, I’d inspect the DOM, find the relevant classes and drop it into the prompt. If there was a visual issue that was hard to describe, I’d take a screenshot. This mostly worked although it took many more iterations.
I am curious if this would have been easier starting with a framework instead of starting with existing styles that needed to be replaced. Or maybe I should have been more strict about the classes it was writing. Something to think about for my next project.
What’s Next
There’s more I want to do. I’m thinking about how to simplify the navigation. Right now it’s a bit cramped, and I’m torn between leaning harder into keyboard shortcuts or adding options to customize what appears. I’d also love a “surprise me” button for themes, since I keep bouncing between favorites and can never commit.
Get It
Zen Hacker News is open source, and you can install it from the Chrome Web Store.
I hope this is a useful contribution to the community that’s given me so much over the years.