Firecrawl を使ったブランドスタイルガイドジェネレーターの構築

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"));  // ロゴを取得（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 {}  // ロゴ付きヘッダー  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);  // カラー  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" });  });  // タイポグラフィ  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);  });  // スペーシングとテーマ  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