designlang 2.0.0 → 4.0.0

package/skills/extract-design/SKILL.md

@@ -1,27 +1,38 @@
 ---
 name: extract-design
-description: "Extract the full design language from any website URL. Produces AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors does this site use', 'what font does this site use', or '/extract-design'."
-argument-hint: "<url> [--dark] [--out <dir>]"
+description: "Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', or '/extract-design'."
 allowed-tools: Bash, Read, Write, Glob
 ---
 
 # Extract Design Language
 
-Extract the complete design language from any website URL.
+Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.
 
-## Process
+## Prerequisites
+
+Ensure `designlang` is available. Install if needed:
+
+```bash
+npm install -g designlang
+```
 
-1. **Run the extraction CLI** on the provided URL:
+Or use npx (no install required):
 
 ```bash
-cd "${CLAUDE_SKILL_DIR}/../.." && node bin/design-extract.js $ARGUMENTS
+npx designlang <url>
 ```
 
-If dependencies are not installed, run first:
+## Process
+
+1. **Run the extraction** on the provided URL:
+
 ```bash
-cd "${CLAUDE_SKILL_DIR}/../.." && npm install
+npx designlang <url> --screenshots
 ```
 
+For multi-page crawling: `npx designlang <url> --depth 3 --screenshots`
+For dark mode: `npx designlang <url> --dark --screenshots`
+
 2. **Read the generated markdown file** to understand the design:
 
 ```bash
@@ -29,31 +40,47 @@ cat design-extract-output/*-design-language.md
 ```
 
 3. **Present key findings** to the user:
-   - Primary color palette (with hex codes)
+   - Primary color palette with hex codes
    - Font families in use
    - Spacing system (base unit if detected)
-   - Number of component patterns found
-   - Any notable design decisions (shadows, border-radius scale, etc.)
+   - WCAG accessibility score
+   - Component patterns found
+   - Notable design decisions (shadows, radii, etc.)
 
 4. **Offer next steps:**
-   - Copy `tailwind.config.js` into the user's project
-   - Import `variables.css` into their stylesheet
-   - Use `design-tokens.json` for tooling integration
-   - Use the markdown file as a reference for AI-assisted development
+   - Copy `*-tailwind.config.js` into their project
+   - Import `*-variables.css` into their stylesheet
+   - Paste `*-shadcn-theme.css` into globals.css for shadcn/ui users
+   - Import `*-theme.js` for React/CSS-in-JS projects
+   - Import `*-figma-variables.json` into Figma for designer handoff
+   - Open `*-preview.html` in a browser for a visual overview
+   - Use the markdown file as context for AI-assisted development
 
-## Output Files
-
-The tool generates 4 files in the output directory:
+## Output Files (8)
 
 | File | Purpose |
 |------|---------|
-| `*-design-language.md` | AI-optimized markdown describing the full design system |
-| `*-design-tokens.json` | W3C Design Tokens format for tooling |
-| `*-tailwind.config.js` | Ready-to-use Tailwind CSS theme extension |
-| `*-variables.css` | CSS custom properties for direct use |
+| `*-design-language.md` | AI-optimized markdown — the full design system for LLMs |
+| `*-preview.html` | Visual HTML report with swatches, type scale, shadows, a11y |
+| `*-design-tokens.json` | W3C Design Tokens format |
+| `*-tailwind.config.js` | Ready-to-use Tailwind CSS theme |
+| `*-variables.css` | CSS custom properties |
+| `*-figma-variables.json` | Figma Variables import format |
+| `*-theme.js` | React/CSS-in-JS theme object |
+| `*-shadcn-theme.css` | shadcn/ui theme CSS variables |
+
+## Additional Commands
+
+- **Compare two sites:** `npx designlang diff <urlA> <urlB>`
+- **View history:** `npx designlang history <url>`
 
 ## Options
 
-- `--out <dir>` — Output directory (default: `./design-extract-output`)
-- `--dark` — Also extract dark mode color scheme
-- `--wait <ms>` — Wait time after page load for SPAs
+| Flag | Description |
+|------|-------------|
+| `--out <dir>` | Output directory (default: `./design-extract-output`) |
+| `--dark` | Also extract dark mode color scheme |
+| `--depth <n>` | Crawl N internal pages for site-wide extraction |
+| `--screenshots` | Capture component screenshots (buttons, cards, nav) |
+| `--wait <ms>` | Wait time after page load for SPAs |
+| `--framework <type>` | Generate only specific theme (`react` or `shadcn`) |

package/src/clone.js

@@ -0,0 +1,218 @@
+// Clone command — generate a working Next.js starter from extracted design
+
+import { mkdirSync, writeFileSync } from 'fs';
+import { join } from 'path';
+
+export function generateClone(design, outDir) {
+  const projectDir = outDir;
+  mkdirSync(join(projectDir, 'src/app'), { recursive: true });
+  mkdirSync(join(projectDir, 'public'), { recursive: true });
+
+  const { colors, typography, spacing, borders, shadows } = design;
+
+  // Package.json
+  writeFileSync(join(projectDir, 'package.json'), JSON.stringify({
+    name: `${design.meta.title?.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').slice(0, 40) || 'cloned-design'}-clone`,
+    version: '0.1.0',
+    private: true,
+    scripts: {
+      dev: 'next dev',
+      build: 'next build',
+      start: 'next start',
+    },
+    dependencies: {
+      next: '^15.0.0',
+      react: '^19.0.0',
+      'react-dom': '^19.0.0',
+    },
+    devDependencies: {
+      tailwindcss: '^4.0.0',
+      '@tailwindcss/postcss': '^4.0.0',
+    },
+  }, null, 2), 'utf-8');
+
+  // Globals CSS with extracted design tokens
+  const primaryHex = colors.primary?.hex || '#3b82f6';
+  const secondaryHex = colors.secondary?.hex || '#8b5cf6';
+  const accentHex = colors.accent?.hex || '#f59e0b';
+  const bgColor = colors.backgrounds[0] || '#ffffff';
+  const textColor = colors.text[0] || '#171717';
+  const fontFamily = typography.families[0]?.name || 'Inter';
+  const monoFont = typography.families.find(f => f.name.toLowerCase().includes('mono'))?.name || 'monospace';
+  const radiusMd = borders.radii.find(r => r.label === 'md')?.value || 8;
+  const shadowMd = shadows.values.find(s => s.label === 'md')?.raw || '0 4px 6px rgba(0,0,0,0.1)';
+
+  const neutrals = colors.neutrals.slice(0, 5);
+
+  writeFileSync(join(projectDir, 'src/app/globals.css'), `@import "tailwindcss";
+
+:root {
+  --color-primary: ${primaryHex};
+  --color-secondary: ${secondaryHex};
+  --color-accent: ${accentHex};
+  --color-background: ${bgColor};
+  --color-foreground: ${textColor};
+${neutrals.map((n, i) => `  --color-neutral-${i + 1}: ${n.hex};`).join('\n')}
+  --font-sans: '${fontFamily}', system-ui, sans-serif;
+  --font-mono: '${monoFont}', monospace;
+  --radius: ${radiusMd}px;
+  --shadow: ${shadowMd};
+}
+
+body {
+  background: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-sans);
+}
+`, 'utf-8');
+
+  // Layout
+  writeFileSync(join(projectDir, 'src/app/layout.js'), `export const metadata = {
+  title: '${(design.meta.title || 'Cloned Design').replace(/'/g, "\\'")}',
+  description: 'Design cloned from ${design.meta.url}',
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+        <link href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@400;500;600;700&display=swap" rel="stylesheet" />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+`, 'utf-8');
+
+  // Demo page showcasing the design system
+  const headingScale = typography.headings.slice(0, 3);
+  const bodySize = typography.body?.size || 16;
+  const spacingVals = spacing.scale.slice(0, 8);
+
+  writeFileSync(join(projectDir, 'src/app/page.js'), `import './globals.css';
+
+export default function Home() {
+  return (
+    <main style={{ maxWidth: '1200px', margin: '0 auto', padding: '48px 24px' }}>
+      {/* Hero */}
+      <section style={{ textAlign: 'center', padding: '80px 0' }}>
+        <h1 style={{
+          fontSize: '${headingScale[0]?.size || 48}px',
+          fontWeight: ${headingScale[0]?.weight || 700},
+          lineHeight: '${headingScale[0]?.lineHeight || '1.1'}',
+          color: 'var(--color-foreground)',
+          marginBottom: '16px',
+        }}>
+          Design System Clone
+        </h1>
+        <p style={{
+          fontSize: '${bodySize + 4}px',
+          color: 'var(--color-neutral-1)',
+          maxWidth: '600px',
+          margin: '0 auto 32px',
+        }}>
+          Extracted from <a href="${design.meta.url}" style={{ color: 'var(--color-primary)' }}>${design.meta.url}</a>
+        </p>
+        <div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
+          <button style={{
+            background: 'var(--color-primary)',
+            color: '#fff',
+            border: 'none',
+            padding: '12px 24px',
+            borderRadius: 'var(--radius)',
+            fontSize: '${bodySize}px',
+            fontWeight: 500,
+            cursor: 'pointer',
+          }}>
+            Primary Button
+          </button>
+          <button style={{
+            background: 'transparent',
+            color: 'var(--color-foreground)',
+            border: '1px solid var(--color-neutral-${Math.min(neutrals.length, 3)})',
+            padding: '12px 24px',
+            borderRadius: 'var(--radius)',
+            fontSize: '${bodySize}px',
+            fontWeight: 500,
+            cursor: 'pointer',
+          }}>
+            Secondary Button
+          </button>
+        </div>
+      </section>
+
+      {/* Color Palette */}
+      <section style={{ padding: '48px 0' }}>
+        <h2 style={{ fontSize: '${headingScale[1]?.size || 24}px', fontWeight: 600, marginBottom: '24px' }}>Color Palette</h2>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: '12px' }}>
+          <div style={{ background: 'var(--color-primary)', borderRadius: 'var(--radius)', padding: '40px 16px 12px', color: '#fff', fontSize: '12px' }}>Primary<br/>${primaryHex}</div>
+          <div style={{ background: 'var(--color-secondary)', borderRadius: 'var(--radius)', padding: '40px 16px 12px', color: '#fff', fontSize: '12px' }}>Secondary<br/>${secondaryHex}</div>
+          <div style={{ background: 'var(--color-accent)', borderRadius: 'var(--radius)', padding: '40px 16px 12px', color: '#fff', fontSize: '12px' }}>Accent<br/>${accentHex}</div>
+${neutrals.map((n, i) => `          <div style={{ background: '${n.hex}', borderRadius: 'var(--radius)', padding: '40px 16px 12px', color: '${n.hsl.l > 50 ? '#000' : '#fff'}', fontSize: '12px' }}>Neutral ${i + 1}<br/>${n.hex}</div>`).join('\n')}
+        </div>
+      </section>
+
+      {/* Typography */}
+      <section style={{ padding: '48px 0' }}>
+        <h2 style={{ fontSize: '${headingScale[1]?.size || 24}px', fontWeight: 600, marginBottom: '24px' }}>Typography</h2>
+${headingScale.map((h, i) => `        <p style={{ fontSize: '${h.size}px', fontWeight: ${h.weight}, lineHeight: '${h.lineHeight}', marginBottom: '16px' }}>Heading ${i + 1} — ${h.size}px / ${h.weight}</p>`).join('\n')}
+        <p style={{ fontSize: '${bodySize}px', lineHeight: '1.6', color: 'var(--color-neutral-1)', marginTop: '24px' }}>
+          Body text at ${bodySize}px. This is what most content on the site looks like.
+          The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
+        </p>
+      </section>
+
+      {/* Cards */}
+      <section style={{ padding: '48px 0' }}>
+        <h2 style={{ fontSize: '${headingScale[1]?.size || 24}px', fontWeight: 600, marginBottom: '24px' }}>Cards</h2>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '24px' }}>
+          {[1, 2, 3].map(i => (
+            <div key={i} style={{
+              background: 'var(--color-background)',
+              border: '1px solid var(--color-neutral-${Math.min(neutrals.length, 3)})',
+              borderRadius: 'var(--radius)',
+              padding: '24px',
+              boxShadow: 'var(--shadow)',
+            }}>
+              <h3 style={{ fontSize: '${(headingScale[2]?.size || 18)}px', fontWeight: 600, marginBottom: '8px' }}>Card Title {i}</h3>
+              <p style={{ fontSize: '${bodySize}px', color: 'var(--color-neutral-1)', lineHeight: '1.5' }}>
+                This card uses the extracted border radius, shadow, and spacing values from the original site.
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer style={{ padding: '48px 0', borderTop: '1px solid var(--color-neutral-${Math.min(neutrals.length, 3)})', marginTop: '48px', textAlign: 'center' }}>
+        <p style={{ fontSize: '${bodySize - 2}px', color: 'var(--color-neutral-1)' }}>
+          Design extracted from ${design.meta.url} with <a href="https://github.com/Manavarya09/design-extract" style={{ color: 'var(--color-primary)' }}>designlang</a>
+        </p>
+      </footer>
+    </main>
+  );
+}
+`, 'utf-8');
+
+  // Next config
+  writeFileSync(join(projectDir, 'next.config.mjs'), `/** @type {import('next').NextConfig} */
+const nextConfig = {};
+export default nextConfig;
+`, 'utf-8');
+
+  // PostCSS config for Tailwind v4
+  writeFileSync(join(projectDir, 'postcss.config.mjs'), `const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+export default config;
+`, 'utf-8');
+
+  return {
+    dir: projectDir,
+    files: ['package.json', 'src/app/globals.css', 'src/app/layout.js', 'src/app/page.js', 'next.config.mjs', 'postcss.config.mjs'],
+  };
+}

package/src/crawler.js

@@ -203,6 +203,13 @@ async function extractPageData(page) {
         animation: cs.animation,
         display: cs.display,
         position: cs.position,
+        flexDirection: cs.flexDirection,
+        flexWrap: cs.flexWrap,
+        justifyContent: cs.justifyContent,
+        alignItems: cs.alignItems,
+        gridTemplateColumns: cs.gridTemplateColumns,
+        gridTemplateRows: cs.gridTemplateRows,
+        maxWidth: cs.maxWidth,
       });
     }
 

package/src/extractors/components.js

@@ -45,6 +45,92 @@ export function extractComponents(computedStyles) {
     };
   }
 
+  // Navigation
+  const navs = computedStyles.filter(el =>
+    el.tag === 'nav' || el.role === 'navigation' ||
+    /nav|navbar|header/i.test(el.classList)
+  );
+  if (navs.length > 0) {
+    components.navigation = {
+      count: navs.length,
+      baseStyle: mostCommonStyle(navs, ['backgroundColor', 'color', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'position', 'boxShadow']),
+    };
+  }
+
+  // Footer
+  const footers = computedStyles.filter(el =>
+    el.tag === 'footer' || el.role === 'contentinfo' ||
+    /footer/i.test(el.classList)
+  );
+  if (footers.length > 0) {
+    components.footer = {
+      count: footers.length,
+      baseStyle: mostCommonStyle(footers, ['backgroundColor', 'color', 'paddingTop', 'paddingBottom', 'fontSize']),
+    };
+  }
+
+  // Modals / Dialogs
+  const modals = computedStyles.filter(el =>
+    el.tag === 'dialog' || el.role === 'dialog' || el.role === 'alertdialog' ||
+    /modal|dialog|overlay|popup/i.test(el.classList)
+  );
+  if (modals.length > 0) {
+    components.modals = {
+      count: modals.length,
+      baseStyle: mostCommonStyle(modals, ['backgroundColor', 'borderRadius', 'boxShadow', 'paddingTop', 'paddingRight', 'maxWidth']),
+    };
+  }
+
+  // Dropdowns / Menus
+  const dropdowns = computedStyles.filter(el =>
+    el.role === 'menu' || el.role === 'listbox' ||
+    /dropdown|menu|popover|combobox/i.test(el.classList)
+  );
+  if (dropdowns.length > 0) {
+    components.dropdowns = {
+      count: dropdowns.length,
+      baseStyle: mostCommonStyle(dropdowns, ['backgroundColor', 'borderRadius', 'boxShadow', 'borderColor', 'paddingTop']),
+    };
+  }
+
+  // Tables
+  const tables = computedStyles.filter(el => el.tag === 'table' || el.role === 'table');
+  const tableCells = computedStyles.filter(el => ['td', 'th'].includes(el.tag));
+  if (tables.length > 0 || tableCells.length > 10) {
+    components.tables = {
+      count: tables.length,
+      cellCount: tableCells.length,
+      baseStyle: {
+        ...mostCommonStyle(tables, ['borderColor', 'backgroundColor']),
+        cellStyle: mostCommonStyle(tableCells, ['paddingTop', 'paddingRight', 'borderColor', 'fontSize']),
+      },
+    };
+  }
+
+  // Badges / Tags / Pills
+  const badges = computedStyles.filter(el =>
+    /badge|tag|pill|chip|label/i.test(el.classList) &&
+    el.area < 5000 && el.area > 100
+  );
+  if (badges.length > 0) {
+    components.badges = {
+      count: badges.length,
+      baseStyle: mostCommonStyle(badges, ['backgroundColor', 'color', 'fontSize', 'fontWeight', 'paddingTop', 'paddingRight', 'borderRadius']),
+    };
+  }
+
+  // Avatars
+  const avatars = computedStyles.filter(el =>
+    /avatar/i.test(el.classList) ||
+    (el.tag === 'img' && el.borderRadius === '9999px' && el.area < 10000 && el.area > 400)
+  );
+  if (avatars.length > 0) {
+    components.avatars = {
+      count: avatars.length,
+      baseStyle: mostCommonStyle(avatars, ['borderRadius', 'backgroundColor']),
+    };
+  }
+
   return components;
 }
 

package/src/extractors/interactions.js

@@ -0,0 +1,128 @@
+// Interaction state extraction — hover, focus, active styles
+
+import { chromium } from 'playwright';
+
+export async function captureInteractions(url, options = {}) {
+  const { width = 1280, height = 800, wait = 0 } = options;
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width, height } });
+  const page = await context.newPage();
+
+  await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+  if (wait > 0) await page.waitForTimeout(wait);
+  await page.evaluate(() => document.fonts.ready);
+
+  const results = { buttons: [], links: [], inputs: [] };
+
+  // Extract button states
+  const buttons = await page.$$('button, [role="button"], a[class*="btn"]');
+  for (const btn of buttons.slice(0, 10)) {
+    try {
+      const base = await getStyles(page, btn);
+      if (!base || base.display === 'none') continue;
+
+      // Hover
+      await btn.hover();
+      await page.waitForTimeout(100);
+      const hover = await getStyles(page, btn);
+
+      // Focus
+      await btn.focus();
+      await page.waitForTimeout(100);
+      const focus = await getStyles(page, btn);
+
+      const diffs = diffStates(base, hover, focus);
+      if (diffs.hasChanges) {
+        results.buttons.push({ text: base.text, base: base.styles, ...diffs });
+      }
+    } catch { /* skip */ }
+  }
+
+  // Extract link states
+  const links = await page.$$('a:not([role="button"]):not([class*="btn"])');
+  for (const link of links.slice(0, 10)) {
+    try {
+      const base = await getStyles(page, link);
+      if (!base || base.display === 'none') continue;
+
+      await link.hover();
+      await page.waitForTimeout(100);
+      const hover = await getStyles(page, link);
+
+      const diffs = diffStates(base, hover, null);
+      if (diffs.hasChanges) {
+        results.links.push({ text: base.text, base: base.styles, ...diffs });
+        break; // One link pattern is enough
+      }
+    } catch { /* skip */ }
+  }
+
+  // Extract input states
+  const inputs = await page.$$('input[type="text"], input[type="email"], input[type="search"], textarea');
+  for (const input of inputs.slice(0, 5)) {
+    try {
+      const base = await getStyles(page, input);
+      if (!base || base.display === 'none') continue;
+
+      await input.focus();
+      await page.waitForTimeout(100);
+      const focus = await getStyles(page, input);
+
+      const diffs = diffStates(base, null, focus);
+      if (diffs.hasChanges) {
+        results.inputs.push({ base: base.styles, ...diffs });
+        break; // One input pattern is enough
+      }
+    } catch { /* skip */ }
+  }
+
+  await browser.close();
+
+  return results;
+}
+
+async function getStyles(page, element) {
+  return element.evaluate(el => {
+    const cs = getComputedStyle(el);
+    if (cs.display === 'none' || cs.visibility === 'hidden') return null;
+    return {
+      text: el.textContent?.trim().slice(0, 30) || '',
+      display: cs.display,
+      styles: {
+        color: cs.color,
+        backgroundColor: cs.backgroundColor,
+        borderColor: cs.borderColor,
+        boxShadow: cs.boxShadow,
+        transform: cs.transform,
+        opacity: cs.opacity,
+        outline: cs.outline,
+        textDecoration: cs.textDecoration,
+        scale: cs.scale,
+      },
+    };
+  });
+}
+
+function diffStates(base, hover, focus) {
+  const result = { hasChanges: false, hover: {}, focus: {} };
+
+  if (hover) {
+    for (const [prop, val] of Object.entries(hover.styles)) {
+      if (val !== base.styles[prop] && val !== 'none' && val !== 'auto') {
+        result.hover[prop] = { from: base.styles[prop], to: val };
+        result.hasChanges = true;
+      }
+    }
+  }
+
+  if (focus) {
+    for (const [prop, val] of Object.entries(focus.styles)) {
+      if (val !== base.styles[prop] && val !== 'none' && val !== 'auto') {
+        result.focus[prop] = { from: base.styles[prop], to: val };
+        result.hasChanges = true;
+      }
+    }
+  }
+
+  return result;
+}

package/src/extractors/layout.js

@@ -0,0 +1,114 @@
+// Layout extraction — grid, flexbox, container patterns, structural design language
+
+export function extractLayout(computedStyles) {
+  const containers = [];
+  const gridPatterns = [];
+  const flexPatterns = [];
+  const columnCounts = new Map();
+
+  for (const el of computedStyles) {
+    const isGrid = el.display === 'grid' || el.display === 'inline-grid';
+    const isFlex = el.display === 'flex' || el.display === 'inline-flex';
+
+    if (isGrid) {
+      gridPatterns.push({
+        tag: el.tag,
+        classList: el.classList,
+        gridTemplateColumns: el.gridTemplateColumns || 'none',
+        gridTemplateRows: el.gridTemplateRows || 'none',
+        gap: el.gap,
+        area: el.area,
+      });
+
+      // Count column patterns
+      const cols = el.gridTemplateColumns;
+      if (cols && cols !== 'none') {
+        const colCount = cols.split(/\s+/).filter(v => v && v !== 'none').length;
+        if (colCount > 0) columnCounts.set(colCount, (columnCounts.get(colCount) || 0) + 1);
+      }
+    }
+
+    if (isFlex) {
+      flexPatterns.push({
+        tag: el.tag,
+        classList: el.classList,
+        flexDirection: el.flexDirection || 'row',
+        flexWrap: el.flexWrap || 'nowrap',
+        justifyContent: el.justifyContent || 'normal',
+        alignItems: el.alignItems || 'normal',
+        gap: el.gap,
+        area: el.area,
+      });
+    }
+
+    // Detect containers (large centered elements)
+    if (el.area > 100000 && el.maxWidth && el.maxWidth !== 'none') {
+      containers.push({
+        tag: el.tag,
+        classList: el.classList,
+        maxWidth: el.maxWidth,
+        paddingLeft: el.paddingLeft,
+        paddingRight: el.paddingRight,
+      });
+    }
+  }
+
+  // Summarize flex direction usage
+  const flexDirections = {};
+  for (const f of flexPatterns) {
+    const key = `${f.flexDirection}/${f.flexWrap}`;
+    flexDirections[key] = (flexDirections[key] || 0) + 1;
+  }
+
+  // Summarize justify/align patterns
+  const justifyPatterns = {};
+  const alignPatterns = {};
+  for (const f of flexPatterns) {
+    justifyPatterns[f.justifyContent] = (justifyPatterns[f.justifyContent] || 0) + 1;
+    alignPatterns[f.alignItems] = (alignPatterns[f.alignItems] || 0) + 1;
+  }
+
+  // Grid column summary
+  const gridColumns = [...columnCounts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map(([cols, count]) => ({ columns: cols, count }));
+
+  // Container widths
+  const containerWidths = [];
+  const widthSet = new Set();
+  for (const c of containers) {
+    if (!widthSet.has(c.maxWidth)) {
+      widthSet.add(c.maxWidth);
+      containerWidths.push({ maxWidth: c.maxWidth, padding: c.paddingLeft });
+    }
+  }
+
+  // Gap values
+  const gaps = new Set();
+  for (const el of [...gridPatterns, ...flexPatterns]) {
+    if (el.gap && el.gap !== 'normal' && el.gap !== '0px') {
+      gaps.add(el.gap);
+    }
+  }
+
+  return {
+    gridCount: gridPatterns.length,
+    flexCount: flexPatterns.length,
+    gridColumns,
+    flexDirections,
+    justifyPatterns,
+    alignPatterns,
+    containerWidths,
+    gaps: [...gaps].sort(),
+    // Sample grid patterns (top 5 by area)
+    topGrids: gridPatterns
+      .sort((a, b) => b.area - a.area)
+      .slice(0, 5)
+      .map(g => ({ columns: g.gridTemplateColumns, rows: g.gridTemplateRows, gap: g.gap })),
+    // Sample flex patterns (top 5 by area)
+    topFlex: flexPatterns
+      .sort((a, b) => b.area - a.area)
+      .slice(0, 5)
+      .map(f => ({ direction: f.flexDirection, wrap: f.flexWrap, justify: f.justifyContent, align: f.alignItems, gap: f.gap })),
+  };
+}