sitesmith

Copy-worthy UI from any live site. A plugin that works in Claude Code, Oh My Pi (omp), and opencode from one repo.

What it does — four skills

1. recreate-site — Point it at any live URL and it captures a complete fidelity dossier: rendered DOM, design tokens (colors, typography, radii, shadows), animation inventory, interaction state machines, modals/overlays, form states, and assets. It emits a self-contained recreation prompt usable by any AI, and can optionally scaffold, build, and demo the replica locally, iterating screenshot diffs against the live site until SSIM ≥ 0.97 (max 3 rounds, then it surfaces the diffs).
2. detach-component — Point it at one component on a live page (a widget, section, carousel, nav — anything you can name or select). It captures the component's DOM, computed styles, animations, interaction states, and modals, then rebuilds it as a standalone, dependency-light HTML/CSS/JS artifact (index.html, component.css, component.js, SPEC.md), verified by screenshot diff.
3. adapt-component — Take a detached component and integrate it into an existing site or repo: namespace-isolated CSS, design tokens remapped onto the target's theme, markup placed to match the target's stack (React/Next/Tailwind or plain HTML), verified by before/after screenshot diff to prove no style bleed.
4. capture-animations — Reproduce a site's motion 1:1: full @keyframes bodies, transitions, Web Animations API, scroll-driven reveals, and JS-driven motion (Next.js/Framer Motion, GSAP, Lenis) captured with exact timing/easing/triggers, reimplemented as original CSS keyframes or WAAPI springs, verified by screenshot diff. Invoked directly, or referenced by recreate-site/detach-component for deep motion work.

Install

Claude Code

Add the marketplace and install, from inside Claude Code:

/plugin marketplace add iannellomarco/sitesmith
/plugin install sitesmith@sitesmith

Or from the shell:

claude plugin marketplace add iannellomarco/sitesmith
claude plugin install sitesmith@sitesmith

omp + opencode (one command)

curl -fsSL https://raw.githubusercontent.com/iannellomarco/sitesmith/main/install.sh | sh

This clones the repo into ~/.sitesmith and symlinks the skills into ~/.claude/skills/ (read by both omp and opencode), the /sitesmith slash command into ~/.config/opencode/commands/, and the capture script into ~/.local/bin/. Re-running updates the clone and re-links (idempotent); deleting the symlinks uninstalls.

Prefer a manual clone? git clone https://github.com/iannellomarco/sitesmith.git && ./sitesmith/install.sh.

First run (one time)

The capture engine needs a browser once:

npx playwright install chromium

Usage

Claude Code

/sitesmith:recreate-site https://example.com
/sitesmith:detach-component the pricing section on https://example.com
/sitesmith:adapt-component put the detached card into my repo at ./mysite

opencode

/sitesmith recreate https://example.com
/sitesmith detach the hero from https://example.com
/sitesmith adapt the detached component into ./mysite

omp

Invoke the skills by bare name:

recreate-site https://example.com
detach-component the carousel on https://example.com
adapt-component integrate the detached component into ./mysite

Requirements

• Node.js ≥ 18 (for the capture script and npx).

• Network access to the sites you capture.

• Playwright is fetched on demand via npx. If the capture script prints NEED_PLAYWRIGHT or errors about a missing browser executable, run:

  npx playwright install chromium

• Captures and outputs are written under ./.sitesmith/<slug>/ in your current working directory.

Legal note

Intended use: development, learning, and interoperability — for your own projects and internal tooling.

Default behavior: rebuilt code is an original implementation matching observed behavior. The skills replace marketing/testimonial copy with placeholder equivalents and mark third-party media (photos, videos, logos) REPLACE rather than redistributing it.

Per-run asset consent: once per run, before embedding any real third-party media or verbatim copy, the agent asks you to confirm you own the content or have rights to use it. On your explicit yes, it embeds the real assets/copy and marks the build INTERNAL USE ONLY — not for redistribution. On no (or no answer), it keeps placeholders. The no-republish default always stands without an explicit yes.

You are responsible for having the right to capture and adapt what you point this at, and for any content you choose to embed under the consent gate.