A luxury watch landing page that did not exist one morning, designed inside Paper entirely through its MCP server, then extracted, rebuilt as an offline page, and animated — by two different agents working in sequence on the same file.
The interesting part is not the watch. It is that both agents wrote down exactly how they did it, including what broke. This repository holds the design system, the finished page, and two independent development-journey documents that corroborate each other — and disagree in one place, which is recorded rather than tidied away.
Inspiration: Paper and Conductor: design to code with parallel AI agents — the demo that prompted the question “can this actually be done?” The answer below is the long form.
Click any image to open the live page.
| [](https://az9713.github.io/claude-codex-paper-demo/aurelian-hard-copy/index.html) **[The page itself →](https://az9713.github.io/claude-codex-paper-demo/aurelian-hard-copy/index.html)** Self-contained offline build. Local fonts, vector art, a hero dial reading your real local time, and six motion systems. No framework, no build step, no network. | [](https://az9713.github.io/claude-codex-paper-demo/aurelian-motion-concepts_codex.html) **[Motion concepts →](https://az9713.github.io/claude-codex-paper-demo/aurelian-motion-concepts_codex.html)** The rationale written *before* any animation was implemented: six kinetic proofs, each tied to a question a shopper actually asks, with timings, guardrails, and commercial hypotheses. |
| [](https://az9713.github.io/claude-codex-paper-demo/DEVELOPMENT-JOURNEY_claude.html) **[Journey — Claude →](https://az9713.github.io/claude-codex-paper-demo/DEVELOPMENT-JOURNEY_claude.html)** How the design got made. The mood chosen against instinct, 76 Paper MCP calls, both hard errors verbatim, and the contrast audit that changed two production colours. | [](https://az9713.github.io/claude-codex-paper-demo/DEVELOPMENT-JOURNEY_codex.html) **[Journey — Codex →](https://az9713.github.io/claude-codex-paper-demo/DEVELOPMENT-JOURNEY_codex.html)** How the design became a website. Read-only extraction, the JSX-is-not-a-website argument, the offline rebuild, and motion verified across desktop, mobile, pause, and reduced-motion states. |
The brief was a question: “i want to create a new landing page in the style of https://us.louisvuitton.com/ but for an expensive watch like Rolex. can it be done in Paper?” It was read as do it, and the reading was stated out loud before any tool ran.
Paper’s MCP guide imposes an unusual rule: list candidate moods, then pick one that is not your first instinct. Inky black-and-gold — the reflex for every watch brand alive — was dropped on purpose. Mineral won: limestone, weathered slate, oxidized copper. Every colour had to name a physical referent or the palette does not count as real.
Then 76 Paper MCP calls: HTML in, native design nodes out, node IDs back, screenshot, one-line critique, targeted fix. Sixteen of Paper’s forty tools were used. Nothing was ever deleted and restarted.
The pivot came when the ask changed to “can you extract the design system?” — because extraction turned into correction. Rather than write estimated contrast ratios into the spec, the numbers were computed. Three real WCAG AA failures fell out, and two production colours changed:
| Token | Was | Now | Why |
|---|---|---|---|
--color-muted |
#6E6D66 |
#67665F |
4.3:1 missed AA by 0.2, and it carries every reference line and footer link |
--color-accent |
#55806E |
#476E5D |
Failed twice — 3.7:1 as a link, 3.9:1 behind its own button label |
The accent sits between three constraints pulling in opposite directions: link on the light ground
needs 4.5:1, button label needs 4.5:1, button block on the dark band needs 3:1. #476E5D scores
4.75 / 5.00 / 3.06. Almost no other value clears all three. Do not lighten it back.
Because every layer had already been rebound from raw hex to var(--color-…), both fixes were two
set_tokens calls instead of thirty manual edits. That rebind looked like busywork and was the
highest-leverage twenty minutes of the session.
Paper can emit JSX, Tailwind classes, CSS variables, and SVG. The decision recorded here is that JSX is source material, not a website — so the design was extracted read-only, in several independent representations (node tree, inline JSX, Tailwind JSX, tokens, assets), on the reasoning that they fail differently and together make reconstruction auditable. The Paper file was never mutated during this phase.
The result is aurelian-hard-copy/: semantic HTML, CSS, four local font binaries, five exact SVGs,
a checksum manifest, and a ZIP. Zero runtime dependencies.
Motion came last, and only after explicit authorization — the concept document had sat as a proposal
because the instruction at the time was do not implement. The governing rule: one persistent
loop, everything else earns its moment and becomes still. A rotor swings, a reserve fills, a
precision figure settles, a depth figure descends. Seventeen named keyframe sequences, with pause,
keyboard, touch, background-tab, and prefers-reduced-motion handling designed in from the start
rather than bolted on.
| Path | What it is |
|---|---|
aurelian-hard-copy/ |
The finished page. Open index.html directly — no server, no build. 22 files, checksummed, also zipped. |
aurelian-design-system/ |
DESIGN-SYSTEM.md (9 sections), theme.css (Tailwind v4 @theme), style-guide.html rendered in the system it documents. |
DEVELOPMENT-JOURNEY_claude.html |
The design session, written from its own transcript. |
DEVELOPMENT-JOURNEY_codex.html |
The extraction, rebuild, and motion work, written from local evidence. |
aurelian-motion-concepts_codex.html |
The motion rationale, written before implementation. |
HANDOFF.md |
Resume point: current state, constraints that bite, next tasks. |
screenshots/ |
The four images above. |
README.txt |
Unrelated raw notes on an unstarted “Conductor Roadmap” component. Kept as-is. |
Run it locally:
git clone https://github.com/az9713/claude-codex-paper-demo.git
cd claude-codex-paper-demo/aurelian-hard-copy
start index.html # Windows; open index.html on macOS
The design source of truth is the Paper file 01M0FVWK97JZM17HW5VS9ZEQ4H —
app.paper.design/file/01M0FVWK97JZM17HW5VS9ZEQ4H.
Everything here is downstream of it. Regenerate the Tailwind theme any time with
get_tokens({ format: "tailwind" }).
Both journey documents were written to record failure, not to advertise success. The short version:
paper-asset:// with an
absolute local path. This is why the entire product layer is vector — decided before it was
promised, not confessed afterwards.export returned a success-shaped empty
result ("exports": []) and get_screenshot timed out, while metadata calls in the same minutes
worked fine. The cause is not known — broken export, export needing pre-marked nodes, or the
desktop app not servicing renders. Recording it as “export is broken” would plant a wrong fact.Not done, and knowingly so: no responsive artboards inside Paper itself (the breakpoint tokens exist; no layout was drawn at any of them); no hover/focus/active states in the Paper file; no Safari or Firefox QA; no analytics behind the conversion hypotheses; every commerce route is a static anchor. The three raw terminal captures of the build sessions are deliberately excluded from this repository — they carry home paths and account names.
Designed and built with the Paper desktop app and its MCP server, driven by Claude (Opus 5) and Codex. “Aurelian” is a fictional maison; the trademarks of any real manufacturer were deliberately removed during review. Inspired by Paper and Conductor: design to code with parallel AI agents.