---
name: site-replicator
description: "Replica o design de qualquer site com fidelidade profissional. Analisa URL (fontes, cores, layout, fotos, animacoes), mapeia para componentes 21st Dev MCP + React + Tailwind, gera plano de acao e codigo responsivo (mobile/tablet/desktop). Use quando o usuario pedir: replicar site, clonar design, copiar layout, reproduzir pagina, site igual a esse, fazer parecido com, inspirado nesse site, design como esse, landing page como essa, replicar esse estilo, ou analisar design de URL."
---

# Site Replicator — Design Cloning Engine

Replica qualquer site com fidelidade profissional usando analise de design + 21st Dev MCP + React/Tailwind.

## Workflow (5 Fases Obrigatorias)

### FASE 1: ANALISE DE DESIGN
Use `WebFetch` na URL alvo com prompt de extracao de design. Documente:

**Checklist de Extracao** (ler `references/design-analysis-checklist.md`):
- Fontes (familia, pesos, tamanhos por elemento)
- Paleta de cores (background, texto, accent, CTA, borders)
- Estilo de fotos (recorte, border-radius, sombra, filtros)
- Botoes (formato, cor, sombra, hover)
- Cards (radius, shadow, padding)
- Layout (max-width, grid, alinhamento)
- Animacoes (scroll, hover, counters, carousels)
- Espacamento (section padding, gaps)
- Vibe geral (dark/light, premium/casual, urgente/sereno)

Se WebFetch nao capturar CSS: inferir pelo padrao visual + pedir screenshot ao usuario.

### FASE 2: MAPEAMENTO DE COMPONENTES
Cruzar cada elemento visual com o catalogo 21st Dev (ler `references/21st-dev-components.md`).

Para cada secao do site, definir:
```
Secao: [nome]
Componente 21st Dev: [nome do componente]
Search query: [query para buscar no MCP]
Animacao: [tipo de animacao]
Responsividade: [comportamento mobile/tablet/desktop]
```

Usar `mcp__21st-magic__21st_magic_component_inspiration` para buscar componentes.
Usar `mcp__21st-magic__21st_magic_component_builder` para gerar componentes customizados.
Usar `mcp__21st-magic__21st_magic_component_refiner` para refinar componentes existentes.

### FASE 3: PLANO DE ACAO
Gerar plano sequencial com prioridades:

1. **Setup** — projeto React + Tailwind + dependencias (motion, @number-flow/react, lenis)
2. **Design tokens** — CSS variables com cores, fontes, espacamentos extraidos
3. **Layout shell** — header, sections wrapper, footer
4. **Secoes de cima pra baixo** — hero > beneficios > comparativos > testimonials > pricing > FAQ > footer
5. **Animacoes** — scroll triggers, counters, carousels
6. **Responsividade** — mobile-first, depois tablet, depois desktop
7. **Polish** — sombras, micro-interacoes, hover states

### FASE 4: GERACAO DE CODIGO
Stack padrao:
- React 19 + Vite 6
- Tailwind CSS 4
- Framer Motion (`motion/react`)
- @number-flow/react (contadores)
- Lenis (smooth scroll, opcional)

Regras de codigo:
- Mobile-first: escrever mobile PRIMEIRO, depois `md:` e `lg:`
- Breakpoints: `sm:640px` / `md:768px` / `lg:1024px` / `xl:1280px`
- Componentes isolados: 1 componente por secao
- Props tipadas: cada secao recebe dados via props
- Imagens: usar NanoBanana MCP (`mcp__nanobanana__generate_image`) para gerar fotos IA
- Design tokens no `tailwind.config` ou CSS variables no `:root`

### FASE 5: VALIDACAO RESPONSIVA
Checar cada breakpoint (ler `references/responsive-breakpoints.md`):

| Device | Width | O que checar |
|--------|-------|-------------|
| iPhone SE | 375px | Texto nao quebra, botoes tocaveis (44px min), imagens escalam |
| iPhone 14 | 390px | Layout single-column, font-size legivel |
| iPad Mini | 768px | Grid 2 colunas, spacing adequado |
| iPad Pro | 1024px | Transicao pra layout desktop |
| Desktop | 1280px | Max-width respeitado, breathing room |
| Wide | 1440px+ | Conteudo centralizado, nao estica |

## Regras Visuais Obrigatorias (Contexto Tata)
- SEMPRE light mode (fundo branco/claro) — Tata nao enxerga bem em dark mode
- Font padrao: Inter (a menos que o site alvo use outra)
- Usar design system da Tata quando aplicavel (ver CLAUDE.md)
- Cores vibrantes em elementos de destaque
- Texto escuro sobre fundo claro

## Ferramentas MCP Disponiveis
| Ferramenta | Uso |
|-----------|-----|
| `mcp__21st-magic__21st_magic_component_inspiration` | Buscar componentes por query |
| `mcp__21st-magic__21st_magic_component_builder` | Gerar componente customizado |
| `mcp__21st-magic__21st_magic_component_refiner` | Refinar componente existente |
| `mcp__21st-magic__logo_search` | Buscar logos |
| `mcp__nanobanana__generate_image` | Gerar fotos com IA (Gemini) |
| `mcp__stitch-http__generate_screen_from_text` | Gerar tela completa por descricao |
| WebFetch | Analisar URL alvo |

## Output Esperado
Ao finalizar, entregar:
1. **Design System doc** — cores, fontes, espacamentos extraidos
2. **Component tree** — lista de componentes com hierarquia
3. **Codigo funcional** — React + Tailwind, responsivo, com animacoes
4. **Checklist de validacao** — responsividade confirmada por breakpoint
