tired: Claude Code ports my personal website to a new framework
wired: Claude Code generates a command center UI where I can execute the port! with live feedback, including a side-by-side preview of old / new site 😎
this is an example of what I call an "AI HUD" -- a "heads-up display" that gives me visibility into what's going on. i can see:
- what terminal commands are running
- what files are being created on disk
- a live running preview of the old / new website (!)
this HUD was actually my third attempt at doing this task, and I liked it the best. here's why I landed there:
I wanted to move from middleman to astro for my personal site. These are both static site generators that output html, so I suspected an AI agent could do a good job with a port -- since it could compare old / new build output and try to match.
Attempt 1: Agent
I just had Claude Code do the port. It went pretty well.
But it was hard for me to review what had happened! The git diff was dozens of new files and it was hard to tell how they mapped to the old site. I think the LLM also tried directly writing some files rather than doing deterministic copying, which felt dangerous.
Attempt 2: Script
I realized a better approach was to have Claude Code write a script that would do the port. The script would execute shell commands like "copy all the markdown files from this directory into this other directory in the new site".
This worked much better because I could review the *process* rather than the *results*. Still, even with a nicely commented script, it felt like I was doing a lot of work to review. I wondered: how could I make it ridiculously easy to review this?
Attempt 3: HUD
Enter the command center! This is an entire web app that I had Claude build just for this one task. I can click buttons to run each step of the port, and watch the new website gradually materialize.
It has a node server that runs on my local machine that executes commands on my filesystem and coordinates dev servers for the old/new site. And then a web UI that talks to that server to visualize terminal commands, file trees, and live running previews. It's a HUD because I feel like I can ambiently see everything that the port process is doing 🧐
Was this whole thing worth making for this one-time task? I'm not sure, maybe it was overkill 😅 But it did help me feel more confident that I understood what was going on, and total time was still less than it would have taken me to do the whole port by hand!
One way to look at this experience is: "AI can put absurd amounts of effort into a pull request description."
What do I mean by that? Well, a PR description is a way to communicate a code change to a human. Typically we do that by writing a bit of text, because that's all we have time for.
But given more time and effort, we can do better! An interactive command center / HUD can help a person understand what a code change is actually doing. Historically you'd never imagine investing the effort to do that for a single PR. But now it's within the realm of possibility.
So, next time you have an agent do something for you, and you wish you understood better what it was doing, consider: instead of just asking for textual descriptions, maybe ask the agent to make you a HUD!