feat(v12): chat REPL + permalinks + gallery + spec + distribution prep

The "best in the game" release: takes designlang from one-shot extractor
to iterative + shareable + standardized + distributed.

ITERATIVE — designlang chat
- src/chat.js: REPL over a live extraction. Heuristic-only router
  parses natural-ish English ("make it brutalist", "primary #ff4800",
  "sharpen radii", "dark mode") into structured operations on the
  design object. Re-derives DTCG / Tailwind / CSS vars / DESIGN.md
  on `save`. Loads from URL or existing *-design-tokens.json.
- bin: new `chat <target>` subcommand. ~360 lines, zero new deps.

SHAREABLE — permalinks
- website/lib/cache.js: getCachedByHash + listRecent helpers over
  the existing Blob cache (24h TTL), no new infra.
- website/lib/build-files.js: shared file-builder used by both
  /api/extract (streaming) and /x/[hash] (permalink page).
- website/app/x/[hash]/page.js + PermalinkViewer.js: every cached
  extraction is now a stable URL. Stat strip + Copy permalink CTA +
  the same 12-tab ResultViewer.
- /api/extract emits a `permalink` event up front; HeroExtractor
  rewrites the URL bar via history.replaceState so refresh-and-share
  works mid-stream.
- website/app/gallery/page.js: public directory of recent extractions,
  palette-strip cards, relative timestamps, intent + material + library
  signals. ISR-cached every 10 min.

STANDARDIZED — DESIGN.md spec
- website/app/spec/page.js: formal spec doc. Eight canonical sections,
  YAML front-matter schema, reference implementation pointer, CC BY 4.0
  license, credit to design-extractor.com for pioneering the format.
- website/public/badge.svg: embeddable Verified badge (paper + ink + accent).
- Sitemap + robots updated with /spec, /gallery.

DISTRIBUTED — submission playbook
- marketplace/SUBMISSION-PLAYBOOK.md: ordered list of 6 marketplaces
  with click-time estimates and review-queue waits.
- marketplace/{figma,cursor,vscode,claude-code-skill,raycast,chrome}-listing.md:
  pre-written listing copy, manifests, screenshot briefs, tweet drafts
  for each. Click "submit" tomorrow morning; nothing left to write.

Home nav: Gallery + Spec links added; v11 → v12 label.
Tests: 317/317 pass.

Author: Manavarya09

bin/design-extract.js

@@ -1085,6 +1085,21 @@ program
     }
   });
 
+// ── Chat — REPL over a live extraction (v12) ──────────────
+program
+  .command('chat <target>')
+  .description('Interactive REPL over an extraction. <target> is either a URL or a path to an existing *-design-tokens.json file.')
+  .option('-o, --out <dir>', 'output directory for `save`', './chat-output')
+  .action(async (target, opts) => {
+    try {
+      const { runChat } = await import('../src/chat.js');
+      await runChat(target, opts);
+    } catch (err) {
+      console.error(chalk.red(`\n  ${err.message}\n`));
+      process.exit(1);
+    }
+  });
+
 // ── Replay — record a short WebM of motion from a URL ─────
 program
   .command('replay <url>')

marketplace/SUBMISSION-PLAYBOOK.md

@@ -0,0 +1,95 @@
+# designlang — Distribution Submission Playbook
+
+Submit each marketplace below. All listing copy + manifests are pre-written.
+Review queues take 1–7 days; this playbook is everything you need to click "submit".
+
+---
+
+## 1. Figma Community (`figma-plugin/`)
+
+**Goal:** publicly listed in the Figma Community plugin store.
+
+**Steps:**
+1. Open Figma Desktop → Community → Publish a plugin.
+2. Upload from local: `figma-plugin/`.
+3. Use the title, tagline, description, tags, and cover-image brief from `marketplace/figma-listing.md`.
+4. Screenshots: take 4 from the live extraction studio.
+5. Submit. Review queue: 3–7 days.
+
+---
+
+## 2. Cursor — Custom Tool listing
+
+**Goal:** Cursor users can `Cmd+Shift+P → designlang: Extract` from any URL.
+
+**Steps:**
+1. Read `marketplace/cursor-listing.md`.
+2. The provided `mcp.json` snippet is what users paste into `~/.cursor/mcp.json`.
+3. We don't submit to Cursor's marketplace directly (no formal review process yet);
+   the MCP integration is documented and self-served. Promotion = blog post + tweet.
+
+---
+
+## 3. VS Code Marketplace (`vscode-extension/`)
+
+**Goal:** publicly listed at marketplace.visualstudio.com/items?itemName=designlang.
+
+**Steps:**
+1. Install `vsce` once: `npm install -g @vscode/vsce`.
+2. From `vscode-extension/`: `vsce package` → produces `.vsix`.
+3. Create publisher account: <https://marketplace.visualstudio.com/manage>.
+4. `vsce publish` (or upload the `.vsix` via the dashboard).
+5. Use the listing copy from `marketplace/vscode-listing.md`.
+6. Review queue: ~24h.
+
+---
+
+## 4. Claude Code Skill registry
+
+**Goal:** designlang appears in the official Claude Code skills list.
+
+**Steps:**
+1. Read `marketplace/claude-code-skill.md` — it contains the SKILL.md the registry expects.
+2. The SKILL.md is already emitted by `designlang <url> --emit-agent-rules` at
+   `.claude/skills/designlang/SKILL.md`. We submit a copy at the project root for discovery.
+3. Open a PR against <https://github.com/anthropics/claude-code-skills> (or the
+   then-current registry repo) — title: "Add: designlang skill".
+
+---
+
+## 5. Raycast Store (`raycast-extension/`)
+
+**Goal:** designlang as a one-keystroke Raycast command.
+
+**Steps:**
+1. Read `marketplace/raycast-listing.md`.
+2. From `raycast-extension/`: follow Raycast's contribution guide
+   <https://developers.raycast.com/basics/publish-an-extension>.
+3. PR to <https://github.com/raycast/extensions>.
+4. Review queue: 5–14 days.
+
+---
+
+## 6. Chrome Web Store (`chrome-extension/`)
+
+**Goal:** one-click extract from any tab via the Chrome toolbar.
+
+**Steps:**
+1. Read `marketplace/chrome-listing.md`.
+2. Zip `chrome-extension/`: `cd chrome-extension && zip -r ../designlang-chrome.zip .`.
+3. Upload at <https://chrome.google.com/webstore/devconsole>. ($5 one-time dev fee.)
+4. Review queue: 1–3 days.
+
+---
+
+## Sequencing
+
+Do them in this order — easiest payoff first, most setup last:
+1. **Cursor MCP** (no review, just docs + tweet — ship today).
+2. **Chrome Web Store** ($5 fee, 1–3 day review — submit today).
+3. **VS Code Marketplace** (free, ~24h review — submit today).
+4. **Figma Community** (free, 3–7 day review — submit today).
+5. **Claude Code Skills registry** (PR-based, async — submit this week).
+6. **Raycast Store** (PR-based, 5–14 day review — submit this week).
+
+Total click-time across all six: ~90 minutes. The wall-clock for everything to be live: ~2 weeks.

marketplace/chrome-listing.md

@@ -0,0 +1,45 @@
+# Chrome Web Store — designlang extension
+
+## Name
+
+designlang — Extract design system from this tab
+
+## Summary (max 132 chars)
+
+One click to extract any website's design system: tokens, typography, spacing, components, voice. $0, no account, MIT.
+
+## Description (long)
+
+designlang lives in your Chrome toolbar. Click the icon on any tab; the active URL is sent to designlang.app, which runs a Playwright extraction and opens the result inline as tabs (DESIGN.md, DTCG tokens, Tailwind, CSS variables, Figma variables, and 7 more).
+
+Permissions:
+• `activeTab` — read the URL of the current tab. Nothing else.
+
+Use cases:
+• Read a competitor's design tokens in 5 seconds
+• Pull a Tailwind config off any production site
+• Generate a DESIGN.md for AI coding agents (Claude Code, Cursor, Windsurf)
+• One-click copy hex / radius / shadow values
+• Import a Figma Variable collection from any URL
+
+Open source: https://github.com/Manavarya09/design-extract
+
+## Category
+
+Developer Tools
+
+## Languages
+
+English
+
+## Screenshots (4 — 1280x800)
+
+1. Browser tab on a real site (e.g. Stripe), with the designlang toolbar icon highlighted.
+2. The same tab after clicking — designlang.app opens with extraction in progress (token paint streaming).
+3. The result viewer with the DESIGN.md tab active, source code visible, copy/download buttons.
+4. The result viewer on the Tailwind config tab, showing extracted palette + scale.
+
+## Submission
+
+ZIP the `chrome-extension/` directory, upload at <https://chrome.google.com/webstore/devconsole>.
+$5 one-time developer fee.

marketplace/claude-code-skill.md

@@ -0,0 +1,52 @@
+# Claude Code Skills registry — designlang
+
+## Skill name
+
+designlang
+
+## SKILL.md (the file the registry expects)
+
+```markdown
+---
+name: designlang
+description: Reverse-engineer any website into a complete design system. Outputs DTCG W3C tokens, motion, anatomy, voice, page intent, material language, plus a single agent-native DESIGN.md and a one-command Next.js clone. Use when the user wants to extract, mirror, or compare design tokens against a live URL.
+when_to_use: |
+  Use this skill when the user wants to:
+  - Extract design tokens, palette, typography, or shadows from a public website
+  - Generate a DESIGN.md for an existing site (agent-native single-file artifact)
+  - Clone a website's design as a runnable Next.js starter
+  - Compare local tokens against a deployed site (drift detection)
+  - Import a website's tokens into Figma, Tailwind, iOS, Android, Flutter, or WordPress
+arguments:
+  - name: url
+    description: Public URL of the site to extract from.
+    required: true
+---
+
+# designlang skill
+
+`npx designlang <url>` runs a Playwright extraction and writes ~25 files
+(DTCG tokens, Tailwind, CSS vars, Figma vars, motion, anatomy, voice,
+intent, material, library detection, prompt pack for v0/Lovable/Cursor,
+plus the single-file `DESIGN.md`).
+
+Sub-commands:
+- `designlang clone <url>` — generates a working Next.js repo from the extraction
+- `designlang ci <url> --tokens ./tokens.json` — drift bot, writes a PR-comment markdown
+- `designlang studio` — local web studio over the latest extraction
+- `designlang chat <url>` — REPL with mutations (sharpen / soften / dark / brutalist / glass / swap-color / swap-font)
+- `designlang mcp` — stdio MCP server
+
+For agent rules and ready-to-paste prompts, run with `--emit-agent-rules` or read
+the `*-prompts/` directory.
+
+The full spec for `DESIGN.md` is at <https://designlang.app/spec>.
+```
+
+## Submission flow
+
+1. Fork <https://github.com/anthropics/claude-code> (or the then-current registry repo).
+2. Add `skills/designlang/SKILL.md` with the content above.
+3. PR title: `Add: designlang skill`.
+4. PR body: link to <https://designlang.app>, describe the surface, mention 1.6k stars + 5K npm downloads.
+5. Tag the PR with `skill` and `community`.

marketplace/cursor-listing.md

@@ -0,0 +1,55 @@
+# Cursor — designlang MCP integration
+
+## What it gives the user
+
+Inside Cursor (and Windsurf, and Claude Desktop), `designlang` exposes the **last extraction** as a live MCP resource. Cursor can read tokens, regions, components, and CSS health without re-extracting, and call MCP tools to refine the design (`designlang chat` ops are wired here).
+
+## Install (paste into `~/.cursor/mcp.json`)
+
+```json
+{
+  "mcpServers": {
+    "designlang": {
+      "command": "npx",
+      "args": ["-y", "designlang", "mcp", "--output-dir", "./design-extract-output"]
+    }
+  }
+}
+```
+
+## What Cursor sees
+
+Resources:
+- `designlang://latest/tokens` — DTCG W3C token tree of the most recent extraction
+- `designlang://latest/regions` — semantic region map (nav, hero, pricing, …)
+- `designlang://latest/components` — component clusters with variant/size/state
+- `designlang://latest/css-health` — specificity graph + unused-CSS report
+- `designlang://latest/design-md` — the agent-native single-file artifact
+
+Tools:
+- `designlang_extract` — paste a URL, get tokens
+- `designlang_chat` — apply mutations (sharpen / soften / dark / brutalist / glass / swap-color / swap-font)
+- `designlang_clone` — generate a working Next.js repo from a URL
+- `designlang_drift` — compare local tokens against a live URL
+
+## Tweet thread for launch
+
+```
+1/ Cursor + designlang. Paste any URL inside Cursor and it reads the live design system as MCP resources.
+
+`~/.cursor/mcp.json`:
+{
+  "mcpServers": {
+    "designlang": {
+      "command": "npx",
+      "args": ["-y", "designlang", "mcp"]
+    }
+  }
+}
+
+2/ Then ask: "Refactor my <Button> to match stripe.com's design language" — Cursor reads designlang://latest/tokens and rewrites against the real palette, radii, shadows, voice.
+
+3/ It also exposes `designlang_chat` as a tool. "Make it brutalist" → tokens regenerate. "Swap primary to #ff4800" → updated. Then ask Cursor to apply the new tokens to your repo.
+
+4/ $0. MIT. https://designlang.app
+```

marketplace/figma-listing.md

@@ -0,0 +1,50 @@
+# Figma Community — designlang plugin listing
+
+## Title
+
+designlang — Import any website's design system
+
+## Tagline (max 100 chars)
+
+Paste a URL, get a Figma Variable collection — colors, typography, spacing — pulled live from any site.
+
+## Description (max 1000 chars)
+
+designlang reverse-engineers any website into a complete design system and imports it directly into Figma as a Variable collection.
+
+Paste a URL or paste an exported `*-figma-variables.json` from the [designlang CLI](https://www.npmjs.com/package/designlang). The plugin creates a fresh VariableCollection (or updates an existing one), maps every primitive, semantic, and composite token, and supports multi-mode payloads (light/dark) automatically.
+
+What you get:
+• Colors with proper roles (primary, secondary, accent, background, foreground, neutrals)
+• Typography variables (sans, mono, body size, heading scale)
+• Spacing scale (with detected base unit)
+• Radii (xs/sm/md/lg/xl/full)
+• Shadows (kept as raw strings — Figma doesn't natively type box-shadow)
+
+Free, MIT-licensed, no account. The whole system also runs as a CLI: `npx designlang <url>`.
+
+## Tags (pick up to 12)
+
+design-system, design-tokens, design-extractor, dtcg, figma-variables, color-palette, typography, tokens, brand, design-system-import, w3c, ai-coding-agents
+
+## Cover-image brief
+
+Layout: paper background (#f3f1ea), single orange accent (#ff4800).
+Hero: "designlang" in Fraunces, 96px, with the `d` mark to the left.
+Below: a 5-swatch palette strip showing primary / secondary / accent / fg / bg.
+Right side: a tiny mock Figma Variable panel showing 6 imported variables.
+
+## Screenshots (4)
+
+1. Plugin UI on plugin run — "Paste URL or upload .json" state.
+2. Mid-import — token list streaming in.
+3. Figma side panel showing the imported VariableCollection with 24 colors expanded.
+4. After import — a frame using the imported variables (button + card mock).
+
+## Support email
+
+[your email]
+
+## Source code link
+
+https://github.com/Manavarya09/design-extract/tree/main/figma-plugin

marketplace/raycast-listing.md

@@ -0,0 +1,38 @@
+# Raycast Store — designlang extension
+
+## Title
+
+designlang — Extract a website's design system
+
+## Subtitle
+
+Paste any URL, get DTCG tokens / DESIGN.md / Tailwind config in one keystroke.
+
+## Description
+
+Designlang reverse-engineers any website into a complete design system, all from inside Raycast.
+
+Triggers a Playwright extraction (or pulls from cache), then opens the result in your default browser as a shareable permalink at `designlang.app/x/<hash>`. Paste the URL, hit ⌘ Enter, see the design system within 5 seconds.
+
+What you get every time:
+• A shareable permalink (works on every device, no account)
+• A single-file DESIGN.md for AI coding agents
+• 12 file formats: DTCG tokens, Tailwind config, CSS variables, Figma variables, shadcn theme, React/Vue/Svelte themes, iOS SwiftUI, Android Compose, Flutter, WordPress block theme
+
+Free, MIT, no signup.
+
+## Categories
+
+Developer Tools, Productivity
+
+## Keywords
+
+design, tokens, design-system, css, tailwind, figma, dtcg, ai
+
+## Author
+
+Manav Arya Singh (@manavarya09)
+
+## Submission
+
+PR to https://github.com/raycast/extensions with the contents of `raycast-extension/`.