Move the cursorthe page is liquid — click for a splash
§ 1 — the index
Seven worlds. Run them here.
Each entry is a finished single-file page. RUN plays it inside its plate.
COPY THE PROMPT hands you the full build spec — layer stack, palette, geometry, shader
math, timings, and the self-verify loop — round-trip tested against the skill.
§ 2 — the composing benchfig. 08
Type a brand. Get a world.
This is the input box. The plate on the right is live — it rebuilds as you type.
When it feels like yours, copy the prompt: it carries your name, palette, and archetype into Claude Code.
The preview is the real page — cursor parallax, ripples, swirl all work.
fig. 08 — parametrized world; every configuration is a shareable URL
§ 3 — field methods
Study anything. Copy nothing.
Clone the feel of a site
Paste a URL into the prompt. The agent browses the reference, storyboards it at five scroll
depths, greps its bundles for tech signals, maps what it sees to this skill's recipes — then
rebuilds that motion language as original code for your brand. It studies patterns; it never
copies code, assets, or content.
Using the threejs-hero skill: clone the feel of
<URL> for my brand <NAME + one-line pitch> —
browse it, storyboard it at several scroll depths,
identify its motion patterns, then rebuild that
motion language as an original single-file page
with my brand's palette and copy.
Self-verify until perfect.
The review every page must pass
Rendering correctly is not being designed well. Before anything ships, the skill makes the
agent re-read its own screenshots against this checklist — it is why the plates above look
the way they do:
5-second value scan — what, for whom, what do I get
Squint test — the CTA pops first, headline second
Risk-reversal ✓s touch the CTA, never orphaned
No dead micro-text — big type or cut it
Ghost wordmark readable, occluded, never cropped
Visible light — blooms and vignette, no flat fills
One winner per region of the frame
Settled in ≤ 2.5 s, never blank under UI
Every control works — honest labels, real routes
Hover everything: surfaces respond like lit objects
Install the skill into Claude Code with the commands on the right — one clone, one copy.
Copy any prompt from the index, compose one at the bench, or hand a reference URL to the field method.
Watch it verify itself — the agent screenshots desktop, tablet, and phone, and iterates until the page passes the review.
# install
git clone https://github.com/jiangyurong609/threejs-hero-skill.git
cp -r threejs-hero-skill/threejs-hero ~/.claude/skills/
# then, in Claude Code:"Build me a 3D landing page for my brand. Self-verify until perfect."