designlang 6.0.0 → 7.1.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/.vercel/README.txt

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".vercel" in my project?
+The ".vercel" folder is created when you link a directory to a Vercel project.
+
+> What does the "project.json" file contain?
+The "project.json" file contains:
+- The ID of the Vercel project that you linked ("projectId")
+- The ID of the user or team your Vercel project is owned by ("orgId")
+
+> Should I commit the ".vercel" folder?
+No, you should not share the ".vercel" folder with anyone.
+Upon creation, it will be automatically added to your ".gitignore" file.

package/.vercel/project.json

@@ -0,0 +1 @@
+{"projectId":"prj_g6gBbA5TU1e3vLtU6w8FHJhy9Wmk","orgId":"team_NOd0BEOy4vNKC9vTwIRo0qdF","projectName":"website"}

package/CHANGELOG.md

@@ -0,0 +1,58 @@
+# Changelog
+
+## [7.1.0] — 2026-04-19
+
+### Added
+
+- **Cookie file support** — `--cookie-file <path>` loads cookies from a JSON array, a Playwright `storageState.json`, or a Netscape `cookies.txt` (browser extensions, curl exports). The new loader lives in `src/utils-cookies.js` and merges cleanly with the existing `--cookie name=value` flag.
+- **`--insecure`** — ignores HTTPS/SSL certificate errors. Useful for self-signed dev servers, internal staging environments behind corporate proxies, and local extraction through MITM tools. Passes `ignoreHTTPSErrors: true` to the Playwright context plus the matching Chromium launch flags.
+- **`--user-agent <ua>`** — override the browser User-Agent string for extraction.
+- **Chrome extension** — `chrome-extension/` ships a Manifest v3 popup that hands the current tab off to [designlang.manavaryasingh.com](https://designlang.manavaryasingh.com) with the URL prefilled. Also emits a "Copy CLI" button that drops `npx designlang <url>` into the clipboard. Developer-mode install for now; Chrome Web Store listing pending.
+- **Website URL query parameter** — the extractor input on the hosted site now honours `?url=<encoded>` so the Chrome extension (and any deep link) can prefill.
+- **CONTRIBUTING**: "Good first issues" and "Credits" sections.
+
+### Thanks
+
+- A developer from China opened a conversation proposing cookie-file handling, SSL bypass, and a Chrome packaging story — this release ships all three.
+
+## [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/CONTRIBUTING.md

@@ -61,3 +61,28 @@ When filing a bug, please include:
 - One feature/fix per PR
 - Keep PRs focused and small when possible
 - Add a brief description of what changed and why
+
+## Good first issues
+
+Some work that's already scoped and ready for someone to pick up:
+
+- **Extra cookie formats** — add support for browser-specific exports (EditThisCookie, Cookie-Editor) on top of the existing JSON / Playwright / Netscape loaders in `src/utils-cookies.js`.
+- **Proxy support** — add `--proxy <url>` that passes through to Playwright's `proxy` launch option, paired with the existing `--insecure` flag for corporate networks.
+- **Chrome extension: DevTools panel** — extend `chrome-extension/` with a DevTools panel that shows tokens for the current tab without leaving the browser. See the roadmap in `chrome-extension/README.md`.
+- **Firefox + Edge packaging** — the manifest v3 extension already works in both; we just need store listings and icons.
+- **Additional CSS-in-JS emitters** — Emotion, Stitches, Vanilla Extract, Panda, styled-components. Each is a thin formatter module under `src/formatters/`.
+
+## Credits
+
+Shipped thanks to a few specific contributors — PRs welcome for the list:
+
+- [@Manavarya09](https://github.com/Manavarya09) — author, maintainer.
+- Community suggestions that landed as features: cookie-file loading, `--insecure` SSL bypass, and the first Chrome extension popup came from an external developer's proposal in mid-April 2026.
+
+If you open a PR or file an issue that materially shapes a release, we'll add you here.
+
+## Code of conduct
+
+Be decent. Disagreements about design, code, or approach are welcome — personal
+attacks are not. Maintainer reserves the right to close issues and PRs that
+don't engage in good faith.

package/README.md

@@ -1,13 +1,12 @@
 <p align="center">
-  <h1 align="center">DESIGNLANG</h1>
-  <p align="center">Reverse-engineer any website's complete design system in one command.</p>
+  <img src="website/public/logo-specimen.svg" alt="designlang — reads a website the way a developer reads a stylesheet" width="900">
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/designlang"><img src="https://img.shields.io/npm/v/designlang?color=blue&label=npm" alt="npm version"></a>
-  <a href="https://github.com/Manavarya09/design-extract/blob/main/LICENSE"><img src="https://img.shields.io/github/license/Manavarya09/design-extract" alt="license"></a>
-  <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/designlang" alt="node version"></a>
-  <a href="https://website-five-lime-65.vercel.app"><img src="https://img.shields.io/badge/website-live-red" alt="website"></a>
+  <a href="https://www.npmjs.com/package/designlang"><img src="https://img.shields.io/npm/v/designlang?color=0A0908&labelColor=F3F1EA&label=npm" alt="npm version"></a>
+  <a href="https://github.com/Manavarya09/design-extract/blob/main/LICENSE"><img src="https://img.shields.io/github/license/Manavarya09/design-extract?color=0A0908&labelColor=F3F1EA" alt="license"></a>
+  <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/designlang?color=0A0908&labelColor=F3F1EA" alt="node version"></a>
+  <a href="https://designlang.manavaryasingh.com/"><img src="https://img.shields.io/badge/website-live-FF4800?labelColor=F3F1EA" alt="website"></a>
 </p>
 
 ---
@@ -47,6 +46,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 +216,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 +339,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
 
@@ -262,8 +367,14 @@ Options:
   --interactions          Capture hover/focus/active states
   --full                  Enable all captures
   --cookie <cookies...>   Cookies for authenticated pages (name=value)
+  --cookie-file <path>    Load cookies from JSON / storageState / Netscape cookies.txt
   --header <headers...>   Custom headers (name:value)
+  --user-agent <ua>       Override the browser User-Agent string
+  --insecure              Ignore HTTPS/SSL certificate errors (self-signed, dev, proxies)
   --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 +387,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
@@ -343,7 +455,7 @@ In Claude Code, use `/extract-design <url>`.
 
 ## Website
 
-**[website-five-lime-65.vercel.app](https://website-five-lime-65.vercel.app)** — the brutalist product page.
+**[design-extract-beta.vercel.app](https://design-extract-beta.vercel.app)** — the brutalist product page.
 
 ## Contributing
 
@@ -351,4 +463,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';
@@ -60,8 +65,14 @@ program
   .option('--interactions', 'capture hover/focus/active states')
   .option('--full', 'enable all extra captures (screenshots, responsive, interactions)')
   .option('--cookie <cookies...>', 'cookies for authenticated pages (name=value)')
+  .option('--cookie-file <path>', 'load cookies from JSON, Playwright storageState, or Netscape cookies.txt')
   .option('--header <headers...>', 'custom headers (name:value)')
+  .option('--user-agent <ua>', 'override the browser User-Agent string')
+  .option('--insecure', 'ignore HTTPS/SSL certificate errors (self-signed, dev, proxies)')
   .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')
@@ -107,7 +118,19 @@ program
     try {
       spinner.text = `Crawling${merged.depth > 0 ? ` (depth: ${merged.depth})` : ''}...`;
       // Parse auth options
-      const cookies = merged.cookie || [];
+      const cliCookies = merged.cookie || [];
+      const fileCookies = [];
+      if (merged.cookieFile) {
+        try {
+          const { loadCookiesFromFile } = await import('../src/utils-cookies.js');
+          fileCookies.push(...loadCookiesFromFile(resolve(merged.cookieFile), url));
+        } catch (e) {
+          console.error(chalk.red(`\n  cookie-file load failed: ${e.message}\n`));
+          process.exit(1);
+        }
+      }
+      const { mergeCookies } = await import('../src/utils-cookies.js');
+      const cookies = mergeCookies(cliCookies, fileCookies, url);
       const headers = {};
       if (merged.header) {
         for (const h of merged.header) {
@@ -127,6 +150,8 @@ program
         ignore: merged.ignore,
         cookies: cookies.length > 0 ? cookies : undefined,
         headers: Object.keys(headers).length > 0 ? headers : undefined,
+        insecure: merged.insecure || false,
+        userAgent: merged.userAgent,
       });
 
       // Responsive capture
@@ -153,7 +178,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 +203,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 +284,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 +295,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 +778,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();

package/chrome-extension/README.md

@@ -0,0 +1,41 @@
+# designlang — Chrome extension
+
+Right-click → Extract design on any page. The extension opens
+[designlang.manavaryasingh.com](https://designlang.manavaryasingh.com) with the
+current tab's URL prefilled, so extraction starts with one click instead of
+switching windows and pasting.
+
+## Features
+
+- One-click handoff from any `http(s)://` page to the hosted extractor
+- "Copy CLI" button — drops `npx designlang <url>` straight into your clipboard
+- Zero tracking, zero analytics, zero permissions beyond `activeTab`
+
+## Install (developer mode, pending Chrome Web Store publish)
+
+1. Clone this repo.
+2. Open `chrome://extensions` in Chromium / Chrome / Edge / Arc / Brave.
+3. Toggle **Developer mode** (top right).
+4. Click **Load unpacked** and pick the `chrome-extension/` folder in this repo.
+5. Pin the extension from the puzzle-piece menu.
+
+## Permissions
+
+- `activeTab` — to read the URL of the tab you triggered the popup on.
+- `host_permissions` scoped to `https://designlang.manavaryasingh.com/*` for the
+  handoff.
+
+No content scripts, no remote code, no background service worker. The whole
+extension is ~3 KB of static HTML/JS/CSS.
+
+## Roadmap
+
+- Chrome Web Store listing.
+- Optional right-click context menu on links: *"Extract design from this link"*.
+- DevTools panel that shows the extracted tokens for the current tab alongside
+  the real DOM selector that produced them.
+- Firefox + Edge listings (the same MV3 manifest works for both).
+
+## Contributing
+
+PRs welcome. See the root [`CONTRIBUTING.md`](../CONTRIBUTING.md).

package/chrome-extension/icons/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="designlang">
+  <title>designlang</title>
+  <rect width="32" height="32" fill="#F3F1EA"/>
+  <circle cx="13" cy="20" r="7.5" fill="none" stroke="#0A0908" stroke-width="4.5"/>
+  <rect x="19" y="4" width="4.5" height="25" fill="#0A0908"/>
+  <rect x="25" y="25" width="4" height="4" fill="#FF4800"/>
+</svg>