Designing a markup that AI agents can author reliably

Most “AI page builders” ask the model to generate HTML, or React, or some bespoke JSON. The result is impressive on a single prompt and brittle on every subsequent edit. Components disappear. Styles drift. The model invents elements that don’t exist.

Micropage works the other way around. We constrained the markup first. AI-authoring fell out as a side effect.

The personal motivation came first

I’m visually impaired. Drag-and-drop page builders are exhausting for me — every product has a different UI to learn, panels move around, controls shrink. I’ve spent a lot of evenings trying to find the right button in Framer.

What I actually wanted was a plain text file. A .page file. Edit it in any editor — vim, VS Code, the Notes app — and have it deploy as a landing page. Markup, not markdown; line-oriented, not nested; opinionated, not infinite.

Once I had that, I noticed something else: Claude could write it.

Why constrained markup is agent-friendly

LLMs are best at generating text in formats they’ve seen many times, with bounded vocabularies, and where small mistakes don’t cascade. Micropage markup fits all three:

Closed element vocabulary. There are roughly 30 element types: headings (h1–h5), p:, img:, btn:, columns (col:), sections (/// section), form fields, navigation entries. The model can’t invent a new element because there’s nowhere to put it.

Line-oriented syntax. Every line is one element. No nested-tag bugs. No indentation-as-syntax fragility. The model emits one element per line and the parser never gets confused.

Constrained design tokens. Colors come from [site]. Typography comes from [site]. The model can’t decide “this section should be hot pink” because there’s no inline color syntax to do it with.

No free-form HTML by default. Free-form HTML is allowed inside /// html fences — but we don’t include that affordance in the agent prompts. The model never reaches for it.

The result: Claude 4.7 generates correct Micropage markup on the first prompt, every time, with about 200 tokens of grammar reference and a short style hint. No fine-tuning, no JSON-mode hacks, no retries.

A concrete example

The prompt:

Build a landing page for “PageBackup,” a service that backs up your Notion workspace nightly. Show three pricing tiers, a “what gets backed up” FAQ, and a strong “Try it free” CTA. Keep the tone friendly and technical.

The output (lightly trimmed):

[site]
title: PageBackup
description: Nightly backups for your Notion workspace
colors:
  primary: "#2563eb"

[Home -> /]

/// hero align:center
h1: Your Notion workspace, backed up every night.
p: Set it once. Wake up to a fresh archive every morning.
btn: Try it free -> /signup

/// section
h2: Pricing

col:
  h3: Solo
  p: $5/mo
  p: One workspace, daily backups, 30 days retention
  btn-secondary: Start trial -> /signup

col:
  h3: Team
  p: $19/mo
  p: Up to five workspaces, hourly backups, 90 days retention
  btn-secondary: Start trial -> /signup

col:
  h3: Org
  p: $79/mo
  p: Unlimited workspaces, custom retention, audit log
  btn-secondary: Talk to us -> /contact

/// section
h2: What gets backed up

col:
  h3: Pages and databases
  p: Every page, every database, every property. We capture the full structure, not just exported text.

col:
  h3: Blocks and embeds
  p: Image blocks, code blocks, callouts, embeds — preserved with the content that referenced them.

col:
  h3: Comments and history
  p: Page comments and edit history snapshots, on Team and Org plans.

/// section align:center
h2: Ready to sleep better?
btn: Try it free -> /signup

I didn’t edit that. That’s a full page, deployable as-is. The agent picked sensible sections, sensible copy, kept the structure clean, and stayed inside the markup vocabulary.

Pointing your own agent at an existing project

Every Micropage project includes a PROJECT_AGENT.md with the markup reference, your project’s color tokens, and a short style guide. Point Claude, Cursor, Aider — any agent — at the directory and ask for edits. It’ll find the file, follow the constraints, and edit .page files in-place.

Push with micropage publish and the change is live.

What’s next

The natural next step is an MCP server: expose project context, build status, deploy operations, and form submissions as tools that Claude (or any MCP client) can call directly. Open question whether we ship that ourselves or let it be community-built.

If you’ve been thinking about AI-authored landing pages — or if you’ve been frustrated trying to make LLMs generate reliable HTML — Micropage is on the free tier at micropage.sh. Happy to hear how it goes.