designlang 6.0.0 → 7.0.0

package/.github/FUNDING.yml

@@ -0,0 +1 @@
+github: [Manavarya09]

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,62 @@
+name: Bug report
+description: Something in designlang is broken or produces wrong output.
+title: "[Bug]: "
+labels: ["bug"]
+body:
+  - type: input
+    id: url
+    attributes:
+      label: URL extracted
+      description: The site you ran designlang against.
+      placeholder: https://example.com
+    validations:
+      required: true
+  - type: input
+    id: command
+    attributes:
+      label: Command used
+      description: The exact command you ran.
+      placeholder: npx designlang https://example.com --full
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: What you expected
+    validations:
+      required: true
+  - type: textarea
+    id: actual
+    attributes:
+      label: What actually happened
+      description: Include stack traces, log output, or relevant snippets from output files.
+    validations:
+      required: true
+  - type: input
+    id: version
+    attributes:
+      label: designlang version
+      description: Output of `npx designlang --version` (or the version in package.json)
+      placeholder: 7.0.0
+    validations:
+      required: true
+  - type: input
+    id: node
+    attributes:
+      label: Node.js version
+      description: Output of `node --version`
+      placeholder: v20.11.0
+    validations:
+      required: true
+  - type: input
+    id: os
+    attributes:
+      label: OS
+      placeholder: macOS 14.5 / Ubuntu 22.04 / Windows 11
+    validations:
+      required: true
+  - type: textarea
+    id: extra
+    attributes:
+      label: Anything else
+      description: Screenshots, env variables, network constraints, auth requirements, etc.

package/.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Question or discussion
+    url: https://github.com/Manavarya09/design-extract/discussions
+    about: Ask a question, share an extraction, or discuss ideas.
+  - name: designlang website
+    url: https://website-five-lime-65.vercel.app
+    about: Read more about what designlang does.

package/.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,28 @@
+name: Feature request
+description: Suggest a new extraction, output format, or CLI capability.
+title: "[Feature]: "
+labels: ["enhancement"]
+body:
+  - type: textarea
+    id: problem
+    attributes:
+      label: Problem
+      description: What are you trying to do that designlang doesn't support today?
+    validations:
+      required: true
+  - type: textarea
+    id: proposal
+    attributes:
+      label: Proposal
+      description: What should designlang do? CLI flag, command, new extractor, new output format?
+    validations:
+      required: true
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives you've considered
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional context
+      description: Example sites, example outputs, links to similar tools, screenshots.

package/CHANGELOG.md

@@ -0,0 +1,43 @@
+# Changelog
+
+## [7.0.0] — 2026-04-18
+
+### Breaking
+
+- **Design token JSON format** — the default `*-design-tokens.json` now follows the W3C Design Tokens Community Group (DTCG) v1 spec: every leaf is `{ "$value": ..., "$type": ... }`, with two layers (`primitive.*` and `semantic.*`) and composite tokens for typography, shadow, border, and gradient. If a downstream consumer expects the pre-v7 flat shape, pass `--tokens-legacy` to preserve it.
+
+  Before (v6):
+  ```json
+  { "color": { "primary": "#3b82f6" }, "fontFamily": { "sans": "Inter" } }
+  ```
+
+  After (v7, default):
+  ```json
+  {
+    "$metadata": { "generator": "designlang", "version": "7.0.0" },
+    "primitive": { "color": { "brand": { "primary": { "$value": "#3b82f6", "$type": "color" } } } },
+    "semantic":  { "color": { "action": { "primary": { "$value": "{primitive.color.brand.primary}", "$type": "color" } } } }
+  }
+  ```
+
+  Migration: either (a) update consumers to read the DTCG shape (recommended — long-term stable, ecosystem-compatible), or (b) add `--tokens-legacy` to the CLI invocation.
+
+### Added
+
+- **MCP server** — new `designlang mcp --output-dir <dir>` subcommand. Stdio JSON-RPC. Resources: `designlang://tokens/primitive`, `designlang://tokens/semantic`, `designlang://regions`, `designlang://components`, `designlang://health`. Tools: `search_tokens`, `find_nearest_color`, `get_region`, `get_component`, `list_failing_contrast_pairs`.
+- **Agent rules emitter** — `--emit-agent-rules` writes `.cursor/rules/designlang.mdc`, `.claude/skills/designlang/SKILL.md`, `CLAUDE.md.fragment`, and `agents.md`. All four template from the resolved semantic tokens.
+- **Multi-platform emitters** — `--platforms <csv>` (values `web`, `ios`, `android`, `flutter`, `wordpress`, `all`). Additive to default web output. Emits iOS SwiftUI, Android Compose + XML, Flutter Dart + ThemeData, and a full WordPress block-theme skeleton (`theme.json` v3, `style.css`, `functions.php`, `index.php`, `templates/index.html`).
+- **Stack + Tailwind fingerprint** — framework detection, Tailwind utility-class frequency map, analytics stack inventory. Surfaced on `design.stack`.
+- **CSS health audit** — specificity distribution, `!important` count, duplicate declarations, unused CSS via Playwright Coverage API, `@keyframes` catalog, vendor-prefix audit. Surfaced on `design.cssHealth` and added as an additive `cssHealth` dimension in the design score.
+- **A11y remediation** — for every failing WCAG contrast pair, suggests the nearest palette color that passes AA (4.5:1 / 3:1) or AAA (7:1 / 4.5:1). Surfaced on `design.accessibility.remediation`.
+- **Semantic regions** — classifies page sections into `nav`, `hero`, `features`, `pricing`, `testimonials`, `cta`, `footer`, `sidebar`, `content`. Surfaced on `design.regions`.
+- **Reusable component detection** — DOM subtree structural hash + cosine-similarity style vector clustering with variant detection. Surfaced on `design.componentClusters` and rendered in the markdown output.
+- **MCP companion file** — `*-mcp.json` written at extract time so later `designlang mcp` invocations can serve regions / components / health / remediation from disk, not just memory.
+
+### Dependencies
+
+- Added `@modelcontextprotocol/sdk` (runtime).
+
+### Tests
+
+- 241/241 passing (baseline 186 + 55 new tests).

package/README.md

@@ -47,6 +47,8 @@ npx designlang https://stripe.com --full
 
 The markdown output has **19 sections**: Color Palette, Typography, Spacing, Border Radii, Box Shadows, CSS Custom Properties, Breakpoints, Transitions & Animations, Component Patterns (with full CSS snippets), Layout System, Responsive Design, Interaction States, Accessibility (WCAG 2.1), Gradients, Z-Index Map, SVG Icons, Font Files, Image Style Patterns, and Quick Start.
 
+In v7 a companion `*-mcp.json` file is also written alongside the 8 outputs so that `designlang mcp` can serve regions, components, and health data from disk on later invocations. Opting into `--platforms <csv>` additively emits `ios/`, `android/`, `flutter/`, and/or `wordpress-theme/` directories in the output folder, and `--emit-agent-rules` adds a `.cursor/`, `.claude/`, `CLAUDE.md.fragment`, and `agents.md` set.
+
 ## Install
 
 ```bash
@@ -215,6 +217,101 @@ Compare light and dark mode side-by-side — see exactly which colors change and
 designlang https://vercel.com --dark
 ```
 
+### 17. MCP Server (NEW in v7)
+
+One-command integration with any MCP-aware AI agent (Cursor, Claude Code, Windsurf, and more):
+
+```bash
+designlang mcp --output-dir ./design-extract-output
+```
+
+Launches a stdio JSON-RPC server that exposes the extracted design as MCP resources and tools.
+
+**Resources:**
+
+- `designlang://tokens/primitive` — primitive token layer
+- `designlang://tokens/semantic` — semantic token layer (with DTCG alias references)
+- `designlang://regions` — classified page regions (nav, hero, pricing, etc.)
+- `designlang://components` — reusable component clusters with variants
+- `designlang://health` — CSS health audit
+
+**Tools:**
+
+- `search_tokens` — query tokens by name, value, or type
+- `find_nearest_color` — snap any color to the nearest palette token
+- `get_region` — fetch a classified region by name
+- `get_component` — fetch a component cluster by id
+- `list_failing_contrast_pairs` — list every WCAG-failing fg/bg pair with remediation suggestions
+
+### 18. Multi-Platform Output (NEW in v7)
+
+Emit iOS SwiftUI, Android Compose, Flutter, and WordPress block-theme files in a single run, in addition to the default web output:
+
+```bash
+designlang https://stripe.com --platforms all
+```
+
+Resulting tree:
+
+```
+design-extract-output/
+├── stripe-com-*.{md,json,css,js,html}    (default web output)
+├── ios/
+│   └── DesignTokens.swift
+├── android/
+│   ├── Theme.kt
+│   ├── colors.xml
+│   └── dimens.xml
+├── flutter/
+│   └── design_tokens.dart               (+ buildDesignlangTheme())
+└── wordpress-theme/
+    ├── theme.json
+    ├── style.css
+    ├── functions.php
+    ├── index.php
+    └── templates/index.html
+```
+
+Values for `--platforms` are any comma-separated subset of `web,ios,android,flutter,wordpress,all`. The flag is additive — the default web output is always emitted.
+
+### 19. Agent Rules Emitter (NEW in v7)
+
+Write agent-facing rule files generated from the resolved semantic tokens:
+
+```bash
+designlang https://stripe.com --emit-agent-rules
+```
+
+Writes:
+
+- `.cursor/rules/designlang.mdc` — Cursor rule
+- `.claude/skills/designlang/SKILL.md` — Claude Code skill
+- `CLAUDE.md.fragment` — snippet you can paste into your project's CLAUDE.md
+- `agents.md` — generic, vendor-neutral agent guidance
+
+Each file is templated from the semantic layer of the extracted token set, so the agent sees real token names and values — not placeholders.
+
+### 20. Stack + Tailwind Fingerprint (NEW in v7)
+
+Automatic framework, utility-class, and analytics detection surfaced on `design.stack`:
+
+- **Framework**: Next.js, Nuxt, Gatsby, Remix, Astro, Shopify, WordPress, Framer, Webflow, and more.
+- **Tailwind**: when Tailwind is in use, records utility-class frequency so you see which utilities drive the design.
+- **Analytics**: inventory of analytics scripts — GA4, Plausible, PostHog, Segment, Mixpanel, Amplitude, and friends.
+
+### 21. CSS Health Audit (NEW in v7)
+
+A dedicated audit pass surfaced on `design.cssHealth`:
+
+- Specificity graph (distribution, hotspots)
+- `!important` count
+- Duplicate declarations
+- Unused CSS via the Playwright Coverage API
+- `@keyframes` catalog
+- Vendor-prefix audit
+
+Also contributes a `cssHealth` dimension to the overall design score.
+
 ## All Features
 
 | Feature | Flag / Command | Description |
@@ -243,6 +340,15 @@ designlang https://vercel.com --dark
 | Multi-brand | `designlang brands <urls...>` | N-site comparison matrix |
 | Sync | `designlang sync <url>` | Update local tokens from live site |
 | History | `designlang history <url>` | Track design changes over time |
+| MCP server | `designlang mcp` | Expose extraction as MCP resources + tools |
+| Multi-platform | `--platforms <csv>` | Emit iOS / Android / Flutter / WordPress outputs |
+| Agent rules | `--emit-agent-rules` | Cursor, Claude Code, generic agent rule files |
+| Stack fingerprint | automatic | Framework + Tailwind + analytics detection |
+| CSS health | automatic | Specificity, !important, unused CSS, keyframes |
+| A11y remediation | automatic | Nearest palette color passing AA / AAA for every failing pair |
+| Semantic regions | automatic | nav / hero / pricing / testimonials / cta / footer classification |
+| Reusable components | automatic | DOM subtree + style-vector clustering with variants |
+| DTCG tokens | default | W3C Design Tokens v1 with semantic + composite layers (`--tokens-legacy` for pre-v7) |
 
 ## Full CLI Reference
 
@@ -264,6 +370,9 @@ Options:
   --cookie <cookies...>   Cookies for authenticated pages (name=value)
   --header <headers...>   Custom headers (name:value)
   --framework <type>      Only generate specific theme (react, shadcn)
+  --platforms <csv>       Additional platforms: web,ios,android,flutter,wordpress,all (additive)
+  --emit-agent-rules      Emit Cursor / Claude Code / CLAUDE.md / agents.md rule files
+  --tokens-legacy         Emit pre-v7 flat design-tokens.json shape (backward compat)
   --no-history            Skip saving to history
   --verbose               Detailed progress output
 
@@ -276,6 +385,7 @@ Commands:
   brands <urls...>        Multi-brand comparison matrix
   sync <url>              Sync local tokens with live site
   history <url>           View design change history
+  mcp                     Launch stdio MCP server (--output-dir <dir>)
 ```
 
 ## Example Output
@@ -351,4 +461,4 @@ See [CONTRIBUTING.md](CONTRIBUTING.md). PRs welcome!
 
 ## License
 
-[MIT](LICENSE) - Manavarya Singh
+[MIT](LICENSE) - Manav Arya Singh

package/bin/design-extract.js

@@ -8,14 +8,19 @@ import ora from 'ora';
 import { extractDesignLanguage } from '../src/index.js';
 import { formatMarkdown } from '../src/formatters/markdown.js';
 import { formatTokens } from '../src/formatters/tokens.js';
+import { formatDtcgTokens } from '../src/formatters/dtcg-tokens.js';
 import { formatTailwind } from '../src/formatters/tailwind.js';
 import { formatCssVars } from '../src/formatters/css-vars.js';
 import { formatPreview } from '../src/formatters/preview.js';
 import { formatFigma } from '../src/formatters/figma.js';
 import { formatReactTheme, formatShadcnTheme } from '../src/formatters/theme.js';
-import { formatWordPress } from '../src/formatters/wordpress.js';
+import { formatWordPress, formatWordPressTheme } from '../src/formatters/wordpress.js';
+import { formatIosSwiftUI } from '../src/formatters/ios-swiftui.js';
+import { formatAndroidCompose } from '../src/formatters/android-compose.js';
+import { formatFlutterDart } from '../src/formatters/flutter-dart.js';
 import { formatVueTheme } from '../src/formatters/vue-theme.js';
 import { formatSvelteTheme } from '../src/formatters/svelte-theme.js';
+import { formatAgentRules } from '../src/formatters/agent-rules.js';
 import { loadConfig, mergeConfig } from '../src/config.js';
 import { diffDesigns, formatDiffMarkdown, formatDiffHtml } from '../src/diff.js';
 import { saveSnapshot, getHistory, formatHistoryMarkdown } from '../src/history.js';
@@ -62,6 +67,9 @@ program
   .option('--cookie <cookies...>', 'cookies for authenticated pages (name=value)')
   .option('--header <headers...>', 'custom headers (name:value)')
   .option('--ignore <selectors...>', 'CSS selectors to remove before extraction')
+  .option('--tokens-legacy', 'Emit pre-v7 flat token JSON (backward compat)')
+  .option('--platforms <csv>', 'Additional platforms: web,ios,android,flutter,wordpress,all (web is always emitted)', 'web')
+  .option('--emit-agent-rules', 'Emit Cursor/Claude Code/generic agent rules')
   .option('--json', 'output raw JSON to stdout (for CI/CD)')
   .option('--json-pretty', 'output formatted JSON to stdout')
   .option('--no-history', 'skip saving to history')
@@ -153,7 +161,7 @@ program
 
       const files = [
         { name: `${prefix}-design-language.md`, content: formatMarkdown(design), label: 'Markdown (AI-optimized)' },
-        { name: `${prefix}-design-tokens.json`, content: formatTokens(design), label: 'Design Tokens (W3C)' },
+        { name: `${prefix}-design-tokens.json`, content: merged.tokensLegacy ? formatTokens(design) : JSON.stringify(formatDtcgTokens(design), null, 2), label: merged.tokensLegacy ? 'Design Tokens (legacy)' : 'Design Tokens (DTCG v1)' },
         { name: `${prefix}-tailwind.config.js`, content: formatTailwind(design), label: 'Tailwind Config' },
         { name: `${prefix}-variables.css`, content: formatCssVars(design), label: 'CSS Variables' },
         { name: `${prefix}-preview.html`, content: formatPreview(design), label: 'Visual Preview' },
@@ -178,10 +186,72 @@ program
       // WordPress theme (always generated)
       files.push({ name: `${prefix}-wordpress-theme.json`, content: formatWordPress(design), label: 'WordPress Theme' });
 
+      // MCP companion — the subset of `design` the MCP server serves when a
+      // user runs `designlang mcp --output-dir <dir>` later.
+      const mcpPayload = {
+        colors: { all: design.colors?.all || [] },
+        regions: design.regions || [],
+        componentClusters: design.componentClusters || [],
+        accessibility: { remediation: design.accessibility?.remediation || [] },
+        cssHealth: design.cssHealth || null,
+      };
+      files.push({ name: `${prefix}-mcp.json`, content: JSON.stringify(mcpPayload, null, 2), label: 'MCP companion' });
+
       for (const file of files) {
         writeFileSync(join(outDir, file.name), file.content, 'utf-8');
       }
 
+      // Multi-platform emission (v7.0). web is already emitted above.
+      const platforms = merged.platforms || ['web'];
+      const dtcgTokens = formatDtcgTokens(design);
+      const platformFiles = [];
+      if (platforms.includes('ios')) {
+        const dir = join(outDir, 'ios');
+        mkdirSync(dir, { recursive: true });
+        const path = join(dir, 'DesignTokens.swift');
+        writeFileSync(path, formatIosSwiftUI(dtcgTokens), 'utf-8');
+        platformFiles.push({ path, label: 'iOS SwiftUI' });
+      }
+      if (platforms.includes('android')) {
+        const dir = join(outDir, 'android');
+        mkdirSync(dir, { recursive: true });
+        const out = formatAndroidCompose(dtcgTokens);
+        for (const name of Object.keys(out)) {
+          const p = join(dir, name);
+          writeFileSync(p, out[name], 'utf-8');
+          platformFiles.push({ path: p, label: `Android (${name})` });
+        }
+      }
+      if (platforms.includes('flutter')) {
+        const dir = join(outDir, 'flutter');
+        mkdirSync(dir, { recursive: true });
+        const p = join(dir, 'design_tokens.dart');
+        writeFileSync(p, formatFlutterDart(dtcgTokens), 'utf-8');
+        platformFiles.push({ path: p, label: 'Flutter Dart' });
+      }
+      if (platforms.includes('wordpress')) {
+        const dir = join(outDir, 'wordpress-theme');
+        mkdirSync(dir, { recursive: true });
+        const out = formatWordPressTheme(dtcgTokens, design);
+        for (const name of Object.keys(out)) {
+          const p = join(dir, name);
+          mkdirSync(join(p, '..'), { recursive: true });
+          writeFileSync(p, out[name], 'utf-8');
+          platformFiles.push({ path: p, label: `WordPress (${name})` });
+        }
+      }
+
+      // Agent rules (opt-in, also enabled by --full)
+      if (merged.emitAgentRules || merged.full) {
+        const agentFiles = formatAgentRules({ design, tokens: dtcgTokens, url });
+        for (const rel of Object.keys(agentFiles)) {
+          const p = join(outDir, rel);
+          mkdirSync(join(p, '..'), { recursive: true });
+          writeFileSync(p, agentFiles[rel], 'utf-8');
+          platformFiles.push({ path: p, label: `Agent rules (${rel})` });
+        }
+      }
+
       // Save to history
       if (opts.history !== false) {
         const histInfo = saveSnapshot(design);
@@ -197,6 +267,9 @@ program
         for (const file of files) {
           console.log(join(outDir, file.name));
         }
+        for (const pf of platformFiles) {
+          console.log(pf.path);
+        }
       } else {
         console.log('');
         console.log(chalk.bold('  Output files:'));
@@ -205,6 +278,9 @@ program
           const sizeStr = size > 1024 ? `${(size / 1024).toFixed(1)}KB` : `${size}B`;
           console.log(`  ${chalk.green('✓')} ${chalk.cyan(file.name)} ${chalk.gray(`(${sizeStr})`)} — ${file.label}`);
         }
+        for (const pf of platformFiles) {
+          console.log(`  ${chalk.green('✓')} ${chalk.cyan(pf.path)} — ${pf.label}`);
+        }
         if (opts.screenshots && design.componentScreenshots && Object.keys(design.componentScreenshots).length > 0) {
           for (const [, info] of Object.entries(design.componentScreenshots)) {
             console.log(`  ${chalk.green('✓')} ${chalk.cyan(info.path)} — ${info.label} screenshot`);
@@ -685,4 +761,14 @@ program
     }
   });
 
+// ── MCP server command ─────────────────────────────────────
+program
+  .command('mcp')
+  .description('Launch designlang MCP server over stdio (exposes latest extraction as resources + tools)')
+  .option('--output-dir <path>', 'Source extraction directory', './design-extract-output')
+  .action(async (opts) => {
+    const { run } = await import('../src/mcp/server.js');
+    await run(opts);
+  });
+
 program.parse();