# Site Cloner > Captura DOM + CSS + assets de uma URL com Playwright e gera um projeto Astro 4 que reproduz a pagina, mais design tokens para Tailwind, e valida por diff de screenshots + testes funcionais. Use ao pedir clonar um site, replicar um layout ou extrair o design system de uma URL. - Skill: `devopsadmins/site-cloner` (Agent Skill, multi-file: 36 files) - Install (CLI): `npx skillmds@latest add devopsadmins/site-cloner` - Raw SKILL.md: https://api.skillmd.com/api/skills/devopsadmins/site-cloner/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: devopsadmins (https://skillmd.com/u/devopsadmins) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/devopsadmins/site-cloner --- # Skill: site-cloner ## Visão geral Pipeline em CLI que recebe uma URL de referência e: 1. **Analisa** a página com Playwright — extrai design tokens (cores, tipografia, spacing, radius, sombras, transições, z-index), um inventário hierárquico de componentes, as interações presentes (carousel, modal, countdown, accordion, tabs, dropdown, form, smooth-scroll), screenshots baseline em 3 viewports e um **snapshot autossuficiente**: DOM renderizado + todo o CSS (inclusive folhas de CDN, re-buscadas server-side) + imagens/fontes baixadas para `public/assets/`, com URLs reescritas. 2. **Gera** um projeto **Astro 4**. Com snapshot, `index.astro` reproduz o `` real da referência com o CSS capturado (`set:html`); sem snapshot, cai num scaffold semeado pelos tokens. Sempre emite `tailwind.config.ts` (`theme.extend` com os tokens), roda `npm install` + `astro build`. 3. **Valida** o projeto gerado — screenshots nos 3 viewports vs. referência (pixelmatch + SSIM 50/50), recortes hero/header/cta quando ambos os lados expõem o landmark, e uma suíte funcional Playwright — com **loop de correção** (até 5 iterações). 4. Emite `validation-report.html` + JSONs com os scores. ## Expectativas realistas (leia antes de usar) - **Com snapshot** (caso normal) a reprodução é fiel: mesmo DOM, mesmo CSS, mesmos assets. É um **clone visual estático — sem JavaScript**: carrosséis, modais, contadores e menus não *funcionam*, só aparecem no estado capturado. - **Similaridade visual típica: ~80–90%** para um template real denso. O que segura abaixo de 100%: SSIM de janela única (aproximação), diferenças de timing/animação entre as duas renderizações, e sub-pixel de scrollbar/altura. O gate `≥90%` é meta, não garantia — o relatório lista os gaps. - Recortes **hero/cta** ficam `n/a` quando o template não expõe um landmark semântico correspondente nos dois lados; isso **não** reprova o gate (só conta o que foi medido de fato). - Sem snapshot (falha de captura), o fallback é o scaffold por tokens — aí a similaridade cai bastante e o projeto é só um ponto de partida. - Entregáveis sempre confiáveis: **tokens prontos para Tailwind**, **mapa de componentes/interações**, **screenshots baseline**, **assets locais** e o **harness de validação** reaproveitável. ## Quando usar - "Clone este site: https://exemplo.com" / "replique o layout de " - "Extraia o design system / os tokens de " - "Quero um projeto Astro partindo do visual de " - Qualquer pedido de bootstrap de projeto a partir de uma referência visual. ## Parâmetros fixos | Parâmetro | Valor | Motivo | |-----------|-------|--------| | Framework | Astro 4 | SSG, ilhas de interatividade | | Styling | Tailwind CSS | tokens diretos em `theme.extend` | | Score visual | pixelmatch + SSIM, média 50/50 | pixel + perceptual | | Viewports | 375 / 768 / 1440 px | mobile / tablet / desktop | | Máx. iterações | 5 | tempo × convergência | | Deploy | fora de escopo | só gera código | ## Interface CLI ```bash site-cloner clone # analyze → generate → validate → iterate → report site-cloner analyze # só a extração (tokens, componentes, screenshots) site-cloner validate # revalida um projeto já gerado ``` Opções de `clone` (ver `--help` para a lista completa): ``` -o, --output saída (default ./cloned-site) -c, --content-mapping mapa seletor→texto: '{"h1":"Meu Título"}' -t, --threshold threshold visual overall (default 0.90) -i, --max-iterations default 5 -v, --viewports default mobile,tablet,desktop --headless default true -r, --report default /validation-report.html --cache-dir default /.cache/site-cloner -f, --force-fresh ignora o cache de análise --verbose ``` Variáveis de ambiente: - `SITE_CLONER_NO_INSTALL=1` — não roda `npm install`/`build` no projeto gerado (offline, ou quando quem chama vai montar o projeto). - `SITE_CLONER_LIVE=1` — habilita o teste de extração ao vivo em `npm test`. ## Fluxo de execução ``` analyze-reference.ts Playwright → design-tokens, component-map, interactions, screenshots/, snapshot/ (cache 24h por hash(url+viewports)) utils/snapshot.ts coleta DOM + CSS (folhas de CDN re-buscadas server-side) + baixa assets → public/assets, reescreve URLs generate-project.ts snapshot → index.astro fiel (set:html) | fallback scaffold; tailwind.config.ts; npm install + astro build validate-visual.ts sobe `astro preview` (mata o processo no fim); screenshots nos 3 viewports; pixelmatch+SSIM full-page + recortes validate-functional.ts suíte Playwright (nav, forms, modais, carrosséis, responsivo, console, a11y básica) iterate-fix.ts prioriza os maiores gaps; ajusta tokens/estilos; re-valida; para em 5 iterações ou na convergência ``` ## Saídas em `/` ``` src/ public/ projeto Astro 4 (+ node_modules/ e dist/ após o build) src/snapshot/ body.html + captured.css (a página reproduzida) public/assets/ imagens/fontes baixadas da referência tailwind.config.ts design tokens extraídos validation-report.html relatório visual + funcional visual-validation-report.json scores por viewport/recorte functional-validation-report.json resultado dos testes funcionais visual-diffs/ PNGs de diferença (pixelmatch) README.md guia de personalização ``` ## Critérios de validação | Categoria | Métrica | Threshold | |-----------|---------|-----------| | Visual overall (desktop full-page) | pixelmatch + SSIM | ≥ 0.90 | | Visual hero / header | SSIM do recorte | ≥ 0.95 quando medido (senão `n/a`) | | Visual CTAs | SSIM do recorte | ≥ 0.93 quando medido (senão `n/a`) | | Visual mobile / tablet | SSIM full-page | ≥ 0.88 | | Funcional (todos os testes) | pass/fail Playwright | 100% | | Console | erros JS críticos | 0 | Um recorte sem landmark correspondente nos dois lados entra como `n/a` e **não** reprova o gate — só conta o que foi de fato comparado. Detalhe e metodologia em [references/validation-criteria.md](references/validation-criteria.md). Guia de extração por tipo de site em [references/extraction-guide.md](references/extraction-guide.md). Mapeamento CSS→Tailwind em [references/tailwind-mapping.md](references/tailwind-mapping.md). ## Limitações conhecidas | Limitação | Mitigação | |-----------|-----------| | Clone estático — sem JS | carrosséis/modais/contadores só no estado capturado; re-anime à mão | | SPAs / JS pesado | captura o DOM já hidratado (`networkidle` + `fonts.ready` + scroll-nudge) | | `@import` aninhado em CSS | não seguido — só folhas de 1º nível e `