# [Arquivado] `site-forge` > **Esta doc foi substituída.** > A ficha do `@site-forge` agora vive em [`../4-agentes/site-forge.md`](../4-agentes/site-forge.md). > Para a receita prática, veja [`../3-receitas/clonar-design-de-site.md`](../3-receitas/clonar-design-de-site.md). > Conteúdo abaixo preservado para referência histórica. --- # `site-forge` Agente de clonagem inteligente do AIOSON — estuda um site real e reconstrói como projeto Next.js, forja uma skill de design, ou ambos. ## O que ele faz - recebe uma URL e guia você até o modo certo com um **questionário de onboarding** - captura screenshots, assets (img, background-image, srcset, lazy-loaded, video) via browser MCP - faz crawl de links internos para capturar assets e padrões de sub-páginas - extrai estrutura, comportamento e interações - forja design skills, mescla tokens, ou aplica skills existentes conforme o modo escolhido - constrói um projeto Next.js com worktrees paralelas ## Pré-requisitos ### 1. Browser MCP O agente precisa de automação de browser para navegar, capturar screenshots, disparar lazy loads e testar interações. Configure um antes de usar: ```bash # Playwright MCP (recomendado) npx @playwright/mcp@latest # Puppeteer MCP (alternativa) npx @modelcontextprotocol/server-puppeteer ``` Adicione o browser MCP escolhido nas configurações de MCP do seu cliente AI. O agente detecta automaticamente qual está disponível. ### 2. Design skill (quando aplicável) Modos que usam uma skill existente precisam de uma skill já instalada. Use uma das skills nativas: ```text .aioson/skills/design/aurora-command-ui/ .aioson/skills/design/cognitive-core-ui/ .aioson/skills/design/glassmorphism-ui/ .aioson/skills/design/bold-editorial-ui/ .aioson/skills/design/neo-brutalist-ui/ .aioson/skills/design/warm-craft-ui/ .aioson/skills/design/clean-saas-ui/ ``` Ou use uma skill gerada pelo `@design-hybrid-forge`: ```text .aioson/installed-skills/{slug}/ ``` ## Modos de operação O agente tem **5 modos**. Se você não especificar o modo, ele roda o **onboarding inteligente** e te guia até o certo. | Modo | Entrada | Output | |------|---------|--------| | **A — Transform** | URL + skill | Site construído com a skill aplicada à estrutura clonada | | **B — Faithful clone** | URL | Réplica fiel + nova skill forjada do site | | **C — Content harvest** | URL + skill | Site construído com conteúdo/imagens do site + layout da skill | | **D — Skill only** | URL | Só a skill forjada — nenhum site é construído | | **E — Blend** | URL + skill + ratio | Site com tokens misturados entre o site e a skill | ## Onboarding inteligente Quando você chamar `/aioson:agent:site-forge` sem especificar o modo, o agente pergunta: ``` O que você quer fazer com este site? A — Extrair conteúdo e imagens → construir um novo site com uma das suas skills B — Clonar fielmente → réplica visual + forjar uma skill com o design do site C — Extrair somente o design (CSS, animações) → criar uma skill reutilizável (sem construir o site) D — Clonar com textos e imagens originais + mesclar com uma das suas skills (50/50) ``` Depois coleta os dados que faltam (URL, skill, ratio) e já avança. ## Como invocar ```text /aioson:agent:site-forge → Modo A (transform) /aioson:agent:site-forge → Onboarding guiado /aioson:agent:site-forge --skill-only → Modo D (só a skill) /aioson:agent:site-forge --blend → Modo E (blend 50/50) /aioson:agent:site-forge --blend=70 → Modo E (70% site / 30% skill) ``` Com flags opcionais: ```text --viewport=desktop # só desktop (padrão: todos os três) --no-download # pular download de assets --no-crawl # pular crawl de links internos --crawl-depth=N # seguir N níveis de links (padrão: 1) --output=./dir # diretório customizado --verbose # log detalhado ``` ## Extração de assets melhorada O agente captura imagens de **todas as fontes**, não só ``: - `` com `srcset` e `data-src` (lazy loading) - `background-image` em **qualquer elemento** via `getComputedStyle` - ` ` - `