How to write a prompt
that doesn’t ship slop.
Every style in DesignVault ships two prompts built from the same skeleton: an Exact Replica for pixel-perfect reproduction, and a Parameterized Template for adapting the style to new content. The anti-slop constraints in block 6 are never parameterized — they are the style.
Two prompt modes, one skeleton
Both prompts share the same 7-block architecture. The difference is precision: exact values versus principled guidance.
Exact Replica
REPRODUCE- 1
VIBE STATEMENT
1-2 sentences. What the page feels like, what to ban.
- 2
STACK & SETUP
Framework, fonts, CSS variables.
- 3
ASSET URLS
Exact, no substitutions. Images, videos, fonts — all remote.
- 4
LAYOUT & COPY
Section by section, pixel-precise. Exact strings.
- 5
ANIMATION SPEC
Exact math. Easing, timing, stagger, scroll triggers.
- 6
VISUAL RULES
Bans & constraints. "No purple, no cards, no glow".
- 7
RESPONSIVE BEHAVIOR
Breakpoints, mobile adaptations.
Parameterized Template
ADAPT- 1
VIBE STATEMENT
"A [MOOD] landing page for [BRAND_NAME]…" with guidance on choosing the mood.
- 2
STACK & SETUP
Framework fixed. Fonts parameterized: "Replace [DISPLAY_FONT] with a grotesk like Space Grotesk or Chakra Petch".
- 3
ASSET SLOTS
Not URLs: "Use a [TEXTURE_TYPE] image of [SUBJECT] processed with [PROCESSING_TECHNIQUE]".
- 4
LAYOUT GRAMMAR
Structure, not copy: "Left-aligned headline, right-anchored image. Never centered hero."
- 5
MOTION PRINCIPLES
Not exact values: "Orchestrated entrance, staggered reveals. No bounce easing. 800-1400ms."
- 6
ANTI-SLOP CONSTRAINTS
Preserved verbatim. These NEVER change — they ARE the style.
- 7
RESPONSIVE
Preserved verbatim. Breakpoint strategy is style-locked.
What’s fixed, what’s swappable
When you customize a prompt, only the middle rows change. The bans and the responsive strategy are style-locked.
| ELEMENT | EXACT REPLICA | PARAMETERIZED |
|---|---|---|
| Framework / stack | Fixed | Fixed |
| Font names | Exact (Orbitron, Ogg) | Placeholder + guidance |
| Font register | — | Fixed (e.g., "grotesk display") |
| Color hex values | Exact (#0A0A0A) | Placeholder + guidance |
| Color architecture | — | Fixed (e.g., "near-black ground, one warm accent") |
| Image URLs | Exact remote URLs | Slot descriptions + processing instructions |
| Copy / headlines | Exact strings | Placeholder ([BRAND_NAME], [TAGLINE]) |
| Layout structure | Exact pixel values | Grammar rules (e.g., "asymmetric, left-aligned") |
| Animation easing | Exact curves | Principles (e.g., "power2.out, no bounce") |
| Animation timing | Exact ms values | Ranges (e.g., "800-1400ms") |
| Anti-slop bans | Fixed | Fixed (NEVER parameterized) |
| Responsive strategy | Fixed | Fixed |
Universal anti-slop rules
These apply across all styles. Violating any of them produces generic AI output regardless of style intent — which is why they are frozen in block 6 of every prompt.
BANNED FONTS
- Inter (as default display) — the LLM’s statistical safe choice
- Roboto — Google default
- Arial — system fallback
- Fraunces — LLM’s favorite serif
- Instrument Serif (as primary display) — LLM’s second-favorite serif
BANNED VISUAL PATTERNS
- AI-purple / blue gradient glows — the #1 AI tell
- Centered hero over dark mesh gradient — the default composition
- Three equal feature cards — the lazy layout
- Generic glassmorphism on everything — backdrop-blur slop
- Neon / outer glow shadows — dated and cheap
- Pure black (#000000) — kills depth
- Pure white (#FFFFFF) as text — too harsh
- Gradient text on large headers — the AI emphasis default
- Custom mouse cursors — accessibility / performance hostile
- Warm beige + brass + espresso as default premium palette
BANNED LAYOUT PATTERNS
- Eyebrow above every section — templated rhythm
- Zigzag image+text alternation — banal pattern
- Logo wall inside the hero — trust logos belong below
- Two CTAs with same intent — duplicate action confusion
- Button text wrapping to 2+ lines — broken CTA
- h-screen for hero — iOS Safari viewport bug (use min-h-[100dvh])
BANNED MOTION PATTERNS
- window.addEventListener('scroll') — performance killer (use IntersectionObserver or CSS scroll-driven)
- Linear or ease-in-out transitions — generic
- Animating top / left / width / height — layout-triggering, causes jank
- Infinite animations on every element — motion noise
- Two or more marquees per page — lazy filler
- Bounce easing — feels cheap and unprofessional
MANDATORY PRACTICES
- One accent color, locked across the entire page
- Asymmetric layout (never default centered)
- Generous whitespace (py-32+ section padding)
- Custom or intentional font choice (name it specifically)
- Motion with purpose (each animation communicates something)
- prefers-reduced-motion fallback for all motion above level 3
- Real or generated images (never placeholder divs or gradient blobs)
- Near-black (#0A0A0A-#111111) instead of pure #000
- Near-white (#E8E8E8-#F5F5F5) instead of pure #FFF for text on dark
- Hero fits the initial viewport, headline max 2 lines
Ready to ship something that doesn’t look like AI?
Every style entry carries its full prompt pair plus a checklist of the exact rules that keep it out of slop territory.