Colophon

This site is built and shipped with my own Claude Code workflow. Not an autonomous pipeline — an interactive workflow, with me making the calls and agents doing the work. Here's exactly what that means.

The design phase

The site began as a /office-hours session — a design-questioning skill that forced positioning decisions ("who is this for?", "what's the one thing that makes someone stop scrolling?") before any pixel existed. The resulting design doc went through two rounds of adversarial review by an independent agent, which caught 17 issues — including the fact that this very page originally oversold itself as a "pipeline."

The visual direction took four rounds of mockups: warm-editorial (rejected — too literary), terminal/blueprint (rejected — geek cosplay), soft-tech product (chosen), then two content iterations that audited all 96 of my GitHub repos and curated them down to the nine you see on the homepage.

The build phase

Astro 7, static output, no client-side framework. Claude Code built it in five phases — scaffold, homepage, i18n, content, this page — each phase verified against the approved mockup with a headless-browser screenshot diff, then committed. The design tokens live in DESIGN.md in the repo; the approved mockup HTML is the visual source of truth.

A real excerpt

From the actual build session (July 2026):

Phase 2: Build homepage matching H4 baseline
  ✓ npm run build — 13 pages in 1.57s
  ✓ screenshot vs variant-H4.png — match
  ✓ git commit 66c5d1f "feat: homepage matching approved H4 design baseline"

The stack

• Astro 7 + content collections, static build
• Claude Code + custom skills (design questioning, headless browser QA, mockup generation)
• Cloudflare Pages, auto-deploy on merge to main — chosen over Vercel so readers in mainland China can actually open the site
• No CMS, no analytics, no cookies, no chatbot — yet. A site agent ships only when it can be built the way I build production agents: with citations, honest refusals, and a public eval page.

The overnight restyle

The first shipped design was a quiet ivory editorial look. One evening later, it was rebuilt in a completely different visual language — playful brutalism on graph paper — as a single overnight Claude Code run: reference site reverse-engineered (grid, palette, easing curves measured from the live DOM), a 10-section report written, then six milestones executed with a build-and-screenshot gate after each. The full report lives in the repo atdocs/RESTYLE.md.

The full story — including everything that got rejected along the way — is a 手记 essay in the making.