Louis Tsang
№ 00310 min

Building a blog inside Claude

You are reading this on a blog that was designed by Claude, coded by Claude, and written by Claude. None of the lines in front of you — the typography, the rhythm, the words — went through a human hand without first going through a model.

I do not write this to perform. I write it because the path that got me here is short, and it points at a change worth naming.

The pipeline

I opened Claude Design and told it I wanted a blog in the spirit of Kenya Hara — bone paper, generous margins, the typography subdued, the colour reduced to black and bone. It produced a layout. I clicked Export, which handed the design to Claude Code as a structured spec. Claude Code stood up a Next.js project with Tailwind, installed MDX, wrote the routes, set the type stack. A few hours later there was a working site.

The handoff pipelineClaude Design exports a spec to Claude Code, which scaffolds the Next.js site. DESIGN.md sits beneath as a shared constraint that Claude Code reads on every change.CLAUDE DESIGNdesign + specCLAUDE CODEscaffold + buildSTATIC SITENext.js, MDXexportbuildDESIGN.mdshared constraintreads

The handoff is the unobvious part. The output of one model becomes the input of another — and the input is not pixels or a Figma file. It is a description. Type scale. Spacing scale. Component intentions. The receiving model reads the description the way a careful engineer reads a brief — and applies it, without ego.

The thing that holds it together is one file: DESIGN.md. The design system as plain English. Reading measure is 680 pixels. Vertical rhythm snaps to multiples of eight. Four type faces, no fifth. No accent colour, anywhere — if you reach for one, the design is wrong.

A design system in Figma is a library for humans. DESIGN.md is a library for agents. Every future change Claude Code makes — adding a page, restyling a component, building a new view — reads this file first. It is not documentation. It is constraint, in a form a model can apply.

Writing as a skill

There is no CMS. Every essay and note in this blog is an MDX file checked into the repo. The site is statically generated by Next.js. Writing a new piece means creating a new file, which means asking an agent to help me write that file.

The collaboration runs through a thing Claude Code calls a Skill. A skill is a small markdown document that describes how I want the model to behave on a specific task. Not what to produce, but how to collaborate. Mine, new-essay, runs in five stages:

The skill protocolFive stages: understand, outline, draft, revise, ship. Each gates entry to the next.01UNDERSTANDrestate + ask02OUTLINEpropose, wait03DRAFTone pass04REVISEcut weakest05SHIPfile + check

The corresponding file looks roughly like this:

---
name: new-essay
description: Help me write an English essay on my shiro blog.
---

## Stage 1 — Understand
Do not start writing. First, restate what you heard in one sentence.
Then ask 1–3 specific gaps. No checklist questions.

## Stage 2 — Outline
Propose a 3–5 unit structure, each summarised in one sentence.
Wait for confirmation. Do not write prose yet.

## Stage 3 — Draft
Write the full English draft in one pass. Thoughtful, restrained,
concept-driven. Short sentences. Concrete after abstract.
No "delve", "unpack", "in conclusion".

## Stage 4 — Revise
Take feedback. Cut the weakest paragraph rather than compress
the whole thing.

## Stage 5 — Ship
Write to content/essays/<slug>.mdx, run pnpm check, report.

Every essay on this blog — including the one you are reading — went through these five stages with Claude. The model knows what to ask, when to wait, when to write.

The meta-prompt that produced this skill was, in essence, this:

I want a skill for writing essays on my blog. Voice: thoughtful, restrained — Paul Graham × Maggie Appleton. The skill should not let you draft until I have confirmed a one-sentence core and a paragraph-level outline. Hard constraints: short sentences; no “delve” / “unpack” / “let’s explore”; first person sparing; conclusion implied rather than stated. Files go to content/essays as MDX with frontmatter. At the end, run pnpm check. Make the skill teach you how to collaborate, not what to produce.

That paragraph became two hundred lines of skill markdown, versioned at .claude/skills/new-essay/SKILL.md. Once it exists, it never has to be written again.

What actually changed

So that is the stack. Design in Claude Design, code in Claude Code, content in Skills, all sitting on top of Next.js static generation and a flat folder of MDX files. No CMS. No database. No admin panel. The blog is a codebase. Every change — visual, structural, editorial — is a commit.

But the stack is not what changed. The stack is downstream.

What changed is how writing begins.

For years I had a folder of half-thoughts. Notes in Apple Notes, snippets in Things, voice memos I never transcribed. When I sat down to write a blog post, the work was not really writing — it was reconstruction. Pulling fragments out of my head, arranging them, finding the through-line, then producing prose. The friction was so high that most of the folder stayed in the folder.

What an agent does, when you write with one, is take over the reconstruction step. You speak in fragments. I want to say something about X, also Y is related, also there was this thing last week. The model does not write the essay yet. It restates: I hear you saying X — is that right? It asks: do you want to open from a scene or from a claim? Is there a counter-example? The fragments come out of your head not as prose, but as answers.

The writing shiftBefore: fragments to prose required manual reconstruction in your head. After: an agent breaks reconstruction into conversation and outline.BEFOREFragmentsMANUAL RECONSTRUCTION— done alone, in your headProseAFTERFragmentsConversationOutlineProse

By the time the outline is agreed, the essay is already half-thought. The writing is the easy part.

This is not a productivity claim. It is closer to the opposite. The agent makes the thinking easier, not the typing. Writing a blog post used to require having a finished idea. Now it is a way to find the finished idea.

There is a quieter consequence. When the cost of writing something down drops, the threshold of what is worth writing down drops with it. Notes on this blog are short — three to five sentences, no title, the text is the title. They exist because the friction of saving an observation as a note is now roughly the friction of having the observation. The two collapse.

A folder of half-thoughts becomes a published archive. Not because I became more diligent. Because the path from fragment to published was shortened to the point that diligence stopped being the bottleneck.

I do not yet know what to call this kind of blog. Not a journal — too structured. Not a publication — too quiet. Something like a trace. The output of a person thinking, with a tool patient enough to keep asking what came next.

The blog is no longer where you put what you finished thinking. It is where the thinking happens, and what remains.