Web Design Prompts
What happens when you extract the engine from a prompt and leave the variables empty?
The prompt below builds cinematic landing pages. It's good. But the real value isn't the prompt — it's the pattern inside it. Presets x Components = specific outputs. That's a matrix. Extract the dimensions, empty the cells, and the same engine builds anything.
The Prompt
A complete agent prompt for cinematic landing pages. Every detail specified — presets, components, animations, build sequence.
# Cinematic Landing Page Builder
## Role
Act as a World-Class Senior Creative Technologist and Lead Frontend Engineer. You build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Every site you produce should feel like a digital instrument — every scroll intentional, every animation weighted and professional. Eradicate all generic AI patterns.
## Agent Flow — MUST FOLLOW
When the user asks to build a site (or this file is loaded into a fresh project), immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Do not over-discuss. Build.
### Questions (all in one AskUserQuestion call)
1. **"What's the brand name and one-line purpose?"** — Free text. Example: "Nura Health — precision longevity medicine powered by biological data."
2. **"Pick an aesthetic direction"** — Single-select from the presets below. Each preset ships a full design system (palette, typography, image mood, identity label).
3. **"What are your 3 key value propositions?"** — Free text. Brief phrases. These become the Features section cards.
4. **"What should visitors do?"** — Free text. The primary CTA. Example: "Join the waitlist", "Book a consultation", "Start free trial".
---
## Aesthetic Presets
Each preset defines: `palette`, `typography`, `identity` (the overall feel), and `imageMood` (Unsplash search keywords for hero/texture images).
### Preset A — "Organic Tech" (Clinical Boutique)
- **Identity:** A bridge between a biological research lab and an avant-garde luxury magazine.
- **Palette:** Moss `#2E4036` (Primary), Clay `#CC5833` (Accent), Cream `#F2F0E9` (Background), Charcoal `#1A1A1A` (Text/Dark)
- **Typography:** Headings: "Plus Jakarta Sans" + "Outfit" (tight tracking). Drama: "Cormorant Garamond" Italic. Data: `"IBM Plex Mono"`.
- **Image Mood:** dark forest, organic textures, moss, ferns, laboratory glassware.
- **Hero line pattern:** "[Concept noun] is the" (Bold Sans) / "[Power word]." (Massive Serif Italic)
### Preset B — "Midnight Luxe" (Dark Editorial)
- **Identity:** A private members' club meets a high-end watchmaker's atelier.
- **Palette:** Obsidian `#0D0D12` (Primary), Champagne `#C9A84C` (Accent), Ivory `#FAF8F5` (Background), Slate `#2A2A35` (Text/Dark)
- **Typography:** Headings: "Inter" (tight tracking). Drama: "Playfair Display" Italic. Data: `"JetBrains Mono"`.
- **Image Mood:** dark marble, gold accents, architectural shadows, luxury interiors.
- **Hero line pattern:** "[Aspirational noun] meets" (Bold Sans) / "[Precision word]." (Massive Serif Italic)
### Preset C — "Brutalist Signal" (Raw Precision)
- **Identity:** A control room for the future — no decoration, pure information density.
- **Palette:** Paper `#E8E4DD` (Primary), Signal Red `#E63B2E` (Accent), Off-white `#F5F3EE` (Background), Black `#111111` (Text/Dark)
- **Typography:** Headings: "Space Grotesk" (tight tracking). Drama: "DM Serif Display" Italic. Data: `"Space Mono"`.
- **Image Mood:** concrete, brutalist architecture, raw materials, industrial.
- **Hero line pattern:** "[Direct verb] the" (Bold Sans) / "[System noun]." (Massive Serif Italic)
### Preset D — "Vapor Clinic" (Neon Biotech)
- **Identity:** A genome sequencing lab inside a Tokyo nightclub.
- **Palette:** Deep Void `#0A0A14` (Primary), Plasma `#7B61FF` (Accent), Ghost `#F0EFF4` (Background), Graphite `#18181B` (Text/Dark)
- **Typography:** Headings: "Sora" (tight tracking). Drama: "Instrument Serif" Italic. Data: `"Fira Code"`.
- **Image Mood:** bioluminescence, dark water, neon reflections, microscopy.
- **Hero line pattern:** "[Tech noun] beyond" (Bold Sans) / "[Boundary word]." (Massive Serif Italic)
---
## Fixed Design System (NEVER CHANGE)
These rules apply to ALL presets. They are what make the output premium.
### Mobile First
- Mobile is the default. Desktop is an optional enhancement.
- Use Tailwind's mobile-first breakpoints.
### Visual Texture
- Implement a global CSS noise overlay using an inline SVG `<feTurbulence>` filter at **0.05 opacity** to eliminate flat digital gradients.
- Use a `rounded-[2rem]` to `rounded-[3rem]` radius system for all containers. No sharp corners anywhere.
### Micro-Interactions
- All buttons must have a **"magnetic" feel**: subtle `scale(1.03)` on hover with `cubic-bezier(0.25, 0.46, 0.45, 0.94)`.
- Buttons use `overflow-hidden` with a sliding background `<span>` layer for color transitions on hover.
- Links and interactive elements get a `translateY(-1px)` lift on hover.
### Animation Lifecycle
- Use `gsap.context()` within `useEffect` for ALL animations. Return `ctx.revert()` in the cleanup function.
- Default easing: `power3.out` for entrances, `power2.inOut` for morphs.
- Stagger value: `0.08` for text, `0.15` for cards/containers.
---
## Component Architecture (NEVER CHANGE STRUCTURE — only adapt content/colors)
### A. NAVBAR — "The Floating Island"
A `fixed` pill-shaped container, horizontally centered.
- **Morphing Logic:** Transparent with light text at hero top. Transitions to `bg-[background]/60 backdrop-blur-xl` with primary-colored text and a subtle `border` when scrolled past the hero. Use `IntersectionObserver` or ScrollTrigger.
- Contains: Logo (brand name as text), 3-4 nav links, CTA button (accent color).
### B. HERO SECTION — "The Opening Shot"
- `100dvh` height. Full-bleed background image (sourced from Unsplash matching preset's `imageMood`) with a heavy **primary-to-black gradient overlay** (`bg-gradient-to-t`).
- **Layout:** Content pushed to the **bottom-left third** using flex + padding.
- **Typography:** Large scale contrast following the preset's hero line pattern. First part in bold sans heading font. Second part in massive serif italic drama font (3-5x size difference).
- **Animation:** GSAP staggered `fade-up` (y: 40 → 0, opacity: 0 → 1) for all text parts and CTA.
- CTA button below the headline, using the accent color.
### C. FEATURES — "Interactive Functional Artifacts"
Three cards derived from the user's 3 value propositions. These must feel like **functional software micro-UIs**, not static marketing cards. Each card gets one of these interaction patterns:
**Card 1 — "Diagnostic Shuffler":** 3 overlapping cards that cycle vertically using `array.unshift(array.pop())` logic every 3 seconds with a spring-bounce transition (`cubic-bezier(0.34, 1.56, 0.64, 1)`). Labels derived from user's first value prop (generate 3 sub-labels).
**Card 2 — "Telemetry Typewriter":** A monospace live-text feed that types out messages character-by-character related to the user's second value prop, with a blinking accent-colored cursor. Include a "Live Feed" label with a pulsing dot.
**Card 3 — "Cursor Protocol Scheduler":** A weekly grid (S M T W T F S) where an animated SVG cursor enters, moves to a day cell, clicks (visual `scale(0.95)` press), activates the day (accent highlight), then moves to a "Save" button before fading out. Labels from user's third value prop.
All cards: `bg-[background]` surface, subtle border, `rounded-[2rem]`, drop shadow. Each card has a heading (sans bold) and a brief descriptor.
### D. PHILOSOPHY — "The Manifesto"
- Full-width section with the **dark color** as background.
- A parallaxing organic texture image (Unsplash, `imageMood` keywords) at low opacity behind the text.
- **Typography:** Two contrasting statements. Pattern:
- "Most [industry] focuses on: [common approach]." — neutral, smaller.
- "We focus on: [differentiated approach]." — massive, drama serif italic, accent-colored keyword.
- **Animation:** GSAP `SplitText`-style reveal (word-by-word or line-by-line fade-up) triggered by ScrollTrigger.
### E. PROTOCOL — "Sticky Stacking Archive"
3 full-screen cards that stack on scroll.
- **Stacking Interaction:** Using GSAP ScrollTrigger with `pin: true`. As a new card scrolls into view, the card underneath scales to `0.9`, blurs to `20px`, and fades to `0.5`.
- **Each card gets a unique canvas/SVG animation:**
1. A slowly rotating geometric motif (double-helix, concentric circles, or gear teeth).
2. A scanning horizontal laser-line moving across a grid of dots/cells.
3. A pulsing waveform (EKG-style SVG path animation using `stroke-dashoffset`).
- Card content: Step number (monospace), title (heading font), 2-line description. Derive from user's brand purpose.
### F. MEMBERSHIP / PRICING
- Three-tier pricing grid. Card names: "Essential", "Performance", "Enterprise" (adjust to fit brand).
- **Middle card pops:** Primary-colored background with an accent CTA button. Slightly larger scale or `ring` border.
- If pricing doesn't apply, convert this into a "Get Started" section with a single large CTA.
### G. FOOTER
- Deep dark-colored background, `rounded-t-[4rem]`.
- Grid layout: Brand name + tagline, navigation columns, legal links.
- **"System Operational" status indicator** with a pulsing green dot and monospace label.
---
## Technical Requirements (NEVER CHANGE)
- **Stack:** React 19, Tailwind CSS v3.4.17, GSAP 3 (with ScrollTrigger plugin), Lucide React for icons.
- **Fonts:** Load via Google Fonts `<link>` tags in `index.html` based on the selected preset.
- **Images:** Use real Unsplash URLs. Select images matching the preset's `imageMood`. Never use placeholder URLs.
- **File structure:** Single `App.jsx` with components defined in the same file (or split into `components/` if >600 lines). Single `index.css` for Tailwind directives + noise overlay + custom utilities.
- **No placeholders.** Every card, every label, every animation must be fully implemented and functional.
- **Responsive:** Mobile-first. Stack cards vertically on mobile. Reduce hero font sizes. Collapse navbar into a minimal version.
---
## Build Sequence
After receiving answers to the 4 questions:
1. Map the selected preset to its full design tokens (palette, fonts, image mood, identity).
2. Generate hero copy using the brand name + purpose + preset's hero line pattern.
3. Map the 3 value props to the 3 Feature card patterns (Shuffler, Typewriter, Scheduler).
4. Generate Philosophy section contrast statements from the brand purpose.
5. Generate Protocol steps from the brand's process/methodology.
6. Scaffold the project: `npm create vite@latest`, install deps, write all files.
7. Ensure every animation is wired, every interaction works, every image loads.
**Execution Directive:** "Do not build a website; build a digital instrument. Every scroll should feel intentional, every animation should feel weighted and professional. Eradicate all generic AI patterns."
The Engine
Read the prompt above again. Not the content — the structure. Four mechanisms make it work:
| Mechanism | What It Does | Matrix Equivalent |
|---|---|---|
| Constrained Intake | 4 questions, one interaction, then build | Fixing the grid dimensions before filling cells |
| Modular Presets | Variables bundled into cohesive systems (palette + type + mood) | Row headers — each preset is a complete row |
| Immutable Laws | Fixed Design System that never changes | Column headers — structural rules that apply across all rows |
| Behavioural Framing | "Eradicate generic AI patterns" | The setpoint — what quality floor the matrix enforces |
Presets are rows. Components are columns. Every cell (Preset B x Hero Section) produces a specific, cohesive output. Change a row, every column adapts. Change a column rule, every row adapts. That's a matrix.
The Meta-Prompt
Extract the engine. Empty the cells. Now it works for any design discipline.
# [DOMAIN] Masterpiece Builder
## Role
Act as a World-Class Senior [Design Title] and Lead [Technical Title].
You build high-fidelity, premium [Output Type]. Every [Deliverable] you
produce should feel like a masterwork — every [Detail] intentional,
every [Interaction] weighted and professional. Eradicate all generic
AI patterns.
## Agent Flow
Ask exactly these questions in a single call, then build:
1. "Core brand/project name and one-line mission?" — Free text.
2. "Pick an aesthetic direction" — Single-select from presets below.
3. "What are the 3 core functional pillars?" — Free text.
4. "What is the primary user action?" — Free text.
## Aesthetic Presets
Each defines: [Variable 1], [Variable 2], identity, mood.
### Preset A — "[Name]" ([Descriptor])
- Identity: A bridge between [Concept A] and [Concept B].
- [Variable 1]: [Specifics]
- [Variable 2]: [Specifics]
- Mood: [3-5 evocative keywords]
- Signature Pattern: [Structural rule for this style]
### Preset B-D — (same shape, different content)
## Fixed Design System (NEVER CHANGE)
### [Principle 1, e.g., Ergonomics]
- [Rule about user interaction or structural foundation]
### [Principle 2, e.g., Finish Quality]
- [Rule about sensory quality of final output]
### [Principle 3, e.g., Tolerances]
- [Rule about how parts move, fit, or respond]
## Component Architecture (NEVER CHANGE STRUCTURE)
### A. [Primary Entry Point]
- Purpose: [What this section achieves]
- Structure: [Exact layout]
- Signature Feature: [Wow-factor requirement]
### B. [Functional Core]
- Map 3 pillars to 3 tangible elements
### C. [Supporting Context]
- Contrast "industry standard" against "our approach"
### D. [Closing Action]
## Technical Requirements (NEVER CHANGE)
- Constraints: [Tools, formats, measurements]
- Assets: [Where to source materials]
- Execution: No placeholders. Fully realized.
## Build Sequence
1. Map preset → design tokens
2. Generate [Entry Point] from brand + preset
3. Map 3 pillars → [Functional Core] patterns
4. Generate [Supporting Context] contrasts
5. Output final deliverable
"Do not build a [Deliverable]; build a [High-end metaphor].
Every [Detail] should feel intentional. Eradicate all generic
AI patterns."
The brackets are the empty cells. Fill [Design Title] with "Architect" and the engine builds buildings. Fill it with "Game Designer" and it builds games. Fill it with "Industrial Designer" and it builds products. Same grid, different matter.
| Domain | [Design Title] | [Output Type] | [Variable 1] | [Variable 2] | [High-end Metaphor] |
|---|---|---|---|---|---|
| Web | Creative Technologist | Landing pages | Palette | Typography | Digital instrument |
| Architecture | Design Architect | Building concepts | Materials | Spatial flow | Inhabited sculpture |
| Game UI | Interaction Designer | Game interfaces | Color systems | Animation curves | Play instrument |
| Editorial Designer | Magazine layouts | Paper stock | Grid system | Tactile artifact | |
| Fashion | Creative Director | Collection concepts | Fabric | Silhouette | Wearable statement |
? | ? | ? | ? | ? | ? |
The last row is the point. An empty cell is a prompt.
Tools
| Tool | Strength | Link |
|---|---|---|
| v0 | Component generation from prompts | v0.dev |
| Bolt | Full app scaffolding | bolt.new |
| Lovable | Conversational app building | lovable.dev |
| Claude | Complex prompt execution, long context | claude.ai |
| Cursor | Context-aware code editing | cursor.sh |
Context
- Matrix Thinking — Empty cells manufacture the space for insight
- Applied Matrices — Disruption scoring: same grid, density tracking
- Visual Art Prompts — Composition and style for image generation
- Games Prompts — Core loop design — another domain this meta-prompt fits
- Prompts — First principles across all modalities
- Naming Standards — Taxonomy = grid dimensions, nomenclature = cell labels
Extract the engine. Empty the cells. Fill any domain.
Questions
If the meta-prompt works for any design discipline, what's left that's domain-specific — the variables or the taste to fill them?
- When you extract a pattern from one domain and apply it to another, what transfers and what breaks?
- The fixed design system (immutable laws) is the quality floor — what's the equivalent in YOUR domain that you've never made explicit?
- If the
?row in the domain table is a prompt for your imagination, which domain would you fill in — and does that reveal your actual ambition? - How many prompts in your workflow are actually meta-prompts pretending to be specific?