designlang 10.3.0 → 10.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [10.4.0] — 2026-04-22
+
+**Identification trio: icon system, background patterns, stack intel.**
+
+### Added
+
+- **`src/extractors/icon-system.js`** — fingerprints the icon library (Lucide / Heroicons outline+solid / Phosphor / Tabler / Feather / Remix / Material) from stroke vs fill dominance, stroke width, grid size, and rounded-caps presence. Emits per-icon hints agents can act on.
+- **`src/extractors/background-patterns.js`** — classifies noise / dot-grid / line-grid / gradient-mesh / svg-pattern / plain from computed `background-image` values. Merged into `*-visual-dna.json`.
+- **`src/extractors/stack-intel.js`** — extends the existing stack-fingerprint with 12 CMSs (Webflow, Framer, Shopify, Ghost, Sanity, Contentful, Wix, Squarespace, WordPress, Hashnode, Notion, Bubble), 13 analytics platforms, and 7 experimentation platforms.
+- Bin reads its own version from `package.json` — no more per-release version drift in the CLI.
+- New outputs: `*-icon-system.json`, `*-stack-intel.json`.
+
 ## [10.3.0] — 2026-04-22
 
 **Perf + SEO.** designlang now doubles as a lightweight auditor.

package/bin/design-extract.js

@@ -1,8 +1,12 @@
 #!/usr/bin/env node
 
 import { Command } from 'commander';
-import { mkdirSync, writeFileSync } from 'fs';
-import { resolve, join } from 'path';
+import { mkdirSync, writeFileSync, readFileSync } from 'fs';
+import { resolve, join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PKG_VERSION = JSON.parse(readFileSync(resolve(__dirname, '..', 'package.json'), 'utf-8')).version;
 import chalk from 'chalk';
 import ora from 'ora';
 import { extractDesignLanguage } from '../src/index.js';
@@ -56,7 +60,7 @@ const program = new Command();
 program
   .name('designlang')
   .description('Extract the complete design language from any website')
-  .version('10.3.0');
+  .version(PKG_VERSION);
 
 // ── Main command: extract ──────────────────────────────────────
 program
@@ -343,7 +347,7 @@ program
 
       // v10: page intent + section roles + visual DNA + component library + multi-page + prompt pack.
       files.push({ name: `${prefix}-intent.json`, content: JSON.stringify({ pageIntent: design.pageIntent, sectionRoles: design.sectionRoles }, null, 2), label: 'Page Intent + Section Roles' });
-      files.push({ name: `${prefix}-visual-dna.json`, content: JSON.stringify({ materialLanguage: design.materialLanguage, imageryStyle: design.imageryStyle }, null, 2), label: 'Visual DNA' });
+      files.push({ name: `${prefix}-visual-dna.json`, content: JSON.stringify({ materialLanguage: design.materialLanguage, imageryStyle: design.imageryStyle, backgroundPatterns: design.backgroundPatterns }, null, 2), label: 'Visual DNA' });
       files.push({ name: `${prefix}-library.json`, content: JSON.stringify(design.componentLibrary || {}, null, 2), label: 'Component Library Detection' });
       if (design.logo && design.logo.found) {
         files.push({ name: `${prefix}-logo.json`, content: JSON.stringify(design.logo, null, 2), label: 'Logo Metadata' });
@@ -366,6 +370,12 @@ program
       if (design.perf && !design.perf.error) {
         files.push({ name: `${prefix}-perf.json`, content: JSON.stringify(design.perf, null, 2), label: 'Perf + Bundle' });
       }
+      if (design.iconSystem && (design.iconSystem.icons || []).length) {
+        files.push({ name: `${prefix}-icon-system.json`, content: JSON.stringify(design.iconSystem, null, 2), label: 'Icon System' });
+      }
+      if (design.stackIntel) {
+        files.push({ name: `${prefix}-stack-intel.json`, content: JSON.stringify(design.stackIntel, null, 2), label: 'Stack Intel (CMS/analytics/experimentation)' });
+      }
       if (merged.prompts !== false) {
         const pack = buildPromptPack(design);
         const promptsDir = join(outDir, `${prefix}-prompts`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "10.3.0",
+  "version": "10.4.0",
   "description": "Extract the complete design language from any website — colors, typography, spacing, shadows, motion, component anatomy, brand voice, page intent, section roles, material language, component library, imagery style, and logo. Outputs AI-optimized markdown, W3C design tokens, motion tokens, typed component stubs, Tailwind config, and ready-to-paste v0 / Lovable / Cursor / Claude-Artifacts prompts.",
   "type": "module",
   "bin": {

package/src/extractors/background-patterns.js

@@ -0,0 +1,72 @@
+// v10.4 — Background Patterns
+//
+// Classifies the visual backgrounds on a site from computed-style evidence:
+// noise (repeated grain PNG/SVG), dot-grid, line-grid, gradient-mesh (multiple
+// radial gradients), chequer, diagonal stripes, SVG patterns, or plain.
+//
+// Pure function — reads `rawData.light.computedStyles`, which every extractor
+// already has access to, plus the `modernColors` and any collected svgs.
+
+function looksLikeDotGrid(image) {
+  return /radial-gradient\(.*\)/i.test(image) && /repeat/i.test(image) && /(\d+px\s*\d+px)/.test(image);
+}
+
+function looksLikeLineGrid(image) {
+  // repeating-linear-gradient with a narrow colored band.
+  return /repeating-linear-gradient/i.test(image);
+}
+
+function looksLikeNoise(image) {
+  // data URI SVG with feTurbulence filter, or a well-known noise png path.
+  return /feTurbulence|data:image\/svg.+fractalNoise/i.test(image) || /noise\.(png|svg|webp)/i.test(image);
+}
+
+function countRadialGradients(image) {
+  return (image.match(/radial-gradient\(/gi) || []).length;
+}
+
+function countLinearGradients(image) {
+  return (image.match(/linear-gradient\(/gi) || []).length;
+}
+
+function detectSvgPattern(image) {
+  return /url\("data:image\/svg/i.test(image) && !looksLikeNoise(image);
+}
+
+export function extractBackgroundPatterns(rawData = {}) {
+  const styles = (rawData.light?.computedStyles) || [];
+  let dotGrid = 0, lineGrid = 0, noise = 0, svgPattern = 0, radialSum = 0, linearSum = 0, meshCount = 0, plain = 0;
+  const samples = [];
+
+  for (const s of styles) {
+    const bg = s.backgroundImage || s['background-image'] || '';
+    if (!bg || bg === 'none') { plain++; continue; }
+    const radial = countRadialGradients(bg);
+    const linear = countLinearGradients(bg);
+    radialSum += radial;
+    linearSum += linear;
+    let tag = null;
+    if (looksLikeNoise(bg)) { noise++; tag = 'noise'; }
+    else if (looksLikeDotGrid(bg)) { dotGrid++; tag = 'dot-grid'; }
+    else if (looksLikeLineGrid(bg)) { lineGrid++; tag = 'line-grid'; }
+    else if (radial >= 2) { meshCount++; tag = 'gradient-mesh'; }
+    else if (detectSvgPattern(bg)) { svgPattern++; tag = 'svg-pattern'; }
+    if (tag && samples.length < 8) samples.push({ tag, value: bg.slice(0, 200) });
+  }
+
+  const total = styles.length || 1;
+  const labels = [];
+  if (noise / total > 0.002) labels.push('noise');
+  if (dotGrid / total > 0.002) labels.push('dot-grid');
+  if (lineGrid / total > 0.002) labels.push('line-grid');
+  if (meshCount > 0) labels.push('gradient-mesh');
+  if (svgPattern > 0) labels.push('svg-pattern');
+  if (!labels.length) labels.push('plain');
+
+  return {
+    labels,
+    counts: { noise, dotGrid, lineGrid, meshCount, svgPattern },
+    gradientTotals: { radial: radialSum, linear: linearSum },
+    samples,
+  };
+}

package/src/extractors/icon-system.js

@@ -0,0 +1,110 @@
+// v10.4 — Icon System fingerprint
+//
+// Pure extractor — operates on the icon payload the crawler already collects.
+// We can't reliably match against Lucide/Phosphor/Heroicons path-data without
+// shipping the full libraries, so this extractor does the next-best thing:
+// infers the *system* an icon set came from (stroke vs fill, stroke width,
+// corner style, grid size, viewBox convention) and emits guidance any LLM can
+// act on ("use Lucide @ 1.5 stroke, 24px grid").
+
+const LIBRARY_HINTS = [
+  { id: 'lucide', match: (ctx) => ctx.strokeDominant && ctx.avgWeight > 1.3 && ctx.avgWeight < 1.7 && ctx.grid24 && !ctx.roundedCaps, score: 0.8 },
+  { id: 'heroicons-outline', match: (ctx) => ctx.strokeDominant && ctx.avgWeight >= 1.8 && ctx.avgWeight <= 2.2 && ctx.grid24, score: 0.8 },
+  { id: 'heroicons-solid', match: (ctx) => ctx.fillDominant && ctx.grid24, score: 0.55 },
+  { id: 'phosphor', match: (ctx) => ctx.strokeDominant && ctx.roundedCaps && ctx.grid24, score: 0.7 },
+  { id: 'tabler', match: (ctx) => ctx.strokeDominant && ctx.avgWeight > 1.9 && ctx.grid24, score: 0.6 },
+  { id: 'feather', match: (ctx) => ctx.strokeDominant && ctx.avgWeight > 1.8 && ctx.roundedCaps && ctx.grid24, score: 0.7 },
+  { id: 'remix', match: (ctx) => ctx.mixedFillStroke && ctx.grid24, score: 0.45 },
+  { id: 'material', match: (ctx) => ctx.fillDominant && ctx.grid24, score: 0.4 },
+];
+
+function parseStroke(v) {
+  if (!v) return 0;
+  const n = parseFloat(v);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function viewBoxGrid(vb) {
+  if (!vb) return null;
+  const parts = vb.trim().split(/\s+/).map(Number);
+  if (parts.length !== 4 || parts.some(n => !Number.isFinite(n))) return null;
+  const w = parts[2], h = parts[3];
+  if (w === h && [16, 20, 24, 32, 48, 64].includes(w)) return w;
+  return null;
+}
+
+function detectRoundedCaps(svg) {
+  // Look for `stroke-linecap="round"` or `stroke-linejoin="round"` as a
+  // proxy for Phosphor/Feather-style rounded terminals.
+  return /stroke-linecap="round"|stroke-linejoin="round"/i.test(svg || '');
+}
+
+export function extractIconSystem(icons = []) {
+  if (!icons.length) {
+    return { library: 'unknown', confidence: 0, stats: {}, signals: [], icons: [] };
+  }
+
+  let strokeCount = 0, fillCount = 0, mixed = 0, weights = [], gridHits = {};
+  let rounded = 0;
+  const perIconHints = [];
+
+  for (const icon of icons) {
+    const svg = icon.svg || '';
+    const stroke = icon.stroke || (svg.match(/stroke="([^"]+)"/i) || [])[1];
+    const fill = icon.fill || (svg.match(/fill="([^"]+)"/i) || [])[1];
+    const strokeWidthMatch = svg.match(/stroke-width="([0-9.]+)"/i);
+    const sw = strokeWidthMatch ? parseStroke(strokeWidthMatch[1]) : 0;
+
+    const hasStroke = !!(stroke && stroke !== 'none');
+    const hasFill = !!(fill && fill !== 'none');
+    if (hasStroke && !hasFill) strokeCount++;
+    else if (hasFill && !hasStroke) fillCount++;
+    else if (hasStroke && hasFill) mixed++;
+    if (sw > 0) weights.push(sw);
+    const grid = viewBoxGrid(icon.viewBox);
+    if (grid) gridHits[grid] = (gridHits[grid] || 0) + 1;
+    if (detectRoundedCaps(svg)) rounded++;
+
+    perIconHints.push({
+      class: (icon.classList || '').slice(0, 80),
+      grid,
+      strokeWidth: sw || null,
+      style: hasStroke && !hasFill ? 'stroke' : hasFill && !hasStroke ? 'fill' : 'mixed',
+    });
+  }
+
+  const avgWeight = weights.length ? weights.reduce((a, b) => a + b, 0) / weights.length : 0;
+  const total = icons.length;
+  const ctx = {
+    strokeDominant: strokeCount / total > 0.55,
+    fillDominant: fillCount / total > 0.55,
+    mixedFillStroke: mixed / total > 0.3,
+    avgWeight,
+    roundedCaps: rounded / total > 0.4,
+    grid24: gridHits[24] ? gridHits[24] / total > 0.5 : false,
+  };
+
+  const scored = LIBRARY_HINTS
+    .map(lib => ({ id: lib.id, score: lib.match(ctx) ? lib.score : 0 }))
+    .filter(x => x.score > 0)
+    .sort((a, b) => b.score - a.score);
+
+  const primary = scored[0] || { id: 'unknown', score: 0 };
+
+  return {
+    library: primary.id,
+    confidence: Number(primary.score.toFixed(3)),
+    alternates: scored.slice(1, 4),
+    stats: {
+      count: total,
+      strokeOnly: strokeCount,
+      fillOnly: fillCount,
+      mixed,
+      avgStrokeWidth: Number(avgWeight.toFixed(2)),
+      gridDistribution: gridHits,
+      roundedCapsFraction: Number((rounded / total).toFixed(2)),
+    },
+    signals: Object.entries(ctx).filter(([, v]) => v === true).map(([k]) => k),
+    icons: perIconHints.slice(0, 30),
+  };
+}

package/src/extractors/stack-intel.js

@@ -0,0 +1,73 @@
+// v10.4 — Stack Intel
+//
+// Extends stack-fingerprint.js with detectors for CMS platforms (Webflow,
+// Framer, Shopify, Ghost, Sanity, Contentful, Wix, Squarespace, WordPress),
+// analytics (GA, Segment, Mixpanel, PostHog, Amplitude, Heap), and
+// experimentation platforms (Optimizely, Statsig, GrowthBook, LaunchDarkly,
+// Split, Eppo). All signals come from script URLs + meta + known globals.
+
+const CMS = [
+  { id: 'webflow', re: /webflow\.com|wf-|\.webflow\./i },
+  { id: 'framer', re: /framer\.(?:com|website)|__framer|framer-motion\b/i },
+  { id: 'shopify', re: /cdn\.shopify|shopify\.com|x-shopify/i },
+  { id: 'ghost', re: /ghost\.io|__ghost_|ghost-url/i },
+  { id: 'sanity', re: /cdn\.sanity\.io|sanity-studio/i },
+  { id: 'contentful', re: /cdn\.contentful\.com|ctfassets\.net/i },
+  { id: 'wix', re: /parastorage\.com|\.wix\.com/i },
+  { id: 'squarespace', re: /squarespace\.com|sqspcdn\.com|squarespace-cdn/i },
+  { id: 'wordpress', re: /wp-content|wp-includes|wordpress/i },
+  { id: 'hashnode', re: /hashnode\.com/i },
+  { id: 'notion', re: /notion\.so\/image|notion-static/i },
+  { id: 'bubble', re: /bubble\.io|bubble-cdn/i },
+];
+
+const ANALYTICS = [
+  { id: 'google-analytics', re: /google-analytics\.com|googletagmanager\.com|gtag\(/ },
+  { id: 'segment', re: /segment\.com\/analytics|cdn\.segment\.io/i },
+  { id: 'mixpanel', re: /cdn\.mxpnl\.com|mixpanel\.com\/lib/i },
+  { id: 'amplitude', re: /amplitude\.com|cdn\.amplitude\.com/i },
+  { id: 'posthog', re: /posthog\.com|ph\.posthog\.com/i },
+  { id: 'heap', re: /heapanalytics\.com/i },
+  { id: 'fullstory', re: /fullstory\.com/i },
+  { id: 'hotjar', re: /static\.hotjar\.com|hj\.contentsquare/i },
+  { id: 'vercel-analytics', re: /_vercel\/insights|vercel\/analytics/i },
+  { id: 'plausible', re: /plausible\.io\/js|plausible\.io\/api/i },
+  { id: 'fathom', re: /usefathom\.com/i },
+  { id: 'sentry', re: /sentry\.io|sentry-cdn/i },
+  { id: 'datadog', re: /datadoghq\.com|datadog-rum/i },
+];
+
+const EXPERIMENTATION = [
+  { id: 'optimizely', re: /optimizely\.com|cdn\.optimizely\./i },
+  { id: 'statsig', re: /statsig\.com/i },
+  { id: 'growthbook', re: /growthbook\.io/i },
+  { id: 'launchdarkly', re: /launchdarkly\.com/i },
+  { id: 'split', re: /split\.io|sdk\.split\.io/i },
+  { id: 'eppo', re: /eppo\.cloud/i },
+  { id: 'vercel-flags', re: /vercel\/flags|flags\.sdk/i },
+];
+
+function fingerprint(haystack, list) {
+  const hits = [];
+  for (const entry of list) {
+    if (entry.re.test(haystack)) hits.push(entry.id);
+  }
+  return hits;
+}
+
+export function extractStackIntel(stack = {}) {
+  const scripts = (stack.scripts || []).join(' \n');
+  const metas = (stack.metas || []).map(m => `${m.name || ''} ${m.content || ''}`).join(' ');
+  const classes = (stack.classNameSample || []).join(' ');
+  const haystack = `${scripts}\n${metas}\n${classes}`;
+
+  return {
+    cms: fingerprint(haystack, CMS),
+    analytics: fingerprint(haystack, ANALYTICS),
+    experimentation: fingerprint(haystack, EXPERIMENTATION),
+    signals: {
+      scriptCount: (stack.scripts || []).length,
+      metaCount: (stack.metas || []).length,
+    },
+  };
+}

package/src/index.js

@@ -34,6 +34,9 @@ import { extractComponentLibrary } from './extractors/component-library.js';
 import { extractMaterialLanguage } from './extractors/material-language.js';
 import { extractImageryStyle } from './extractors/imagery-style.js';
 import { extractSeo } from './extractors/seo.js';
+import { extractIconSystem } from './extractors/icon-system.js';
+import { extractBackgroundPatterns } from './extractors/background-patterns.js';
+import { extractStackIntel } from './extractors/stack-intel.js';
 import { formatDtcgTokens } from './formatters/dtcg-tokens.js';
 import { formatMotionTokens } from './formatters/motion-tokens.js';
 
@@ -139,6 +142,9 @@ export async function extractDesignLanguage(url, options = {}) {
   design.materialLanguage = safeExtract(extractMaterialLanguage, design) || { label: 'flat', confidence: 0, signals: [], metrics: {} };
   design.imageryStyle = safeExtract(extractImageryStyle, rawData.light?.images || []) || { label: 'none', confidence: 0, counts: {}, signals: [] };
   design.seo = safeExtract(extractSeo, rawData) || { openGraph: {}, twitter: {}, structuredData: [], score: {} };
+  design.iconSystem = safeExtract(extractIconSystem, rawData.light?.icons || []) || { library: 'unknown', confidence: 0, stats: {}, signals: [], icons: [] };
+  design.backgroundPatterns = safeExtract(extractBackgroundPatterns, rawData) || { labels: ['plain'], counts: {}, gradientTotals: {}, samples: [] };
+  design.stackIntel = safeExtract(extractStackIntel, rawData.light?.stack || {}) || { cms: [], analytics: [], experimentation: [] };
   // Stash raw crawler output so downstream orchestration (multipage, smart)
   // can rebuild the digest without re-crawling.
   design._raw = rawData;
@@ -209,6 +215,9 @@ export { pairDarkMode } from './extractors/dark-mode-pair.js';
 export { captureResponsiveScreenshots } from './extractors/responsive-screenshots.js';
 export { captureCoreWebVitals, extractFontLoading } from './extractors/perf.js';
 export { extractSeo } from './extractors/seo.js';
+export { extractIconSystem } from './extractors/icon-system.js';
+export { extractBackgroundPatterns } from './extractors/background-patterns.js';
+export { extractStackIntel } from './extractors/stack-intel.js';
 export { refineWithSmart } from './classifiers/smart.js';
 export { crawlCanonicalPages, computeCrossPageConsistency, discoverCanonicalPages } from './multipage.js';
 export { buildPromptPack, formatV0Prompt, formatLovablePrompt, formatCursorPrompt, formatClaudeArtifactPrompt } from './formatters/prompt-pack.js';