designlang 11.1.0 → 11.3.0

package/SECURITY.md

@@ -0,0 +1,46 @@
+# Security Policy
+
+## Supported versions
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 11.x    | :white_check_mark: |
+| 10.x    | :white_check_mark: (critical only) |
+| < 10    | :x:                |
+
+Only the latest minor of each supported major receives fixes.
+
+## Reporting a vulnerability
+
+**Please don't open a public issue.** Use GitHub's private vulnerability reporting instead:
+
+👉 <https://github.com/Manavarya09/design-extract/security/advisories/new>
+
+What to include:
+
+- A description of the issue and its impact.
+- A minimal repro (URL being extracted, CLI flags, OS + Node version).
+- Suggested severity and, if you have one, a proposed fix.
+
+### What to expect
+
+- Acknowledgement within **72 hours**.
+- A triage verdict (accepted / needs info / out of scope) within **7 days**.
+- Public disclosure coordinated with you after a fix ships — usually as part of a patch release.
+
+## Scope
+
+In scope:
+
+- The `designlang` CLI and all subcommands (`extract`, `clone`, `ci`, `studio`, `replay`, `mcp`, etc.).
+- The MCP server (`src/mcp/server.js`).
+- The hosted extractor website (`website/`) when used at its canonical URL.
+- The Figma, Chrome, Raycast, and VS Code extensions shipped in this repo.
+
+Out of scope:
+
+- Vulnerabilities that require the user to run `designlang` against a page **they themselves control** (i.e. self-owned XSS in content they feed us).
+- Denial of service via crafted sites that simply take a long time to extract — we already time-bound Playwright operations.
+- Browser-level shadow-DOM opacity (closed shadow roots are unreachable by web platform design, not a designlang bug).
+
+Thanks for taking the time to report responsibly.

package/bin/design-extract.js

@@ -94,6 +94,7 @@ program
   .option('--smart', 'use optional LLM fallback when heuristic classifiers have low confidence (needs OPENAI_API_KEY or ANTHROPIC_API_KEY)')
   .option('--pages <n>', 'crawl N canonical pages (pricing/docs/blog/about/product) in addition to the homepage', parseInt)
   .option('--no-prompts', 'skip writing the prompt-pack directory')
+  .option('--no-design-md', 'skip writing the agent-native DESIGN.md (single-file, 8-section, YAML front matter)')
   .option('--responsive-shots', 'capture full-page PNGs at 4 breakpoints × (light,dark)')
   .option('--perf', 'measure Core Web Vitals + bundle profile (LCP/CLS/INP, JS/CSS/font/img bytes, third-party count)')
   .option('--json', 'output raw JSON to stdout (for CI/CD)')
@@ -352,6 +353,13 @@ program
       }
       files.push({ name: `${prefix}-voice.json`, content: JSON.stringify(design.voice || {}, null, 2), label: 'Brand Voice' });
 
+      // v11.2: agent-native single-file DESIGN.md (compatible with the
+      // 8-canonical-section convention; default-on, opt-out via --no-design-md).
+      if (merged.designMd !== false) {
+        const { formatDesignMd } = await import('../src/formatters/design-md.js');
+        files.push({ name: `${prefix}-DESIGN.md`, content: formatDesignMd(design), label: 'DESIGN.md (agent-native)' });
+      }
+
       // v10: page intent + section roles + visual DNA + component library + multi-page + prompt pack.
       files.push({ name: `${prefix}-intent.json`, content: JSON.stringify({ pageIntent: design.pageIntent, sectionRoles: design.sectionRoles }, null, 2), label: 'Page Intent + Section Roles' });
       files.push({ name: `${prefix}-visual-dna.json`, content: JSON.stringify({ materialLanguage: design.materialLanguage, imageryStyle: design.imageryStyle, backgroundPatterns: design.backgroundPatterns }, null, 2), label: 'Visual DNA' });
@@ -1077,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.1.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": {