skills.rest
akornmeier
akornmeierCOMMUNITY
Explore all skills by this author →
𝕏@akornmeierGitHub

ui-cloner-iterator

Compare UI implementations against Site DNA to generate corrective prompts.

Updated Feb 3, 2026
Search Tags:#prompt engineering#iterative design#ui cloning#site dna#ui refinement#fidelity improvement
One-click install
npx skills add https://github.com/akornmeier/clawd-config --skill ui-cloner-iterator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-cloner-iterator
Source: https://github.com/akornmeier/clawd-config/tree/main/skills/ui-cloner-iterator
Command: npx skills add https://github.com/akornmeier/clawd-config --skill ui-cloner-iterator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the issue of imperfect UI cloning attempts by providing a structured, iterative process to improve the fidelity of a cloned UI against a reference "Site DNA".

Core Features & Use Cases

  • Systematic Refinement: Runs 5 distinct comparison loops to progressively improve UI accuracy.
  • Targeted Prompt Generation: Creates precise corrective prompts based on identified gaps.
  • Use Case: After an initial attempt to clone a website's UI results in visual discrepancies, use this Skill to systematically identify and fix issues related to color, typography, layout, components, and animations.

Quick Start

Run the UI Cloner Iterator to begin the 5-pass refinement process against the Site DNA.

Frequently Asked Questions about ui-cloner-iterator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I iteratively refine a UI clone to match the original design?▼

To iteratively refine a UI clone, you run structured comparison loops against a Site DNA document to identify visual gaps in color, typography, layout, components, and motion, generating corrective prompts for progressive fidelity improvement.

What is a Site DNA document for UI cloning?▼

A Site DNA document is a reference file capturing the essential design characteristics of a target interface. The cloner iterator compares your current implementation against this document to pinpoint specific visual discrepancies across five design categories.

Do I need a specific file to start the UI cloning refinement process?▼

Yes, you need a prerequisite file named 'plans/01-site-dna.md' and your current implementation details. The Skill requires these inputs to execute its 5-pass refinement process and generate targeted corrective prompts.

How does the UI cloner iterator identify visual discrepancies?▼

The iterator identifies visual discrepancies by executing 5 distinct comparison loops between your current implementation and the Site DNA. It prioritizes gaps across color, typography, layout, components, and motion to systematically improve UI accuracy.

What is the best way to fix layout and typography issues in a cloned UI?▼

The best way to fix layout and typography issues is using a systematic refinement process that generates precise corrective prompts based on identified gaps. This targeted prompt generation progressively improves visual fidelity against a reference document.

Can I use iterative design to improve UI fidelity without a Site DNA file?▼

No, the iterative design process requires a prerequisite 'plans/01-site-dna.md' file to function. Without this reference document, the comparison loops cannot identify the visual gaps needed to generate corrective prompts.

Related Skills

Explore More Design & Creative Skills→
dogeareddogeared

design-shotgun

Generate multiple AI-driven UI design variants and display them side-by-side in a browser for rapid evaluation.

Community
Advanced
soq123soq123

recreate-screenshot

Reproduce a UI screen from a screenshot with pixel-perfect fidelity.

Community
Intermediate
xxihxxih
1

prompt-optimizer

Analyze prompt intent and gaps to generate a refined, copy-paste-ready prompt.

Community
Intermediate
ClyptAIClyptAI

design-shotgun

Generate multiple AI design variants and display them on a side-by-side comparison board.

Official
Advanced