ui-cloner-iterator

UI Cloner — Iterator: Refinement Loop

Overview

Takes a poorly-executed first attempt and systematically closes the gap to the reference. Runs 5 passes, each comparing the current implementation against the Site DNA document to identify the most impactful remaining delta and produce a corrective prompt.

Announce: "Running the UI Cloner Iterator — 5 refinement passes against the Site DNA."

Prerequisite: plans/01-site-dna.md must exist in the current project directory. Read it before starting Pass 1.

Input Required

Before starting, confirm you have:

The Site DNA — read from plans/01-site-dna.md
The current implementation — a screenshot, URL, or code the user provides showing what was built

If either is missing, ask for it before proceeding.

The 5-Pass Refinement Loop

Run all 5 passes sequentially. Each pass follows the same structure:

Pass Structure

Compare — Scan the current implementation against the Site DNA. Identify what's still wrong or missing. Use Claude with chrome for visual checking MANDATORY.
Prioritize — Rank the 3 most impactful gaps by visual/functional severity:

[CRITICAL] — breaks the identity (wrong colors, wrong fonts, missing core layout)
[MAJOR] — significantly degrades quality (wrong spacing, missing animations, off-brand components)
[MINOR] — polish items (timing values, easing curves, copy voice)

Generate — Write a precise corrective prompt targeting ONLY the top 3 gaps from this pass. The prompt must:

Reference exact values from the Site DNA (hex codes, timing, easing, component names)
Describe the current wrong state and the correct target state
Use pseudocode-level specificity (not "fix the button color" but "change button bg from #333 to #150b07 , border-radius from 4px to 48px, font to Inter 400")

Advance — After generating the corrective prompt, note what was addressed and what remains for the next pass.

Pass 1 — Foundation Audit

Focus: Color palette, typography, and overall background atmosphere.

These are the highest-leverage corrections — if the background, fonts, and primary colors are wrong, every subsequent detail is built on sand.

Check against Site DNA sections: 1.2 (Design Tokens), 1.3 (Atmosphere & Texture).

Pass 2 — Layout & Spacing Audit

Focus: Section structure, grid philosophy, whitespace rhythm, and card geometry.

Check against Site DNA sections: 1.1 (Macro Layout), 1.2 (Border Radius, Spacing System).

Pass 3 — Component Fidelity Audit

Focus: Individual component accuracy — nav, feature cards, stats, carousels, FAQ, footer.

Check against Site DNA sections: 1.6 (Component Behavior), 1.5 (Micro-Interactions).

Pass 4 — Motion & Animation Audit

Focus: Entrance animations, scroll triggers, hover states, and timing values.

Check against Site DNA sections: 1.4 (Scroll & Entrance Animations), 1.5 (Micro-Interactions), 1.8 (Motion Philosophy).

Pass 5 — Voice & Polish Audit

Focus: Copy structure, italic accent pattern, rhetorical devices, and any remaining visual polish.

Check against Site DNA sections: 1.9 (Copywriting Voice), 1.2 (typography italic/color pattern).

Output Format Per Pass

Pass [N] — [Focus Area]

Gaps Identified

[CRITICAL] [description of gap vs. Site DNA reference]
[MAJOR] [description of gap]
[MINOR] [description of gap]

Corrective Prompt

[The precise, paste-ready corrective prompt for this pass]

Final Synthesis (After Pass 5)

After completing all 5 passes, output a Master Correction Summary:

A ranked list of all gaps addressed across all 5 passes
A single consolidated "Final Dial-In Prompt" that combines the most critical unfixed items into one comprehensive corrective instruction

Save output: Write the full iterator output (all 5 passes + master summary) to plans/05-iterator.md in the current project directory.

Rules

Never skip a pass. Even if the implementation looks good, run all 5 — later passes surface polish issues that kill quality.
Each corrective prompt must be self-contained. A developer should be able to paste it directly without reading prior passes.
Cite the Site DNA. Every correction must reference exact values from the DNA document, not generic advice.
Do not re-audit already-corrected gaps. Each pass moves forward. If Pass 1 fixed the background color, Pass 2 does not mention it again.