Wiring In the Screens
Drive AI agents through a million lines of code you did not write. Recon, surgical navigation, codemods, characterization tests, and a toolkit of four reusable skills you keep.
The Claude Design mockups are done, and I like them a lot:
- Git history, with a link over to planning.
- Planning, with a chat pane and explore, brainstorm, and plan/spec areas. I still need to sort out how explore and brainstorm differ.
- Architecture, with boxes you click to see details on the right and dashed areas showing what still needs to be built.
- The plain VS Code window, for when you want to look at files yourself. I'm keeping it. It just isn't the main screen anymore.
These are placeholders for now. Where does the data live when they're real? I own the IDE, so I can put it in a dot directory in the project if I want.
I download the mockups as HTML, put them in the repo under screens/, and give Opus the job: implement these screens, stick to the design as closely as possible, do not deviate. Stub the data. Make them navigable and not editable.
Why Opus and not Fable? Fable already did the design thinking. The spec is locked down, so this is implementation work and doesn't need the lateral thinking I'd pay Fable for. If the spec were fuzzy, I'd pay for Fable.
It did not go perfectly. I spent some time getting the screens to handle resizing and zoom properly. But it works. "Harbor" is a fictional project in the mockups, and clicking through takes me to planning, Git history, architecture, and testing, all inside VS Code tabs with their own icons. The architecture page is a mess and needs work. That's fine for now.
VS Code runs on Electron, so putting HTML inside it isn't a big deal. Getting those screens to show real data is the next job.
Drive AI agents through a million lines of code you did not write. Recon, surgical navigation, codemods, characterization tests, and a toolkit of four reusable skills you keep.