I built this to clone a web app from one URL. Most AI clones look at a screenshot and guess, and they fall apart the moment you set them next to the real site. This skill reads the live site's actual code instead, pulls out every exact value, and rebuilds it.
It runs inside a Claude session. Claude sends out helper agents to do the building, drives the Chrome extension to look at the site, and checks in with you after each stage. It doesn't stop at "looks good." It keeps grading the copy by the numbers and fixing it until the measurements match.
What it does
- Opens the live site and clicks through every view: sidebar items, tabs, filters, menus, side panels and editors, at desktop, tablet and mobile sizes.
- Pulls exact colors, gradients, fonts, spacing, shadows, corners, borders and hover states from the page's real styles.
- Downloads the real fonts, images and icons instead of using placeholders.
- Writes a DESIGN.md rulebook of the brand's colors, type scale and spacing, then builds the app from it.
- Checks the clone value by value against that rulebook and loops on fixes until nothing fails and the build compiles.
How it works
- Recon: it walks every view of the live site and records screenshots and computed styles.
- Extraction and design system: agents measure every value and turn them into one set of design tokens.
- Architecture and build: an agent plans the component tree, a foundation agent builds the shared pieces, then page agents build each page in parallel.
- QA and fix: a script compares the clone's real styles to the tokens, and fix agents clear each measured failure. This repeats until it passes or gets stuck.
- Polish: a last pass tightens gradient stops, shadow blur, cursors and focus rings.
What you need
- Claude Code
- The Claude Chrome extension (you stay logged in to sites through it)
- Node, to run scripts/assert-styles.mjs
- python3, to run scripts/partition_bugs.py
Install it
git clone https://github.com/per-simmons/clone-app-pat-pro-public.git clone-app-pat-pro
mkdir -p .claude/skills/clone-app-pat-pro
cp -r clone-app-pat-pro/{SKILL.md,references,scripts} .claude/skills/clone-app-pat-pro/Run these from the project you want the clone built in.
The full instructions, and the skill itself, are on GitHub.
Try asking
- “Clone linear.app, pixel for pixel.”
- “Replicate this app: [URL].”
- “Recreate this UI and check the clone against the real site's styles.”
Good to know
- The browser work goes one view at a time, since it drives a single Chrome window.
- It stops when it hits a wall it can't get past, such as a login page.
- Screenshots are only a visual reference. The pass/fail check is based on measured styles, not pixel comparisons of images.
Written by
Pat Simmons. Pat tests AI models and tools on the AI for Mortals YouTube channel.
