designlang 7.0.0 → 7.1.0

package/.vercel/README.txt

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

package/.vercel/project.json

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

package/CHANGELOG.md

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

package/CONTRIBUTING.md

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

package/README.md

@@ -1,13 +1,12 @@
 <p align="center">
-  <h1 align="center">DESIGNLANG</h1>
-  <p align="center">Reverse-engineer any website's complete design system in one command.</p>
+  <img src="website/public/logo-specimen.svg" alt="designlang — reads a website the way a developer reads a stylesheet" width="900">
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/designlang"><img src="https://img.shields.io/npm/v/designlang?color=blue&label=npm" alt="npm version"></a>
-  <a href="https://github.com/Manavarya09/design-extract/blob/main/LICENSE"><img src="https://img.shields.io/github/license/Manavarya09/design-extract" alt="license"></a>
-  <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/designlang" alt="node version"></a>
-  <a href="https://website-five-lime-65.vercel.app"><img src="https://img.shields.io/badge/website-live-red" alt="website"></a>
+  <a href="https://www.npmjs.com/package/designlang"><img src="https://img.shields.io/npm/v/designlang?color=0A0908&labelColor=F3F1EA&label=npm" alt="npm version"></a>
+  <a href="https://github.com/Manavarya09/design-extract/blob/main/LICENSE"><img src="https://img.shields.io/github/license/Manavarya09/design-extract?color=0A0908&labelColor=F3F1EA" alt="license"></a>
+  <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/designlang?color=0A0908&labelColor=F3F1EA" alt="node version"></a>
+  <a href="https://designlang.manavaryasingh.com/"><img src="https://img.shields.io/badge/website-live-FF4800?labelColor=F3F1EA" alt="website"></a>
 </p>
 
 ---
@@ -368,7 +367,10 @@ Options:
   --interactions          Capture hover/focus/active states
   --full                  Enable all captures
   --cookie <cookies...>   Cookies for authenticated pages (name=value)
+  --cookie-file <path>    Load cookies from JSON / storageState / Netscape cookies.txt
   --header <headers...>   Custom headers (name:value)
+  --user-agent <ua>       Override the browser User-Agent string
+  --insecure              Ignore HTTPS/SSL certificate errors (self-signed, dev, proxies)
   --framework <type>      Only generate specific theme (react, shadcn)
   --platforms <csv>       Additional platforms: web,ios,android,flutter,wordpress,all (additive)
   --emit-agent-rules      Emit Cursor / Claude Code / CLAUDE.md / agents.md rule files
@@ -453,7 +455,7 @@ In Claude Code, use `/extract-design <url>`.
 
 ## Website
 
-**[website-five-lime-65.vercel.app](https://website-five-lime-65.vercel.app)** — the brutalist product page.
+**[design-extract-beta.vercel.app](https://design-extract-beta.vercel.app)** — the brutalist product page.
 
 ## Contributing
 

package/bin/design-extract.js

@@ -65,7 +65,10 @@ program
   .option('--interactions', 'capture hover/focus/active states')
   .option('--full', 'enable all extra captures (screenshots, responsive, interactions)')
   .option('--cookie <cookies...>', 'cookies for authenticated pages (name=value)')
+  .option('--cookie-file <path>', 'load cookies from JSON, Playwright storageState, or Netscape cookies.txt')
   .option('--header <headers...>', 'custom headers (name:value)')
+  .option('--user-agent <ua>', 'override the browser User-Agent string')
+  .option('--insecure', 'ignore HTTPS/SSL certificate errors (self-signed, dev, proxies)')
   .option('--ignore <selectors...>', 'CSS selectors to remove before extraction')
   .option('--tokens-legacy', 'Emit pre-v7 flat token JSON (backward compat)')
   .option('--platforms <csv>', 'Additional platforms: web,ios,android,flutter,wordpress,all (web is always emitted)', 'web')
@@ -115,7 +118,19 @@ program
     try {
       spinner.text = `Crawling${merged.depth > 0 ? ` (depth: ${merged.depth})` : ''}...`;
       // Parse auth options
-      const cookies = merged.cookie || [];
+      const cliCookies = merged.cookie || [];
+      const fileCookies = [];
+      if (merged.cookieFile) {
+        try {
+          const { loadCookiesFromFile } = await import('../src/utils-cookies.js');
+          fileCookies.push(...loadCookiesFromFile(resolve(merged.cookieFile), url));
+        } catch (e) {
+          console.error(chalk.red(`\n  cookie-file load failed: ${e.message}\n`));
+          process.exit(1);
+        }
+      }
+      const { mergeCookies } = await import('../src/utils-cookies.js');
+      const cookies = mergeCookies(cliCookies, fileCookies, url);
       const headers = {};
       if (merged.header) {
         for (const h of merged.header) {
@@ -135,6 +150,8 @@ program
         ignore: merged.ignore,
         cookies: cookies.length > 0 ? cookies : undefined,
         headers: Object.keys(headers).length > 0 ? headers : undefined,
+        insecure: merged.insecure || false,
+        userAgent: merged.userAgent,
       });
 
       // Responsive capture

package/chrome-extension/README.md

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

package/chrome-extension/icons/favicon.svg

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

package/chrome-extension/manifest.json

@@ -0,0 +1,26 @@
+{
+  "manifest_version": 3,
+  "name": "designlang",
+  "version": "1.0.0",
+  "description": "Extract any website's complete design system — DTCG tokens, Tailwind, Figma variables, MCP server context, iOS/Android/Flutter/WordPress emitters.",
+  "author": "Manav Arya Singh",
+  "homepage_url": "https://designlang.manavaryasingh.com",
+  "action": {
+    "default_title": "Extract design system with designlang",
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "32": "icons/icon-32.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
+    }
+  },
+  "icons": {
+    "16": "icons/icon-16.png",
+    "32": "icons/icon-32.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  },
+  "permissions": ["activeTab"],
+  "host_permissions": ["https://designlang.manavaryasingh.com/*"]
+}

package/chrome-extension/popup.html

@@ -0,0 +1,167 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=360" />
+  <title>designlang</title>
+  <link rel="icon" href="icons/favicon.svg" type="image/svg+xml" />
+  <style>
+    :root {
+      --paper: #f3f1ea;
+      --ink: #0a0908;
+      --ink-2: #403c34;
+      --ink-3: #8b8778;
+      --accent: #ff4800;
+    }
+    *, *::before, *::after { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; }
+    body {
+      width: 360px;
+      background: var(--paper);
+      color: var(--ink);
+      font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
+      font-size: 14px;
+      line-height: 1.4;
+    }
+    .pad { padding: 18px 18px 20px; }
+    .bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 18px 10px;
+      border-bottom: 1px solid var(--ink);
+    }
+    .mono {
+      font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+      font-size: 11px;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink-2);
+    }
+    .mark {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-family: ui-monospace, Menlo, monospace;
+      font-weight: 600;
+    }
+    .mark svg { width: 16px; height: 16px; }
+    h1 {
+      margin: 16px 0 10px;
+      font-family: 'Iowan Old Style', Georgia, serif;
+      font-size: 22px;
+      font-weight: 400;
+      line-height: 1.1;
+      letter-spacing: -0.02em;
+    }
+    h1 em { color: var(--accent); font-style: italic; }
+    p { margin: 0 0 14px; color: var(--ink-2); }
+    .url {
+      display: block;
+      background: #fff;
+      border: 1px solid var(--ink);
+      padding: 10px 12px;
+      font: 12px ui-monospace, Menlo, monospace;
+      color: var(--ink);
+      word-break: break-all;
+      white-space: pre-wrap;
+      margin-bottom: 12px;
+    }
+    button, a.button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      width: 100%;
+      padding: 12px 14px;
+      font: 13px ui-monospace, Menlo, monospace;
+      letter-spacing: 0.03em;
+      background: var(--ink);
+      color: var(--paper);
+      border: 1px solid var(--ink);
+      box-shadow: 4px 4px 0 var(--accent);
+      cursor: pointer;
+      text-decoration: none;
+      transition: transform 120ms, box-shadow 120ms;
+    }
+    button:hover, a.button:hover {
+      transform: translate(-1px, -1px);
+      box-shadow: 5px 5px 0 var(--accent);
+    }
+    button:active, a.button:active {
+      transform: translate(3px, 3px);
+      box-shadow: 1px 1px 0 var(--accent);
+    }
+    .row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+      margin-top: 10px;
+    }
+    .secondary {
+      display: inline-flex;
+      justify-content: center;
+      padding: 9px 10px;
+      border: 1px solid var(--ink);
+      background: transparent;
+      color: var(--ink);
+      font: 11px ui-monospace, Menlo, monospace;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      text-decoration: none;
+      box-shadow: none;
+    }
+    .secondary:hover {
+      background: var(--ink);
+      color: var(--paper);
+      transform: none;
+      box-shadow: none;
+    }
+    .hint {
+      margin-top: 12px;
+      font: 11px ui-monospace, Menlo, monospace;
+      color: var(--ink-3);
+      line-height: 1.5;
+    }
+    .hint code { color: var(--ink); }
+  </style>
+</head>
+<body>
+  <div class="bar">
+    <span class="mark">
+      <svg viewBox="0 0 32 32" aria-hidden="true">
+        <rect width="32" height="32" fill="#F3F1EA"/>
+        <circle cx="13" cy="20" r="7.5" fill="none" stroke="#0A0908" stroke-width="4.5"/>
+        <rect x="19" y="4" width="4.5" height="25" fill="#0A0908"/>
+        <rect x="25" y="25" width="4" height="4" fill="#FF4800"/>
+      </svg>
+      designlang
+    </span>
+    <span class="mono">v7.0</span>
+  </div>
+
+  <div class="pad">
+    <h1>Read this page as a <em>design system</em>.</h1>
+    <p>Extracts DTCG tokens, Tailwind config, Figma variables, an MCP companion, and native iOS / Android / Flutter / WordPress outputs.</p>
+
+    <span class="url" id="url-display">—</span>
+
+    <button id="extract-btn">
+      Extract on designlang
+      <span>↗</span>
+    </button>
+
+    <div class="row">
+      <a class="secondary" id="copy-cli" href="#">Copy CLI</a>
+      <a class="secondary" href="https://github.com/Manavarya09/design-extract" target="_blank" rel="noopener">GitHub</a>
+    </div>
+
+    <div class="hint">
+      Prefer the CLI? <code>npx designlang &lt;url&gt;</code>. MCP server:
+      <code>designlang mcp</code>.
+    </div>
+  </div>
+
+  <script src="popup.js"></script>
+</body>
+</html>

package/chrome-extension/popup.js

@@ -0,0 +1,59 @@
+// designlang Chrome extension popup script.
+// On open, reads the active tab's URL, shows it, and wires the Extract button
+// to hand off to designlang.manavaryasingh.com with the URL prefilled.
+
+const SITE = 'https://designlang.manavaryasingh.com/';
+
+function isExtractable(url) {
+  if (!url) return false;
+  try {
+    const u = new URL(url);
+    return u.protocol === 'http:' || u.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+async function getActiveTabUrl() {
+  const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+  return tabs[0]?.url || '';
+}
+
+function render(tabUrl) {
+  const display = document.getElementById('url-display');
+  const btn = document.getElementById('extract-btn');
+  const copy = document.getElementById('copy-cli');
+
+  if (!isExtractable(tabUrl)) {
+    display.textContent = '(open a regular https:// page to extract)';
+    btn.disabled = true;
+    btn.style.opacity = '0.55';
+    btn.style.cursor = 'not-allowed';
+    copy.setAttribute('aria-disabled', 'true');
+    copy.style.pointerEvents = 'none';
+    copy.style.opacity = '0.55';
+    return;
+  }
+
+  display.textContent = tabUrl;
+
+  btn.addEventListener('click', () => {
+    const target = `${SITE}?url=${encodeURIComponent(tabUrl)}&source=chrome`;
+    chrome.tabs.create({ url: target });
+    window.close();
+  });
+
+  copy.addEventListener('click', async (e) => {
+    e.preventDefault();
+    const line = `npx designlang ${tabUrl}`;
+    try {
+      await navigator.clipboard.writeText(line);
+      copy.textContent = 'Copied';
+      setTimeout(() => { copy.textContent = 'Copy CLI'; }, 1200);
+    } catch {
+      copy.textContent = 'Clipboard denied';
+    }
+  });
+}
+
+getActiveTabUrl().then(render);

package/docs/superpowers/specs/2026-04-18-website-redesign-design.md

@@ -0,0 +1,120 @@
+# designlang website redesign — Wave 2
+
+**Date:** 2026-04-18
+**Status:** Approved for implementation
+**Direction:** Live Design DNA — the site embodies what designlang does.
+
+## Non-negotiables (from user)
+
+- No "AI slop" aesthetic. No purple/blue gradients. No glassmorphism. No floating hero cards.
+- **No emoji. No icon libraries** (Lucide, Heroicons, Phosphor). Iconography only as intent-drawn inline SVG, numerals, or letterforms.
+- No Framer Motion bloat, no fade-up-on-every-element scroll theatrics.
+- Copy must be earned, not templated.
+- Designer voice visible — marginalia, footnotes, document-feel.
+
+## Visual system
+
+**Base:** warm paper `#F3F1EA`, ink `#0A0908`, accent `#FF4800` (used once per screen, maximum).
+**Grays (warm):** `#D8D3C5`, `#8B8778`, `#403C34`.
+**Type:** Fraunces (display, optical 9pt, massive sizes), Instrument Sans (body), JetBrains Mono (mono/tokens).
+**Grid:** 12-col, 24px gutters, deliberately broken by marginalia and side notes.
+**Rules:** 1px solid ink hairlines everywhere (document feel), no soft dividers.
+**Shadow:** one hard offset shadow (`6px 6px 0 #FF4800`) on the primary CTA only.
+**Dark mode:** deferred. Paper-first matches design-system/archival feel.
+**Motion:** prefers-reduced-motion strict. All motion is content-matched (see §Signature Interactions).
+
+## Page structure
+
+Single-page scroll. Numbered sections like a monograph: `§00`…`§09`.
+
+- §00 `HERO` — URL input + live extraction stream; tokens paint on screen as they compute.
+- §01 `DTCG BROWSER` — interactive alias resolver. Click a semantic token, the line flies to its primitive.
+- §02 `MCP` — split: Cursor/Claude Code rule panel on left, real terminal transcript on right.
+- §03 `MULTI-PLATFORM` — tabs Web / iOS / Android / Flutter / WordPress; same token in 5 languages.
+- §04 `CSS HEALTH` — big numerals (unused %, `!important` count, duplicates) set against real specificity plot.
+- §05 `A11Y REMEDIATION` — before/after contrast slider with live ratio.
+- §06 `REGIONS + COMPONENTS` — annotated screenshot; button cluster animates into variants.
+- §07 `FEATURED SPECIMENS` — stripe / vercel / linear / github / figma / apple; each extracted and displayed like a museum specimen. Page accent shifts as you scroll between them.
+- §08 `COMPARISON` — transparent, opinionated table vs. v0, Builder.io, Style Dictionary, Subframe, Project Wallace.
+- §09 `INSTALL & FOOTER` — `npx designlang`, MCP config, Cursor rule install, GitHub/npm/Discussions/sponsor.
+
+## Signature interactions (motion only where content-matched)
+
+1. **Hero stream** — user submits URL, server streams back tokens in extraction order; swatches paint from left to right as server events arrive.
+2. **DTCG alias flight** — click `{primitive.color.brand.primary}` string, an SVG line animates from the semantic token to the primitive, primitive highlights, hex resolves inline.
+3. **Accent shift scroll** — as the Featured Specimens section scrolls, page accent CSS var transitions to each specimen's extracted primary.
+4. **A11y slider** — handle drag shows contrast ratio updating live above the color pair.
+5. **MCP terminal transcript** — real JSON-RPC lines, typed at realistic speed, showing `search_tokens` → result.
+6. **Component cluster unfold** — a single button card unfolds into its detected variants on scroll-into-view.
+
+No other motion.
+
+## Backend
+
+**Existing:** `/api/extract` route using `@sparticuz/chromium` + `playwright-core` + designlang `extractDesignLanguage`.
+
+**Changes required:**
+
+1. **v7.0 output parity** — currently the API returns v6 shape. Add DTCG tokens, agent rules, MCP companion JSON, multi-platform outputs.
+2. **Streaming response** — the extraction produces tokens progressively; stream them over an HTTP stream (Next.js 16 streaming response) so the hero demo paints live. If extraction is atomic today (single `page.evaluate`), we stream the *stages*: crawl → colors → typography → spacing → components → a11y → done.
+3. **Rate limiting** — Vercel Edge Config or in-memory map keyed by IP. 3 extractions per IP per day for anonymous, soft 429 with helpful copy. No login.
+4. **URL validation** — reject `localhost`, `127.x`, `169.254.x`, `10.x`, `172.16–31.x`, `192.168.x`, `file://`, non-http(s). Reject URLs whose DNS resolves to private ranges.
+5. **Timeout cap** — hard 45s; abort Playwright if exceeded.
+6. **Caching** — cache extraction result by URL in Vercel Blob for 24h. Collision: same URL within 24h returns cached zip + a small "cached" annotation.
+7. **Bot detection** — Vercel BotID (free, platform-native).
+8. **Output:** downloadable `.zip` of all generated files (same set the CLI would produce for `--platforms all --emit-agent-rules`) plus a JSON summary for the on-screen preview.
+
+**New/changed files:**
+- `website/app/api/extract/route.js` — streaming + rate limit + caching + v7.0 outputs
+- `website/lib/rate-limit.js` (new)
+- `website/lib/url-safety.js` (new)
+- `website/lib/cache.js` (new, Vercel Blob-backed)
+
+## Frontend components (new)
+
+Kept flat in `website/app/components/`. Each is a self-contained section:
+
+- `Hero.js` — URL input + live stream renderer
+- `TokenBrowser.js` — DTCG alias resolver
+- `McpSection.js` — split editor + terminal
+- `PlatformTabs.js` — multi-platform code viewer
+- `CssHealth.js` — numerals + specificity plot (hand-drawn SVG scatter)
+- `A11ySlider.js` — contrast before/after
+- `RegionsComponents.js` — annotated image + cluster unfold
+- `Specimens.js` — featured site grid; orchestrates accent shift
+- `Comparison.js` — opinionated feature matrix
+- `InstallFooter.js` — closing section
+- `Marginalia.js` — shared side-column component for footnotes and command labels
+- `Rule.js` — 1px hairline divider with section label
+
+New lib:
+- `website/lib/token-helpers.js` — DTCG alias resolution shared with components
+- `website/lib/specimens.json` — pre-extracted data for the featured section (generated at build time from the CLI so specimens are real)
+
+## Deferred (explicit non-goals for Wave 2)
+
+- Login / user accounts / saved extractions
+- Paid tiers
+- Dark mode
+- Blog / changelog page
+- i18n
+- Sharable `/x/<slug>` permalinks (nice-to-have but not Wave 2)
+
+## Test / verification plan
+
+- Lighthouse: LCP ≤ 2.0s on the hero at 3G-Fast, CLS 0, accessibility ≥ 95.
+- `prefers-reduced-motion: reduce` — verify all motion stops or substitutes with non-motion reveal.
+- Keyboard navigation through every interactive element.
+- Extractor end-to-end: submit real URL, receive streamed tokens, download zip, verify zip contains v7.0 shape.
+- Rate limit: 4th request from same IP returns 429 with copy.
+- URL safety: localhost, private IPs, `file://` all rejected with 400.
+
+## Implementation chunks (PR per chunk)
+
+Each chunk is one PR. Merge before starting the next, same pattern as v7.0 release.
+
+- **PR A: Foundation** — fonts, base CSS, grid primitives, `Rule`, `Marginalia`, new `globals.css`, `layout.js`, clean `page.js` scaffold.
+- **PR B: Hero + streaming extraction API** — hero component, API streaming, URL safety, rate limit, basic Blob cache.
+- **PR C: Core showcase sections** — DTCG browser, MCP section, multi-platform tabs.
+- **PR D: Analytics sections** — CSS health, a11y slider, regions + components.
+- **PR E: Specimens + comparison + install + footer + deploy** — pre-extract data at build time, accent-shift scroll, comparison table, final polish, Vercel deploy.