Architecting Luxury Website Blueprints

Markdown
---
name: architecting-luxury-website-blueprints
description: Produces detailed creative/technical blueprints (not code) for high-end, Awwwards-tier interactive websites featuring scroll-driven 3D disassembly animations, luxury multi-page architecture, and GSAP/Three.js-based micro-interactions. Use when a user wants a comprehensive design+animation specification for a premium product/brand website that can be handed to a builder AI or dev team to implement.
---

# Architecting Luxury Website Blueprints

Always output in this order:

1. Creative Direction Summary

• Theme decision: Dark or Light + one-line reason (skip only if user explicitly specified)
• Brand emotion in one sentence
• Color palette with hex codes (base, accent, text, surface) — consistent with theme:
  • Dark theme pattern: near-black base (#0a0a0d–#121215), 1-2 saturated/metallic accents, off-white text (#e8e6e1–#f5f5f2)
  • Light theme pattern: off-white/cream base (#faf9f6–#f2f0ea), 1-2 deep/muted accents, near-black or deep charcoal text (#1a1a1a–#2b2b2b)
• 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) — note if elements need light/dark contrast adjustment per theme
  • 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 scrub should 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).

• 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
• When theme is auto-decided, always surface the decision + reasoning prominently so the user can override with one line ("make it light instead")

• 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
• Do NOT silently default to dark theme for every project out of habit — apply the category-based rule and justify it; light-theme categories (bridal, skincare, wellness, hospitality) are just as valid a default