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.
| One live URL in | What the pipeline does | What comes out |
|---|
| Capture | Records desktop, tablet, mobile, scroll, hover, click, and transition evidence | Reference frames, videos, DOM and section maps |
| Decode | Extracts stylesheets, computed values, assets, fonts, bundles, and motion parameters | transition-spec.json, runtime evidence, measured layout data |
| Recreate | Builds from observed structure and values instead of inventing a look | React/TSX, Tailwind, preserved CSS, local assets |
| Verify | Compares reference and implementation with layout gates, absolute error (AE), structural similarity (SSIM), and motion checks | Reproducible pass/fail evidence and scoped fixes |
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.
| Typical visual generator | ui-clone-skills |
|---|
| Approximates layout from screenshots | Downloads CSS and measures the rendered DOM |
| Guesses easing, duration, and trigger timing | Extracts values from CSS and JavaScript bundles |
| Recreates the visible desktop frame | Captures desktop, tablet, mobile, and scroll positions |
| Treats motion as polish added later | Produces a shared motion specification before implementation |
| Stops when the page builds or looks plausible | Requires rendered, structural, asset, and motion evidence |
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:
| Project | Best fit | Boundary compared with ui-clone-skills |
|---|
| Screenshot to Code | Turn screenshots, mockups, Figma designs, or screen recordings into HTML, React, or Vue | Generates from visual input; ui-clone-skills starts from a live URL and inspects CSS, bundles, runtime state, and interaction evidence |
| AI Website Cloner Template | Build a Next.js clone with computed-style research, interaction sweeps, real assets, and parallel builder agents | The closest overlap in this set; ui-clone-skills adds reusable capture, diagnosis, and audit workflows, bundle-derived motion specs, resumable gates, and deterministic visual and motion checks |
| Open Lovable | Use a chat application and Firecrawl to recreate a website as a React app | Focuses on the app-generation experience; ui-clone-skills focuses on forensic artifacts and measured parity across an agent pipeline |
| GoClone | Download HTML, CSS, JavaScript, images, and links as a browsable static mirror | Preserves site files for offline browsing; ui-clone-skills produces a React + Tailwind implementation and tests responsive and interactive behavior |
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.
Reference transition evidence can use video or distinct captured image states with matching provenance. Image pairs do not replace the separate full-scroll recording requirement. The gate reference defines the accepted artifacts.
Skills
| You need to | Use | Owned result |
|---|
| Recreate a live site or resume a run | ui-reverse-engineering | An evidence-routed website-to-React pipeline through capture, extraction, generation, and verification |
| Capture reference behavior | ui-capture | Screenshots and scroll, hover, click, transition, and optional implementation evidence |
| Diagnose why a clone differs | visual-debug | AE/SSIM, computed-style, structure, and motion findings with concrete fixes |
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
| Your source | Best fit |
|---|
| A live URL with real CSS, assets, responsive behavior, and motion | ui-clone-skills |
| A Figma file | Builder.io, Anima, Plasmic, or another Figma implementation tool |
| A screenshot only | A screenshot-to-code tool such as screenshot-to-code or v0 |
| A text description only | A design generator such as v0, Lovable, or Bolt |
| A live URL that only needs a static mirror | wget --mirror or HTTrack |
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.
Restart Claude Code after installation or an update, then start a normal claude session. Adding --plugin-dir would load a second development copy. The installer checks delivered cache contents against the shipped source and reports stale same-version files instead of claiming the update succeeded.
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.
| Dependency | Purpose |
|---|
agent-browser | Browser capture, extraction, and interaction comparison |
| ImageMagick | AE pixel comparison |
dssim | Structural visual similarity |
ffmpeg | Video capture and frame extraction |
uv + Python 3.11+ | Pipeline state, gates, hooks, and metrics |
How the pipeline works
- Capture the reference at desktop, tablet, mobile, and relevant interaction states.
- Extract the page into DOM, CSS, asset, font, section, bundle, and runtime evidence.
- Decode motion into a source-backed transition specification with triggers and measured parameters.
- Generate the implementation from captured structure and values, preserving source CSS when freehand reconstruction would lose fidelity.
- Verify the rendered result with structural, visual, responsive, and motion gates.
- 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.
When Phase 1 produces provisional reference evidence, it can defer the reference gate only if Phase 2 runs later in the same invocation. Phase 2 must repair the evidence and pass the gate. Resuming Phase 2 rechecks current reference evidence when a five-screenshot baseline exists or reference completion was previously recorded. A prior completion with fewer than five baseline screenshots fails the resume. See the CLI contract for resume behavior and browser session settings for manual retries.
The off-pipeline Stop guard combines external browsing with HTML, CSS, or component write attempts in the same session when no owned pipeline reference exists. Browsing alone or writing Markdown does not activate this guard. Research followed by an HTML report can also match; this heuristic does not prove clone intent. For non-clone work, follow the human-operated exception procedure, rather than starting an unrelated clone pipeline.
Documentation
The three routing skills stay compact and load 64 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.
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.
