🧩 O que é / o que faz
Engine de inteligência competitiva research-driven para websites — scraping, análise, relatório e construção em 6 fases encadeadas, todas baseadas em dados reais de mercado.
O website-intelligence é um skill de estratégia web sênior que atua em 6 fases sequenciais: extração de marca do cliente → análise de nicho competitivo → relatório HTML PDF-ready → build brief → construção do site → auditoria de qualidade. Tudo salvo em arquivos entregáveis a cada fase.
mcp__firecrawl__scrape — página únicamcp__firecrawl__map — arquitetura completa do domíniomcp__firecrawl__search — descoberta de concorrentes@media print)#c45d3e🎣 Quando dispara
Os gatilhos exatos que fazem o Claude Code ativar o website-intelligence — palavras-chave, contextos e intenções de pedido.
O Claude Code lê a description do skill e dispara quando detecta qualquer um dos termos listados abaixo no pedido do usuário. Não é necessário dizer o nome do skill.
- ✓"website intelligence"
- ✓"build a site" / "build a website"
- ✓"redesign" / "website for [negócio]"
- ✓"scrape and rebuild"
- ✓"competitive analysis"
- ✓"niche research" / "website audit"
- ✗"crie uma landing page simples"
- ✗"faça um componente React"
- ✗"gere um diagrama do sistema"
- ✗"crie uma animação 3D"
- ✗"faça um email marketing"
- ✗tarefas sem contexto de negócio real
🚀 Como melhora seus resultados
Valor concreto que o website-intelligence entrega em comparação com a abordagem tradicional de construir um site sem pesquisa de mercado.
Sites construídos com pesquisa competitiva real têm posicionamento informado: você sabe o que os concorrentes fazem bem, onde há gaps de SEO, quais padrões os 10% melhores compartilham — e constrói acima desse bar, não ao lado.
- ✓Relatório PDF com scoring dos concorrentes (8 critérios)
- ✓Paleta de cores e tipografia justificadas por dados
- ✓Oportunidades de SEO e keywords de gap identificadas
- ✓Site com scroll-animations Apple/Stripe quality
- ✓Placeholder marcado para asset 3D (
<!-- 3D SCROLL ASSET HERE -->)
- ✗Site bonito mas sem diferenciação de mercado
- ✗Cores e tipografia por gosto, não por posicionamento
- ✗SEO genérico, sem insights de gap competitivo
- ✗Animações decorativas sem hierarquia de conversão
- ✗Nenhum entregável para apresentar ao cliente
O site gerado deve atingir LCP < 2.5s, TBT < 200ms, CLS < 0.1. Sem JavaScript render-blocking. Imagens com lazy loading e dimensões explícitas.
⚙️ Como funciona por dentro
Stack, ferramentas MCP, abordagem por fase e decisões de implementação reais do SKILL.md.
Antes de iniciar qualquer fase, o skill verifica se o Firecrawl MCP está conectado. Se não estiver, fornece instruções de configuração (claude mcp add firecrawl). Sem Firecrawl, as fases 1 e 2 são bloqueadas.
mcp__firecrawl__map — descobre todas as URLs do domínio do cliente
mcp__firecrawl__scrape — raspa as páginas principais (home, sobre, serviços)
Salva research/01-client-brand.md com: cores, tipografia, tom de voz, proposta de valor, estrutura de nav
mcp__firecrawl__search — encontra os top 5 concorrentes do nicho
mcp__firecrawl__scrape — deep scraping de cada concorrente
Scoring em 8 critérios: design, UX, SEO, performance, copy, CTA, social proof, mobile
Salva research/02-competitor-analysis.md
HTML estático sem JavaScript — puro HTML + CSS com @media print
Design: papel warm #f6f4f0, terracotta #c45d3e, grain overlay via SVG filter
Cards com 4px accent border, fases com SVG dashed connectors
Salva competitive-analysis.html na raiz do projeto
Define: Design Direction · Site Architecture · Content Framework · Conversion Playbook
HARD STOP obrigatório — não avança para fase 5 sem aprovação explícita do usuário
Salva research/03-build-brief.md
Scroll-triggered animations em cada transição de seção + parallax depth
Hero com placeholder marcado: <!-- 3D SCROLL ASSET HERE --> com dimensões exatas
Micro-interações premium: botões, cards, nav
Estrutura: site/ com index.html, css/, js/, assets/
SEO audit: meta tags, schema markup, heading hierarchy, sitemaps
Accessibility audit: contraste, alt text, ARIA labels, keyboard nav
Performance audit: LCP, TBT, CLS, render-blocking JS, lazy loading
Salva research/04-quality-audit.md
💬 Exemplo prático + Prompt pronto
Prompt real para colar no Claude Code e acionar o skill imediatamente — junto com o que esperar em cada fase.
Substitua a URL e o nicho. O skill detecta "competitive analysis" e "build a site" e dispara automaticamente. Você receberá entregáveis a cada fase antes de aprovar a próxima.
competitive-analysis.html — abra no browser e imprima como PDF.
site/index.html + auditoria final.
🧬 Combina com / limites
O website-intelligence é o skill que fecha o curso: pesquisa competitiva → constrói o melhor site. Para ir além do site, combine com os skills das trilhas anteriores.
Este é o último módulo do Skill Design porque representa o ciclo completo: você aprendeu a construir interfaces (T1), criar identidade visual (T2), produzir mídia (T3) e usar ferramentas de apoio (T4). O website-intelligence usa tudo isso — e ainda adiciona a camada de inteligência de mercado que diferencia um site bom de um site imbatível.
Após o website-intelligence entregar o site/index.html, acione frontend-design para polir o código React/Tailwind/shadcn, adicionar componentes responsivos avançados e garantir acessibilidade nível AA. O site do website-intelligence define o quê construir — o frontend-design define como construir com excelência de código.
Depois da Fase 6 (Quality Audit), rode impeccable para uma segunda camada de verificação: contraste de cores, hierarquia tipográfica, micro-copy dos CTAs, consistência visual entre seções. O impeccable complementa a auditoria técnica do website-intelligence com uma auditoria de design.
O website-intelligence deixa um placeholder explícito no hero: <!-- 3D SCROLL ASSET HERE --> com dimensões exatas. O 3d-animation-creator foi feito exatamente para isso: gera o asset 3D interativo scroll-triggered que vai naquele slot. Essa integração é a mais direta — o website-intelligence reserva o espaço, o 3d-animation-creator preenche com maestria.
Você completou o Skill Design!
Você percorreu as 4 trilhas — Construir, Identidade, Mídia e Apoio — e chegou ao módulo que fecha o ciclo: inteligência de mercado a serviço do design. Você agora sabe pesquisar, analisar, planejar e construir sites que se diferenciam com dados reais.
✓ O que você aprendeu neste módulo
Agora que você conhece todos os 16 skills do curso, volte ao início e releia os módulos com olhos novos. A segunda leitura sempre revela conexões que você não viu na primeira — especialmente como os skills das 4 trilhas se encaixam num fluxo de trabalho completo de design com Claude Code.