UI Clone Skills

ui-clone-skills turns a live website into an evidence-backed React + Tailwind implementation. It captures the rendered page, downloads the real CSS and assets, reads responsive and computed styles, recovers animation parameters from JavaScript bundles, and verifies the result across viewports and interaction states.

This is motion forensics for the animated web. It is built for pages where a screenshot-to-code model misses what matters: GSAP timelines, Framer Motion springs, Webflow IX2 interactions, Lenis smooth scrolling, Lottie playback, hover states, scroll reveals, sticky sections, and responsive transitions.

Try it

Install the plugin, then give your coding agent a live URL, a target, and an output directory:

Clone the hero and pricing sections from https://example.com into React + Tailwind.
Preserve the responsive layout, scroll reveals, and hover motion. Output to ./out/.

Start with ui-reverse-engineering. It detects an existing run, resumes from the last proven pipeline state, and routes capture, extraction, generation, verification, or mismatch diagnosis without throwing away usable evidence.

Why it is different

Screenshot-to-code tools infer an implementation from pixels in one or more frames. ui-clone-skills can inspect the live source of truth behind those pixels, then test whether the recreated page behaves the same way.

The goal is not a plausible imitation. The goal is a clone whose visible assets, DOM structure, responsive behavior, and motion can be compared against the reference.

How it compares with open-source alternatives

Open-source website recreation tools start from different evidence and stop at different outputs. Choose by the result you need:

Choose ui-clone-skills when animation parameters hidden in JavaScript bundles matter, when you need to audit an existing implementation, or when completion must be demonstrated by reproducible gates instead of a build and visual spot check.

What it recovers

• Real visual values: typography, spacing, colors, borders, transforms, breakpoints, CSS custom properties, and original class names
• Responsive structure: viewport-dependent layout, fluid vw/rem behavior, sticky positioning, grid placement, and mobile reflow
• Motion parameters: GSAP and ScrollTrigger timelines, Framer Motion springs, anime.js timing, Webflow IX2 interactions, Lenis and Locomotive scroll settings, CSS keyframes, and Web Animations API state
• Interactive states: scroll reveals and scrubs, hover and click transitions, preloaders, page transitions, sliders, tabs, menus, and timed sequences
• Media and scenes: images, fonts, video, Lottie, Rive, Spline, canvas, and WebGL references with playback or interaction evidence where available
• Obfuscated output: computed-style extraction when Tailwind, CSS Modules, CSS-in-JS, or minified bundles hide authored values

The extraction engine writes shared artifacts, especially transition-spec.json, so implementation and verification use the same observed contract instead of independently guessing.

Verification that can fail

A successful build, HTTP 200, matching page title, or convincing screenshot is not completion. The pipeline checks the rendered result with the evidence appropriate to the page:

• Layout health and DOM/section structure
• Text, font, visible asset, and responsive parity
• Absolute error (AE), SSIM, and section-level visual comparison
• Scroll-end, reveal-trigger, hover, click, and transition-state comparison
• 60 fps frame-by-frame motion comparison for comprehensive verification
• Static coverage of extracted motion entries against implementation hooks

Fast iteration can use quick or standard verification tiers. The default comprehensive tier keeps the full browser and motion sweep.

Routine comparison uses deterministic scripts instead of asking a model to judge every screenshot. Vision is reserved for the final semantic review and scoped diagnosis when metrics alone cannot explain a mismatch.

Skills

Use ui-reverse-engineering as the default entry point. Call ui-capture directly when you only need fresh reference evidence. Call visual-debug when reference and implementation artifacts already exist and the task is to explain a mismatch.

Claude Code and Codex expose the same three public skills. The host adapters share the same scripts, gates, artifacts, and hook behavior.

When to use it

Do not use it to invent a new design, bypass access controls, or publish a third party's protected design without permission. It works best when the page is reachable in a real browser and the goal is learning, prototyping, internal tooling, or rebuilding a site you are authorized to reproduce.

Install

Run the installer once. It registers the plugin for every supported host CLI found on your PATH:

tmp=$(mktemp) && curl -LsSf -o "$tmp" https://raw.githubusercontent.com/voidmatcha/ui-clone-skills/main/install.sh && bash "$tmp" && rm -f "$tmp"

Use --claude-only or --codex-only to target one host. Claude Code receives the plugin and lifecycle hooks. Codex receives the three public skills and enables project-local hooks when ui-reverse-engineering first runs in a workspace.

See the installation guide for checkout installs, manual dependency setup, host-specific flags, and the skill-only path.

Requirements

Tested on: macOS 14+ (primary) and Ubuntu 22.04+ natively or through WSL2. Windows native is not supported.

How the pipeline works

1. Capture the reference at desktop, tablet, mobile, and relevant interaction states.
2. Extract the page into DOM, CSS, asset, font, section, bundle, and runtime evidence.
3. Decode motion into a source-backed transition specification with triggers and measured parameters.
4. Generate the implementation from captured structure and values, preserving source CSS when freehand reconstruction would lose fidelity.
5. Verify the rendered result with structural, visual, responsive, and motion gates.
6. Iterate on measured mismatches and stop only when the requested completion contract is satisfied or a real blocker is reported.

From a checkout, inspect state with python -m ui_clone.pipeline live_url component_name session_name status --json or node bin/ui-clone pipeline live_url component_name session_name status --json. npm publishing is paused, so prefer the in-checkout commands unless ui-clone-cli is npm-linked to this repository.

Documentation

The three routing skills stay compact and load 51 focused sub-docs only when a pipeline step needs them. Start with the task-level pages, then open operational contracts when you need exact commands or gate behavior.

• Installation and host setup
• Full reverse-engineering pipeline
• Reference and transition capture
• Visual and motion debugging
• Pipeline hooks, state, and gates
• Agent-readable CLI contract
• Token and prompt-cache management
• Security model
• Responsible use
• FAQ and framework support

Scope

The generated result is production-oriented React + Tailwind code, not an automatic guarantee that a cloned third-party site is licensed or ready for public deployment. Dynamic or protected assets, authentication, anti-bot systems, randomized scenes, and inaccessible source bundles can limit extraction. The pipeline records these gaps rather than silently treating them as matched.

All three skills include eval fixtures following the Agent Skills format. See CHANGELOG.md for release history.

License

Apache-2.0. See LICENSE.txt.