웹 앱을 복제하는 클로드 코드 기술 ** 픽셀의 픽셀 ** URL에서.

대부분의 "AI와 함께이 사이트"는 스크린 샷과 추측을보십시오. 그들은 slop로 나왔다 - 일반, 명백하게 AI, 그들은 두 번째를 떠나 당신은 실제 일에 다음을 넣어. 이것은 반대입니다: 그것은 real, 라이브 코드 사이트의, 측정 모든 값, 재구성, 그리고 그 다음 ** 측정된 computed-style assertions**와 일치를 - 복사가 원래의 디자인, 값을 일치 때까지 루프에서 자체 수정.

클랜드 세션에서 실행: 라이브 클로드 오케스트라스켓 작업 서브 시약과 클랜드 크롬 확장을 구동한다. Code stages run in Parallel; 브라우저 작업은 한 번에 볼 수 있습니다.

---

어떻게 작동합니까 — 단계별

URL(e.g. linear.app)을 준다. 다음 :

1. Recon - 실제 일을보고 모든 것을 클릭하십시오. 그것은 라이브 사이트 (크롬 확장, 그래서 그것은 로그인)을 열고 모든보기를 걸어 - andexhaustively clicks through it: every left sidebar item, tab, filter, layout, menu, side panel, and editor, at desktop/tablet/mobile. 각 보기에 대 한 스크린 샷 시각적 참조 이며 실제 computed 스타일을 읽는다.

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.