Verified:GitHub

ui-cloner

Generates a replication-ready Site DNA report and pitch deck from a URL.

125|32|Updated Feb 12, 2026

Search Tags:#quality-check #design-tokens #brand-interview #site-replication #ui-clone #prompt-embedding #design-forensics

Ready to run

npx skills add https://github.com/ragnar-pwninskjold/tech-snacks --skill ui-cloner-ragnar-pwninskjold

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-cloner
Source: https://github.com/ragnar-pwninskjold/tech-snacks/tree/main/plugins/tech-snacks/skills/ui-cloner
Command: npx skills add https://github.com/ragnar-pwninskjold/tech-snacks --skill ui-cloner-ragnar-pwninskjold

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

ui-cloner helps teams reproduce a target site's UI and visual language for their own product, accelerating exploration, brand alignment, and feasibility checks without manual recreation.

Core Features & Use Cases

4-phase SRIP pipeline: forensic audit, brand interview, synthesis, and quality check to produce a faithful replication prompt.
Artifact-first workflow: templates, references, and examples accompany every phase to ensure fidelity.
Phase-driven outputs: generates Site DNA, brand prompts, and a final replication prompt ready for developer handoff.

Quick Start

Provide a target URL, run Phase 1 forensic audit, complete Phase 2 brand interview, synthesize Phase 3 replication prompt, and finish Phase 4 quality checks to generate the final prompt.

Frequently Asked Questions about ui-cloner

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

FAQPage Schema

How do I clone a website UI for my own design system?▼

Cloning a website UI involves running a forensic audit to extract design tokens and component behaviors, then synthesizing them into a replication prompt aligned with your brand constraints.

What is a Site DNA document for UI replication?▼

A Site DNA document details a target website's design tokens, typography, motion patterns, and component behavior, serving as the foundational artifact for generating a pixel-perfect UI replication plan.

How do I extract design tokens from an existing website?▼

You extract design tokens from an existing website by initiating the forensic audit phase, which analyzes the target URL to produce a Site DNA document detailing its visual language.

Can I align a cloned UI with my existing brand constraints?▼

Yes, you align a cloned UI with your brand constraints by completing the brand interview phase, which ensures extracted artifacts and the final replication prompt match your specific design system rules.

How do I generate a developer handoff prompt for site replication?▼

You generate a developer handoff prompt for site replication by completing the SRIP pipeline, which synthesizes the audited Site DNA and brand interview responses into a final, ready-to-use prompt.

Does UI cloning work without manual recreation of components?▼

Yes, this UI cloning approach replaces manual recreation by using an artifact-first workflow that extracts templates and references to produce a replication plan embedded directly into a final prompt.