atv-paperboard
Cross-harness HTML artifact toolkit for AI coding agents. One spec. Three native adapters. Zero lock-in.
Drop it into Claude Code, Codex CLI, or GitHub Copilot CLI and your agent stops dumping markdown into the chat — it emits paired .html + .DESIGN.md artifacts governed by Google's DESIGN.md spec, persisted to disk, and rolled into a compounding gallery you can actually share.
▶ Open the 60-second teaser
Why this exists
In May 2026, two posts crystallized what every AI coding agent gets wrong about output:
"Audio is the human-preferred input to AIs, but vision is the preferred output from them. Around a ~third of our brains is a massively parallel processor dedicated to vision — the 10-lane superhighway of information into the brain. The progression: 1) raw text 2) markdown (current default) 3) HTML (early but forming the new default) … n) interactive neural simulations. Hot tip: try ask for HTML."
— Andrej Karpathy, May 11 2026
"Using Claude Code: The Unreasonable Effectiveness of HTML." For plans, docs, prototypes, and mockups, HTML is strictly better than markdown. Have the agent write .html files and open them in a browser.
— Thariq (@trq212), May 8 2026
Paperboard is the toolkit that makes step 3 trivial today. Every coding agent right now renders status updates the same way: a wall of monospace markdown in a chat window. That output is ephemeral, ugly, and impossible to share with stakeholders. Paperboard intercepts the moment an agent emits structured data — a status table, a triage list, a comparison matrix — and turns it into a lint-clean, single-file HTML artifact that lives on disk, links into a gallery, and renders identically across Claude Code, Codex CLI, and GitHub Copilot CLI.
Core philosophy
- Vision is the right output channel. A table the agent wrote in HTML is read faster, shared more easily, and embeds in any PR — no Markdown renderer required, no copy-paste reformatting on the human side.
- Single-file or it doesn't ship. Every artifact is one
.html you can drag into a Slack thread or attach to a Jira ticket. CSS inlined, no CDN, no build step, no npm install on the recipient's machine.
- Design tokens are the contract, not vibes. Every
.html is paired with a .DESIGN.md (Google's spec) declaring allowable colors and type. The lint walks the HTML and rejects any drift. Quality stays consistent across N renders without policing prose.
- Compounding > one-shot. Each render auto-regenerates
gallery.html — your agent's output becomes a growing portfolio of paste-ready artifacts, not throwaway chat turns.
It's the same toolkit, the same contract, the same core/ Python package — wired into three different agent runtimes via thin native adapters, plus a GitHub Actions recipe for the Copilot Coding Agent.
Where it runs (today)
| Harness | Type | Status |
|---|
| Claude Code | Native plugin (adapters/claude-code/) | ✅ Shipping |
| Codex CLI | Native plugin (adapters/codex/) | ✅ Shipping |
| GitHub Copilot CLI | Native plugin (adapters/copilot-cli/) | ✅ Shipping — validated end-to-end against copilot.exe v1.0.49 in an isolated sandbox |
| GitHub Copilot Coding Agent | GitHub Actions recipe (recipes/github-actions/) | ✅ Shipping |
The Copilot CLI integration was validated against the real binary inside a fully isolated sandbox (USERPROFILE/HOME/COPILOT_HOME pinned). Hook fires, payload parses, suggestion injects, file lands, exit=0.
The four pillars
| Pillar | What it does | How you'd break it |
|---|
| Enforce | Validates the paired DESIGN.md via the upstream Google CLI and an HTML-side color-token trace | Reference {colors.nonexistent} in DESIGN.md → lint rejects |
| Render | Single-file HTML → loopback HTTP server → auto-opens a browser tab (skipped in headless/remote) | paperboard render --input data.json → triple on disk + tab in <2s |
| Persist | Writes {name}.html + {name}.DESIGN.md + {name}.meta.yaml to the harness-resolved persistence path | After 3 emissions → 3 triples at the right path for that harness |
| Compound | Auto-regenerates a gallery.html that reflects every prior artifact, governed by its own DESIGN.md | Add a new artifact → gallery reflects it within 1s, gallery's own lint passes |
Install — pick your harness
Prerequisites (all paths)
