MASTER PROMPT TEMPLATE — "1:1 Website Clone Prompt"

# MASTER PROMPT TEMPLATE — "1:1 Website Clone Prompt"

> **What this is.** A fill-in skeleton for writing a *website clone prompt* — the kind an AI coding agent reads to reproduce a landing page pixel-for-pixel (motionsites.ai style). Fill every slot with **literal values, not vague descriptions**. The golden rule across all 11 reference prompts: *transcribe, never paraphrase.* Every color is an exact hex/rgba, every class is a verbatim Tailwind string, every asset is either a precise generation brief or a full literal URL when the original/stable fallback exists, every animation is exact numbers, every word of copy is quoted character-for-character.
>
> **How to use.** Walk the blocks top-to-bottom. Skip a block only when the target page genuinely lacks it (e.g. a single-hero page has no multi-section list; an animation-light page has no shared animation components). Keep `<<ANGLE-BRACKET PLACEHOLDERS>>` as your fill targets. Annotations are in `> blockquotes` and `<!-- comments -->` — delete them in the final prompt, but keep the usage-scope line.
>
> **Authorization boundary.** Exact clone prompts are for user-owned pages, authorized work, internal research, or local visual regression. If the source is a third-party page and the user intends public release, the final prompt must replace third-party brand names, copy, trademarks, proprietary media, and proprietary fonts with user-owned or licensed equivalents while preserving layout and motion.
>
> **Precision legend** (used in every slot below):
> - **VERBATIM** = copy exactly, character-for-character (copy, URLs, class strings, CSS, path data).
> - **EXACT-VALUE** = a literal number/token, never a vague word (`#e8702a` not "orange"; `0.42s` not "a short delay"; `text-8xl` not "large").
> - **ENUMERATED** = a fixed ordered list; order is load-bearing.
> - **NAMED-CONTRACT** = define once by name + full behavior, then reference by name everywhere else.

---

## BLOCK 0 — OPENING BRIEF (the one-sentence lock)

**Slot name:** `opening_brief`
**What to write:** A single dense imperative sentence (optionally a labeled title line above it) that front-loads, *in this order*:
1. **Build verb + deliverable + scope** — `Create`/`Build`/`Recreate` + page type + viewport footprint (`landing page` / `full-screen hero section` / `single-page site with exactly N full-screen sections`).
2. **Product identity** — brand name **in quotes** + one-line vertical/positioning appositive.
3. **Section map** — the section count and names (for multi-section pages) OR the signature mechanic (for single-hero pages).
4. **Exact tech stack inline** — framework + bundler + language + CSS + animation lib + icon lib, `+`-joined or comma-joined.
5. **Dominant aesthetic** — the mood + the 1–2 non-negotiable global invariants (bg color, text color, key font, the core compositional device like "full-viewport video backgrounds").
6. *(Optional but powerful)* a **determinism oath**: `Match every detail below exactly.`

**Precision:** EXACT-VALUE for stack tokens and brand name; the aesthetic clause may be prose but must name concrete invariants.

**Fill-in pattern / examples (from the corpus):**