designlang 11.2.0 → 11.3.0

package/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>')

package/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.

package/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.

package/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`.

package/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
+```

package/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

package/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/`.

package/marketplace/vscode-listing.md

@@ -0,0 +1,46 @@
+# VS Code Marketplace — designlang listing
+
+## Display name
+
+designlang — Extract any website's design system
+
+## Description (short, max 200 chars)
+
+CLI + MCP + VS Code commands that reverse-engineer any URL into DTCG tokens, Tailwind, CSS vars, Figma variables, and an agent-native DESIGN.md. $0, MIT, no account.
+
+## README (long description)
+
+The README at the root of `vscode-extension/` is what the marketplace renders. Make sure it covers:
+
+1. **What it does** — paste a URL, extract a design system, import into the active workspace.
+2. **Commands** —
+   - `Designlang: Extract from URL` (Cmd+Shift+P)
+   - `Designlang: Apply to Workspace` (writes Tailwind + CSS vars next to the user's existing files)
+   - `Designlang: Open DESIGN.md`
+   - `Designlang: Compare with Production` (drift bot inside the editor)
+3. **MCP integration** — point at the same `npx designlang mcp` server, gets the live extraction.
+4. **Screenshots** — the streaming token paint inside the VS Code panel.
+
+## Categories
+
+Programming Languages, Other, Visualization, AI
+
+## Tags
+
+design-system, design-tokens, dtcg, w3c, tailwind, figma, css, ai, mcp, claude, cursor
+
+## Pricing
+
+Free.
+
+## License
+
+MIT — link to the LICENSE file at the repo root.
+
+## Repo
+
+https://github.com/Manavarya09/design-extract
+
+## Publisher
+
+`designlang` (matches package.json `name`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "11.2.0",
+  "version": "11.3.0",
   "description": "Extract the complete design language from any website and ship it — clone to a working Next.js starter, guard tokens with a CI drift bot, or browse everything in a local studio. Outputs W3C DTCG tokens, motion tokens, typed anatomy stubs, Tailwind config, and ready-to-paste v0 / Lovable / Cursor / Claude-Artifacts prompts.",
   "type": "module",
   "bin": {

package/src/chat.js

@@ -0,0 +1,356 @@
+// designlang chat — REPL over a live extraction.
+//
+// Heuristic-only in v12.0: the operations below cover the cases real users
+// reach for first. LLM fallback ships in v12.1 (--smart). The router parses
+// natural-ish English ("sharpen radii", "make it brutalist", "swap primary
+// to #ff4800") into structured operations on the design object, re-derives
+// tokens, and prints a tight diff.
+
+import { createInterface } from 'readline';
+import { stdin as input, stdout as output } from 'process';
+import { writeFileSync, mkdirSync, readFileSync, existsSync } from 'fs';
+import { join, resolve } from 'path';
+import chalk from 'chalk';
+import { extractDesignLanguage } from './index.js';
+import { formatDtcgTokens } from './formatters/dtcg-tokens.js';
+import { formatDesignMd } from './formatters/design-md.js';
+import { formatTailwind } from './formatters/tailwind.js';
+import { formatCssVars } from './formatters/css-vars.js';
+import { nameFromUrl } from './utils.js';
+
+function isHex(s) {
+  return typeof s === 'string' && /^#[0-9a-f]{3,8}$/i.test(s.trim());
+}
+
+function hexToRgb(hex) {
+  const m = String(hex).trim().toLowerCase().replace(/^#/, '');
+  const full = m.length === 3 ? m.split('').map((c) => c + c).join('') : m.slice(0, 6);
+  return {
+    r: parseInt(full.slice(0, 2), 16) || 0,
+    g: parseInt(full.slice(2, 4), 16) || 0,
+    b: parseInt(full.slice(4, 6), 16) || 0,
+  };
+}
+
+function rgbToHex({ r, g, b }) {
+  return '#' + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('');
+}
+
+function opSharpenRadii(design, factor = 0.5) {
+  const radii = design.borders?.radii || [];
+  const next = radii.map((r) => ({ ...r, value: Math.max(0, Math.round((r.value || 0) * factor)) }));
+  const changes = next.map((r, i) => `${r.label || 'r' + i}: ${radii[i].value}px → ${r.value}px`);
+  return {
+    design: { ...design, borders: { ...(design.borders || {}), radii: next } },
+    changes: ['radii sharpened', ...changes],
+  };
+}
+
+function opSoftenRadii(design, factor = 2) {
+  const radii = design.borders?.radii || [];
+  const next = radii.map((r) => ({ ...r, value: Math.min(64, Math.round((r.value || 0) * factor) || 4) }));
+  const changes = next.map((r, i) => `${r.label || 'r' + i}: ${radii[i].value}px → ${r.value}px`);
+  return {
+    design: { ...design, borders: { ...(design.borders || {}), radii: next } },
+    changes: ['radii softened', ...changes],
+  };
+}
+
+function opDarkMode(design) {
+  const colors = design.colors || {};
+  const bgs = colors.backgrounds || ['#ffffff'];
+  const txt = colors.text || ['#171717'];
+  const swapped = { ...colors, backgrounds: txt.slice(), text: bgs.slice() };
+  return {
+    design: { ...design, colors: swapped },
+    changes: [
+      `background: ${bgs[0]} → ${txt[0]}`,
+      `foreground: ${txt[0]} → ${bgs[0]}`,
+    ],
+  };
+}
+
+function opMakeBrutalist(design) {
+  const radii = (design.borders?.radii || []).map((r) => ({ ...r, value: 0 }));
+  const shadows = (design.shadows?.values || []).map((s) => ({
+    ...s,
+    raw: '4px 4px 0 0 currentColor',
+    value: '4px 4px 0 0 currentColor',
+  }));
+  const families = (design.typography?.families || []).slice();
+  const monoFam = families.find((f) => /mono|consol|courier|jet|sf-mono|geist mono/i.test(f.name)) || { name: 'JetBrains Mono', count: 1, weights: [400] };
+  return {
+    design: {
+      ...design,
+      borders: { ...(design.borders || {}), radii },
+      shadows: { ...(design.shadows || {}), values: shadows },
+      typography: {
+        ...(design.typography || {}),
+        families: [monoFam, ...families.filter((f) => f !== monoFam)].slice(0, 3),
+      },
+      materialLanguage: { ...(design.materialLanguage || {}), label: 'brutalist', confidence: 1.0 },
+    },
+    changes: [
+      'radii → 0 (sharp corners)',
+      'shadows → hard offset (4px 4px 0 0)',
+      'primary font → mono',
+      'material → brutalist',
+    ],
+  };
+}
+
+function opMakeGlass(design) {
+  const radii = (design.borders?.radii || []).map((r) => ({
+    ...r,
+    value: Math.max(r.value || 8, 16),
+  }));
+  const shadows = (design.shadows?.values || []).map((s, i) => ({
+    ...s,
+    raw: `0 ${8 + i * 4}px ${24 + i * 8}px rgba(0,0,0,0.08)`,
+    value: `0 ${8 + i * 4}px ${24 + i * 8}px rgba(0,0,0,0.08)`,
+  }));
+  return {
+    design: {
+      ...design,
+      borders: { ...(design.borders || {}), radii },
+      shadows: { ...(design.shadows || {}), values: shadows },
+      materialLanguage: { ...(design.materialLanguage || {}), label: 'glass', confidence: 1.0 },
+    },
+    changes: [
+      'radii ≥ 16px (rounded)',
+      'shadows → soft, depth-stacked',
+      'material → glass',
+    ],
+  };
+}
+
+function opSwapColor(design, role, hex) {
+  if (!isHex(hex)) return { design, changes: [`error: ${hex} is not a hex color`] };
+  const colors = { ...(design.colors || {}) };
+  const before = colors[role]?.hex;
+  if (!before) {
+    return { design, changes: [`error: no ${role} color in this extraction (try primary, secondary, accent)`] };
+  }
+  const next = { ...colors[role], hex };
+  return {
+    design: { ...design, colors: { ...colors, [role]: next } },
+    changes: [`${role}: ${before} → ${hex}`],
+  };
+}
+
+function opSwapFont(design, name) {
+  const families = (design.typography?.families || []).slice();
+  const before = families[0]?.name || '—';
+  const replaced = [{ name, count: families[0]?.count || 0, weights: families[0]?.weights || [400, 600] }, ...families.slice(1)];
+  return {
+    design: { ...design, typography: { ...(design.typography || {}), families: replaced } },
+    changes: [`primary font: ${before} → ${name}`],
+  };
+}
+
+function opReset(_design, original) {
+  return { design: structuredClone(original), changes: ['reset to original extraction'] };
+}
+
+function parseCommand(line) {
+  const s = String(line).trim().toLowerCase();
+  if (!s) return null;
+
+  if (s === 'help' || s === '?') return { kind: 'help' };
+  if (s === 'quit' || s === 'exit' || s === ':q') return { kind: 'quit' };
+  if (s === 'reset' || s === 'undo all') return { kind: 'reset' };
+  if (s === 'save' || s === 'export' || s === 'write') return { kind: 'save' };
+  if (s === 'show' || s === 'print' || s === 'state') return { kind: 'state' };
+  if (s.startsWith('show ') || s.startsWith('print ')) {
+    return { kind: 'show', what: s.split(/\s+/)[1] };
+  }
+
+  if (/(make it |make this |go )?brutalist/.test(s)) return { kind: 'op', op: 'brutalist' };
+  if (/(make it |make this |go )?glass(morph)?/.test(s)) return { kind: 'op', op: 'glass' };
+  if (/(dark mode|dark theme|invert|go dark)/.test(s)) return { kind: 'op', op: 'dark' };
+  if (/sharp(en)?( radii| corners)?/.test(s)) return { kind: 'op', op: 'sharpen' };
+  if (/(soft|round)(en)?( radii| corners)?/.test(s)) return { kind: 'op', op: 'soften' };
+
+  const colorRe = /(primary|secondary|accent)\s*(?:to|=|:)?\s*(#[0-9a-f]{3,8})/i;
+  const cm = colorRe.exec(line);
+  if (cm) return { kind: 'op', op: 'swap-color', role: cm[1].toLowerCase(), hex: cm[2] };
+
+  const fontRe = /(?:font|typeface)\s*(?:to|=|:)?\s*([A-Za-z][\w\s-]{1,40})/i;
+  const fm = fontRe.exec(line);
+  if (fm) return { kind: 'op', op: 'swap-font', name: fm[1].trim() };
+
+  return { kind: 'unknown', input: line };
+}
+
+function printHelp() {
+  console.log('');
+  console.log(chalk.bold('  Commands:'));
+  const rows = [
+    ['sharpen / soften',          'halve / double every radius'],
+    ['dark mode',                 'swap background ↔ foreground'],
+    ['brutalist',                 'radii → 0, hard shadows, mono font'],
+    ['glass',                     'rounded radii, soft layered shadows'],
+    ['primary #ff4800',           'swap a role color (primary | secondary | accent)'],
+    ['font Inter',                'swap the primary font family'],
+    ['show / state',              'print current palette + tokens'],
+    ['reset',                     'restore the original extraction'],
+    ['save',                      'write DTCG, Tailwind, CSS vars, DESIGN.md to ./chat-output'],
+    ['quit',                      'exit'],
+  ];
+  for (const [cmd, desc] of rows) {
+    console.log('  ' + chalk.cyan(cmd.padEnd(28)) + chalk.gray(desc));
+  }
+  console.log('');
+}
+
+function printState(design) {
+  const c = design.colors || {};
+  const t = design.typography || {};
+  const r = design.borders?.radii || [];
+  console.log('');
+  console.log(chalk.bold('  Current state'));
+  console.log('  ' + chalk.gray('palette:'.padEnd(14)) + [c.primary?.hex, c.secondary?.hex, c.accent?.hex, c.backgrounds?.[0], c.text?.[0]].filter(Boolean).join(' · '));
+  console.log('  ' + chalk.gray('font:'.padEnd(14)) + (t.families?.[0]?.name || '—'));
+  console.log('  ' + chalk.gray('radii:'.padEnd(14)) + (r.map((x) => `${x.label || '?'}=${x.value}`).join(' · ') || '—'));
+  console.log('  ' + chalk.gray('material:'.padEnd(14)) + (design.materialLanguage?.label || 'flat'));
+  console.log('');
+}
+
+function applyOp(parsed, current) {
+  switch (parsed.op) {
+    case 'sharpen':    return opSharpenRadii(current);
+    case 'soften':     return opSoftenRadii(current);
+    case 'dark':       return opDarkMode(current);
+    case 'brutalist':  return opMakeBrutalist(current);
+    case 'glass':      return opMakeGlass(current);
+    case 'swap-color': return opSwapColor(current, parsed.role, parsed.hex);
+    case 'swap-font':  return opSwapFont(current, parsed.name);
+    default:           return { design: current, changes: ['no-op'] };
+  }
+}
+
+function saveDesign(design, outDir) {
+  mkdirSync(outDir, { recursive: true });
+  const url = design.meta?.url || 'extraction';
+  const prefix = nameFromUrl(url);
+  const dtcg = formatDtcgTokens(design);
+  const written = [];
+  const write = (name, content) => {
+    const p = join(outDir, name);
+    writeFileSync(p, content, 'utf-8');
+    written.push(p);
+  };
+  write(`${prefix}-design-tokens.json`, JSON.stringify(dtcg, null, 2));
+  write(`${prefix}-tailwind.config.js`, formatTailwind(design));
+  write(`${prefix}-variables.css`, formatCssVars(design));
+  write(`${prefix}-DESIGN.md`, formatDesignMd(design));
+  return written;
+}
+
+function synthesizeDesignFromTokens(tokens, sourcePath) {
+  const findHex = (...paths) => {
+    for (const p of paths) {
+      const parts = p.split('.');
+      let v = tokens;
+      for (const k of parts) {
+        v = v?.[k];
+        if (!v) break;
+      }
+      if (v && typeof v.$value === 'string') return v.$value;
+    }
+    return null;
+  };
+  const primary = findHex('color.primary', 'primitive.color.brand.primary', 'primitive.color.primary');
+  const secondary = findHex('color.secondary');
+  const accent = findHex('color.accent', 'primitive.color.brand.accent');
+  const bg = findHex('color.background', 'primitive.color.background.bg0', 'primitive.color.neutral.n100');
+  const fg = findHex('color.foreground', 'primitive.color.text.text0', 'primitive.color.foreground');
+  return {
+    meta: { url: `file://${sourcePath}`, title: 'imported tokens' },
+    colors: {
+      primary: primary ? { hex: primary, count: 1 } : null,
+      secondary: secondary ? { hex: secondary, count: 1 } : null,
+      accent: accent ? { hex: accent, count: 1 } : null,
+      backgrounds: bg ? [bg] : ['#ffffff'],
+      text: fg ? [fg] : ['#171717'],
+      neutrals: [],
+      all: [],
+    },
+    typography: { families: [{ name: 'system-ui', count: 1, weights: [400, 600] }], headings: [], body: { size: 16 } },
+    spacing: { base: 4, scale: [4, 8, 12, 16, 24, 32, 48, 64] },
+    shadows: { values: [{ label: 'md', raw: '0 4px 6px rgba(0,0,0,0.1)', value: '0 4px 6px rgba(0,0,0,0.1)' }] },
+    borders: { radii: [{ label: 'md', value: 8 }] },
+    breakpoints: [],
+    components: {},
+    variables: {},
+    materialLanguage: { label: 'flat', confidence: 0.5 },
+  };
+}
+
+export async function runChat(target, opts = {}) {
+  const outDir = resolve(opts.out || './chat-output');
+
+  let design;
+  if (target && /\.json$/.test(target) && existsSync(target)) {
+    console.log(chalk.gray(`  Loading tokens from ${target}…`));
+    const tokens = JSON.parse(readFileSync(target, 'utf-8'));
+    design = synthesizeDesignFromTokens(tokens, target);
+  } else {
+    let url = String(target);
+    if (!url.startsWith('http')) url = `https://${url}`;
+    console.log(chalk.gray(`  Extracting ${url}…  (this takes a few seconds)`));
+    design = await extractDesignLanguage(url);
+  }
+
+  const original = structuredClone(design);
+
+  console.log('');
+  console.log(chalk.bold('  designlang chat'));
+  console.log(chalk.gray('  type "help" for commands · Ctrl+D to quit'));
+  printState(design);
+
+  const rl = createInterface({ input, output, prompt: chalk.gray('> ') });
+  rl.prompt();
+
+  for await (const line of rl) {
+    const parsed = parseCommand(line);
+    if (!parsed) { rl.prompt(); continue; }
+
+    if (parsed.kind === 'help') { printHelp(); rl.prompt(); continue; }
+    if (parsed.kind === 'quit') { rl.close(); break; }
+    if (parsed.kind === 'state' || parsed.kind === 'show') { printState(design); rl.prompt(); continue; }
+    if (parsed.kind === 'reset') {
+      const r = opReset(design, original);
+      design = r.design;
+      r.changes.forEach((c) => console.log('  ' + chalk.gray('•') + ' ' + c));
+      printState(design);
+      rl.prompt();
+      continue;
+    }
+    if (parsed.kind === 'save') {
+      const files = saveDesign(design, outDir);
+      console.log('');
+      for (const f of files) console.log('  ' + chalk.green('✓') + ' ' + f);
+      console.log('');
+      rl.prompt();
+      continue;
+    }
+    if (parsed.kind === 'unknown') {
+      console.log(chalk.yellow(`  Didn't catch that. Try "help" for commands.`));
+      rl.prompt();
+      continue;
+    }
+
+    if (parsed.kind === 'op') {
+      const r = applyOp(parsed, design);
+      design = r.design;
+      console.log('');
+      r.changes.forEach((c) => console.log('  ' + chalk.green('•') + ' ' + c));
+      console.log('');
+      rl.prompt();
+    }
+  }
+
+  console.log('');
+  console.log(chalk.gray('  bye'));
+}

package/src/clone.js

@@ -21,7 +21,11 @@ function dedupeConsecutive(order) {
 }
 
 function sanitize(str, fallback = '') {
-  return String(str ?? fallback).replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+  // Escape backslash FIRST so the subsequent escapes don't get re-escaped.
+  return String(str ?? fallback)
+    .replace(/\\/g, '\\\\')
+    .replace(/`/g, '\\`')
+    .replace(/\$\{/g, '\\${');
 }
 
 function titleFromUrl(url = '') {
@@ -352,7 +356,7 @@ button { font-family: inherit; }
 
   // layout.js
   writeFileSync(join(projectDir, 'src/app/layout.js'), `export const metadata = {
-  title: '${(design.meta.title || 'Cloned Design').replace(/'/g, "\\'")} · cloned',
+  title: '${(design.meta.title || 'Cloned Design').replace(/\\/g, '\\\\').replace(/'/g, "\\'")} · cloned',
   description: 'Design cloned from ${url} with designlang.',
 };
 

package/src/crawler.js

@@ -26,6 +26,7 @@ export async function crawlPage(url, options = {}) {
     deepInteract = false,
     selector,
     channel,
+    wsEndpoint,  // Remote browser (e.g. Browserless). When set, skips local launch.
   } = options;
 
   const launchArgs = [
@@ -38,14 +39,23 @@ export async function crawlPage(url, options = {}) {
     launchArgs.push('--ignore-certificate-errors', '--ignore-ssl-errors');
   }
 
-  const browser = await chromium.launch({
-    headless: true,
-    ...(executablePath && { executablePath }),
-    // channel: 'chrome' forces Playwright to use the system Chrome install
-    // instead of the 150MB bundled Chromium — see --system-chrome.
-    ...(channel && { channel }),
-    args: launchArgs,
-  });
+  // Prefer remote browser when wsEndpoint is provided (Browserless v2 / any
+  // Playwright-protocol WSS). Skips the @sparticuz/chromium 150MB cold-start
+  // tax on Vercel Functions entirely.
+  const usingRemote = !!wsEndpoint;
+  // Browserless v2 speaks CDP at the root endpoint — connectOverCDP works
+  // across Browserless and any other CDP-compatible service. connect() would
+  // require Playwright's protocol on a path like /playwright/chromium.
+  const browser = usingRemote
+    ? await chromium.connectOverCDP(wsEndpoint, { timeout: 30000 })
+    : await chromium.launch({
+        headless: true,
+        ...(executablePath && { executablePath }),
+        // channel: 'chrome' forces Playwright to use the system Chrome install
+        // instead of the 150MB bundled Chromium — see --system-chrome.
+        ...(channel && { channel }),
+        args: launchArgs,
+      });
   try {
     const context = await browser.newContext({
       viewport: { width, height },

package/src/extractors/background-patterns.js

@@ -7,18 +7,29 @@
 // Pure function — reads `rawData.light.computedStyles`, which every extractor
 // already has access to, plus the `modernColors` and any collected svgs.
 
+// All pattern detectors operate on a length-capped string. Adversarial CSS
+// background-image values (data URIs in particular) can run several KB; cap
+// to 4KB so the regexes can never run quadratic over megabyte payloads.
+const MAX_BG_LEN = 4096;
+function cap(s) {
+  return typeof s === 'string' ? s.slice(0, MAX_BG_LEN) : '';
+}
+
 function looksLikeDotGrid(image) {
-  return /radial-gradient\(.*\)/i.test(image) && /repeat/i.test(image) && /(\d+px\s*\d+px)/.test(image);
+  const s = cap(image);
+  // Bounded inner content (.{0,256}) instead of unbounded .* — no nested quantifier risk.
+  return /radial-gradient\([^)]{0,256}\)/i.test(s) && /repeat/i.test(s) && /\d{1,4}px\s{0,4}\d{1,4}px/.test(s);
 }
 
 function looksLikeLineGrid(image) {
   // repeating-linear-gradient with a narrow colored band.
-  return /repeating-linear-gradient/i.test(image);
+  return /repeating-linear-gradient/i.test(cap(image));
 }
 
 function looksLikeNoise(image) {
-  // data URI SVG with feTurbulence filter, or a well-known noise png path.
-  return /feTurbulence|data:image\/svg.+fractalNoise/i.test(image) || /noise\.(png|svg|webp)/i.test(image);
+  const s = cap(image);
+  // Bounded character class instead of .+ — `.+` could backtrack on long data URIs.
+  return /feTurbulence|data:image\/svg[^"']{0,2048}fractalNoise/i.test(s) || /noise\.(png|svg|webp)/i.test(s);
 }
 
 function countRadialGradients(image) {

package/src/extractors/material-language.js

@@ -51,11 +51,13 @@ function shadowComplexity(shadowValues) {
   if (!shadowValues.length) return { profile: 'none', avgBlur: 0, maxBlur: 0, insetCount: 0, hardShadowCount: 0, hasPair: false };
   let insetCount = 0, hardShadowCount = 0, totalBlur = 0, maxBlur = 0, pairCount = 0;
   for (const v of shadowValues) {
-    const raw = typeof v === 'string' ? v : (v.value || '');
+    // Cap to defang ReDoS on adversarial CSS shadow values. Real values are <500 chars.
+    const raw = (typeof v === 'string' ? v : (v.value || '')).slice(0, 2000);
     if (/inset/i.test(raw)) insetCount++;
     // Blur is the third length in `offset-x offset-y blur [spread] color`. The
     // `px` unit is common but optional — `0 0` is a valid zero-blur shadow.
-    const blurs = [...raw.matchAll(/(-?\d+(?:\.\d+)?)(?:px)?\s+(-?\d+(?:\.\d+)?)(?:px)?\s+(\d+(?:\.\d+)?)(?:px)?/g)];
+    // Bounded digit counts prevent polynomial backtracking on long digit runs.
+    const blurs = [...raw.matchAll(/(-?\d{1,8}(?:\.\d{1,4})?)(?:px)?\s+(-?\d{1,8}(?:\.\d{1,4})?)(?:px)?\s+(\d{1,8}(?:\.\d{1,4})?)(?:px)?/g)];
     for (const m of blurs) {
       const blur = parseFloat(m[3]);
       totalBlur += blur;

package/src/extractors/motion.js

@@ -92,18 +92,25 @@ export function extractMotion(computedStyles, keyframes = []) {
 
   for (const el of computedStyles) {
     let isAnimating = false;
-    if (el.transition && el.transition !== 'all 0s ease 0s' && el.transition !== 'none') {
-      transitions.add(el.transition);
+    // Cap inputs to defang any pathological CSS that could trigger
+    // polynomial-time regex backtracking. Real values are <200 chars.
+    const transition = (el.transition || '').slice(0, 2000);
+    if (transition && transition !== 'all 0s ease 0s' && transition !== 'none') {
+      transitions.add(transition);
       isAnimating = true;
-      for (const m of el.transition.matchAll(/(?<![(\d])(\d+\.?\d*m?s)(?![)\w])/g)) durations.push(MS(m[1]));
-      for (const m of el.transition.matchAll(/(ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier\([^)]+\)|steps\([^)]+\))/g)) easingRaw.add(m[1]);
-      for (const part of el.transition.split(',')) {
+      // Tightened: bounded \d{1,8} and bounded fractional part — no nested quantifiers.
+      for (const m of transition.matchAll(/(?<![(\d])(\d{1,8}(?:\.\d{1,4})?m?s)(?![)\w])/g)) durations.push(MS(m[1]));
+      // Tightened: limit cubic-bezier/steps inner content to 64 chars.
+      for (const m of transition.matchAll(/(ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier\([^)]{1,64}\)|steps\([^)]{1,64}\))/g)) easingRaw.add(m[1]);
+      for (const part of transition.split(',')) {
         const prop = part.trim().split(/\s+/)[0];
         if (prop && prop !== 'all') transitionedProps[prop] = (transitionedProps[prop] || 0) + 1;
       }
     }
-    if (el.animation && el.animation !== 'none 0s ease 0s 1 normal none running' && el.animation !== 'none') {
-      const nameMatch = el.animation.match(/([a-zA-Z_][\w-]*)\s*$/) || el.animation.match(/^([a-zA-Z_][\w-]*)/);
+    const animation = (el.animation || '').slice(0, 2000);
+    if (animation && animation !== 'none 0s ease 0s 1 normal none running' && animation !== 'none') {
+      // Tightened: bound the identifier length so backtracking is linear.
+      const nameMatch = animation.match(/([a-zA-Z_][\w-]{0,127})$/) || animation.match(/^([a-zA-Z_][\w-]{0,127})/);
       if (nameMatch) {
         const name = nameMatch[1];
         if (name !== 'none' && name !== 'running' && name !== 'paused') {

package/src/formatters/markdown.js

@@ -733,7 +733,7 @@ export function formatMarkdown(design) {
     lines.push('| # | Role | Heading | Confidence |');
     lines.push('|---|------|---------|------------|');
     for (const s of design.sectionRoles.sections.slice(0, 20)) {
-      const h = (s.heading || '').replace(/\|/g, '\\|').slice(0, 80);
+      const h = (s.heading || '').replace(/\\/g, '\\\\').replace(/\|/g, '\\|').slice(0, 80);
       lines.push(`| ${s.index} | ${s.role}${s.subrole ? ` · ${s.subrole}` : ''} | ${h || '—'} | ${s.confidence} |`);
     }
     lines.push('');

package/src/formatters/prompt-pack.js

@@ -139,7 +139,7 @@ export function formatCursorPrompt(design) {
     `  colors: [${b.colors.map(c => `'${c}'`).join(', ')}],`,
     `  fonts: [${b.fonts.map(f => `'${f}'`).join(', ')}],`,
     `  radii: [${(design.borders?.radii || []).slice(0, 6).map(r => `'${String(r.value ?? r)}'`).join(', ')}],`,
-    `  shadows: [${(design.shadows?.values || []).slice(0, 3).map(s => `'${String(s.raw ?? s.value ?? s).replace(/'/g, "\\'")}'`).join(', ')}],`,
+    `  shadows: [${(design.shadows?.values || []).slice(0, 3).map(s => `'${String(s.raw ?? s.value ?? s).replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`).join(', ')}],`,
     '};',
     '```',
     '',

package/src/history.js

@@ -19,10 +19,9 @@ export function saveSnapshot(design) {
   const hostname = new URL(design.meta.url).hostname.replace(/^www\./, '');
   const file = historyFile(hostname);
 
+  // Read directly inside try/catch — no existsSync race.
   let history = [];
-  if (existsSync(file)) {
-    try { history = JSON.parse(readFileSync(file, 'utf-8')); } catch { history = []; }
-  }
+  try { history = JSON.parse(readFileSync(file, 'utf-8')); } catch { history = []; }
 
   // Compact snapshot — only store key metrics, not full data
   const snapshot = {
@@ -65,7 +64,6 @@ export function getHistory(url) {
   ensureDir();
   const hostname = new URL(url).hostname.replace(/^www\./, '');
   const file = historyFile(hostname);
-  if (!existsSync(file)) return [];
   try { return JSON.parse(readFileSync(file, 'utf-8')); } catch { return []; }
 }
 

package/src/studio.js

@@ -296,15 +296,25 @@ export async function runStudio(opts) {
       // Static passthrough — screenshots, preview.html, etc.
       const safe = pathname.replace(/\.\./g, '').replace(/^\//, '');
       const filePath = join(dir, safe);
-      if (filePath.startsWith(dir) && existsSync(filePath) && statSync(filePath).isFile()) {
+      // Path-traversal guard: must stay inside dir.
+      if (!filePath.startsWith(dir)) {
+        res.writeHead(404, { 'content-type': 'text/plain' });
+        res.end('not found');
+        return;
+      }
+      // Race-safe read — single try/catch instead of exists→stat→read chain.
+      try {
+        if (!statSync(filePath).isFile()) throw new Error('not a file');
+        const body = readFileSync(filePath);
         const ext = extname(filePath).toLowerCase();
         res.writeHead(200, { 'content-type': MIME[ext] || 'application/octet-stream' });
-        res.end(readFileSync(filePath));
+        res.end(body);
+        return;
+      } catch {
+        res.writeHead(404, { 'content-type': 'text/plain' });
+        res.end('not found');
         return;
       }
-
-      res.writeHead(404, { 'content-type': 'text/plain' });
-      res.end('not found');
     } catch (e) {
       res.writeHead(500, { 'content-type': 'text/plain' });
       res.end(`error: ${e.message}`);

package/src/sync.js

@@ -5,9 +5,19 @@ import { formatTokens } from './formatters/tokens.js';
 import { formatTailwind } from './formatters/tailwind.js';
 import { formatCssVars } from './formatters/css-vars.js';
 import { saveSnapshot, getHistory } from './history.js';
-import { writeFileSync, readFileSync, existsSync } from 'fs';
+import { writeFileSync, readFileSync, statSync } from 'fs';
 import { join } from 'path';
 
+// Race-safe "update only if file exists" — statSync inside try/catch
+// closes the toctou window vs. existsSync→writeFileSync.
+function updateIfExists(path, content) {
+  try {
+    if (!statSync(path).isFile()) return false;
+    writeFileSync(path, content, 'utf-8');
+    return true;
+  } catch { return false; }
+}
+
 export async function syncDesign(url, options = {}) {
   const { out = '.', interval = 3600000 } = options; // default 1 hour
 
@@ -42,23 +52,9 @@ export async function syncDesign(url, options = {}) {
   // Update local files
   const updates = [];
 
-  const tokensPath = join(out, 'design-tokens.json');
-  if (existsSync(tokensPath)) {
-    writeFileSync(tokensPath, formatTokens(current), 'utf-8');
-    updates.push('design-tokens.json');
-  }
-
-  const tailwindPath = join(out, 'tailwind.config.js');
-  if (existsSync(tailwindPath)) {
-    writeFileSync(tailwindPath, formatTailwind(current), 'utf-8');
-    updates.push('tailwind.config.js');
-  }
-
-  const cssPath = join(out, 'variables.css');
-  if (existsSync(cssPath)) {
-    writeFileSync(cssPath, formatCssVars(current), 'utf-8');
-    updates.push('variables.css');
-  }
+  if (updateIfExists(join(out, 'design-tokens.json'), formatTokens(current)))    updates.push('design-tokens.json');
+  if (updateIfExists(join(out, 'tailwind.config.js'), formatTailwind(current)))  updates.push('tailwind.config.js');
+  if (updateIfExists(join(out, 'variables.css'),     formatCssVars(current)))    updates.push('variables.css');
 
   return {
     changes,