
O que você vai construir
- Paleta de cores com valores hex
- Sistema de tipografia (fontes, tamanhos, pesos)
- Especificações de espaçamento e layout
- Logo e imagens de marca
- Informações de tema (modo claro/escuro)

Pré-requisitos
- Node.js 18 ou superior instalado
- Uma chave de API do Firecrawl obtida em firecrawl.dev
- Conhecimentos básicos de TypeScript e Node.js
1
Crie um novo projeto Node.js
Primeiro, crie um novo diretório para o seu projeto e inicialize-o:Atualize seu
package.json para usar módulos ES:package.json
2
Instale as dependências
Instale os pacotes necessários para web scraping e geração de PDFs:Esses pacotes incluem:
@mendable/firecrawl-js: SDK do Firecrawl para extrair a identidade de marca de sitespdfkit: biblioteca para geração de documentos PDFtsx: execução de TypeScript para Node.js
3
Criar o gerador do guia de estilo da marca
Crie o arquivo principal da aplicação em Substitua
index.ts. Esse script extrai a identidade da marca a partir de uma URL e gera um guia de estilo profissional em PDF.index.ts
Para este projeto simples, a chave de API fica diretamente no código. Se você pretende publicar isso no GitHub ou compartilhar com outras pessoas, mova a chave para um arquivo
.env e use process.env.FIRECRAWL_API_KEY em vez disso.fc-YOUR-API-KEY pela sua chave de API do Firecrawl obtida em firecrawl.dev.Entendendo o código
Componentes principais:- Firecrawl Branding Format: O formato
brandingextrai uma identidade de marca completa, incluindo cores, tipografia, espaçamento e imagens - Documento PDFKit: Cria um PDF A4 profissional com margens e seções adequadas
- Amostras de cores: Renderiza blocos visuais de cor com valores hexadecimais e nomes semânticos
- Exibição de tipografia: Mostra famílias e tamanhos de fontes em um layout organizado
- Espaçamento & tema: Documenta as unidades de espaçamento e o esquema de cores do sistema de design
4
Executar o gerador
Execute o script para gerar um guia de estilo de marca:O script vai:
- Extrair a identidade da marca da URL de destino usando o formato de branding do Firecrawl
- Gerar um PDF chamado
brand-style-guide.pdf - Salvá-lo no diretório do projeto
URL em index.ts.Como funciona
Processo de Extração
- Entrada de URL: O gerador recebe a URL do site de destino
- Firecrawl Scrape: Chama o endpoint
/scrapecom o formatobranding - Análise de marca: O Firecrawl analisa o CSS, as fontes e os elementos visuais da página
- Retorno de dados: Retorna um objeto
BrandingProfileestruturado com todos os design tokens
Processo de Geração de PDF
- Criação do Cabeçalho: Gera um cabeçalho colorido usando a cor principal da marca
- Obtensão do Logotipo: Faz o download e incorpora o logotipo ou favicon, se disponível
- Paleta de Cores: Renderiza cada cor como uma amostra visual com metadados
- Seção de Tipografia: Documenta famílias de fontes, tamanhos e pesos
- Informações de Espaçamento: Inclui unidades base, raio de borda e modo do tema
Estrutura do Perfil de Branding
Principais funcionalidades
Extração Automática de Cores
- Primárias e secundárias: Cores principais da marca
- Destaque (accent): Cores de destaque e de chamada para ação (CTA)
- Fundo e texto: Cores base da interface
- Cores semânticas: Estados de sucesso, aviso e erro
Documentação de Tipografia
- Famílias tipográficas: fontes primárias, de títulos e monoespaçadas
- Escala de tamanhos: todos os tamanhos de texto de títulos e corpo
- Pesos tipográficos: variações de peso disponíveis
Resultado visual
- Cabeçalho colorido que corresponde à marca
- Logotipo inserido quando disponível
- Layout profissional com hierarquia clara
- Rodapé com metadados e data de geração

Ideias de customização
Adicionar documentação de componentes
Exportar em vários formatos
Processamento em lote
Temas de PDF personalizados
Boas práticas
- Trate dados ausentes: Nem todos os sites expõem informações completas de branding. Sempre forneça valores padrão para propriedades ausentes.
- Respeite os rate limits: Ao processar vários sites em lote, adicione intervalos entre as requisições para respeitar os rate limits do Firecrawl.
- Armazene em cache os resultados: Guarde os dados de branding extraídos para evitar chamadas repetidas à API para o mesmo site.
- Tratamento de formatos de imagem: Alguns logos podem estar em formatos que o PDFKit não suporta (como SVG). Considere adicionar conversão de formato ou alternativas adequadas.
- Tratamento de erros: Envolva o processo de geração em blocos try-catch e forneça mensagens de erro claras e informativas.
Documentação do formato de branding
Saiba mais sobre o formato de branding e todas as propriedades disponíveis para extração.
API de scrape do Firecrawl
Referência completa da API para o endpoint de scrape com todas as opções de formato.
Documentação do PDFKit
Saiba mais sobre o PDFKit e suas opções avançadas de personalização de PDFs.
Guia de scraping em lote
Processe várias URLs com eficiência usando scraping em lote.

