Redesigning austegard.com

I created my old site as a deliberately simple static page, just a handful of links to my various social profiles and a few projects, and all my bookmarklets. Then I got hooked on agentic vibe coding and things kinda exploded...

The old aesthetic was clean and ... dull. One miniscully interesting aspect was how I reused the favicon as the main graphic, blowing up an Oscar the Grouch icon (my longtime online avatar) to partially fill the page, then outlining each exaggerated pixel using a hand-built SVG. (Ah, simple times...)

Last night I tasked my agent, Muninn to redesign its own website, in a Sonnet 5.5 Ultracode session. It took 7.5 hours, but came out great! So I asked Muninn for the same treatment here. I dialed the Effort down to Extra, but told it to use subagents in a workflow, which means several Claude instances were still working in parallel on separate parts of the job. Claude did the building. I chose directions and sent corrections.

Three directions

Three agents each built a prototype home page without seeing the others: a topographic map sheet, a pegboard workshop wall (a literal reading of the old site's “Grouch's Workshop” theme), and a typographic card catalogue with a search box. I picked the map, kept the catalogue's search, and kept a small pixel Oscar from the workshop wall, now at the bottom of the page and never behind text.

The real map

The map in that first prototype was fake. Its contour lines came from random noise and its coordinates were decoration. My reply: “I like the map concept, but if you're gonna use that it should be the actual map of Austegarden on Flatøy.”

Austegarden is a farm on the east shore of Flatøy, an island in Alver municipality, north of Bergen. Claude went to Kartverket, the Norwegian mapping authority, which publishes its data under an open licence (CC BY 4.0). It took contours from the terrain model, building outlines from the national building dataset, and roads, coast, lakes and forest from the 1:50,000 map data, then drew them as SVG in the site's colours. Kartverket's place-name register puts Austegarden a bit off of the real center of the farm so that required a fix - but otherwise it got it all right.

And not by accident: To check the drawing, Claude rendered Kartverket's own topographic map of the same area and laid the two on top of each other. Coastline, roads and the farm buildings line up.

Page Search

The site has 84 small tools that run in the browser. An agent opened each one and wrote a one-line description from its README and code. The home page, the tools page and the section pages are now generated from those descriptions and the files on disk, so a new tool or section appears when its file is committed.

Performance Numbers

I measured with Lighthouse on a local copy, median of three runs. Mobile performance is 99 to 100 and desktop 100 on the home page, the tools page and the blog index. Accessibility is 100 on all three. The old site scored 81 to 91. The home page transfers about 200 KB. That covers the map and four fonts that now come from the site itself. One caveat: the machine that ran the tests blocks Google Fonts, so the old site looked lighter than it really was.

A few bugs found during testing

The strip of map along the top of inner pages was painting over the page titles. The usual accessibility scanner, axe, marked color contrast as “incomplete” on every page because of the map, so it checked nothing. A script that samples the pixels behind each line of text found the problem. Separately, 16 of my 25 blog posts had a description made of their opening HTML with the tags stripped, such as “pClaude's Project feature…”. They now have real ones.

Thoughts

Overall I'm quite impressed by how even Claude's third-level model (Sonnet) is a fantastic web designer and developer. It took a while, most of the time spent on tests and subsequent fixes and retests, but my time investment was minimal. On a per-token plan this would have cost ~30 min worth of a contract web developer/designer's fees -- we would have spent longer just talking about what we'd want done. But since I am on a monthly plan it cost me a net $ zero. RIP Web Design.