Loading…
Live page · scroll inside
PremiumAI design tool · light · landing page · gsap · lenis · html
Draft
An AI wireframing tool site in drafting-table off-white with signal orange and blue: a hero canvas where pointing at an empty slot draws a dashed ghost of the suggested block (with its name and reason) that you place with a click or Tab and cycle with ], plus Fill the rest and Reset, a four-point 'what it reads' panel, a sketch-style-spec strip showing one block through three passes, inline pricing tiers and a brief-field CTA.
What's inside
- 01Block-mark barSolid after 80 px.
- 02Autocomplete canvas heroMoving the pointer over an empty slot draws a dashed orange ghost of the suggested block snapped to that slot (lines fade in left to right); click or Tab places it as a solid wireframe with a small pop; ] cycles to the next variant for that slot; 'Fill the rest' places every remaining suggestion in sequence; Reset empties the page.
- 03What it readsPoints rise in sequence.
- 04Sketch, style, specThe connecting line draws across; stages rise one after another.
- 05Inline tiersRow rises.
- 06Brief CTAHeading lines rise; the field's dashed outline turns solid on focus.
- 07FooterNone.
Utility pages in the same file: 404 · Style guide · Password · Changelog
How to use it
From prompt to a live page.
- 01Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
- 02Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
- 04Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
- 05Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.
