Architecting Luxury Website Blueprints
Given a topic (product, brand, or concept), output a complete written blueprint — never code — covering: visual direction, page-by-page section breakdown, scroll-triggered animation choreography, 3D disassembly mechanics, and micro-interaction specs. The blueprint must be specific enough that a builder AI or dev team could implement it without further clarification.
Minimal invocation example:
"Design the $10K luxury website blueprint for a high-end mechanical watch brand."
Output: full document following the structure below, fully populated for "watch brand" (hero copy direction, disassembly sequence of watch parts, materials page narrative, specs/acquire flow, etc.)
Progress:
- Step 1: Extract the topic's essence — product category, target emotion (precision/heritage/innovation/exclusivity), and 2-3 comparable brand references
- Step 2: Define the visual system — color palette (base dark + 1-2 accent colors), typography pairing (display serif + clean sans), spacing/motion philosophy
- Step 3: Define the "hero object" — the specific 3D object that will disassemble (must have 4-8 distinct, namable components)
- Step 4: Map site architecture — confirm page list and one-line purpose per page
- Step 5: For each page, write section-by-section breakdown (see template)
- Step 6: Write the disassembly choreography in explicit scroll-percentage steps
- Step 7: Specify micro-interactions, cursor behavior, transitions between pages
- Step 8: Add technical implementation notes mapped to the reference stack (GSAP/ScrollTrigger/Three.js/Tailwind) without writing actual code
- Step 9: Close with a build-priority checklist so the builder AI knows sequencing
Always output in this order:
1. Creative Direction Summary
- Brand emotion in one sentence
- Color palette with hex codes (base, accent, text, surface)
- Typography system: display font (headlines) + body font, with sizes for H1/H2/body/caption
- Motion philosophy in one sentence (e.g., "Every transition should feel like a slow mechanical unlock, never bouncy or playful")
- 2-3 named reference sites/brands for tone calibration
2. Hero Object Definition
- Name the object and list its components explicitly (e.g., watch: case, dial, movement, crown, strap, hands, crystal, rotor)
- For each component: name, one-line description, which page's copy it supports
3. Site Architecture
Table: Page name → Purpose → Primary emotional beat → Key CTA
4. Page-by-Page Blueprint
For EACH page, use this exact sub-structure:
Page Name
- Purpose statement (1 sentence)
- Section list — each section gets:
- Section name + scroll position (e.g., "100vh–250vh, pinned")
- Layout description (left/right split, grid, full-bleed, etc.)
- Copy direction (not final copy — tone, length, what it must communicate)
- Visual elements (imagery type, 3D state, iconography)
- Animation spec: what triggers it (scroll %, hover, load), what moves, timing/easing character (e.g., "ease-out, 0.8s, parts drift outward with slight rotation"), and reverse behavior
- Micro-interactions (hover states, cursor changes, button feedback)
5. Disassembly Choreography (Detailed)
Break into explicit scroll-percentage or pin-stage steps, e.g.:
- 0–15%: object fully assembled, slow idle rotation
- 15–40%: outer shell components drift outward along their normal vector, callout line draws in, label fades in
- 40–70%: second layer of components separates, previous labels persist or fade based on scroll direction
- 70–100%: full exploded view, all labels visible, camera slightly zooms out
- Reverse: explicitly state that scrolling up reverses the exact same timeline (not a different animation) — specify if ScrollTrigger
scrubshould be used for 1:1 scroll-linked control
6. Cross-Page Transitions & Chatbot Spec
- Page transition style (fade/slide/mask wipe)
- Chatbot widget: position, idle state, opened state, tone of responses, 3 example Q&A exchanges
7. Technical Implementation Notes
Non-code mapping of spec to tools: which sections use ScrollTrigger pin: true, which use scrub, where Three.js camera moves vs. object moves, which sections are pure CSS/Tailwind vs. GSAP-driven. This guides the builder AI's technical decisions without dictating syntax.
8. Build Priority Checklist
Ordered list of what to build first for fastest visible progress (usually: design tokens → hero → disassembly section → remaining pages → chatbot → polish/micro-interactions).
Example 1:
Input: "Luxury espresso machine brand, Italian heritage, minimalist"
Output: Hero object = espresso machine with components (boiler, portafilter, group head, steam wand, drip tray, casing shell, pressure gauge). Palette: #0b0b0b base, #c89b3c brass accent, #e8e6e1 off-white text. Disassembly choreography shows shell lifting off first (0-20%), internal boiler/pump exposed (20-50%), portafilter detaching with callout on basket material (50-75%), full exploded schematic with labeled Italian-crafted parts (75-100%). Craft & Materials page becomes a parallax journey through Italian foundries.
Example 2:
Input: "AI noise-cancelling headphones"
Output: Hero object components = ear cups, driver unit, ANC mic array, headband, battery module, hinge mechanism. Palette: deep navy #0a0e17, electric teal #2de2c8. Disassembly emphasizes floating exploded audio-wave visualization synced to driver component. Overview/Technology page uses interactive hotspots on the ANC mic array explaining noise cancellation algorithm.
- Always give the disassembly object specific, real components — vague "parts" kill credibility with the builder AI
- Tie every animation trigger to a measurable scroll range or event, never "animates nicely on scroll"
- Keep copy direction as direction, not final marketing copy — the builder AI or a copywriter fills that in
- Reuse one consistent easing/motion vocabulary across the whole doc (e.g., always "ease-out expo, no bounce") so the site feels coherent
- Explicitly state reverse-scroll behavior every time you describe a forward animation — this is the detail most often skipped and most critical for luxury feel
- Default to 4-6 pages unless the topic clearly needs more; over-scoping dilutes quality
- Do NOT output actual HTML/CSS/JS code — this skill produces specification documents only
- Do NOT leave animation descriptions vague ("smooth transition happens") — always specify trigger, motion, duration character, and reverse
- Do NOT invent a hero object with fewer than 4 or more than 8 components — too few feels thin, too many overwhelms the scroll narrative
- Do NOT copy the exact page names from the prompt verbatim if the topic doesn't fit them — adapt architecture to the actual product (e.g., a fashion brand doesn't need a "Specs" page, it needs "Collection" and "Atelier")
- Do NOT forget the chatbot spec even if optional — always include it as a toggleable, briefly specified widget unless the user says to omit it