Why does the process involve five separate passes?

The multi-pass approach prevents 'detail overload' by focusing on hierarchy: Pass 1 fixes foundations (colors/fonts), while subsequent passes focus on layout, components, motion, and finally, copy and polish.

Does this skill automatically update my code?

It identifies specific gaps and generates highly precise, technical corrective prompts (including exact CSS values) that are designed to be used by the AI to perform the actual code updates.

What is the 'Site DNA' document required by this skill?

The Site DNA is a prerequisite markdown file (plans/01-site-dna.md) that defines the design tokens, layout rules, and component logic used as the 'ground truth' for the iteration process.

Can I skip passes if the UI already looks good?

It is recommended to run all 5 passes. Later passes often surface subtle polish issues, such as easing curves or spacing rhythm, that are frequently missed during initial development but essential for high-quality results.

UI Cloner Iterator

Name: UI Cloner Iterator
Author: akornmeier

byakornmeier

0•

Design Tools

Refines UI implementations through five structured comparison passes against design specifications to achieve high-fidelity results.

The UI Cloner Iterator is a specialized workflow for Claude Code designed to bridge the gap between initial low-fidelity UI implementations and their intended designs. By systematically comparing the current implementation against a 'Site DNA' reference document, it executes five distinct audit loops—covering foundations, layout, components, motion, and voice—to generate precise, actionable corrective prompts. This ensures that every detail, from hex codes and border-radii to animation curves and copywriting tone, aligns perfectly with the target specification.

Key Features

01Automated visual gap analysis using browser-integrated checks

02Comprehensive Master Correction Summary for final implementation dial-in

03Five-pass structured refinement loop from foundations to final polish

04Generates precise, copy-pasteable corrective prompts with exact design tokens

050 GitHub stars

06Prioritized issue ranking across Critical, Major, and Minor categories

Use Cases

01Systematically debugging layout and spacing inconsistencies in a frontend implementation

02Polishing a generated UI component to match exact design system tokens

03Auditing and correcting motion values and animation timing against brand standards

Key Features

01Automated visual gap analysis using browser-integrated checks

02Comprehensive Master Correction Summary for final implementation dial-in

03Five-pass structured refinement loop from foundations to final polish

04Generates precise, copy-pasteable corrective prompts with exact design tokens

050 GitHub stars

06Prioritized issue ranking across Critical, Major, and Minor categories

Use Cases

01Systematically debugging layout and spacing inconsistencies in a frontend implementation

02Polishing a generated UI component to match exact design system tokens

03Auditing and correcting motion values and animation timing against brand standards