Créer un générateur de charte graphique de marque avec Firecrawl

Créez un générateur de charte graphique de marque qui extrait automatiquement les couleurs, la typographie, les espacements et l'identité visuelle de n'importe quel site web, puis les rassemble dans un document PDF professionnel.

Une application Node.js qui prend n'importe quelle URL de site web, extrait l'ensemble de son identité de marque en utilisant le format de branding de Firecrawl, et génère un guide de style PDF soigné avec :

• Palette de couleurs avec valeurs hexadécimales
• Système typographique (polices, tailles, graisses)
• Spécifications d'espacement et de mise en page
• Logo et visuels de marque
• Informations de thème (mode clair/sombre)

• Node.js 18 ou une version ultérieure installé
• Une clé API Firecrawl obtenue sur firecrawl.dev
• Des connaissances de base en TypeScript et 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"));  // Récupérer le logo (PNG/JPG uniquement)  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 {}  // En-tête avec 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);  // Couleurs  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" });  });  // Typographie  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);  });  // Espacement et thème  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. Saisie de l'URL : le générateur reçoit l’URL du site web cible
2. Scraping avec Firecrawl : appelle l’endpoint /scrape avec le format branding
3. Analyse de la marque : Firecrawl analyse le CSS, les polices et les éléments visuels de la page
4. Retour des données : renvoie un objet structuré BrandingProfile contenant tous les design tokens

1. Création de l'en-tête : Génère un en-tête coloré en utilisant la couleur principale de la marque
2. Récupération du logo : Télécharge et intègre le logo ou le favicon si disponible
3. Palette de couleurs : Affiche chaque couleur sous forme d'échantillon visuel avec ses métadonnées
4. Section typographie : Documente les familles de polices, les tailles et les graisses de police
5. Informations d'espacement : Inclut les unités de base, le rayon de bordure et le mode du thème

Le format de branding retourne des informations détaillées sur la marque :

{  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"  }}

Le générateur identifie et classe toutes les couleurs de la marque :

• Primaires & Secondaires : Couleurs principales de la marque
• Accent : Couleurs d’accentuation et d’appel à l’action (CTA)
• Arrière-plan & Texte : Couleurs de base de l’interface
• Couleurs sémantiques : États de succès, d’avertissement et d’erreur

Présente l'ensemble du système typographique :

• Familles de polices : principale, titres et monospace
• Échelle de tailles : toutes les tailles de texte pour les titres et le corps
• Graisses de police : variantes de graisses disponibles

Le PDF inclut :

• En-tête coloré assorti à la marque
• Logo intégré lorsqu’il est disponible
• Mise en page professionnelle avec hiérarchie claire
• Pied de page contenant les métadonnées et la date de génération

Étendez le générateur afin d’inclure les styles des composants d’interface utilisateur :

// Ajouter après la section Espacement et Thèmeif (b.components) {  doc.addPage();  doc.fontSize(20).fillColor("#333").text("UI Components", 50, 50);  // Documenter les styles de boutons  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" });  }}

Ajoutez un export JSON en plus du PDF :

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

Générez des guides pour plusieurs sites 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;  // Générer un PDF pour chaque site...}

Créez différents styles de PDF en fonction du thème extrait :

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

1. Gérer les données manquantes : tous les sites web n'exposent pas des informations complètes sur la marque. Prévoyez toujours des valeurs de repli pour les propriétés manquantes.

2. Respecter les limites de débit : lors du traitement par lots de plusieurs sites, ajoutez des délais entre les requêtes pour respecter les limites de débit de Firecrawl.

3. Mettre en cache les résultats : stockez les données de marque extraites pour éviter des appels répétés à l'API pour un même site.

4. Gestion des formats d'image : certains logos peuvent être dans des formats que PDFKit ne prend pas en charge (comme le SVG). Envisagez d'ajouter une conversion de format ou des solutions de repli adaptées.

5. Gestion des erreurs : encapsulez le processus de génération dans des blocs try-catch et fournissez des messages d'erreur explicites.