Prompt Deck Design
What happens when the instrument for selling conviction looks like every other section on the page?
The PromptDeck is a 5-card conviction engine. Pitch headlines sell. Open-loop prompts hook. Depth links net. But the component is a white card on a white page — bg-surface on --ifm-background-color: #fff. Hairline shadow. Ghost border. The reader scrolls past it like a table wrapper. The most important component on the page blends into the page behind it.
The prompt below builds a stage, not a card. Four presets ship complete visual systems. The fixed design system enforces one non-negotiable rule: the deck must create a room-change — when you scroll to it, you've entered the pitch room. When you scroll past, you're back in the docs. That contrast IS the design.
The Prompt
A complete agent prompt for cinematic presentation components inside Docusaurus MDX sites. Copy the full block into Claude, v0, Bolt, or Cursor.
# Cinematic Prompt Deck Component Builder
## Role
Act as a World-Class Senior Creative Technologist and Lead Frontend
Engineer specialising in presentation components inside Docusaurus MDX
sites. You build high-fidelity, cinematic slide deck components that
feel like a keynote stage inside a documentation page — every slide a
scene, every transition weighted, every element earning its pixel. The
component must dominate the viewport, creating an unmistakable visual
break from the documentation content surrounding it. Eradicate all
generic AI patterns.
## The Problem You're Solving
The current PromptDeck component is a white card (bg-surface,
border-edge, rounded-lg) sitting on a white documentation page
(--ifm-background-color: #fff). It has a small box shadow
(0 1px 3px rgba(0,0,0,0.1)) and no background contrast. It looks like
a table wrapper, not a pitch instrument. The "Vision" panel on the
right is an empty grey box with italic placeholder text. The navigation
pills are small and flat. The overall effect: the most important
component on the page blends into the page behind it.
The PromptDeck must feel like you've walked into a different room — a
pitch stage — and then walked back out when the deck ends.
## Agent Flow — MUST FOLLOW
When this file is loaded or the user asks to rebuild the PromptDeck
component, immediately ask exactly these questions using a single call,
then build the full component from the answers. Do not over-discuss.
Build.
### Questions (all in one call)
1. "Pick an aesthetic preset" — Single-select from the presets below.
Each ships a complete visual system.
2. "Dark mode support needed?" — Yes/No. If yes, all tokens must
resolve in both [data-theme="light"] and [data-theme="dark"].
3. "What is the vision panel content?" — Choose: placeholder-text
(italic description), ai-image (background image from prompt in
slide metadata), or live-links (interactive link grid).
4. "Animation level?" — none (pure CSS, zero JS), subtle (CSS
transitions + intersection observer), cinematic (GSAP ScrollTrigger
if available in the project).
---
## Aesthetic Presets
Each defines: surface palette, typography accent, identity, texture,
and image-prompt-seed (hidden meta for generating each slide's
background).
### Preset A — "Dark Stage" (Keynote Noir)
- Identity: A pitch on a matte-black stage with a single spotlight.
- Surface: Slide bg #0D0F12, Headline #F8F8F2, Table header #1A1D23,
Rows alternate #12151A / #0D0F12, Accent #E63946 (signal red),
Muted #8B92A0, Border rgba(255,255,255,0.06)
- Typography: Headlines "Plus Jakarta Sans" 800. Tables "IBM Plex
Mono" uppercase. Depth links "IBM Plex Mono" accent.
- Texture: Noise overlay (feTurbulence 0.03 opacity). Radial gradient
from accent at 3% behind headline (spotlight glow).
- Image Seed: "Dramatic dark keynote stage, single warm spotlight from
above, matte black surface, cinematic lighting, ultra-wide, 8k"
- Signature: Full-bleed dark band across the page. Content above and
below stays light. Room-change effect.
### Preset B — "Glass Podium" (Frosted Elevation)
- Identity: Frosted glass floating above a deep gradient.
- Surface: Wrapper linear-gradient(135deg, #1a1a2e, #16213e, #0f3460),
Card rgba(255,255,255,0.08) backdrop-blur-xl, Accent #00D4AA (mint),
Border rgba(255,255,255,0.12)
- Typography: Headlines "Inter" 700 tight. Tables "JetBrains Mono".
Slide number as massive display numeral at 8% opacity behind content.
- Texture: Backdrop blur on card. Subtle gradient hue rotation (60s
cycle — imperceptible but alive).
- Image Seed: "Frosted glass panel floating in dark blue void, soft
caustic refractions, clean edges, premium tech, 8k"
- Signature: Glassmorphism with visible frosted edges.
### Preset C — "Red Thread" (Brand-Forward Boldface)
- Identity: The brand speaks. #b91c1c is the hero. Zero subtlety.
- Surface: Wrapper #b91c1c (brand red), Card #FFFFFF, Headline
#111111, Accent #b91c1c, Border rgba(185,28,28,0.15)
- Typography: Headlines "Space Grotesk" 800 tight. Table headers
uppercase small-caps. Label white on red.
- Texture: Diagonal stripe pattern at 2% opacity on red wrapper.
White card rounded-2xl with shadow-2xl.
- Image Seed: "Bold red gradient, white geometric card floating
centre-stage, dramatic shadow, Swiss design, 8k"
- Signature: Red band IS the brand statement. White card pops.
### Preset D — "Void Console" (Terminal Chic)
- Identity: Bloomberg terminal meets design system docs.
- Surface: Wrapper #000000, Card #0A0A0A, Accent #00FF41 (terminal
green), Grid rgba(0,255,65,0.15), Muted #666666
- Typography: ALL monospace. "Space Mono" bold headlines. "Fira Code"
tables. Cursor-blink on active pill.
- Texture: Scanline overlay. CRT phosphor glow on headline
(text-shadow with green diffusion).
- Image Seed: "Retro CRT in dark room, green phosphor text, scan
lines, hacker aesthetic, atmospheric, 8k"
- Signature: Terminal cursor blinks next to active label. Typewriter
headline reveal on transition.
---
## Fixed Design System (NEVER CHANGE)
### The Room-Change Effect (CRITICAL)
- Wrapper MUST have visibly different background from page.
- Negative margin bleed: extends edge-to-edge within article width.
- White-on-white is the failure state — never allow it.
- Minimum py-12 md:py-16 vertical breathing room.
- Entry/exit borders or gradient-fade at deck boundaries.
### Slide Card Architecture
- Minimum height: min-h-[420px] md:min-h-[480px].
- Border radius: rounded-2xl minimum.
- Two-column: content left (65-70%), vision panel right.
### Vision Panel
- With image: full-height object-cover, dark gradient overlay from
bottom, vision text as frosted caption. Store image prompt as
data-image-prompt attribute.
- Without image: accent color at 5-10% opacity with geometric SVG
pattern. Vision text centres. Never bare container.
### Navigation Pills
- Active: solid accent fill, scale(1.05), elevated shadow.
- Inactive: ghost border, muted text, hover lift.
- All pills: rounded-full, min px-5 py-2, font-medium.
- Progress indicator: thin accent line below pills showing position.
### Slide Transition
- Default: opacity + translateY(8px), 300ms ease-out.
- Subtle: IntersectionObserver fade-up on first scroll-in.
- Cinematic: GSAP stagger on words, table rows cascade, vision
fades from right.
### Depth Link
- CTA-styled pill button or prominent link with arrow.
- Accent colour. Hover slides arrow right 4px.
### Hidden Meta Layer
Each Slide supports data attributes for future agent workflows:
- data-image-prompt: AI prompt for background image generation.
- data-slide-prompt: The Zeigarnik hook question.
- data-depth-href: The depth link URL.
- data-5p-position: Principles/Performance/Platform/Process/Players.
### Token Architecture
Map preset hex to semantic tokens:
- --pd-surface, --pd-card, --pd-ink, --pd-ink-muted
- --pd-accent, --pd-edge, --pd-vision-fill, --pd-glow
### Accessibility (NEVER SKIP)
- 4.5:1 contrast on all text.
- 44x44px touch targets.
- aria-roledescription="carousel", keyboard arrow navigation.
- prefers-reduced-motion: zero motion.
- aria-live="polite" on slide change.
---
## Component Architecture
### A. Deck Wrapper — "The Stage"
Full-bleed background, negative margins, py-12 md:py-16.
### B. Navigation — "The Programme"
5 pills centred. Active/inactive states. Progress line below.
### C. Slide Card — "The Scene"
Header (badge + label + tags) → Body (headline + table + depth link
left, vision panel right) → Footer (depth CTA).
### D. Table — "The Argument"
Premium: distinct header bg, alternating rows, horizontal rules only,
generous padding, first column bold.
### E. Pagination — "The Counter"
Icon button arrows. Mono counter. Keyboard hint on desktop.
---
## Build Sequence
1. Map preset → --pd-* tokens.
2. Build Wrapper with room-change effect.
3. Build Nav pills with progress indicator.
4. Build Slide Card shell.
5. Style Table (override Docusaurus defaults).
6. Build Vision Panel (image/gradient/link-grid).
7. Build Pagination.
8. Wire transitions.
9. Add data-* meta attributes.
10. Verify: squint at full page — deck section must be immediately
identifiable as a different zone.
## Rendering Verification
- [ ] Wrapper bg differs from --ifm-background-color
- [ ] Card has visible elevation against wrapper
- [ ] Vision panel never empty/flat
- [ ] Active pill distinguishable at a glance
- [ ] Table overrides Docusaurus defaults
- [ ] Depth link looks like CTA
- [ ] 4.5:1 contrast everywhere
- [ ] 375px, 768px, 1200px+ all render
- [ ] prefers-reduced-motion: zero motion
## Slide Image Prompt Pattern
{image-prompt-seed}, {5P-position} concept visualised as
{picture-prop-value}, compositional focus on {headline-keyword},
aspect ratio 16:9, negative: text, words, letters, UI, faces
"Do not build a card component; build a stage. The PromptDeck is the
keynote moment inside a documentation page. When the reader scrolls
to it, they should feel like they've entered the pitch room. When they
scroll past, they're back in the docs. That contrast IS the design.
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 |
| Aesthetic Presets | Variables bundled into cohesive visual systems (palette + type + mood) | Row headers — each preset is a complete row |
| Fixed Architecture | Room-change, vision panel, pills — structure never changes | Column headers — rules that apply across all rows |
| Dual-Use Props | picture prop = vision description AND image generation prompt | Each cell produces two outputs from one input |
Presets are rows. Components are columns. Every cell (Preset B x Navigation Pills) produces a specific, cohesive output. Change a preset, every component adapts. Change a component rule, every preset adapts. That's a matrix.
| Preset x Component | Wrapper | Pills | Card | Vision Panel | Table |
|---|---|---|---|---|---|
| A Dark Stage | Near-black band | Red accent fill | Charcoal surface | Spotlight gradient | Ghost-edge rows |
| B Glass Podium | Deep gradient | Mint accent fill | Frosted glass | Caustic refractions | Blur-backed rows |
| C Red Thread | Brand red band | White on red fill | White + shadow-2xl | Crimson gradient | Clean alternation |
| D Void Console | Pure black | Green cursor blink | Terminal surface | Scanline overlay | Grid-line rows |
The Meta-Prompt
Extract the engine. Empty the cells. Now it works for any component that needs to dominate its container.
The brackets are the empty cells. Fill [Component] with "pricing table" and the engine builds premium pricing. Fill it with "testimonial carousel" and it builds social proof. Fill it with "onboarding wizard" and it builds first-run experience. Same grid, different matter.
| Domain | [Component] | [Room-Change] | [Vision Panel] | [High-end Metaphor] |
|---|---|---|---|---|
| Pitch Deck | PromptDeck slides | Dark/coloured band | AI-generated imagery | Keynote stage |
| Pricing | Tier cards | Gradient backdrop | Feature comparison | Showroom floor |
| Testimonials | Quote carousel | Contrasting surface | Customer photo | Speaker's podium |
| Onboarding | Step wizard | Progress-coloured band | Preview screenshot | Red carpet walkway |
? | ? | ? | ? | ? |
The last row is the point. An empty cell is a prompt.
Context
- Web Design Prompt — The benchmark: presets x components = specific outputs
- Visual Art Prompts — Composition and style for image generation
- Prompt Deck PRD — The product this prompt serves
- Prompt Deck Picture — Usage guide and 15 implementations
- Matrix Thinking — Empty cells manufacture space for insight
- Behavioural Biases — The engine loaded into each card
- Prompts — First principles across all modalities
Questions
If the prompt deck sells conviction but looks like regular content, did the conviction transfer — or did the medium undermine the message?
- Which aesthetic preset would make a skeptic stop scrolling — and does the answer reveal more about the content or the container?
- When the
pictureprop works as both a vision description and an image generation prompt, which version creates more conviction — the words or the generated image? - What's the gap between "this component works" and "this component feels like an instrument"?
- If every presentation component on the web used the room-change effect, would it still work — or does it only work because most components are flat?