Навык кода Клода, который клонирует любое веб-приложение * * пиксель для пикселя * * из URL.

Большинство попыток «клонировать этот сайт с помощью ИИ» смотрят на скриншот и гадают. Они выходят как сопки — общие, очевидно, ИИ, и они разваливаются, как только вы ставите их рядом с реальной вещью. Это делает обратное: он читает ** реальный, живой код ** сайта, измеряет каждое значение, восстанавливает его, а затем ** доказывает соответствие с измеренными утверждениями в вычислительном стиле ** - фиксируя себя в цикле, пока копия не соответствует дизайну оригинала, значение для стоимости.

Он работает в сеансе Клода: живой Клод организует субагентов Задачи и управляет расширением Клода Chrome. Этапы кода работают параллельно; работа браузера идет по одному виду за раз.

Как это работает - шаг за шагом

У вас есть только один URL (например, T0). Тогда:

1. Recon — посмотрите на реальную вещь и нажмите все. Он открывает живой сайт (расширение Chrome, поэтому он вошел в систему) и просматривает каждый вид - и * * исчерпывающе щелкает по нему * *: каждый элемент левой боковой панели, вкладка, фильтр, макет, меню, боковая панель и редактор на рабочем столе / планшете / мобильном телефоне. Для каждого просмотра он делает скриншот в качестве визуальной ссылки и читает реальные вычисленные стили.

clone-app-pat-pro

A Claude Code skill that clones any web app pixel for pixel from a URL.

Most “clone this site with AI” attempts look at a screenshot and guess. They come out as slop — generic, obviously AI, and they fall apart the second you put them next to the real thing. This does the opposite: it reads the real, live code of the site, measures every value, rebuilds it, and then proves the match with measured computed-style assertions — fixing itself in a loop until the copy matches the original’s design, value for value.

It runs in a Claude session: the live Claude orchestrates Task sub-agents and drives the Claude Chrome extension. Code stages run in parallel; browser work goes one view at a time.

---

How it works — step by step

You give it one thing: a URL (e.g. linear.app). Then:

1. Recon — look at the real thing, and click everything. It opens the live site (the Chrome extension, so it’s logged in) and walks every view — and exhaustively clicks through it: every left sidebar item, tab, filter, layout, menu, side panel, and editor, at desktop/tablet/mobile. For each view it takes a screenshot as a visual reference and reads the real computed styles. This matters because the UI that’s easiest to miss (a toolbar that only appears when you focus the editor, a comment box, an opened menu) doesn’t exist until you interact. Sampling = a skin-deep clone, so it clicks everything.

2. Extraction — measure everything (leave no stone unturned). This is the part that separates a real clone from slop. Instead of eyeballing a screenshot, agents read the site’s actual rendered code and pull out every exact value:

• every color, and every gradient (the thing almost every AI clone misses)
• fonts — including the real font files, downloaded, and exact weights
• spacing, down to the pixel, on every side
• shadows, blurs, rounded corners, borders
• hover, focus, and click states
• the real images and icons — downloaded, not faked with placeholders

3. Design system — turn raw values into a rulebook. One agent reads all those measurements and writes a single DESIGN.md — the source-of-truth tokens (the brand’s real colors, type scale, spacing scale, gradients, shadows). The most-used value for each role becomes the official token.

4. Architecture — plan the build. An agent maps the real page structure into a clean component tree and a build order.

5. Build — recreate it in code. First a “foundation” agent builds the shared pieces (the design tokens, layout, nav, shared components) using the real downloaded fonts and assets. Then page agents build each page in parallel, using only those tokens.

6. QA — grade the copy by the numbers.