lemuriaOS
creativegrowthcontentconversion

One-Shot Masterpiece

Design and generate production-ready, biomimicry-inspired Next.js pages that encode the complete LemuriaOS design system — color tokens, typography scale, glassmorphism, animation physics, generative art, and brand voice — into a layered prompt architecture (1 main + 4 specialist Gems) so every output slots directly into the production codebase without manual correction.

Context

"Visitors form a visual judgment in 50 milliseconds and decide to stay or leave within 5 seconds." — Lindgaard et al. (2006), Behaviour & Information Technology

Generating high-fidelity website pages via AI is a solved problem at the generic level — any model can output a Next.js page. The unsolved problem is design system fidelity: output that matches an existing visual identity so precisely it requires zero manual correction. Without encoded tokens, AI models produce generic output with wrong colors, wrong fonts, wrong spacing, wrong animation timing, and wrong brand voice. This skill solves the fidelity problem by encoding the complete LemuriaOS design system into a structured prompt architecture.

The second problem this skill solves is organic feel. Standard web pages look "built" — rigid grids, mechanical animations, flat backgrounds. Research in biomimicry (Benyus, 1997), procedural generation (Perlin, 1985), and animation physics (Thomas & Johnston, 1981) demonstrates that nature-derived patterns produce measurably higher engagement. This skill encodes those principles — golden ratio layouts, Fibonacci spacing, spring physics, atmospheric perspective, living backgrounds — so that every generated page feels like it grew from the screen.

Core Philosophy

  1. Fidelity over creativity — A page that perfectly matches the design system with standard animation is better than a creative page that invents its own tokens.
  2. Nature as structure, not decoration — Biomimicry patterns (golden ratio, Fibonacci, organic curves) are structural decisions, not visual garnish. They improve scannability, hierarchy, and engagement.
  3. Performance as a feature — A beautiful page that scores poorly on Core Web Vitals is a failed page. Every generative effect must be gated, capped, and fallback-ready.

Value Hierarchy

           MASTERPIECE
          /            \
     LIVING              PERFORMANT
    /      \            /          \
ORGANIC   ATMOSPHERIC  ACCESSIBLE  FAST
  • Never ship a living background without IntersectionObserver gating
  • Never ship atmospheric depth without prefers-reduced-motion fallback
  • Never ship organic interaction without keyboard/touch accessibility
  • Never ship at the ORGANIC level without first passing FAST and ACCESSIBLE

Critical Constraints

  • NEVER use raw hex colors — all colors via hsl(var(--token)) or Tailwind semantic classes
  • NEVER use fonts other than Sora (display) and Manrope (body)
  • NEVER use any type in TypeScript — full strict mode
  • NEVER initialize canvas/WebGL until IntersectionObserver confirms visibility
  • NEVER skip prefers-reduced-motion — render a single static frame for canvas, disable all CSS animations
  • NEVER use linear easing for UI transitions — use spring or organic cubic-bezier
  • NEVER auto-play video or audio without explicit user consent
  • NEVER exceed 2000 particles on desktop Canvas 2D or 500 on mobile
  • ALWAYS clean up RAF, observers, and AudioContext on component unmount
  • ALWAYS gate cursor effects behind @media (hover: hover)
  • ALWAYS export metadata on every page (title + description under 160 chars)
  • ONLY use border-radius values that are slightly imperfect (1.35rem, not 1.5rem) for organic feel

Source Authority

TIER 1 — Primary / Official (cite freely)

| Source | Authority | URL | |--------|-----------|-----| | Google Core Web Vitals | Official | web.dev/articles/vitals | | WCAG 2.1 — Animation from Interactions (SC 2.3.3) | W3C Standard | w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html | | CSS Scroll-Driven Animations | Chrome DevRel | developer.chrome.com/blog/scroll-animation-performance-case-study | | View Transitions API | W3C Draft | w3.org/TR/css-view-transitions-1/ | | Framer Motion / Motion | Official | motion.dev | | GSAP + ScrollTrigger | Official | gsap.com | | Three.js | Official | threejs.org/docs | | Next.js App Router | Official | nextjs.org/docs/app | | MDN prefers-reduced-motion | MDN | developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion | | Google Fonts (Sora, Manrope) | Official | fonts.google.com | | Nielsen Norman Group — Animation Duration | UX Authority | nngroup.com/articles/animation-duration/ |

TIER 2 — Academic / Peer-Reviewed (cite with context)

| Paper | Authors | Year | Key Finding | |-------|---------|------|-------------| | Attention Web Designers: You Have 50 Milliseconds to Make a Good First Impression | Lindgaard, Fernandes, Dudek, Brown | 2006 | Visual appeal assessed in 50ms; ratings correlated between 50ms and 500ms exposure (DOI:10.1080/01449290500330448) | | What is Beautiful is Usable | Tractinsky, Katz, Ikar (Ben-Gurion University) | 2000 | Strong correlation between perceived aesthetics and perceived usability — beauty literally makes interfaces feel more usable | | Golden Ratio in UI Design & User Satisfaction | Fikri et al. | 2023 | 7.5% positive coefficient between golden ratio integration and user satisfaction across 114 participants (DOI:10.1080/10447318.2023.2301254) | | An Image Synthesizer (Perlin Noise) | Ken Perlin (NYU Courant) | 1985 | Introduced procedural noise function for realistic textures — foundation of all generative art (SIGGRAPH, DOI:10.1145/325334.325247) | | Improving Noise (Simplex Noise) | Ken Perlin (NYU Courant) | 2002 | Corrected interpolation discontinuity, reduced gradient count to 12 — the noise function used by simplex-noise library (SIGGRAPH, DOI:10.1145/566654.566636) | | Particle Systems — Modeling Fuzzy Objects | William T. Reeves (Lucasfilm) | 1983 | Introduced stochastic particle systems for fire/clouds/water — 750K particles in Star Trek II Genesis sequence (SIGGRAPH, DOI:10.1145/964967.801167) | | Micro Interactions & Perceived Usability | Boyd, Bond | 2021 | SUS scores 74.5 without vs 79.16 with micro-interactions — animated interactions measurably improve perceived usability (DOI:10.1145/3452853.3452865) | | Organic User Interfaces | Vertegaal, Poupyrev (Sony) | 2008 | Introduced OUI concept — non-planar, deformable interfaces (DOI:10.1145/1349026.1349037) | | Biomimicry as Interaction Design | van den Driesche (Utrecht), Cajander (Uppsala) | 2025 | Biological strategies translated into interaction principles supporting resilience and regenerative thinking in HCI (Springer) | | The Illusion of Life: Disney Animation | Thomas, Johnston (Disney) | 1981 | Codified 12 Principles of Animation: squash/stretch, anticipation, follow-through, ease in/out — the foundation of all UI motion design | | Evolving Virtual Creatures | Karl Sims | 1994 | Genetic algorithm-driven morphologies and neural control — landmark in computational creativity and biomimetic computing (SIGGRAPH) | | Response Times: 3 Important Limits | Jakob Nielsen (NN/g) | 1993/2014 | 0.1s (instantaneous), 1.0s (flow limit), 10s (attention limit) — the foundational UX response time thresholds |

TIER 3 — Industry Experts (context-dependent, cross-reference)

| Expert | Affiliation | Domain | Key Contribution | |--------|-------------|--------|------------------| | Ken Perlin | NYU Courant Institute | Procedural generation | Inventor of Perlin Noise (1985) and Simplex Noise (2001); Academy Award for Technical Achievement (1997) | | Ricardo Cabello (Mr.doob) | Independent, Barcelona | WebGL | Creator of three.js (2010) — the dominant WebGL library powering virtually all 3D web experiences | | Inigo Quilez | Ex-Pixar, independent | Shader mathematics | Definitive authority on Signed Distance Functions; published the canonical SDF formula reference used across creative coding | | Daniel Shiffman | NYU ITP, Processing Foundation | Creative coding education | Author of "The Nature of Code" (2012/2024); teaches computational media to 2M+ via The Coding Train | | Matt Perry | Ex-Framer, independent | React animation | Creator of Framer Motion (now Motion) — the dominant React animation library; ~10 years building animation tooling | | Jack Doyle | GreenSock | Web animation | Creator of GSAP, used on 12M+ websites; evolved from Flash to the web's most trusted animation platform | | Janine Benyus | Biomimicry Institute | Biomimicry | Coined "Biomimicry" (1997); co-founded Biomimicry 3.8 and the Institute connecting 12,576 practitioners across 21 countries | | Sarah Drasner | Google (Sr. Dir. Engineering) | SVG animation | Author of "SVG Animations" (O'Reilly); Vue.js core team; co-founded Web Animation Workshops |

TIER 4 — Never Cite as Authoritative

  • Generic "top 10 web design trends 2026" listicles
  • AI-generated design guides without named authors or methodology
  • Dribbble/Behance shots without implementation context or performance data
  • Tool vendor marketing blogs (Webflow, Figma, Framer marketing content — their docs are fine)
  • Reddit/forum anecdotes without reproducible evidence
  • Before/after case studies without disclosed methodology

Deep Expert Knowledge

Golden Ratio Application (phi = 1.618)

Where phi appears in LemuriaOS layouts (HIGH confidence — peer-reviewed, Fikri et al. 2023):

| Context | Application | CSS | |---------|-------------|-----| | Content + sidebar split | Main content gets 1.618 proportion | grid-template-columns: 1fr 1.618fr | | Section padding ratio | Vertical padding relates to horizontal by phi | padding: calc(var(--space-section) / 1.618) var(--space-section) | | Hero headline to subhead | Headline font-size is phi x subhead size | Display-xl (4.5rem) / body-lg (1.125rem) ~ 4.0 (close to phi^3) | | Card aspect ratios | Featured cards follow golden rectangle | aspect-ratio: 1.618 / 1 | | Trust strip spacing | Distance from CTA to trust strip follows phi | margin-top: calc(var(--space-element) * 1.618) |

When to break phi: Dense data views (agent-army grid, skill-map) use equal-column grids because information density beats aesthetic proportion. Use phi for storytelling layouts, break it for dashboard layouts.

Spring Physics Selection

All UI animation should feel organic — like a branch snapping back, not a robot arm moving (HIGH confidence — Thomas & Johnston, 12 Principles).

| UI Context | Stiffness | Damping | Mass | Feel | Disney Principle | |------------|-----------|---------|------|------|-----------------| | Page entrance (fadeUp) | 100 | 15 | 1 | Slow unfurl, like a leaf opening | Slow in, slow out | | Card hover lift | 300 | 20 | 0.5 | Quick response, controlled settle | Follow through | | Button click squish | 600 | 20 | 0.3 | Snappy with micro-overshoot | Squash and stretch | | Magnetic pull | 150 | 15 | 0.5 | Gentle attraction, elastic return | Secondary action | | Modal/dialog appear | 200 | 25 | 1 | Deliberate, no bounce | Staging | | Liquid (gooey effects) | 400 | 15 | 0.5 | Heavy, wet, surface tension | Exaggeration | | Breathing (ambient) | 50 | 10 | 1 | Barely perceptible pulse | Straight ahead |

Critical rule: UI interaction springs (hover, click) must complete within 300ms. Ambient springs (breathing, drift) run continuously at ultra-low amplitude.

Atmospheric Perspective in Digital Space

Borrowed from Renaissance painting — distant objects are less saturated, less contrasted, slightly blurred (MEDIUM confidence — design principle, not empirically tested for web):

Layer       | Saturation | Contrast | Brightness | Opacity | z-index | Blur
------------|------------|----------|------------|---------|---------|------
Foreground  | 100%       | 100%     | 100%       | 1.0     | 3       | 0
Midground   | 85%        | 90%      | 105%       | 0.9     | 2       | 0
Background  | 60%        | 75%      | 110%       | 0.7     | 1       | 0-2px
Deep bg     | 40%        | 60%      | 115%       | 0.5     | 0       | 4px

Apply via CSS filter: saturate() contrast() brightness() on container elements. Use fog-fade (linear-gradient(to bottom, transparent, hsl(var(--background)))) between sections for depth transitions.

Generative Art Decision Tree

Need generative visuals?
├── Ambient background texture only
│   └── CSS-only (animated mesh gradient, film grain SVG)
│       Bundle: 0kB  |  Performance: compositor thread  |  Always acceptable
│
├── Particle streams, flow fields, organic motion
│   └── Canvas 2D + simplex-noise
│       Bundle: ~2kB  |  Cap: 2000 particles desktop, 500 mobile, 30fps
│       Gate: IntersectionObserver  |  Fallback: CSS mesh gradient
│
├── 3D particles, volumetric light, bloom, shaders
│   └── React Three Fiber + @react-three/postprocessing
│       Bundle: ~150kB gzipped  |  Cap: 50K particles GPGPU, 10K mobile
│       Gate: IntersectionObserver + next/dynamic lazy  |  Fallback: Canvas 2D or CSS
│       ONLY when explicitly requested — never default to this tier
│
└── No generative needed
    └── Static design with living backgrounds (mesh gradient + film grain)
        Always include this as the baseline — no page is truly static

Glassmorphism Tiers

Two tiers exist. Using the wrong tier dilutes the effect (MEDIUM confidence — NN/g glassmorphism research):

| Tier | Name | Use For | backdrop-filter | Border | Box-shadow | |------|------|---------|-----------------|--------|------------| | Standard | .section-panel | Content panels, card grids, nav | blur(9px) | 1px solid hsl(var(--border) / 0.72) | inset 0 0 0 1px ..., 0 24px 55px ... | | Premium | Liquid Glass | Hero CTAs, featured cards, pricing highlight | blur(40px) saturate(200%) brightness(1.1) | 0.5px solid rgba(255,255,255,0.15) | inset 0 0.5px 0 ..., 0 12px 40px ... |

Rule: Liquid Glass appears max 2x per page. Overuse destroys the premium feel.

Scroll Choreography Decision Framework

| Scenario | Engine | Why | |----------|--------|-----| | Simple reveal on scroll (fade, slide) | CSS scroll-timeline + animation-range | Zero JS, compositor thread, 60fps guaranteed (HIGH confidence — Chrome DevRel case study) | | Staggered children reveal | Framer Motion whileInView + staggerContainer | Already in codebase (lib/motion.ts), viewport-once pattern | | Scrub-driven progress (bars fill, elements transform proportionally to scroll) | GSAP ScrollTrigger with scrub: 1 | CSS scroll-timeline can't express complex multi-property choreography | | Horizontal scroll section (pinned, panels slide) | GSAP ScrollTrigger with pin: true | No CSS-only equivalent for pinned horizontal scroll | | Word-by-word text reveal | Framer Motion per-word <motion.span> | Fine-grained stagger control per word, viewport-once |

Bundle rule: GSAP + ScrollTrigger is ~18kB gzipped. Acceptable when CSS scroll-timeline can't express the choreography. Never load GSAP for simple reveals that CSS handles natively.

Anti-Patterns

| Anti-Pattern | Why It Fails | Correct Approach | |--------------|-------------|------------------| | Raw hex colors (#f0b000) instead of CSS custom properties | Breaks theme consistency; unreachable by future token changes; violates design system contract | Use hsl(var(--primary)) or Tailwind semantic classes (text-primary, bg-primary) | | any type in animation component props | Runtime crashes on variant mismatch; TypeScript strict mode violation; hides interface contract bugs | Define explicit prop types: { variants: Variants; data: AgentData[] } | | Canvas rendering without IntersectionObserver | GPU drain on offscreen elements; mobile battery destruction; unnecessary paint cycles | Wrap in GenerativeCanvas pattern: observe visibility, pause RAF when !isIntersecting | | Linear easing (transition: all 0.3s linear) on UI transitions | Feels mechanical and robotic; violates organic motion principle; Disney's "slow in, slow out" exists for a reason | Use spring (cubic-bezier(0.34, 1.56, 0.64, 1)) or organic (cubic-bezier(0.22, 1, 0.36, 1)) easing | | Perfect geometric values (border-radius: 1.5rem, circles) | Looks machine-made; breaks biomimicry principle; human eye detects and rejects mathematical perfection | Use slightly imperfect values: 1.35rem not 1.5rem; vary radii subtly; avoid perfect circles | | Auto-playing hero video without user consent | Delays LCP (Core Web Vitals failure); WCAG 2.1 SC 2.3.3 violation; bandwidth waste on mobile | Use video thumbnail with explicit play button; if ambient, use Canvas 2D particle system instead | | Skipping prefers-reduced-motion check | WCAG 2.1 SC 2.3.3 non-compliance; vestibular disorder trigger; accessibility lawsuit risk | Gate ALL animations: matchMedia('(prefers-reduced-motion: reduce)') → render single static frame for canvas, remove CSS transitions | | Flat static background on any page section | Contradicts "living stillness" principle; looks dead compared to other sections; breaks atmospheric continuity | Minimum: animated mesh gradient + film grain SVG. Every section breathes, even if only at 0.03 opacity | | Stock photography in hero section | Generic, fails differentiation test; does not communicate product capability; erodes trust | Use product screenshots, abstract generative art, or branded illustrations. If no visual, use text-only centered hero with gradient text |

Procedure

Playbook 1: Full Page Generation

Trigger: "build a new page for https://lemuriaos.ai" or "create a landing page"

  1. Extract from brief: route path, page purpose, target audience, primary CTA, secondary CTA, section count.
  2. Select page layout pattern: centered hero vs split hero vs media hero. Apply golden ratio (1fr 1.618fr) to at least one content split.
  3. Define the atmosphere layer: page background (dual radial gradient on --background), grid overlay (40px), film grain (0.04 opacity on hero/feature sections).
  4. Build the typography hierarchy: H1 at text-display-xl (clamp), section headers at text-display, body at text-body-lg for leads, text-body for paragraphs. All Sora display / Manrope body.
  5. Design animation choreography: entrance animations use fadeUp variant with staggerContainer (80ms stagger). Scroll reveals use CSS scroll-timeline for simple fades, GSAP ScrollTrigger only for scrub-driven effects.
  6. Select generative art tier: CSS-only (mesh gradient) for standard pages, Canvas 2D for feature pages, React Three Fiber only when explicitly requested. Follow the decision tree.
  7. Define interaction ecology: card hover (translateY -2px + glow), CTA buttons (magnetic or standard), cursor effects gated behind @media (hover: hover).
  8. Build responsive cascade: desktop-first layout, tablet (768px) simplification, mobile (375px) stack. Reduce/disable canvas on mobile. Touch targets min 44px.
  9. Run accessibility check: semantic HTML5, one H1, aria-labels on interactive elements, focus rings (ring-2 ring-ring ring-offset-2), contrast ratio WCAG AA on all text/CTA combinations.
  10. Write integration notes: file tree, import paths, data dependencies, how the new page connects to existing routes and the navigation.

Playbook 2: Hero Section Masterpiece

Trigger: "design the hero section" or "above-the-fold experience"

  1. Choose hero layout pattern based on product type: split hero (headline left, visual right — best for SaaS/product), centered hero (stacked — best for brand statements), media hero (background image/video — best for visual products).
  2. Write headline: [Outcome] + [for Whom] in 6-12 words. Must be scannable in under 3 seconds (Lindgaard et al., 50ms visual judgment). Avoid cleverness — clarity converts.
  3. Write subhead: expand headline with specifics (how, proof, timeframe) in 15-25 words. Font size at text-body-lg, color text-muted-foreground, max-width 480px.
  4. Define CTA cluster: primary button (action verb + outcome, e.g., "Start building free") with bg-primary filled, min 48px height. Secondary link (lower commitment, e.g., "See how it works") as ghost button or text link.
  5. Specify visual element: product screenshot, Canvas 2D flow field, or generative art. Define exact dimensions, mark as LCP candidate (loading="eager", fetchpriority="high" for images).
  6. Add atmosphere: two glow orbs (primary 600px blur 120px at 0.18 opacity, accent 600px blur 120px at 0.1 opacity) with glow-drift keyframe (18s/22s). Mouse parallax 30px X / 20px Y inverted. Film grain overlay.
  7. Define trust strip below hero: logo bar, metric badges, or one-line social proof. Position below CTA cluster, above fold. Use section-caption pattern for label.
  8. Specify responsive behavior: tablet (768px) — reduce headline size, stack if split. Mobile (375px) — stack vertical, disable glow orbs on low-end, CTA full-width.

Playbook 3: Interactive Feature Build

Trigger: "add interactive component" or "build a living UI element"

  1. Identify interaction model: magnetic (cursor attraction with spring return), heliotropic (perspective tilt tracking cursor), liquid (gooey SVG filter + surface tension), or standard (hover glow + lift).
  2. Configure spring physics: select stiffness/damping/mass from the spring physics table based on UI context. Map to Disney principle (squash/stretch for clicks, follow-through for hover).
  3. Select glassmorphism tier: standard panel for content cards, liquid glass for featured/premium elements. Max 2 liquid glass instances per page.
  4. Define cursor behavior: gate behind @media (hover: hover). Magnetic strength 0.3 for buttons, heliotropic max 8deg rotation for cards. Include onMouseLeave reset with spring transition.
  5. Choose animation variant: use existing fadeUp, scaleIn, or staggerContainer from lib/motion.ts. Only create new variants if existing ones cannot express the needed motion.
  6. Add generative layer if needed: breathing animation (scale 0.995-1.005, 3s infinite) for buttons, golden glow pulse for card hover, particle burst for submit actions.
  7. Build reduced-motion fallback: disable all spring animations, remove breathing, keep static glass appearance, ensure all interactive states are still distinguishable via non-motion cues (color change, border change).
  8. Verify performance budget: interaction response under 150ms (Nielsen, 0.1s threshold), hover effects compositor-thread where possible, no layout shifts from transforms.

Playbook 4: WebGL / Generative Background

Trigger: "particle background", "flow field", "shader effect", or "generative art"

  1. Select technique from decision tree: Canvas 2D + simplex-noise for 2D particles/flow fields (~2kB), React Three Fiber for 3D/GPGPU/bloom (~150kB). Never default to R3F — justify the bundle cost.
  2. Define particle budget: Canvas 2D max 2000 desktop / 500 mobile. R3F GPGPU max 50K desktop / 10K mobile. Detect capability via navigator.hardwareConcurrency <= 4 for mobile reduction.
  3. Select noise function: createNoise3D() from simplex-noise for flow fields (Perlin, 1985/2002). Frequency 0.003 for large-scale flow, 0.01 for fine detail. Time dimension at 0.0003 for slow evolution.
  4. Map colors to design tokens: particles use hsla(38, 90%, 50%, 0.4) (primary gold). Trails use semi-transparent background clear rgba(15, 21, 25, 0.03). Secondary particles use accent orange.
  5. Define interaction model: mouse position as attractor (phototropism), strength inversely proportional to distance squared with softening factor. Dampening 0.98. Or: no interaction for pure ambient.
  6. Implement IntersectionObserver gating: threshold 0.1, pause RAF loop when !isIntersecting. Resume on re-entry. This is non-negotiable — no offscreen rendering.
  7. Build mobile fallback: reduce particle count, disable bloom/post-processing, or fall back entirely to CSS animated mesh gradient. Test on hardwareConcurrency <= 4.
  8. Cleanup protocol: cancelAnimationFrame(raf), observer.disconnect(), remove resize listener, dispose WebGL context if R3F. All in useEffect cleanup function. Memory leaks from missing cleanup are the #1 canvas bug.

Output Format

# One-Shot Masterpiece Output

## Architecture
- Route: /[page-name]
- File tree:
  app/[page-name]/page.tsx          — Server component (metadata + data loading)
  components/[feature-name].tsx     — Client component (animation + interaction)
  components/[generative].tsx       — Canvas/WebGL layer (if applicable)

## Page Component (Server)
- Metadata: title, description (under 160 chars)
- Data: server-side fetch or static import
- Layout: page-shell max-w-[74rem], section spacing var(--space-section)
- Sections: ordered list with scroll-margin-top

## Client Components
- Animation: Framer Motion variants (fadeUp, staggerContainer, viewportOnce)
- Interaction: magnetic/heliotropic effects gated behind @media (hover: hover)
- Glass: tier specified (standard panel or liquid glass)

## Generative Layer (if applicable)
- Engine: Canvas 2D + simplex-noise | React Three Fiber + GLSL
- Particle count: [desktop] / [mobile]
- Performance: IntersectionObserver gating, [fps] cap, DPR clamped at 2
- Fallback: CSS living-mesh gradient for prefers-reduced-motion

## Responsive Breakpoints
- Desktop (1280px+): full layout with all effects
- Tablet (768px): simplified grid, reduced particle count
- Mobile (375px): stacked layout, canvas disabled or minimal

## Nature Notes
- Biomimicry principles applied: [list with rationale]
- Golden ratio usage: [specific layout points]
- Spring physics config: [stiffness/damping/mass with Disney principle]
- Atmospheric perspective: [depth layer implementation]

## Integration
- Import paths and data dependencies
- Connection to existing routes and navigation
- New packages required (if any): exact install command

## Confidence
- Design system fidelity: HIGH — tokens verified against globals.css
- Biomimicry integration: [HIGH|MEDIUM] — [rationale]
- Performance budget: [HIGH|MEDIUM] — [measured or estimated]

QA Rubric (scored)

  • Design token fidelity (0-5): every color, font, spacing value traces back to a CSS custom property in globals.css. Score 0 if any raw hex or Tailwind default color appears. Score 5 only if every token is verifiable.
  • Biomimicry integration (0-5): golden ratio visible in at least one layout proportion, Fibonacci values in spacing, organic border-radii (1.35rem), atmospheric perspective in depth layers. Score 0 if the page looks "built" instead of "grown".
  • Animation quality (0-5): uses existing Framer Motion variants, spring physics with correct stiffness/damping for context, staggered children at 80ms, scroll-driven reveals. Score 0 for any linear easing on UI transitions. Score 5 if motion feels like nature (branch snap, leaf unfurl, water ripple).
  • Accessibility compliance (0-5): semantic HTML5, aria-labels on all interactive elements, WCAG AA contrast on text and CTAs, 44px touch targets, prefers-reduced-motion fully respected with static fallbacks, focus rings visible. Score 0 if reduced-motion is missing.
  • Brand voice accuracy (0-5): copy is confident and practical, uses real proof points (73 agents, 46+ skills, 9 departments), zero hype words ("revolutionary", "game-changing"), zero emoji in body copy, zero exclamation marks in headlines. Score 0 for any fabricated statistics.
  • Code completeness (0-5): zero placeholder comments, zero any types, zero // TODO, zero /* ... */ truncation. Every component renders without modification. Score 0 if any placeholder exists.
  • Performance discipline (0-5): canvas gated behind IntersectionObserver, RAF cleanup on unmount, DPR capped at 2, mobile particle reduction, no layout shift (CLS < 0.1), LCP element identified and prioritized. Score 0 if canvas renders offscreen.

Examples (good/bad)

Good prompt — specific, technique-aware, parameterized:

"Build a /use-cases page with 4 market cards (SaaS, E-commerce, Crypto, Hospitality) in a golden-ratio bento grid. Each card has heliotropic tilt (max 8deg, perspective 600px). Featured card (SaaS) gets liquid glass treatment + animated mesh gradient background. Staggered scroll-reveal with fadeUp variant at 80ms stagger. Fog fade (120px gradient) between sections. Atmospheric perspective: far cards at 60% saturation. Trust strip with 4 client logos below hero."

Why it works: specifies route, layout (golden ratio), interaction (heliotropic + parameters), glass tier (liquid for featured only), animation (existing variant + timing), depth (atmospheric perspective with values), and social proof.

Bad prompt — vague, no parameters, no technique names:

"Make a cool landing page with some animations and dark mode."

Why it fails: no route, no layout direction, no named techniques, no CTA hierarchy, no content structure, no performance tier, no responsive behavior. The model will hallucinate a generic Bootstrap-dark page with wrong tokens.

Good prompt — hero section with full specification:

"Hero section for /about. Headline 'Growth is a living system' reveals word-by-word on scroll (Framer Motion per-word spans, 80ms delay, fadeUp variant). Behind it: Canvas 2D flow field with 1500 gold particles (hsla 38 90% 50% / 0.4) following simplex noise at frequency 0.003. Two bioluminescent glow orbs (primary 600px blur 120px, accent 600px blur 120px) with glow-drift at 18s/22s. Liquid glass CTA 'Run your Growth OS' with magnetic pull (stiffness 150, damping 15). Film grain at 0.04 opacity. Mobile: disable flow field, keep glow orbs, stack CTA full-width."

Why it works: every element has exact parameters — particle count, color in HSL, noise frequency, glow dimensions, spring config, mobile fallback. Zero ambiguity.

Bad prompt — incomplete specification:

"Add a particle background to the homepage."

Why it fails: no particle count (could generate 50K and destroy mobile), no color (will invent non-token colors), no interaction model (static vs phototropic), no performance constraints (no IntersectionObserver, no mobile fallback, no fps cap). Output will be unoptimized and off-brand.

Self-Evaluation Checklist

Before delivering any generated page, verify:

  • [ ] Every color value uses hsl(var(--token)) or Tailwind semantic class — zero raw hex
  • [ ] Fonts are exclusively Sora (display) and Manrope (body)
  • [ ] Fluid typography uses exact clamp() values from the design system
  • [ ] At least one golden ratio proportion in the layout
  • [ ] Border radii use organic values (1.35rem, not 1.5rem)
  • [ ] All animations use spring or organic easing — zero linear on UI transitions
  • [ ] Framer Motion variants reference existing lib/motion.ts exports
  • [ ] Canvas effects gated behind IntersectionObserver with RAF cleanup
  • [ ] prefers-reduced-motion renders static fallback — tested
  • [ ] Cursor effects gated behind @media (hover: hover)
  • [ ] All interactive elements have aria-labels and 44px touch targets
  • [ ] LCP element is identified and has fetchpriority="high" if image
  • [ ] Film grain present on hero/feature sections (0.03-0.05 opacity)
  • [ ] Living background present — no flat static backgrounds
  • [ ] Copy contains zero hype words, zero emoji, zero fabricated statistics
  • [ ] TypeScript strict — zero any, explicit return types on all functions
  • [ ] All source claims include confidence level (HIGH/MEDIUM) and tier

Variants

  • Single-page generation: Use Playbook 1 alone. The main prompt (Biomorphic Architect) handles 80% of page-building needs without specialist Gems. Best for standard content pages, pricing, documentation.
  • Hero-focused build: Use Playbook 2, optionally combined with Playbook 4 if a generative background is needed. Best for landing pages where the above-fold experience is the primary conversion lever.
  • Interactive feature page: Combine Playbook 1 + Playbook 3. Fire the Sentient Flora UI Gem (Gem 3) for liquid-physics components. Best for pages with forms, filters, dense card grids, or interactive demos.
  • WebGL showcase: Combine Playbook 1 + Playbook 4. Fire the Algorithmic Botanist Gem (Gem 2) for GPGPU particle ecosystems. Best for flagship hero sections that need maximum visual impact. Reserve for high-traffic pages — the 150kB bundle cost must be justified.
  • Full sensory experience: Fire all playbooks in sequence, all Gems in order (Main → Gem 2 → Gem 3 → Gem 1 → Gem 4). Produces a page that looks, moves, feels, and sounds alive. Reserve for flagship launches only — integration complexity is high and testing surface is large.