npx claudepluginhub ragnar-pwninskjold/tech-snacksThis skill uses the workspace's default tool permissions.
With the Site DNA and all 12 user answers in hand, generate the final replication prompt. Apply all rules below without exception.
Replicates website UI/design/visual style from provided URL via 4-phase SRIP pipeline: forensic audit, brand interview, prompt synthesis, quality check. Select standard or high-fidelity mode.
Autonomously builds multi-page websites via baton-passing loop: generates HTML/CSS/Tailwind pages with Claude or Stitch, integrates, verifies visually via browser automation, queues next tasks.
Builds production-grade web UIs like landing pages, apps, dashboards; detects/respects existing design systems; covers composition, typography, color, motion, copy; verifies via screenshots.
Share bugs, ideas, or general feedback.
With the Site DNA and all 12 user answers in hand, generate the final replication prompt. Apply all rules below without exception.
Announce: "Phase 2 complete. Generating your custom replication prompt."
Read AUDIT_MODE from the top of plans/01-site-dna.md before generating. High-Fidelity mode requires applying the EMBED principle (Rule 2). Standard mode uses pseudocode-level descriptions (Rules 4–5).
CRITICAL OPERATING PRINCIPLE — "EMBED, DON'T REWRITE" (High-Fidelity mode only) Your job is to transplant structured artifacts from the Site DNA DIRECTLY into the output prompt — with only brand variables substituted. This preserves fidelity. Every time you abstract or summarize instead of embedding precisely, fidelity is permanently lost.
The output is a complete, self-contained prompt a developer can paste directly into Claude or any code generation tool to build the site.
The final prompt must follow this exact hierarchy:
For every section and component, the output prompt MUST CONTAIN the actual structured artifacts from the Site DNA — not prose summaries of them:
t=Xms notation from Step 1.4 (color/copy references updated to user's tokens)Do NOT convert these into prose descriptions. Embed the actual structured artifact.
In Standard mode, skip this rule and proceed with pseudocode-level descriptions per Rules 4–5.
Flattening is banned. When the Site DNA contains a Composition Map (from Step 1.3b), the output prompt MUST reproduce that composition with the user's content substituted. Specifically:
This rule applies beyond compositions — it applies to EVERY detail in the Site DNA:
If the Site DNA specifies it, the output prompt must contain it. Details do not get summarized, paraphrased, or omitted. They get transplanted exactly or explicitly adapted with the new values stated.
Open with:
Role: Act as a World-Class Senior Creative Technologist and Lead Frontend Engineer.
Then define an Aesthetic Identity — a 5–8 word poetic description of the site's soul (e.g., "Clinical Boutique / High-End Organic Tech"). Derive this from the user's 3 adjectives + the reference site's motion philosophy.
Create a named, structured design system:
Every interactive or animated component MUST receive a poetic conceptual name in parentheses encoding its behavior.
Formula: [Evocative Adjective/Noun] + [Functional Description]
Examples:
The name must make a developer immediately understand the vibe AND the behavior.
In Standard mode, for every animated component write behavior at implementation-level clarity.
Not: "cards animate in"
But: "3 overlapping white cards that cycle vertically using unshift(pop()) logic. Every 3 seconds, they rotate with a spring-bounce transition using cubic-bezier(0.34, 1.56, 0.64, 1)."
Include:
In High-Fidelity mode, Rule 2's embedded artifacts replace this rule — the t=Xms timelines already contain this precision.
Map the reference site's color ROLES to the user's palette:
Never randomly reassign colors. Maintain the STRUCTURAL role each color plays. Update hex values inside embedded artifacts accordingly. Never change WHICH element uses WHICH role.
Apply the reference site's rhetorical structure (from Step 1.9 COPY VOICE PATTERN) to the user's content.
Preserve the voice pattern, replace the substance.
| User Selection | Action |
|---|---|
| 1–2 | In embedded timelines (HF) or descriptions (Standard): replace GSAP calls with CSS transition equivalents. Remove scroll-triggered parallax. Keep entrance animations on load only. |
| 3 | Preserve GSAP for hero section and 1–2 key components. Simplify scroll triggers to basic fade-in-up only. |
| 4–5 | Embed all timelines and state machines verbatim from Site DNA. Add or enhance with any additional interactions the user requested. |
End the component architecture with an explicit technical requirements block:
TECHNICAL REQUIREMENTS
Stack: [exact user-specified stack — framework, language, component library]
Animation: [library + version if known, e.g., GSAP 3.12]
Scroll: [scroll library if needed, e.g., GSAP ScrollTrigger / Lenis]
Animation Lifecycle: [e.g., "Use gsap.context() scoped to component ref inside useEffect; return context.revert() on cleanup"]
Scroll Trigger Setup: [e.g., "Register ScrollTrigger plugin. Use trigger:'[selector]', start:'top 80%', end:'top 20%', scrub:true for parallax"]
Hover Implementation: [e.g., "All buttons: overflow-hidden with ::before pseudo-element, translateX(-100%)→translateX(0) on hover, 300ms ease-out"]
Custom Cursor: [if applicable — cursor behavior and implementation]
Font Loading: [e.g., "Load via Google Fonts: Plus Jakarta Sans 400,700,800 + Cormorant Garamond 300,300italic"]
Image Sources: [real Unsplash URLs matching aesthetic specified by user, or user-provided asset references — no placeholders]
The very last line of the prompt MUST be an italicized or quoted philosophical directive — a single sentence capturing the SOUL of the build.
It should not describe what to build, but HOW to feel while building it.
Examples:
Save output: Write the full generated replication prompt to plans/03-replication-prompt.md in the current project directory.
When complete: Invoke ui-cloner-quality-check to run Phase 4 before delivery.