gaznil/web-skills

Clone de Design de Site com Firecrawl

Use isto quando o usuário quiser transformar uma URL em um arquivo de sistema de design prático que os agentes possam usar imediatamente.

Resultado padrão: extrair o sistema de design de qualquer site em uma linha e formatá-lo como DESIGN.md.

A habilidade deve parecer um fluxo de trabalho enxuto em torno da raspagem do Firecrawl: coletar o conteúdo visível da página, estrutura, metadados, links e sinais visuais disponíveis, e então sintetizar essas descobertas em um arquivo markdown de sistema de design limpo.

Entrevista de Integração

Inferir a URL de origem, a stack alvo e se a implementação é solicitada a partir do contexto. Se o usuário fornecer uma URL e pedir um sistema de design, prossiga imediatamente.

Faça no máximo 1-3 perguntas concisas apenas se estiver bloqueado, como a URL do site, se deve gerar apenas o DESIGN.md ou também implementar, ou uma stack alvo necessária.

Use o prompt normal ou interface modal do agente host. Não nomeie uma função de pergunta específica do harness.

Plano de Coleta com Firecrawl

Use o Firecrawl através do CLI ou superfície de ferramenta equivalente. Sempre comece com duas raspagens paralelas da URL fornecida:

1. Os formatos branding e images juntos para tokens de design estruturados e o conjunto completo de imagens da página.
2. Uma captura de tela de página inteira para contexto visual.

Exemplo:

firecrawl scrape "https://exemplo.com" --format branding,images -o ".firecrawl/exemplo-branding.json" --pretty &
firecrawl scrape "https://exemplo.com" --full-page-screenshot -o ".firecrawl/exemplo-screenshot.png" &
wait

Combinar branding e images em uma única chamada ainda custa um único crédito e é obrigatório: o bloco branding apenas exibe ativos de marca selecionados (logo, favicon, ogImage, logoHref), portanto, sem images o agente perderá as imagens reais de conteúdo da página (heróis, fotos de produtos, slides de carrossel, visuais de recursos, ilustrações, fotos acessórias, arte no final da página e similares). Em uma página de produto como tesla.com/cybertruck o bloco branding não tem herói — apenas images retorna o herói principal do Cybertruck (por exemplo, Cybertruck-Hero-Desktop-NA-SA-APAC.png) e o restante das fotografias da página.

Se a raspagem da captura de tela retornar uma URL de imagem remota (por exemplo, link de armazenamento assinado) em vez de um arquivo local, faça o download para o mesmo caminho .firecrawl/ para que o DESIGN.md possa referenciar um ativo local estável.

Use a saída estruturada branding como a fonte primária para cores, tipografia, componentes, ativos de marca (logotipo, favicon, ogImage), personalidade e notas de confiança. Use a lista images como a fonte da verdade para as imagens de conteúdo da página — fotografia de herói, fotos de produtos, carrosséis, visuais de recursos, ilustrações e gráficos decorativos. Use a captura de tela como a referência visual primária para layout, hierarquia e sensação geral. Adicione formatos suplementares apenas quando estes forem insuficientes para o artefato final.

Colete:

• dados de branding para cores, tipografia, espaçamento, botões, logotipos, imagens de marca, personalidade e confiança
• a lista completa images para herói, produto, recurso e imagens de seção além dos ativos de marca selecionados
• uma captura de tela de página inteira salva localmente em .firecrawl/ para que possa ser incorporada no DESIGN.md
• markdown da página para cabeçalhos, hierarquia de cópia, CTAs, navegação e ordem de seção quando necessário
• metadados e links para pistas de marca, produto e propósito da página quando necessário
• HTML apenas quando a saída de branding, lista de imagens e captura de tela forem insuficientes para inferir classes, nomes de fontes, variáveis CSS ou estrutura de componentes
• páginas relacionadas apenas quando o usuário solicitar um sistema de site mais amplo

Não faça over-crawl por padrão. A primeira versão deve ser útil a partir de uma única página representativa.

O Que Extrair

Inferir e documentar a linguagem de design do site:

• cores: primárias, secundárias, acentos, fundos, bordas, texto, estados
• tipografia: famílias de fontes se detectáveis, escala de tipos, pesos, alturas de linha, tratamento de cabeçalho/corpo
• espaçamento: larguras de contêiner, ritmo de seção, gaps de grade, escala de padding, densidade
• layout: estrutura da página, padrões de herói, cartões, grades, navegação, rodapé, suposições responsivas
• componentes: botões, campos de entrada, cartões, badges, itens de navegação, blocos de preço, depoimentos, linhas de recursos, formulários
• imagens e ícones: estilo, linguagem de forma, tratamento de ilustração/foto, restrições de logotipo; puxe imagens representativas de herói, produto, recurso e seção da lista completa images em vez de depender de branding.images, que carrega apenas logo, favicon, ogImage e logoHref
• movimento e interação: estados de hover, transições, estilo de animação quando observável ou inferível
• voz e padrões de conteúdo: redação de CTA, estilo de cabeçalho, ritmo de cópia do produto

Quando um valor não puder ser medido exatamente a partir da saída da raspagem, rotule-o como inferido e forneça uma aproximação prática.

Trabalho Paralelo

Se apropriado, use subagentes ou executores de tarefas paralelas equivalentes. Divisões naturais incluem uma página por pesquisador para sites de várias páginas, ou um revisor para cada cor, tipografia, espaçamento e componentes.

Cada pesquisador paralelo deve retornar URLs de origem, evidências extraídas, tokens de design inferidos e notas de confiança.

Entrega Final

Criar ou retornar um DESIGN.md com esta estrutura. Incorpore a captura de tela de página inteira perto do topo para que um agente de codificação obtenha contexto visual junto com os tokens.

# DESIGN.md: [Site de Origem]

## Origem
- URL: [URL de origem]
- Data da captura: [data]
- Evidências: [raspagem/captura de tela/html/links usados]

## Captura de Tela de Referência
![Captura de tela de página inteira de [Site de Origem]](./.firecrawl/[origem]-screenshot.png)

Use esta captura de tela como a fonte da verdade visual para layout, hierarquia, densidade e sensação. Os tokens abaixo descrevem a mesma página em formato legível por máquina.

## Sumário de Design
[Descrição curta da linguagem visual e o que um agente deve recriar]

## Tokens de Design

### Cores
[Funções de cor nomeadas com valores hexadecimais quando conhecidos; marque valores inferidos claramente]

### Tipografia
[Fontes, recomendações de fallback, escala, pesos, regras de cabeçalho/corpo]

### Espaçamento e Layout
[Escala de espaçamento, contêineres, grades, raio, sombras, bordas]

## Componentes
[Botões, cartões, navegação, formulários, herói, seções de recursos, preços, rodapé, etc.]

## Padrões de Página
[Ordem das seções, layouts comuns, comportamento responsivo]

## Estilo de Conteúdo
[Voz, estilo de CTA, padrões de cabeçalho, densidade de cópia]

## Instruções de Build para o Agente
[Instruções concretas que um agente de IA de codificação pode seguir para criar um novo site neste estilo]

## Entradas para Reexecução
workflow: firecrawl-website-design-clone
source_url: [url]
target_stack: [stack]
output: DESIGN.md

Se o usuário pedir para implementar, primeiro produza ou atualize o DESIGN.md, depois use-o como a fonte da verdade para a construção.

Padrão de Qualidade

• Não implique que o usuário tem direitos sobre logotipos, imagens, marcas registradas ou cópia de terceiros.
• Prefira tokens de design reutilizáveis a observações pontuais.
• Distinga fatos observados de aproximações inferidas.
• Mantenha a saída compacta o suficiente para que outro agente possa colá-la no contexto e construir a partir dela.
• Preserve URLs de origem e artefatos de raspagem para revisão.