extraktor 1.0.0

package/dist/design-md-generator-YMQOE2IW.js

@@ -0,0 +1,502 @@
+// src/genome/design-md-generator.ts
+import Anthropic from "@anthropic-ai/sdk";
+import fs from "fs-extra";
+var DesignMdGenerator = class {
+  client;
+  model;
+  logger;
+  constructor(options) {
+    const apiKey = options.apiKey || process.env.ANTHROPIC_API_KEY;
+    this.client = apiKey ? new Anthropic({ apiKey }) : null;
+    this.model = options.model || "claude-sonnet-4-6-20250514";
+    this.logger = options.logger;
+  }
+  async generate(result, outputPath, sourceUrl) {
+    this.logger.info("Generating DESIGN.md...");
+    const siteName = this.getSiteName(sourceUrl);
+    const layoutArch = result.layoutArchitecture;
+    const sections = [
+      this.section1_VisualTheme(result, siteName, sourceUrl),
+      this.section2_ColorPalette(result),
+      this.section3_Typography(result),
+      this.section4_Components(result),
+      this.section5_Layout(result, layoutArch),
+      this.section6_Depth(result),
+      this.section7_DosAndDonts(result),
+      this.section8_Responsive(result, layoutArch),
+      this.section9_AgentPrompt(result, siteName)
+    ];
+    let md = `# Design System: ${siteName}
+
+`;
+    md += sections.join("\n\n");
+    if (this.client) {
+      md = await this.enhanceWithAI(md, result, sourceUrl);
+    }
+    await fs.writeFile(outputPath, md, "utf-8");
+    this.logger.info(`DESIGN.md written to ${outputPath}`);
+    return md;
+  }
+  // ─── Section 1: Visual Theme & Atmosphere ──────────────────
+  section1_VisualTheme(result, siteName, url) {
+    const fonts = result.typography.fontFamilies;
+    const primaryFont = fonts[0]?.name || "system-ui";
+    const monoFont = fonts.find((f) => f.category === "mono")?.name;
+    const palette = result.colors.palette;
+    const bgColors = palette.filter((c) => c.usage?.includes("background"));
+    const textColors = palette.filter((c) => c.usage?.includes("text"));
+    const isDark = bgColors.some((c) => {
+      const hex = c.value.replace("#", "");
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      return (r + g + b) / 3 < 80;
+    });
+    let md = `## 1. Visual Theme & Atmosphere
+
+`;
+    md += `**Site:** ${url}
+
+`;
+    md += `**Key Characteristics:**
+`;
+    md += `- ${isDark ? "Dark-mode-first" : "Light-mode-first"} design
+`;
+    md += `- Primary typeface: ${primaryFont}${fonts[0]?.fallbacks?.length ? ` with fallbacks: ${fonts[0].fallbacks.join(", ")}` : ""}
+`;
+    if (monoFont) md += `- Monospace: ${monoFont}
+`;
+    md += `- ${palette.length} colors in palette, ${result.colors.gradients.length} gradients
+`;
+    md += `- ${result.animations.keyframes.length} keyframe animations, ${result.animations.transitions.length} transitions
+`;
+    const accentColors = palette.filter(
+      (c) => c.usage?.includes("accent") || c.usage?.includes("border")
+    );
+    if (accentColors.length > 0) {
+      md += `- Accent colors: ${accentColors.slice(0, 3).map((c) => `\`${c.value}\``).join(", ")}
+`;
+    }
+    return md;
+  }
+  // ─── Section 2: Color Palette & Roles ──────────────────────
+  section2_ColorPalette(result) {
+    let md = `## 2. Color Palette & Roles
+
+`;
+    const categories = {};
+    for (const color of result.colors.palette) {
+      const category = this.categorizeColor(color);
+      if (!categories[category]) categories[category] = [];
+      categories[category].push(color);
+    }
+    for (const [category, colors] of Object.entries(categories)) {
+      md += `### ${category}
+`;
+      for (const c of colors.slice(0, 8)) {
+        md += `- **${c.name}** (\`${c.value}\`): Used ${c.frequency}x${c.usage?.length ? ` - ${c.usage.join(", ")}` : ""}
+`;
+      }
+      md += "\n";
+    }
+    if (result.colors.gradients.length > 0) {
+      md += `### Gradients
+`;
+      for (const g of result.colors.gradients.slice(0, 5)) {
+        md += `- \`${g.value.slice(0, 80)}${g.value.length > 80 ? "..." : ""}\`
+`;
+      }
+      md += "\n";
+    }
+    return md;
+  }
+  // ─── Section 3: Typography Rules ──────────────────────────
+  section3_Typography(result) {
+    let md = `## 3. Typography Rules
+
+`;
+    md += `### Font Families
+`;
+    for (const font of result.typography.fontFamilies) {
+      const fallbacks = font.fallbacks?.length ? `: \`${font.value}\`, fallbacks: ${font.fallbacks.join(", ")}` : "";
+      md += `- **${font.category || "Primary"}**: ${font.name}${fallbacks}
+`;
+    }
+    md += "\n";
+    if (result.typography.fontSizes.length > 0) {
+      md += `### Type Scale
+
+`;
+      md += `| Role | Size | Weight | Line Height |
+`;
+      md += `|------|------|--------|-------------|
+`;
+      for (const size of result.typography.fontSizes.slice(0, 15)) {
+        const weight = result.typography.fontWeights.find(
+          (w) => w.frequency > 5
+        )?.value || "400";
+        md += `| ${size.name || "-"} | ${size.value} | ${weight} | - |
+`;
+      }
+      md += "\n";
+    }
+    if (result.typography.fontWeights.length > 0) {
+      md += `### Font Weights
+`;
+      for (const w of result.typography.fontWeights) {
+        md += `- **${w.name || w.value}** (${w.value}): Used ${w.frequency}x
+`;
+      }
+      md += "\n";
+    }
+    return md;
+  }
+  // ─── Section 4: Component Stylings ─────────────────────────
+  section4_Components(result) {
+    let md = `## 4. Component Stylings
+
+`;
+    md += `### Buttons
+`;
+    const radii = result.effects.borderRadii;
+    const buttonRadius = radii.find((r) => parseFloat(r.value) >= 4 && parseFloat(r.value) <= 8);
+    const pillRadius = radii.find((r) => parseFloat(r.value) >= 9e3);
+    if (buttonRadius) {
+      md += `- Standard radius: \`${buttonRadius.value}\`
+`;
+    }
+    if (pillRadius) {
+      md += `- Pill radius: \`${pillRadius.value}\`
+`;
+    }
+    const btnTransition = result.animations.transitions.find(
+      (t) => t.property === "all" || t.property === "background"
+    );
+    if (btnTransition) {
+      md += `- Transition: \`${btnTransition.value || `${btnTransition.duration} ${btnTransition.timingFunction}`}\`
+`;
+    }
+    md += "\n";
+    md += `### Cards & Containers
+`;
+    const cardRadius = radii.find((r) => parseFloat(r.value) >= 8 && parseFloat(r.value) <= 16);
+    if (cardRadius) md += `- Radius: \`${cardRadius.value}\`
+`;
+    if (result.effects.shadows.length > 0) {
+      md += `- Shadow: \`${result.effects.shadows[0].value}\`
+`;
+    }
+    md += "\n";
+    md += `### Navigation
+`;
+    md += `- Font: ${result.typography.fontFamilies[0]?.name || "system"}
+`;
+    const navSize = result.typography.fontSizes.find(
+      (s) => parseFloat(s.value) >= 13 && parseFloat(s.value) <= 15
+    );
+    if (navSize) md += `- Size: \`${navSize.value}\`
+`;
+    md += "\n";
+    return md;
+  }
+  // ─── Section 5: Layout Principles ──────────────────────────
+  section5_Layout(result, arch) {
+    let md = `## 5. Layout Principles
+
+`;
+    md += `### Spacing System
+`;
+    const spacingValues = result.spacing.scale.slice(0, 12).map((s) => s.value);
+    if (spacingValues.length > 0) {
+      md += `- Scale: ${spacingValues.join(", ")}
+`;
+      const pxValues = result.spacing.scale.map((s) => s.pxValue).filter((v) => v > 0).sort((a, b) => a - b);
+      if (pxValues.length >= 2) {
+        const diffs = pxValues.slice(1).map((v, i) => v - pxValues[i]);
+        const gcd = diffs.reduce((a, b) => this.gcd(a, b));
+        if (gcd >= 4) md += `- Base unit: ${gcd}px
+`;
+      }
+    }
+    md += "\n";
+    md += `### Grid & Container
+`;
+    if (result.layout.containers.length > 0) {
+      const container = result.layout.containers[0];
+      if (container.maxWidth) md += `- Max width: \`${container.maxWidth}\`
+`;
+    }
+    if (result.layout.gridPatterns.length > 0) {
+      for (const grid of result.layout.gridPatterns.slice(0, 3)) {
+        md += `- Grid: ${grid.columns} columns, gap \`${grid.gap}\`
+`;
+      }
+    }
+    md += "\n";
+    if (arch?.layoutType) {
+      md += `### Layout Type
+`;
+      md += `- Pattern: \`${arch.layoutType}\`
+`;
+      md += `- Sections: ${arch.sections?.length || 0}
+`;
+    }
+    if (result.effects.borderRadii.length > 0) {
+      md += `
+### Border Radius Scale
+`;
+      for (const r of result.effects.borderRadii.slice(0, 8)) {
+        md += `- ${r.name || "-"}: \`${r.value}\`
+`;
+      }
+    }
+    md += "\n";
+    return md;
+  }
+  // ─── Section 6: Depth & Elevation ──────────────────────────
+  section6_Depth(result) {
+    let md = `## 6. Depth & Elevation
+
+`;
+    if (result.effects.shadows.length > 0) {
+      md += `| Level | Shadow | Usage |
+`;
+      md += `|-------|--------|-------|
+`;
+      for (let i = 0; i < Math.min(result.effects.shadows.length, 6); i++) {
+        const s = result.effects.shadows[i];
+        const value = s.value.length > 60 ? s.value.slice(0, 60) + "..." : s.value;
+        md += `| Level ${i + 1} | \`${value}\` | ${s.name || "-"} |
+`;
+      }
+      md += "\n";
+    }
+    if (result.effects.opacity.length > 0) {
+      md += `### Opacity Values
+`;
+      for (const o of result.effects.opacity.slice(0, 5)) {
+        md += `- ${o.name || "-"}: \`${o.value}\`
+`;
+      }
+      md += "\n";
+    }
+    return md;
+  }
+  // ─── Section 7: Do's and Don'ts ────────────────────────────
+  section7_DosAndDonts(result) {
+    let md = `## 7. Do's and Don'ts
+
+`;
+    const primaryFont = result.typography.fontFamilies[0]?.name || "the primary font";
+    const primaryColor = result.colors.palette[0]?.value || "#000";
+    const accentColor = result.colors.palette.find(
+      (c) => c.usage?.includes("accent") || c.name?.includes("accent") || c.name?.includes("primary")
+    )?.value;
+    md += `### Do
+`;
+    md += `- Use \`${primaryFont}\` as the primary typeface with proper fallbacks
+`;
+    if (result.typography.fontFamilies[0]?.fallbacks?.length) {
+      md += `- Include fallback stack: ${result.typography.fontFamilies[0].fallbacks.join(", ")}
+`;
+    }
+    md += `- Follow the spacing scale: ${result.spacing.scale.slice(0, 5).map((s) => s.value).join(", ")}...
+`;
+    if (accentColor) {
+      md += `- Use accent color (\`${accentColor}\`) for interactive elements and CTAs only
+`;
+    }
+    if (result.effects.borderRadii.length > 0) {
+      md += `- Use consistent border radius: \`${result.effects.borderRadii[0].value}\` for standard elements
+`;
+    }
+    md += `- Match the transition timing: ${result.animations.transitions[0]?.value || "150ms ease"}
+`;
+    md += "\n";
+    md += `### Don't
+`;
+    md += `- Don't mix font families - stick to the extracted type system
+`;
+    md += `- Don't use arbitrary spacing values outside the scale
+`;
+    if (accentColor) {
+      md += `- Don't use accent color (\`${accentColor}\`) decoratively - reserve for interactive elements
+`;
+    }
+    md += `- Don't ignore the shadow/elevation system - use the extracted levels
+`;
+    md += `- Don't add border-radius values outside the established scale
+`;
+    md += "\n";
+    return md;
+  }
+  // ─── Section 8: Responsive Behavior ────────────────────────
+  section8_Responsive(result, arch) {
+    let md = `## 8. Responsive Behavior
+
+`;
+    if (result.layout.breakpoints.length > 0) {
+      md += `### Breakpoints
+
+`;
+      md += `| Name | Width |
+`;
+      md += `|------|-------|
+`;
+      for (const bp of result.layout.breakpoints) {
+        md += `| ${bp.name || "-"} | ${bp.minWidth || bp.maxWidth || "-"}px |
+`;
+      }
+      md += "\n";
+    } else {
+      md += `### Breakpoints (Standard)
+
+`;
+      md += `| Name | Width |
+`;
+      md += `|------|-------|
+`;
+      md += `| Mobile | <640px |
+`;
+      md += `| Tablet | 640-1024px |
+`;
+      md += `| Desktop | >1024px |
+
+`;
+    }
+    md += `### Collapsing Strategy
+`;
+    if (result.layout.gridPatterns.length > 0) {
+      const grid = result.layout.gridPatterns[0];
+      md += `- Grid: ${grid.columns}-column -> single column on mobile
+`;
+    }
+    md += `- Navigation: horizontal -> hamburger menu
+`;
+    md += `- Section spacing: reduce by ~40% on mobile
+`;
+    md += "\n";
+    return md;
+  }
+  // ─── Section 9: Agent Prompt Guide ──────────────────────────
+  section9_AgentPrompt(result, siteName) {
+    let md = `## 9. Agent Prompt Guide
+
+`;
+    md += `### Quick Color Reference
+`;
+    for (const c of result.colors.palette.slice(0, 10)) {
+      md += `- ${c.name}: \`${c.value}\`
+`;
+    }
+    md += "\n";
+    md += `### Quick Typography Reference
+`;
+    for (const f of result.typography.fontFamilies) {
+      md += `- ${f.category || "Primary"}: \`${f.name}\`${f.fallbacks?.length ? `, fallbacks: ${f.fallbacks.join(", ")}` : ""}
+`;
+    }
+    md += "\n";
+    const bg = result.colors.palette.find((c) => c.usage?.includes("background"))?.value || "#ffffff";
+    const text = result.colors.palette.find((c) => c.usage?.includes("text"))?.value || "#000000";
+    const accent = result.colors.palette.find(
+      (c) => c.usage?.includes("accent") || c.name?.includes("primary") || c.name?.includes("blue")
+    )?.value || "#3366ff";
+    const font = result.typography.fontFamilies[0]?.name || "system-ui";
+    const radius = result.effects.borderRadii[0]?.value || "8px";
+    md += `### Example Component Prompts
+
+`;
+    md += `- "Create a hero section on \`${bg}\` background. Headline using ${font}, color \`${text}\`. `;
+    md += `CTA button with \`${accent}\` background, \`${radius}\` radius."
+
+`;
+    md += `- "Design a card: \`${bg}\` background, border \`1px solid rgba(0,0,0,0.1)\`, `;
+    md += `\`${radius}\` radius. Title in ${font} bold, color \`${text}\`."
+
+`;
+    md += `- "Build navigation: ${font} at 14px for links, color \`${text}\`. `;
+    md += `Accent CTA \`${accent}\` right-aligned."
+
+`;
+    md += `### Iteration Guide
+`;
+    md += `1. Always use \`${font}\` with the specified fallback stack
+`;
+    md += `2. Follow the spacing scale: ${result.spacing.scale.slice(0, 5).map((s) => s.value).join(", ")}...
+`;
+    md += `3. Accent color (\`${accent}\`) is for interactive elements only
+`;
+    md += `4. Use the shadow/elevation system for depth
+`;
+    md += `5. Match transition timing from the extracted values
+`;
+    return md;
+  }
+  // ─── AI Enhancement ────────────────────────────────────────
+  async enhanceWithAI(md, result, sourceUrl) {
+    if (!this.client) return md;
+    try {
+      this.logger.info("Enhancing DESIGN.md with AI narrative...");
+      const response = await this.client.messages.create({
+        model: this.model,
+        max_tokens: 1024,
+        messages: [{
+          role: "user",
+          content: `I have a DESIGN.md for ${sourceUrl}. The Section 1 "Visual Theme & Atmosphere" needs a rich, descriptive opening paragraph (3-4 sentences) that captures the design personality. Here's what I know:
+
+Colors: ${result.colors.palette.slice(0, 8).map((c) => `${c.name}:${c.value}`).join(", ")}
+Fonts: ${result.typography.fontFamilies.map((f) => f.name).join(", ")}
+Animations: ${result.animations.keyframes.length} keyframes
+Gradients: ${result.colors.gradients.length}
+
+Write ONLY the opening paragraph. No heading, no bullets. Describe the visual feel, the mood, the design philosophy. Be specific about colors and typography choices.`
+        }]
+      });
+      const narrative = response.content[0]?.type === "text" ? response.content[0].text : "";
+      if (narrative) {
+        md = md.replace(
+          /## 1\. Visual Theme & Atmosphere\n\n/,
+          `## 1. Visual Theme & Atmosphere
+
+${narrative}
+
+`
+        );
+      }
+    } catch (error) {
+      this.logger.warn("AI enhancement failed, using raw data only");
+    }
+    return md;
+  }
+  // ─── Helpers ───────────────────────────────────────────────
+  getSiteName(url) {
+    try {
+      const hostname = new URL(url).hostname;
+      return hostname.replace("www.", "").split(".")[0];
+    } catch {
+      return "Unknown Site";
+    }
+  }
+  categorizeColor(color) {
+    if (color.usage?.includes("background")) return "Background Surfaces";
+    if (color.usage?.includes("text")) return "Text & Content";
+    if (color.usage?.includes("border")) return "Border & Divider";
+    if (color.usage?.includes("accent")) return "Brand & Accent";
+    if (color.usage?.includes("shadow")) return "Shadows";
+    if (color.name?.includes("gray") || color.name?.includes("grey")) return "Neutrals";
+    if (color.name?.includes("blue") || color.name?.includes("red") || color.name?.includes("green")) return "Brand & Accent";
+    return "Other";
+  }
+  gcd(a, b) {
+    a = Math.abs(Math.round(a));
+    b = Math.abs(Math.round(b));
+    while (b) {
+      [a, b] = [b, a % b];
+    }
+    return a;
+  }
+};
+export {
+  DesignMdGenerator
+};