Redesigning brianrogers.dev as a Terminal — with Claude

An afternoon project: rip out the old card-grid homepage and rebuild the entire site as a Tokyo Night terminal. Most of the typing was done by Claude Code.

If you're reading this, you're inside the new site. The whole thing is a terminal now — boot sequence, blinking cursor, command palette, fake homelab telemetry on the right, the works. The articles list is a cat <slug> away. matrix still does what you'd hope.

I want to talk about how it got built, because the answer is "in one afternoon, mostly by Claude Code," and I think the workflow is worth writing down.

The starting point

I had a static HTML/CSS site — converted from Astro a while back specifically because I was tired of build steps for what is, fundamentally, ten articles and a tools page. It looked fine. Dark theme, electric blue accents, card grid for videos and articles. Functional, forgettable.

Where the design came from: Claude Design

Before any code got written, I used Claude Design to generate the look and feel. The brief I gave it was tiny — three things:

1. A few screenshots of the old site so it knew what it was replacing (the dark/cyan card grid, the article previews, the tools page).
2. A one-paragraph vibe: "a dev terminal — Tokyo Night palette, JetBrains Mono everywhere, tmux-style tabs, a sticky command prompt at the bottom, a side panel with fake homelab telemetry. Playful and hacker-coded but content-first."
3. A list of must-haves: command palette, articles list, article reader, theme switcher, an easter egg or two.

What came back was a redesign/ bundle: a single self-contained index.html prototype, plus source files (app.jsx, pages.jsx, panels.jsx, commands.jsx, data.js, styles.css) and a README.md that read like a real spec — design tokens, component breakdown, keyboard shortcuts, the whole port checklist.

The README was explicit: this is a design reference, not production code. Recreate it in your real stack. My real stack is "no build step, just files in S3." So the question shifted from "what should the site look like?" (answered) to "how much of the prototype can I keep, and how much has to be rewritten?"

Decision one: keep it static

The prototype loads React, ReactDOM, and Babel from a CDN and compiles JSX in the browser. That's slow, ugly, and exactly the right call for a personal site that has to live on S3 with no build pipeline. It also means I could literally cp the prototype's index.html into static-site/ and have a working homepage in one command.

Which is what I did.

Decision two: don't make Claude rewrite my articles

The prototype's "article reader" rendered fake markdown inside the terminal. My real articles are 10 hand-written HTML pages with code blocks, images, and embedded YouTube links. Asking an LLM to faithfully port that content — even with strict instructions — is a recipe for subtle drift. So I patched the cat <slug> command: if the article has a url field, open it in a new tab instead of rendering markdown inside the terminal. Real article pages stay authoritative; the terminal is just a launcher.

This also keeps the SEO fallback intact. Crawlers see real HTML at /blog/<slug>.html; humans see a terminal. Everyone wins.

The Claude Code workflow

Almost every step from this point on followed the same pattern:

1. I described the goal in a sentence. "Apply the redesign to the homepage." "Restyle the article pages to match." "Add Google Analytics."
2. Claude proposed an approach — usually with two or three options and a recommendation. For the article restyle, it offered "lighter restyle of the existing CSS" or "full TUI shell on every page" and asked which I wanted.
3. I picked one, sometimes pushed back on scope, sometimes said "yes just ship it."
4. Claude did the work — reading existing files, writing a Python script when there were ten near-identical files to rewrite, running it, sanity-checking the output, then committing and pushing through GitHub Actions to S3.

The Python-script-for-bulk-rewrites move was Claude's idea, not mine. I would have edited each article HTML file by hand. Instead I got a 100-line script that extracted titles, dates, and body content from each old article and wrapped them in the new terminal shell. The script is a one-shot — it's done its job and gets thrown away — but it saved an hour of tedious editing.

What this took, in numbers

• 1 design brief: 3 screenshots + a paragraph of vibe
• 1 design bundle from Claude Design: ~17KB README + ~120KB prototype source
• 1 afternoon of back-and-forth with Claude Code
• ~12 commits, each pushed to main through the existing GitHub Actions → S3 → CloudFront pipeline
• 0 build step, 0 new dependencies, 0 frameworks

The takeaway

The value here isn't that Claude wrote the code, or that Claude designed the layout. It's that the loop got short: an idea ("make it a terminal"), a few screenshots, a paragraph of vibe, and a few hours later the whole site is shipped. Two Claude tools, one for design and one for code, with me playing editor and air-traffic controller. That's the part that feels new.

Try the site

If you're reading this on a desktop, hit ⌘K for the command palette. Try matrix. Try theme synthwave. Try sudo hire-me. The whole site is the easter egg.