skills.rest
ragnar-pwninskjold
ragnar-pwninskjoldCOMMUNITY
Explore all skills by this author →
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
One-click install
npx skills add https://github.com/ragnar-pwninskjold/tech-snacks --skill ui-cloner-ragnar-pwninskjold
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
akornmeierakornmeier

ui-cloner

Audit a target URL and generate a one-shot UI replication prompt.

Community
Advanced
elihuvillarauselihuvillaraus
2

ui-designer

Create design systems, component libraries, and interface specifications for developer handoff.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
SignmanalSignmanal
1

popular-web-designs

Generate HTML and CSS replicating design systems from 54 popular websites.

Community
Intermediate