Blueprint Landing Page

A product page drawn like an engineering blueprint.

WebTechnical drawingExploded viewProduct page

A complete one-page product site on cream drafting paper with cobalt lines. Construction lines draw the hero before the headline is inked, and an exploded stack shows what goes in, what the product does and what comes out. The page holds while the stack explains itself sheet by sheet; features become a parts list, proof numbers sit on dimension lines, plans become A4/A3/A2 sheet sizes, and an approval stamp closes the drawing. A drafting crosshair measures whatever the pointer touches. All words live in one content file, and the build checks every length. No libraries, with mobile and reduced-motion layouts.

Preview format: HTML · Web Animations
Palette: #f1eee5#2a44c9#1e1e1e

How it works

Extract the blueprint-landing.zip I provide and read blueprint-landing/SKILL.md. Install the complete folder in the current agent's project-level skill directory, keeping the template, the build script, the references and the examples, and tell me the location. Then build my product page from my brief with scripts/build.mjs, which checks every length before it writes the page. Do not invent customers, quotes or numbers, and list any placeholder you use. It needs Node.js 22 or newer, with nothing else to install.

Motion details

A draft-then-ink opening: guides, outline, fill
A pinned "how it works" where each sheet explains itself
A parts list, dimension lines, sheet-size pricing and a stamp

A good fit for

Data, AI and developer products
Launch pages that should look engineered, not generic

Example creative prompt

Download and extract the skill, let your agent read SKILL.md, then provide your product brief. The prompt below can help you start.

Use the blueprint-landing Skill to build my product page as an engineering drawing: cream paper, cobalt lines, a headline drafted and then inked, and an exploded stack of three sheets showing my real input, the moment that matters and the result. Turn my features into a parts list, my real numbers into dimension lines and my plans into sheet sizes. Use only the facts I give you, and leave out any section I have no content for.