Crear un generador de guías de estilo de marca con Firecrawl

Crea un generador de guías de estilo de marca que extrae automáticamente colores, tipografía, espaciado e identidad visual de cualquier sitio web y los compila en un documento PDF profesional.

Una aplicación de Node.js que toma la URL de cualquier sitio web, extrae toda su identidad de marca usando el formato de branding de Firecrawl y genera una guía de estilo en PDF profesional con:

• Paleta de colores con valores hex
• Sistema de tipografía (fuentes, tamaños, pesos)
• Especificaciones de espaciado y diseño
• Logotipo e imágenes de la marca
• Información del tema (modo claro/oscuro)

• Node.js 18 o superior instalado
• Una clave de API de Firecrawl de firecrawl.dev
• Conocimientos básicos de TypeScript y 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"));  // Fetch logo (PNG/JPG only)  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 {}  // Header with 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);  // Colors  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" });  });  // Typography  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);  });  // Espaciado y 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: El generador recibe la URL de un sitio web de destino
2. Firecrawl Scrape: Llama al endpoint /scrape con el formato branding
3. Análisis de marca: Firecrawl analiza el CSS, las fuentes y los elementos visuales de la página
4. Retorno de datos: Devuelve un objeto BrandingProfile estructurado con todos los tokens de diseño

1. Creación del encabezado: Genera un encabezado de color usando el color principal de la marca
2. Obtención del logotipo: Descarga e inserta el logotipo o favicon si está disponible
3. Paleta de colores: Muestra cada color como una muestra visual con metadatos
4. Sección de tipografía: Documenta familias tipográficas, tamaños y grosores
5. Información de espaciado: Incluye unidades base, radio de los bordes y modo del tema

El formato de branding devuelve información detallada de la 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"  }}

El generador identifica y clasifica todos los colores de la marca:

• Primarios y Secundarios: Colores principales de la marca
• Acento: Colores de énfasis y de llamado a la acción (CTA)
• Fondo y Texto: Colores base de la interfaz
• Colores Semánticos: Estados de éxito, advertencia y error

Recoge el sistema tipográfico completo:

• Familias tipográficas: Fuentes primarias, para encabezados y monoespaciadas
• Escala de tamaños: Todos los tamaños de texto de encabezado y cuerpo
• Pesos tipográficos: Variaciones de grosor disponibles

El PDF incluye:

• Encabezado con colores de la marca
• Logotipo integrado cuando esté disponible
• Diseño profesional con jerarquía clara
• Pie de página con metadatos y fecha de generación

Extiende el generador para incluir estilos de componentes de interfaz de usuario:

// Add after the Spacing & Theme sectionif (b.components) {  doc.addPage();  doc.fontSize(20).fillColor("#333").text("UI Components", 50, 50);  // Document button styles  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("Botón", 50, 120, { width: 120, align: "center" });  }}

Añade exportación en JSON además del PDF:

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

Genera guías para varios sitios web:

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;  // Generar PDF para cada sitio...}

Crea diferentes estilos de PDF a partir del tema extraído:

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

1. Gestionar datos faltantes: No todos los sitios web exponen información de marca completa. Proporciona siempre valores de reserva para las propiedades faltantes.

2. Respetar los límites de tasa: Al procesar por lotes varios sitios, añade pausas entre solicitudes para respetar los límites de tasa de Firecrawl.

3. Almacenar resultados en caché: Guarda los datos de marca extraídos para evitar llamadas repetidas a la API para el mismo sitio.

4. Gestión del formato de imagen: Algunos logotipos pueden estar en formatos que PDFKit no admite (como SVG). Considera añadir conversión de formato o alternativas de reserva adecuadas.

5. Gestión de errores: Envuelve el proceso de generación en bloques try-catch y proporciona mensajes de error descriptivos.