Criando um Gerador de Guia de Estilo de Marca com Firecrawl

Crie um gerador de guia de estilo de marca que extrai automaticamente cores, tipografia, espaçamentos e identidade visual de qualquer site e compila tudo em um documento PDF profissional.

Uma aplicação Node.js que recebe a URL de qualquer site, extrai toda a identidade de marca usando o formato de branding do Firecrawl e gera um PDF de guia de estilo de marca profissional com:

• 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)

• Node.js 18 ou superior instalado
• Uma chave de API do Firecrawl obtida em firecrawl.dev
• Conhecimentos básicos de TypeScript e Node.js

mkdir brand-style-guide-generator && cd brand-style-guide-generatornpm init -y

{  "name": "brand-style-guide-generator",  "version": "1.0.0",  "type": "module",  "scripts": {    "start": "npx tsx index.ts"  }}

npm i firecrawl pdfkitnpm i -D typescript tsx @types/node @types/pdfkit

import { Firecrawl } from "firecrawl";import PDFDocument from "pdfkit";import fs from "fs";const API_KEY = "fc-YOUR-API-KEY";const URL = "https://firecrawl.dev";async function main() {  const fc = new Firecrawl({ apiKey: API_KEY });  const { branding: b } = (await fc.scrape(URL, { formats: ["branding"] })) as any;  const doc = new PDFDocument({ size: "A4", margin: 50 });  doc.pipe(fs.createWriteStream("brand-style-guide.pdf"));  // Buscar logo (somente PNG/JPG)  let logoImg: Buffer | null = null;  try {    const logoUrl = b.images?.favicon || b.images?.ogImage;    if (logoUrl?.match(/\.(png|jpg|jpeg)$/i)) {      const res = await fetch(logoUrl);      logoImg = Buffer.from(await res.arrayBuffer());    }  } catch {}  // Cabeçalho com logo  doc.rect(0, 0, 595, 120).fill(b.colors?.primary || "#333");  const titleX = logoImg ? 130 : 50;  if (logoImg) doc.image(logoImg, 50, 30, { height: 60 });  doc.fontSize(36).fillColor("#fff").text("Brand Style Guide", titleX, 38);  doc.fontSize(14).text(URL, titleX, 80);  // Cores  doc.fontSize(18).fillColor("#333").text("Colors", 50, 160);  const colors = Object.entries(b.colors || {}).filter(([, v]) => typeof v === "string" && (v as string).startsWith("#"));  colors.forEach(([k, v], i) => {    const x = 50 + i * 100;    doc.rect(x, 195, 80, 80).fill(v as string);    doc.fontSize(10).fillColor("#333").text(k, x, 282, { width: 80, align: "center" });    doc.fontSize(9).fillColor("#888").text(v as string, x, 296, { width: 80, align: "center" });  });  // Tipografia  doc.fontSize(18).fillColor("#333").text("Typography", 50, 340);  doc.fontSize(13).fillColor("#444");  doc.text(`Primary Font: ${b.typography?.fontFamilies?.primary || "—"}`, 50, 370);  doc.text(`Heading Font: ${b.typography?.fontFamilies?.heading || "—"}`, 50, 392);  doc.fontSize(12).fillColor("#666").text("Font Sizes:", 50, 422);  Object.entries(b.typography?.fontSizes || {}).forEach(([k, v], i) => {    doc.text(`${k.toUpperCase()}: ${v}`, 70, 445 + i * 22);  });  // Espaçamento e Tema  doc.fontSize(18).fillColor("#333").text("Spacing & Theme", 320, 340);  doc.fontSize(13).fillColor("#444");  doc.text(`Base Unit: ${b.spacing?.baseUnit}px`, 320, 370);  doc.text(`Border Radius: ${b.spacing?.borderRadius}`, 320, 392);  doc.text(`Color Scheme: ${b.colorScheme}`, 320, 414);  doc.end();  console.log("Generated: brand-style-guide.pdf");}main();

npm start

1. Entrada de URL: O gerador recebe a URL do site de destino
2. Firecrawl Scrape: Chama o endpoint /scrape com o formato branding
3. Análise de marca: O Firecrawl analisa o CSS, as fontes e os elementos visuais da página
4. Retorno de dados: Retorna um objeto BrandingProfile estruturado com todos os design tokens

1. Criação do Cabeçalho: Gera um cabeçalho colorido usando a cor principal da marca
2. Obtensão do Logotipo: Faz o download e incorpora o logotipo ou favicon, se disponível
3. Paleta de Cores: Renderiza cada cor como uma amostra visual com metadados
4. Seção de Tipografia: Documenta famílias de fontes, tamanhos e pesos
5. Informações de Espaçamento: Inclui unidades base, raio de borda e modo do tema

O formato de branding retorna informações detalhadas sobre a marca:

{  colorScheme: "dark" | "light",  logo: "https://example.com/logo.svg",  colors: {    primary: "#FF6B35",    secondary: "#004E89",    accent: "#F77F00",    background: "#1A1A1A",    textPrimary: "#FFFFFF",    textSecondary: "#B0B0B0"  },  typography: {    fontFamilies: { primary: "Inter", heading: "Inter", code: "Roboto Mono" },    fontSizes: { h1: "48px", h2: "36px", body: "16px" },    fontWeights: { regular: 400, medium: 500, bold: 700 }  },  spacing: {    baseUnit: 8,    borderRadius: "8px"  },  images: {    logo: "https://example.com/logo.svg",    favicon: "https://example.com/favicon.ico"  }}

O gerador identifica e categoriza todas as cores da marca:

• 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

Abrange todo o sistema tipográfico:

• 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

O PDF inclui:

• Cabeçalho colorido que corresponde à marca
• Logotipo inserido quando disponível
• Layout profissional com hierarquia clara
• Rodapé com metadados e data de geração

Estenda o gerador para incluir estilos dos componentes de UI:

// Adicionar após a seção Spacing & Themeif (b.components) {  doc.addPage();  doc.fontSize(20).fillColor("#333").text("UI Components", 50, 50);  // Documentar estilos de botão  if (b.components.buttonPrimary) {    const btn = b.components.buttonPrimary;    doc.fontSize(14).text("Primary Button", 50, 90);    doc.rect(50, 110, 120, 40).fill(btn.background);    doc.fontSize(12).fillColor(btn.textColor).text("Button", 50, 120, { width: 120, align: "center" });  }}

Adicione exportação em JSON além do PDF:

// Adicionar antes de doc.end()fs.writeFileSync("brand-data.json", JSON.stringify(b, null, 2));

Crie guias para vários sites:

const websites = [  "https://stripe.com",  "https://linear.app",  "https://vercel.com"];for (const site of websites) {  const { branding } = await fc.scrape(site, { formats: ["branding"] }) as any;  // Gere PDF para cada site...}

Crie diferentes estilos de PDF a partir do tema extraído:

const isDarkMode = b.colorScheme === "dark";const headerBg = isDarkMode ? b.colors?.background : b.colors?.primary;const textColor = isDarkMode ? "#fff" : "#333";

1. Trate dados ausentes: Nem todos os sites expõem informações completas de branding. Sempre forneça valores padrão para propriedades ausentes.

2. Respeite os rate limits: Ao processar vários sites em lote, adicione intervalos entre as requisições para respeitar os rate limits do Firecrawl.

3. Armazene em cache os resultados: Guarde os dados de branding extraídos para evitar chamadas repetidas à API para o mesmo site.

4. 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.

5. Tratamento de erros: Envolva o processo de geração em blocos try-catch e forneça mensagens de erro claras e informativas.