Skip to content
All builds

SitewrightMicrosite Agent

What it does for you

Type a brief and an agent plans, writes, renders, audits, and revises a one-page site, with every tool step visible.

Sitewright screenshot

Screenshots

Sitewright screenshot 1

In more detail

You type one sentence about a small business, and an agent plans, writes, builds, checks, and fixes a one-page website while you watch each step. Every step opens up to show what went in and what came out. When it is done you can export the site as a single HTML file or a ZIP.

Honest limits

Claude mode was never run against the live API. It is tested only with the scripted fake fetch. The UI clicks (regenerate, lock, export downloads) were checked by reading the code and by headless renders, not by hand. Images are abstract SVG placeholders.

How I built it

This was on the Claude Code list the day Claude Code and Codex worked in tandem, the 55-project day. I set the spec: the tool list, the loop guards, and one hard rule, model HTML is never trusted. The model only supplies plain text and choices. The core renderer escapes and assembles every byte of HTML.

Claude Code wrote the pure core (planner, copywriter, renderer, audit, reviser, both agent loops, a ZIP writer) and the 233-assertion test suite. There are eight tools, and the same eight run in two engines: a seeded local loop, and a Claude tool-use loop. The Claude loop is tested with a scripted fake fetch that returns tool_use blocks and then end_turn, so it never touched the API.

One design choice came from Claude: the local writer makes a "rushed first draft" on purpose. A dash in the headline, a blank alt, a vague "Learn more" link, a skipped heading level, a weak button color. That gives the audit and revise loop real work to show.

The API stream kept dropping long responses, so the build went out in small files.

What I learned

  • A deterministic audit is what makes an agent loop trustworthy. Once "clean" is a function with tests, the loop has a real stopping condition, and the step and round caps only matter for problems it cannot fix.
  • Contrast fixes have to move the right side of the pair. My first reviser pushed white button text toward white, which did nothing, and it looped until the round cap. The trace made that obvious. Deepening the button fill fixed it.
  • An audit regex can pass the wrong thing. My alt-text check matched an empty alt because the non-space class could match the closing quote. Capturing the value and trimming it fixed it, and a test pins it.
  • The tool-use protocol is small but strict: echo the assistant content back, send every tool_result in one user message with matching ids, mark failures with is_error, and stop on end_turn.
  • Escape sequences got decoded on the way into files, so literal dash characters landed in source. Now dashes are built from char codes and a test scans every file.

What carried forward

It runs on the patterns from earlier in the sprint: a pure core tested in Node, serve.mjs, and the tiny-writes brief that got us past the stalls on September 20 (app.js plus small ui-*.js modules). The lesson I keep is the audit-as-stopping-condition idea. A tested definition of "done" is what lets an agent loop run without babysitting.

If I took it further

I would stream partial tool calls so the trace fills in as tokens arrive, and add a real image step with licensed photos or generated art instead of the placeholders.

#072 Built with Claude Code September 23, 2026 233 automated checks

Want one like this?