spatial-experience-design

name

spatial-experience-design

description

Use this skill when designing, auditing, or planning high-end interior decorator, interior design, spatial design, architecture, styling, furniture, decor, showroom, gallery, or luxury home websites. Activated by requests like "build an interior decorator portfolio", "make this spatial design site feel premium", "create a high-end interiors website", "design a decorator portfolio", "make this feel like a 20k website", "use the design audit grammar", or any visual task where rooms, materials, light, objects, before and after transformations, or curated spaces must drive the experience.

Spatial Experience Design

WHEN TO USE THIS

• Load for interior decorator, interior designer, spatial studio, architecture, staging, furniture, decor, gallery, showroom, or luxury home brand websites.
• Load when the brief needs atmosphere, taste, transformation, proof, and inquiry instead of a generic section stack.
• Load before visual brainstorm, mockup, motion, or implementation for any high-end spatial brand surface.
• Load when the user needs help inventing options, mixing concepts, or defining asset prompts for images and video.

NEVER DO

• Never start with "hero, services, portfolio, testimonials, contact."
• Never treat rooms as cards, projects as a generic grid, or materials as decorative background colors.
• Never ship beige plus serif plus stock interiors plus fade-ups and call it premium.
• Never substitute CSS blobs, gradients, or empty rectangles for image-native spatial scenes.
• Never add cinematic motion before the selected concept, experience architecture, asset reality, and motion job are clear.
• Never write standalone image/video prompts that do not inherit the approved diagnosis, brief, concept, experience blueprint, and relevant production constraints.
• Never make CTAs behave like SaaS buttons when the brand needs a quiet concierge invitation.
• Never use scroll effects that do not physically belong to the room, material, object, or threshold.
• Never use a reference mechanic as the reason a concept exists. Use a pre-territory pass to expand vocabulary after the brief and a post-territory pass to validate precise design questions.
• Never copy the section architecture of reference sites 1:1. Always filter reference patterns through the specific scale, capacity, and niche of the target brand (Avoid the Scale Imitation Trap).
• Never prescribe sections that defend baseline expectations (e.g., 'Render vs Reality' for a Tier 1 builder). This lowers posture from Practitioner to Performer. Replace defensive proof with Process Proof (Avoid the Defensive Vendor Trap).
• Never prescribe motion/GSAP just because it is technically impressive. Every animation must have a semantic meaning tied directly to the visual thesis (Avoid the Gimmick Trap).

CORE MENTAL MODEL

Design the site as a brand-specific argument experienced through space, image, type, proof, interaction, and possibly motion. Interior brands often need atmosphere, taste, transformation or design intelligence, authority, process/fit, and inquiry; these are reusable communication jobs, not a fixed section order.

Before any token, component, or animation choice, answer:

1. What must this studio be known for first?
2. What should the visitor feel, understand, believe, and do?
3. Which evidence earns that belief?
4. Which narrative form best sequences that evidence?
5. What should remain still, and what—if anything—must move?
6. Which assets can honestly support the concept?
7. How does the inquiry feel selective, calm, and high-trust?

SPATIAL ARCHETYPES

Use these as candidate vocabularies, not mandatory menus. A concept may adapt one, combine compatible parts, or use none when the brief calls for a quieter editorial solution.

Archetype	Use When	Candidate Mechanics
Gallery Procession	Portfolio, studio, luxury interiors, editorial projects	Room chapters, one focal image per act, quiet labels, slow plate reveals
Layered Diorama	Hero scenes, object-led decor brands, immersive first folds	Z-axis depth map, foreground blur, midground object, background atmosphere
Signature Object Spine	A fixture/object can carry identity	Object blocking map, scroll role inventory, hero event, object-to-section continuity
Transformation Reveal	Before/after, redesign, staging, renovation	Paired imagery, reveal grammar, proof captions, restraint around the reveal
Material Library Story	Fabric, stone, wood, paint, furniture, lighting	Material script, macro closeups, swatch logic, tactile captions
Invisible Luxury Portfolio	Ultra-premium decorator/studio	Full-bleed media, peripheral UI, concierge CTA, no loud buttons
Spatial Systems Credibility	High-end studio selling process and rigor	Method sequence, living proof map, project index, calm structured grids

For designing hero and first-fold compositions, load and consult hero-layout-blueprints.md. Use its 10 custom layout formulas and aesthetic archetypes for negative space balance, typography weights, and motion behavior. Treat these layouts as structural reference benchmarks to adapt or hybridize for the brand's custom needs, never as a rigid menu.

ARTIFACT CONTRACT

Use five logical contracts. They may be five files or equivalent approved documents:

1. evidence-dossier.md - source catalog, facts, reported claims, inferences, unknowns, diagnosis, and unresolved gaps.
2. creative-brief.md - visitor response, first-known priority, proof burden, constraints, anti-goals, and selection criteria.
3. concept-directions.md - three structurally distinct whole-page territories, purposeful references, visible rough tests, comparison, and selection record.
4. experience-blueprint.md - controlling argument, narrative form, chapter jobs, hierarchy, proof timing, copy-image relationship, inquiry, responsive intent, and approved visual/motion system.
5. production-plan.md - assets, boundaries, generated-media needs, performance/fallback contract, risk prototype, vertical slice, build slices, and verification plan.

Create only when required:

• a reference question brief and translation ledger; use reference-analysis-plan.md and reference-synthesis.md for large or mixed-format corpora;
• scroll-storyboard.md for authored scroll timing, pinning, persistent continuity, or media choreography.
• cinematic-prompt-pack.md for approved generated imagery or video.
• portfolio-proof-chapters.md for detailed project decision narratives.
• DESIGN.md / DESIGN.json for implementation tokens and component rules.

Legacy spatial projects do not need to delete or rename their existing fourteen files. Map equivalent approved content into the five logical contracts, identify real gaps, and consolidate only with user authorization.

VISUAL THESIS RULES

Select the governing concept before final typography or color. A visual thesis may be spatial, editorial, typographic, material, project-led, or transformation-led; it must explain the page as a whole. For color palette selection and functional mapping, load the color-system skill.

If the user is unsure, run the concept forge:

1. Ask what sensation the first 5 seconds must create.
2. Ask what generic category expectation must be rejected.
3. Ask what evidence, project, material, conviction, transformation, or spatial cue could organize the page.
4. Offer three structurally different whole-page territories, including one restrained or still-led direction unless evidence rules it out.
5. Define reference questions from the approved brief and use proportional pre-territory research to expand vocabulary.
6. Translate reference principles through the brand before assigning them to a territory.
7. Externalize every territory with a rough styleframe, sequence sketch, or prototype and identify its asset burden.
8. Run post-territory reference validation only for precise design, evidence, responsive, or feasibility questions.

Good visual theses:

• "The visitor walks through a dim limestone residence where each room reveals one layer of the studio's restraint."
• "A hand-painted mural opens like a curtain into before/after transformations."
• "A single sculptural lamp guides the scroll from atmosphere to method to inquiry."
• "Textile, stone, and daylight act as the brand system; UI stays at the edges."

These examples are candidates, not a requirement that every site use a room, threshold, or anchor object. Reject theses that are just adjectives:

• "Modern luxury"
• "Clean and elegant"
• "Premium minimalist"
• "Warm and inviting"

SCENE KIT REQUIREMENTS

Classify every visual concept before implementation:

Boundary	Definition	Examples	Rule
Image-native	Requires real/rendered imagery to be believable	Rooms, murals, furniture, fabrics, stone, before/after images	Do not replace with CSS shapes
CSS-native	Can be authored as layout/material treatment	Grids, captions, overlays, borders, quiet forms	Keep semantic and responsive
SVG-native	Needs editable vector geometry	Floor plans, line art, mural mask, route, reveal edge	Use SVG paths/masks
Canvas/WebGL-native	Needs frame sequence, camera path, or 3D depth	walkthrough, object spine, particle light, product specimen	Require storyboard and fallback

For image-native concepts, define:

• Camera angle and lens behavior.
• Light direction and temperature.
• Shadow softness and contact points.
• Crop boundaries across desktop and mobile.
• Foreground blur roles.
• Material consistency across the family.
• Which asset is the hero and which assets are supporting.
• The visitor belief the asset supports.
• The taste world and enemy/cliche the asset avoids.
• The website section placement and text-safe zone.

For video-native concepts:

• Create or request the source image first when continuity matters.
• Lock subject, camera angle, lighting, material placement, and room geometry in the source image.
• Then write the video prompt with camera movement, subject movement, duration, end frame, and constraints against warping.
• Tell the user exactly where to place the source image and final video.
• Use reference/cinematic-room-grammar.md to author light, camera side, depth, focus, human trace, and reveal timing.
• Use ../cinematic-motion/reference/video-to-website-choreography.md to define how the video becomes a website section.
• Reject any prompt that cannot trace its choices back to approved context files.

REFERENCE LOADING RULES

Load the reference-intelligence skill after the creative brief when external references, award-site recordings, screenshots, transcripts, AI reports, or precedent collections must inform vocabulary or validate a territory. Use its two-pass model and Keep/Adapt/Reject/Defer ledger.

Load references/extended-guidance.md when the task needs detailed implementation rules, examples, edge cases, diagnostics, or verification beyond the core workflow above. Inspect its Contents first and load only the matching sections.

OUTPUT SHAPE

Deliver the requested artifact or decision, the key rationale and tradeoffs, and a concise verification checklist.

NON-NEGOTIABLE CHECKLIST

1. Diagnosis and creative brief precede visual prescription.
2. Three structurally different territories are externally tested before selection.
3. Every full inception defines reference questions; corpus depth remains proportional.
4. Pre-territory references expand vocabulary and post-territory references validate; neither dictates the concept.
5. The five logical contracts or approved equivalents cover the work.
6. Motion, video, anchor objects, storyboards, and generated media remain conditional.
7. Load matching extended guidance for substantive or high-risk work.
8. Preserve user constraints and verify the result before delivery.