designlang 7.1.0 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Changelog
 
+## [8.0.0] — 2026-04-20
+
+A credibility-and-distribution release. Three reliability bugs that hurt trust on real sites are fixed; three DX flags close the most-requested CLI gaps; five new surfaces (VS Code, Raycast, Figma, GitHub Actions, MCP registry) ship alongside.
+
+### Reliability
+
+- **Brand / primary color detection rewritten** — the extractor now ranks chromatic clusters by `interactiveBg × 100 + saturation × 2 + log(usage)` and requires either HSL saturation > 25 or an interactive-bg hit to qualify as chromatic. Previously the extractor picked the most-counted color, which on neutral-heavy sites like Linear meant the "Primary" was a pale gray (`#d0d6e0`). v8 correctly picks Linear's lime CTA (`#e4f222`) and Stripe's purple (`#533afd`). `src/extractors/colors.js`.
+- **Accessibility scoring defused** — the crawler now emits a `hasText` boolean per element (a direct text-node child with visible characters), and the WCAG extractor filters out decorative glyph wrappers, transparent/overlay pairs, and non-text containers. Linear's WCAG score moved from 25% (171 failing pairs) to 83% (1 failing pair). `src/extractors/accessibility.js`, `src/crawler.js`.
+- **Design-system score recalibrated** — thresholds for color count, shadow count, border-radii count, typography weight, and type-scale size were re-fit against ground-truth sites (Stripe, Linear, Vercel, GitHub, Apple). `cssHealth` is now weighted in the overall (8/100). Linear 47→76, Stripe 81→88, Apple 83→86, Vercel 64→76. `src/extractors/scoring.js`.
+
+### Added
+
+- **`--selector <css>`** — scopes extraction to a DOM subtree (e.g. `designlang https://stripe.com --selector "footer"`). Stripe full-page extraction drops from 2,409 elements to 112 when scoped to the footer. Falls back to the full document if the selector is invalid or empty.
+- **`--system-chrome`** — forces Playwright to use the locally installed Chrome (`channel: 'chrome'`) instead of the ~150 MB bundled Chromium, for faster `npx` first-runs in environments that already have Chrome.
+- **`--json` output mode** — full extraction payload written to stdout (suppresses progress UI) for piping into other tools. This was a partial implementation in v7; v8 makes it first-class and adds it to the CLI reference.
+- **VS Code extension** (`vscode-extension/`) — `designlang: Extract design from URL` and `designlang: Extract and inject into workspace` commands.
+- **Raycast extension** (`raycast-extension/`) — Extract, Score, and "Copy CLI command for URL" commands.
+- **Figma plugin** (`figma-plugin/`) — URL or paste-JSON → Figma Variables collections (MV for Figma's `figma.variables` API, with multi-mode support).
+- **GitHub Action** (`github-action/`) — "Design regression guard": runs `designlang` on a URL, diffs tokens vs a committed baseline, and comments the delta on the pull request. Optional `fail-on-change`.
+- **Smithery + MCP registry** (`smithery.yaml`, `smithery.dockerfile`, `docs/MCP-REGISTRY.md`) — one-command install in Smithery; checklist for the official MCP registry, Cursor, and Claude Desktop.
+- **Chrome Web Store + Firefox + Edge listing prep** (`chrome-extension/PRIVACY.md`, `chrome-extension/STORE_LISTING.md`) — privacy policy and store copy.
+- **README hero demo tape** (`docs/demo.tape`) — VHS script that renders an animated terminal GIF into `website/public/demo.gif`.
+- **Launch kit** (`docs/LAUNCH.md`) — Product Hunt / Show HN / Twitter copy + day-of checklist.
+
+### Changed
+
+- README: hero image now references the animated demo (with static PNG fallback), adds an "Install everywhere" table covering all surfaces, documents `--selector`, `--system-chrome`, and `--json`.
+- `.npmignore`: excludes all companion-surface directories (`vscode-extension/`, `raycast-extension/`, `figma-plugin/`, `github-action/`, `chrome-extension/`, `website/`) and test fixtures so the npm tarball stays small — each surface publishes to its own registry.
+- `bin/design-extract.js`: reports `8.0.0` from `--version`.
+- `src/config.js`: whitelists `selector` and `systemChrome` from CLI/config.
+
+### Thanks
+
+- To everyone who flagged that Linear's primary was coming out as light gray — that single complaint drove the brand-color rewrite.
+
+## [7.2.0] — 2026-04-19
+
+### Added
+
+- **Modern CSS surfacing (Tier 1a)** — crawler now captures pseudo-elements, variable-font axes (`font-variation-settings`), `@container` queries, and `env()` usage. Surfaced on `design.modernCss`. (#33)
+- **Wide-gamut color + CSS source attribution (Tier 1b)** — `oklch()`, `oklab()`, `color-mix()`, `light-dark()`, Display P3, and Rec2020 references are collected on `design.wideGamut`. A new `design.tokenSources` maps each extracted token to the stylesheet URL it first appeared in. (#34)
+- **Auto-interact pass (Tier 2)** — new `--deep-interact` flag (implied by `--full`) runs an interaction pass before extraction: full-page scroll in 4 steps, menu/dropdown opens, hover snapshots for the first batch of buttons/links with computed-style diffs, accordion clicks, and first-match modal trigger. Results populate `design.interactionStates` (hover deltas, menu/modal snapshots). Every step is wrapped in try/catch with per-step timeouts so interaction failures never kill the crawl.
+- **Multi-page token reconciliation (Tier 2)** — when `--depth >= 1` the extractor now emits three new artifacts alongside the merged baseline: `*-tokens-shared.json` (tokens shared across every route), `*-tokens-routes/<slug>.json` (per-route `added` and `changed` deltas), and `*-routes-report.md` (readable summary). Slugs are derived from the route path (`/` → `index`) with automatic collision handling.
+
+### Changed
+
+- `--full` now also enables `--deep-interact`.
+- `--depth <n>` description updated to mention the new reconciliation outputs.
+
 ## [7.1.0] — 2026-04-19
 
 ### Added

package/README.md

@@ -311,6 +311,26 @@ A dedicated audit pass surfaced on `design.cssHealth`:
 
 Also contributes a `cssHealth` dimension to the overall design score.
 
+### 22. Chrome Extension (NEW in v7.1)
+
+A Manifest-v3 popup lives in [`chrome-extension/`](chrome-extension/). One click on any tab opens `designlang.manavaryasingh.com` with the URL prefilled — no copy-paste, no context switch. There is also a **Copy CLI** button that puts `npx designlang <url>` in your clipboard.
+
+- **Permissions:** `activeTab` only, plus host access to the hosted extractor.
+- **Install:** toggle developer mode at `chrome://extensions`, click *Load unpacked*, pick the `chrome-extension/` folder.
+- **Firefox + Edge** work with the same MV3 manifest.
+
+### 23. Better Auth + Network Control (NEW in v7.1)
+
+Extracting from authenticated, self-signed, or non-default environments now takes one flag:
+
+- **`--cookie-file <path>`** — loads cookies from JSON array, Playwright `storageState.json`, or Netscape `cookies.txt` (browser extensions, curl exports). Merges cleanly with the existing `--cookie name=value` flag.
+- **`--insecure`** — ignore HTTPS/SSL certificate errors for self-signed dev servers, corporate staging, or MITM tools.
+- **`--user-agent <ua>`** — override the browser User-Agent string.
+
+```bash
+designlang https://staging.internal --cookie-file ./session.json --insecure
+```
+
 ## All Features
 
 | Feature | Flag / Command | Description |
@@ -325,12 +345,16 @@ Also contributes a `cssHealth` dimension to the overall design score.
 | Font files | automatic | Source detection (Google/self-hosted/CDN/system), @font-face CSS |
 | Image styles | automatic | Aspect ratios, shapes, filters, pattern classification |
 | Dark mode | `--dark` | Extracts dark color scheme + light/dark diff |
-| Auth pages | `--cookie`, `--header` | Extract from authenticated/protected pages |
-| Multi-page | `--depth <n>` | Crawl N internal pages for site-wide tokens |
+| Auth pages | `--cookie`, `--cookie-file`, `--header` | Extract from authenticated/protected pages; cookie files in JSON / Playwright storageState / Netscape formats |
+| Self-signed / dev TLS | `--insecure` | Ignore HTTPS/SSL certificate errors |
+| User-Agent override | `--user-agent <ua>` | Set a custom User-Agent string |
+| Chrome extension | `chrome-extension/` | One-click handoff from any tab, MV3, `activeTab` only |
+| Multi-page | `--depth <n>` | Crawl N internal pages; emits shared-vs-per-route token reconciliation (`*-tokens-shared.json`, `*-tokens-routes/<slug>.json`, `*-routes-report.md`) |
 | Screenshots | `--screenshots` | Capture buttons, cards, inputs, nav, hero, full page |
 | Responsive | `--responsive` | Crawl at 4 viewports, map breakpoint changes |
 | Interactions | `--interactions` | Capture hover/focus/active state transitions |
-| Everything | `--full` | Enable screenshots + responsive + interactions |
+| Auto-interact | `--deep-interact` | Scroll, open menus/modals/accordions, hover CTAs before extraction |
+| Everything | `--full` | Enable screenshots + responsive + interactions + deep-interact |
 | Apply | `designlang apply <url>` | Auto-detect framework and write tokens to your project |
 | Clone | `designlang clone <url>` | Generate a working Next.js starter with extracted design |
 | Score | `designlang score <url>` | Rate design quality with visual bar chart breakdown |
@@ -365,12 +389,16 @@ Options:
   --screenshots           Capture component screenshots
   --responsive            Capture at multiple breakpoints
   --interactions          Capture hover/focus/active states
-  --full                  Enable all captures
+  --deep-interact         Auto-interact pass (scroll, menus, modals, accordions, hover CTAs)
+  --full                  Enable all captures (implies --deep-interact)
   --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)
+  --selector <css>        Only extract from elements matching this CSS selector (e.g. ".pricing-card")
+  --system-chrome         Use the system Chrome install instead of the bundled Chromium (skips 150MB download)
+  --json                  Print full extraction as JSON to stdout (for piping into other tools)
   --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
@@ -443,6 +471,20 @@ Running `designlang https://vercel.com --full`:
 5. **Score** — Accessibility extractor calculates WCAG contrast ratios for all color pairs
 6. **Capture** — Optional: screenshots, responsive viewport crawling, interaction state recording
 
+## Install Everywhere
+
+designlang ships surfaces beyond the CLI:
+
+| Surface | Path | Description |
+|---------|------|-------------|
+| **CLI** | `npx designlang <url>` | Main entry point. |
+| **VS Code extension** | [`vscode-extension/`](vscode-extension/) | "Extract design from URL" command + auto-inject into workspace. |
+| **Raycast extension** | [`raycast-extension/`](raycast-extension/) | Extract, score, and "copy CLI command" from Raycast. |
+| **Figma plugin** | [`figma-plugin/`](figma-plugin/) | Paste a URL inside Figma, get a full Variables collection. |
+| **GitHub Action** | [`github-action/`](github-action/) | "Design regression guard" — diffs tokens on every PR and comments. |
+| **Chrome extension** | [`chrome-extension/`](chrome-extension/) | One-click handoff from any tab (MV3, `activeTab` only). |
+| **MCP server** | `npx designlang mcp` | Exposes the extracted design as MCP resources + tools for Cursor, Claude Code, Windsurf, etc. See [`docs/MCP-REGISTRY.md`](docs/MCP-REGISTRY.md). |
+
 ## Agent Skill
 
 Works with **Claude Code, Cursor, Codex, and 40+ AI coding agents** via the skills ecosystem:

package/bin/design-extract.js

@@ -21,6 +21,7 @@ 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 { reconcileRoutes, formatRoutesReport } from '../src/formatters/routes-reconciliation.js';
 import { loadConfig, mergeConfig } from '../src/config.js';
 import { diffDesigns, formatDiffMarkdown, formatDiffHtml } from '../src/diff.js';
 import { saveSnapshot, getHistory, formatHistoryMarkdown } from '../src/history.js';
@@ -47,7 +48,7 @@ const program = new Command();
 program
   .name('designlang')
   .description('Extract the complete design language from any website')
-  .version('6.0.0');
+  .version('8.0.0');
 
 // ── Main command: extract ──────────────────────────────────────
 program
@@ -63,13 +64,16 @@ program
   .option('--framework <type>', 'generate framework theme (react, shadcn, vue, svelte)')
   .option('--responsive', 'capture design at multiple breakpoints')
   .option('--interactions', 'capture hover/focus/active states')
-  .option('--full', 'enable all extra captures (screenshots, responsive, interactions)')
+  .option('--deep-interact', 'auto-interact pass: scroll, open menus/modals/accordions, hover CTAs (implies --interactions)')
+  .option('--full', 'enable all extra captures (screenshots, responsive, interactions, deep-interact)')
   .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('--selector <css>', 'only extract design from elements matching this CSS selector (e.g. ".pricing-card")')
+  .option('--system-chrome', 'use the system Chrome install instead of the bundled Chromium (skips the 150MB Playwright download)')
   .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')
@@ -152,6 +156,9 @@ program
         headers: Object.keys(headers).length > 0 ? headers : undefined,
         insecure: merged.insecure || false,
         userAgent: merged.userAgent,
+        deepInteract: merged.deepInteract || merged.full,
+        selector: merged.selector,
+        channel: merged.systemChrome ? 'chrome' : undefined,
       });
 
       // Responsive capture
@@ -258,6 +265,25 @@ program
         }
       }
 
+      // Multi-route token reconciliation (Tier 2). Only when --depth >= 1 and
+      // the crawler actually returned per-route token data.
+      if (merged.depth >= 1 && Array.isArray(design.routes) && design.routes.length > 0) {
+        const reconciled = reconcileRoutes(design.routes);
+        const sharedPath = join(outDir, `${prefix}-tokens-shared.json`);
+        writeFileSync(sharedPath, JSON.stringify(reconciled.shared, null, 2), 'utf-8');
+        platformFiles.push({ path: sharedPath, label: 'Shared tokens (multi-route)' });
+        const routesDir = join(outDir, `${prefix}-tokens-routes`);
+        mkdirSync(routesDir, { recursive: true });
+        for (const [slug, entry] of Object.entries(reconciled.perRoute)) {
+          const rp = join(routesDir, `${slug}.json`);
+          writeFileSync(rp, JSON.stringify({ url: entry.url, path: entry.path, added: entry.added, changed: entry.changed }, null, 2), 'utf-8');
+          platformFiles.push({ path: rp, label: `Route tokens (${slug})` });
+        }
+        const reportPath = join(outDir, `${prefix}-routes-report.md`);
+        writeFileSync(reportPath, formatRoutesReport(reconciled), 'utf-8');
+        platformFiles.push({ path: reportPath, label: 'Routes report (markdown)' });
+      }
+
       // Agent rules (opt-in, also enabled by --full)
       if (merged.emitAgentRules || merged.full) {
         const agentFiles = formatAgentRules({ design, tokens: dtcgTokens, url });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "7.1.0",
+  "version": "8.0.0",
   "description": "Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.",
   "type": "module",
   "bin": {

package/src/config.js

@@ -27,7 +27,8 @@ export function mergeConfig(cliOpts, config) {
     screenshots: cliOpts.screenshots || config.screenshots || false,
     framework: cliOpts.framework || config.framework,
     responsive: cliOpts.responsive || config.responsive || false,
-    interactions: cliOpts.interactions || config.interactions || false,
+    interactions: cliOpts.interactions || cliOpts.deepInteract || config.interactions || false,
+    deepInteract: cliOpts.deepInteract || config.deepInteract || false,
     full: cliOpts.full || config.full || false,
     cookie: cliOpts.cookie || config.cookies,
     header: cliOpts.header || config.headers,
@@ -38,6 +39,8 @@ export function mergeConfig(cliOpts, config) {
     cookieFile: cliOpts.cookieFile || config.cookieFile,
     insecure: cliOpts.insecure || config.insecure || false,
     userAgent: cliOpts.userAgent || config.userAgent,
+    selector: cliOpts.selector || config.selector,
+    systemChrome: cliOpts.systemChrome || config.systemChrome || false,
   };
 }