Port, don't redrawPortar, não redesenhar
Nearly every modern site ships compiled CSS: a Tailwind build, CSS modules, Astro, Vue or Svelte scoped styles. Rebuilding that from computed styles always drifts; porting it verbatim is pixel-perfect by construction.Quase todo site moderno entrega CSS compilado: um build de Tailwind, CSS modules, estilos com escopo de Astro, Vue ou Svelte. Reconstruir isso a partir de estilos computados sempre deriva; portar tal como está é pixel-perfect por construção.
Rebuild styles from screenshots and getComputedStyle specsRefazer estilos a partir de screenshots e specs de getComputedStyleClose enough by eye, then a 16px shift cascades down a whole page.Parece certo no olho, até um deslocamento de 16px descer pela página inteira.
Port the compiled CSS, de-scopedPortar o CSS compilado, sem escopocss-collector.mjs gathers every sheet; css-descope.mjs strips Astro, Vue and Svelte scoping with a collision guard.css-collector.mjs junta todas as folhas; css-descope.mjs tira o escopo de Astro, Vue e Svelte com proteção contra colisão.
Recreate WebGL, Rive and scroll animations from specsRecriar WebGL, Rive e animações de scroll a partir de specsThe part that makes a site feel alive is the part a rebuild loses first.O que faz um site parecer vivo é justamente o que a reconstrução perde primeiro.
Replay the real bundle against the ported DOMReexecutar o bundle real sobre o DOM portadoclose-js-graph.mjs follows every import until the module graph closes, so GSAP, Three.js and Lenis run 1:1.close-js-graph.mjs segue cada import até fechar o grafo de módulos, e GSAP, Three.js e Lenis rodam 1:1.
Stacks with a proven recipe: Astro, Next.js, Webflow, Framer, SvelteKit, Nuxt, Google devsite, WordPress and Divi, client-rendered SPAs, and canvas or WebGL pages. Output: Next.js 16, React 19, TypeScript strict, Tailwind CSS v4, shadcn/ui.Stacks com receita comprovada: Astro, Next.js, Webflow, Framer, SvelteKit, Nuxt, Google devsite, WordPress e Divi, SPAs renderizadas no cliente e páginas em canvas ou WebGL. Saída: Next.js 16, React 19, TypeScript strict, Tailwind CSS v4, shadcn/ui.
Nine stations. One of them decides.Nove estações. Uma delas decide.
You type /website-cloner <url> and the agent runs the phases in order. Everything deterministic is a committed script that costs zero tokens.Você digita /website-cloner <url> e o agente roda as fases em ordem. Tudo que é determinístico é um script versionado que custa zero tokens.
- 0
BootstrapBootstrapScaffold the clone workspace from the template.Monta o workspace do clone a partir do template.
bootstrap-clone.sh
- 1
ReconnaissanceReconhecimentoDrive a real Chrome: enumerate every route, detect the stack, sweep scroll, click, hover and breakpoints, and save a baseline screenshot of every route on desktop and mobile.Dirige um Chrome real: lista todas as rotas, detecta a stack, varre scroll, clique, hover e breakpoints, e salva um screenshot de referência de cada rota no desktop e no mobile.
enumerate-routes.mjscapture-routes.shchrome-devtools MCP
- 2
FoundationFundaçãoFonts, colors, globals and every asset, down to each srcset variant a viewport will ask for.Fontes, cores, globais e todos os assets, até cada variante de srcset que um viewport vai pedir.
css-collector.mjscss-descope.mjsextract-asset-urls.mjsdownload-assets.mjs
- 3
Port or specifyPortar ou especificarMarkup-port slices each route's real body and script order. Component-rebuild writes one spec per section with exact computed values instead.O markup-port fatia o body real e a ordem dos scripts de cada rota. O component-rebuild escreve uma spec por seção, com valores computados exatos.
slice-routes.mjsclose-js-graph.mjs
- 4
Build and assembleConstruir e montarBuilder agents work in parallel git worktrees, one per section or template. The orchestrator merges them and wires the page.Agentes builders trabalham em git worktrees paralelas, uma por seção ou template. O orquestrador faz o merge e monta a página.
builder agentsgit worktrees
- 5
Pixel-diff gateGate de pixel-diffEvery route, desktop and mobile, against a measured noise floor. Any real difference or any 4xx/5xx exits non-zero, and the clone is not done.Todas as rotas, desktop e mobile, contra um piso de ruído medido. Qualquer diferença real ou qualquer 4xx/5xx sai com código não zero, e o clone não está pronto.
qa-diff.mjs
- nothing below runs until the gate passes, and every step below re-runs itnada abaixo roda antes do gate passar, e cada etapa abaixo roda o gate de novo
- 6
Structure passEstruturaçãoTokenize the stylesheet with a built-in equivalence proof, then distill the design system the site actually uses into DESIGN.md.Tokeniza a folha de estilo com prova de equivalência embutida e destila o design system que o site realmente usa num DESIGN.md.
tokenize-css.mjsextract-design-system.mjs
- 7
ComponentizeComponentizarOne React component per section, shared sections deduped across routes, rendered DOM byte-identical to the replica.Um componente React por seção, seções compartilhadas deduplicadas entre rotas, DOM renderizado idêntico byte a byte à réplica.
componentize-routes.mjsextract-section.mjs
- 8
Production outputSaída de produçãoSemantic tokens with a Tailwind @theme, sections transpiled to real JSX, one navbar with activePath. Then both gates again.Tokens semânticos com @theme do Tailwind, seções transpiladas para JSX de verdade, uma navbar com activePath. Depois, os dois gates de novo.
tokenize-css.mjs --semantic-namesverify-content-fidelity.mjs
A second gate for the wordsUm segundo gate para as palavras
Pixels can hide a dropped word under animation noise. After componentizing, verify-content-fidelity.mjs strips every rendered route to its visible text and asserts it is byte-identical to the original HTML. Proven 19/19 and 7/7 on two clones, plus a negative control that corrupts one word and must fail.Os pixels podem esconder uma palavra perdida sob o ruído da animação. Depois de componentizar, verify-content-fidelity.mjs reduz cada rota renderizada ao texto visível e exige que seja idêntico byte a byte ao HTML original. Comprovado 19/19 e 7/7 em dois clones, mais um controle negativo que corrompe uma palavra e precisa falhar. SKILL.md:858
A replica, editable code, or bothRéplica, código editável, ou os dois
A complex site can't be literally 100% faithful and freely editable in one artifact. The skill picks the path from what you asked for and states the ceiling up front.Um site complexo não consegue ser literalmente 100% fiel e livremente editável num único artefato. A skill escolhe o caminho a partir do que você pediu e diz o teto logo de início.
A running, pixel-perfect replicaUma réplica rodando, pixel-perfect
Serves each route's real body HTML and replays the real scripts in order. Cheap, fast and 1:1. The output is frozen: each route is an HTML blob, and editing means editing markup.Serve o HTML real do body de cada rota e reexecuta os scripts reais na ordem. Barato, rápido e 1:1. O resultado é congelado: cada rota é um blob de HTML, e editar significa mexer no markup.
For hosting, studying or demoing a site.Para hospedar, estudar ou demonstrar um site.
Editable React componentsComponentes React editáveis
Builder agents write real components from extracted specs, and the gate drives them toward the original. Expect "faithful with named residuals", slower and pricier. Class-soup sites, like Webflow auto-classes, rebuild poorly.Agentes builders escrevem componentes reais a partir das specs extraídas, e o gate os aproxima do original. Espere "fiel com resíduos nomeados", mais lento e mais caro. Sites com sopa de classes, como as auto-classes do Webflow, reconstroem mal.
For a codebase you will maintain.Para um código que você vai manter.
replica + extract-section
Both, on demandOs dois, sob demanda
Clone with markup-port, then pull any section you want to reuse into a named component with extract-section.mjs: verbatim HTML with zero fidelity risk, or transpiled JSX for clean markup. After the gate, Phase 7 componentizes the whole clone anyway.Clone com markup-port e depois extraia qualquer seção que quiser reusar para um componente nomeado com extract-section.mjs: HTML literal com risco zero de fidelidade, ou JSX transpilado para markup limpo. Depois do gate, a Fase 7 componentiza o clone inteiro de qualquer jeito.
The proven answer when both matter.A resposta comprovada quando os dois importam.
Why Opus orchestratesPor que o Opus orquestra
Same site, isolated A/B. Sonnet held fidelity, 0/42 flagged, and still cost more: it works in smaller steps, 842 messages against 186, so a lower price per token became a higher price per clone. Subagents run on the cheapest model that holds fidelity; the orchestrator stays on Opus.Mesmo site, A/B isolado. O Sonnet manteve a fidelidade, 0/42 sinalizados, e mesmo assim custou mais: trabalha em passos menores, 842 mensagens contra 186, e o preço menor por token virou um preço maior por clone. Os subagentes rodam no modelo mais barato que mantém a fidelidade; o orquestrador fica no Opus. SKILL.md:72
+ opus$24.30
− sonnet$45.59