designlang 8.0.0 → 10.0.0

package/.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "designlang-site",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["--prefix", "website", "run", "dev"],
+      "port": 3000
+    }
+  ]
+}

package/CHANGELOG.md

@@ -1,5 +1,81 @@
 # Changelog
 
+## [10.0.0] — 2026-04-22
+
+**The Intent Release.** v9 captured *how* a site looks; v10 captures *what it is* — the semantic layer LLM agents need to rebuild a site faithfully, not just restyle a generic scaffold. Six new extractors, a multi-page crawl orchestrator, an optional smart-classifier LLM fallback, and a ready-to-paste prompt pack. 297/297 tests passing.
+
+### Added — extraction
+
+- **Page Intent classifier** (`src/extractors/page-intent.js`) — labels the crawled URL as `landing` / `pricing` / `docs` / `blog` / `blog-post` / `product` / `about` / `dashboard` / `auth` / `legal`, with URL + title + meta + DOM-shape signals, a confidence score, and ranked alternates.
+- **Section Roles** (`src/extractors/section-roles.js`) — annotates every semantic region with a role (`hero`, `feature-grid`, `logo-wall`, `stats`, `testimonial`, `pricing-table`, `faq`, `steps`, `comparison`, `gallery`, `bento`, `cta`, `footer`), extracts slot copy (headings, lede, CTA counts), and emits reading order.
+- **Material Language** (`src/extractors/material-language.js`) — classifies the visual vocabulary (`glassmorphism` / `neumorphism` / `flat` / `brutalist` / `skeuomorphic` / `material-you` / `soft-ui` / `mixed`) from shadow complexity, backdrop-filter usage, saturation, and geometry.
+- **Imagery Style** (`src/extractors/imagery-style.js`) — fingerprints the imagery (`photography` / `3d-render` / `isometric` / `flat-illustration` / `gradient-mesh` / `icon-only` / `screenshot` / `mixed`), plus dominant aspect ratio and image-radius profile.
+- **Component Library detector** (`src/extractors/component-library.js`) — identifies shadcn/ui, Radix, Headless UI, MUI, Chakra, Mantine, Ant Design, Bootstrap, HeroUI/NextUI, Tailwind UI, Vuetify, or plain Tailwind, with evidence and alternates.
+- **Logo extractor** (`src/extractors/logo.js`) — pulls the site's logo (SVG source or `<img>` bytes) and samples clearspace; writes `*-logo.svg` or `.png` plus `*-logo.json`.
+
+### Added — orchestration
+
+- **Multi-page crawl** (`src/multipage.js`) — `--full` or `--pages <n>` auto-discovers canonical pages from nav (pricing/docs/blog/about/product), runs the full extractor pipeline on each, and emits a cross-page consistency report with shared tokens, per-page uniques, and pairwise Jaccard scores.
+- **Smart classifier fallback** (`src/classifiers/smart.js`) — opt-in `--smart` flag routes low-confidence classifications through the OpenAI or Anthropic API (via `OPENAI_API_KEY` / `ANTHROPIC_API_KEY`). Gracefully no-ops when no key is set. Zero-dep — uses global `fetch`.
+
+### Added — LLM-native outputs
+
+- **Prompt pack** (`src/formatters/prompt-pack.js`) — writes a `*-prompts/` directory with `v0.txt`, `lovable.txt`, `cursor.md`, `claude-artifacts.md`, and atomic `recipe-<component>.md` cards. Tokens, section order, voice, and library guidance are all inlined so one paste is enough.
+- **Markdown sections** (`src/formatters/markdown.js`) — adds Page Intent, Section Roles, Material Language, Imagery Style, Component Library, and (when `--full`) Multi-Page Map sections to `*-design-language.md`.
+
+### Added — output files
+
+- `*-intent.json` — page-type + section-role map
+- `*-visual-dna.json` — material language + imagery style
+- `*-library.json` — component library detection + evidence
+- `*-logo.svg` | `*-logo.png` + `*-logo.json` (with `--full`)
+- `*-multipage.json` — per-page design languages + consistency (with `--full` / `--pages`)
+- `*-prompts/` — prompt pack directory
+
+### New CLI flags
+
+- `--smart` — enable optional LLM refinement for low-confidence classifiers
+- `--pages <n>` — explicitly crawl N canonical pages
+- `--no-prompts` — skip the prompt-pack directory
+
+### Tests
+
+- `tests/v10-features.test.js` — 15 new subtests covering page intent, section roles, component library, material language, imagery style, multi-page discovery, cross-page consistency, and prompt pack. Full suite: 297 passing.
+
+## [9.0.0] — 2026-04-21
+
+**The Motion & Voice release.** Six new capabilities that push designlang past "extract the paint" and into "extract the *feel*, the *anatomy*, and the *voice*." No competing tool does any of these. All work ships with tests (282/282 passing).
+
+### Added — extraction
+
+- **Motion language extractor** (`src/extractors/motion.js`) — easings are classified into families (`ease-in`, `ease-in-out`, `ease-out`, `linear`, `steps`, `spring`, `custom`) via cubic-bezier geometry, durations are bucketed into a named scale (`instant`/`xs`/`sm`/`md`/`lg`/`xl`/`xxl`), spring/overshoot cubic-beziers are surfaced, scroll-linked animation usage is detected via `animation-timeline` / `view-timeline-name` / `scroll-timeline-name`, and each `@keyframes` rule is classified by kind (`slide-x`, `slide-y`, `fade`, `reveal`, `rotate`, `scale`, `pulse`, `custom`). A one-word `feel` fingerprint (`springy`/`responsive`/`smooth`/`mechanical`/`mixed`) summarizes the whole system.
+- **Motion tokens formatter** (`src/formatters/motion-tokens.js`) — emits `*-motion-tokens.json` in a DTCG-flavored shape with `$type: duration` / `$type: cubicBezier`.
+- **Component Anatomy v2** (`src/extractors/component-anatomy.js`) — groups components by variant-class hints, infers slot roles (icon / label / badge / heading / media / footer), builds a variant × size × state matrix, captures sample button labels, and emits typed React stubs via `formatAnatomyStubs`. Output: `*-anatomy.tsx`.
+- **Brand voice extractor** (`src/extractors/voice.js`) — classifies tone (friendly / formal / technical / playful / neutral) from lexical markers, picks pronoun posture (`we→you`, `you-only`, `we-only`, `third-person`), detects heading style, top CTA verbs, and microcopy patterns. Output: `*-voice.json`.
+- **Crawler extensions** (`src/crawler.js`) — per-element `animation-timeline`, view/scroll timeline names; per-candidate `text`, `slots[]`, `disabled`, `variantHint`, `sizeHint` to feed anatomy + voice.
+
+### Added — new commands
+
+- **`designlang lint <file>`** — audits DTCG / flat-JSON / CSS-vars token files for color sprawl, spacing-scale drift, radius/shadow bloat, and WCAG AA fg/bg contrast. Exits non-zero on `error`-level findings. CI-ready.
+- **`designlang drift <url> --tokens <file>`** — compares local tokens against a live site, reports `in-sync` / `minor-drift` / `notable-drift` / `major-drift` with a drift ratio. `--fail-on <level>` controls CI exit code.
+- **`designlang visual-diff <before> <after>`** — single-file HTML side-by-side report with embedded base64 screenshots, file-size deltas, and a changed-color-tokens table.
+
+### Added — markdown output
+
+Three new sections in `*-design-language.md`: **Motion Language**, **Component Anatomy**, **Brand Voice**.
+
+### Changed
+
+- Default extraction now writes **11+ files** (up from 8): `*-motion-tokens.json`, `*-anatomy.tsx` (when candidates exist), `*-voice.json`.
+- `bin/design-extract.js` version → `9.0.0`.
+- `package.json` — description refreshed; new keywords: `motion`, `animation`, `component-anatomy`, `brand-voice`, `token-lint`, `visual-diff`.
+- README: "What's New in v9" hero block, new feature sections 24-29, new CLI entries (`lint`, `drift`, `visual-diff`).
+
+### Tests
+
+- New `tests/v9-features.test.js` — 7 suites, 21 assertions across motion, anatomy, voice, and lint.
+- Full suite: **282/282 passing**.
+
 ## [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.

package/README.md

@@ -15,9 +15,34 @@
   <img src="designlang.png" alt="designlang in action" width="100%">
 </p>
 
-**designlang** crawls any website with a headless browser, extracts every computed style from the live DOM, and generates **8 output files** — including an AI-optimized markdown file, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS custom properties.
+[![designlang on npm](https://pkgfolio.vercel.app/embed/pkg/designlang?v=2)](https://www.npmjs.com/package/designlang)
 
-But unlike every other tool out there, it also extracts **layout patterns** (grids, flexbox, containers), captures **responsive behavior** across 4 breakpoints, records **interaction states** (hover, focus, active), scores **WCAG accessibility**, and lets you **compare multiple brands** or **sync live sites to local tokens**.
+**designlang** crawls any website with a headless browser, extracts every computed style from the live DOM, and generates **17+ output files** — including an AI-optimized markdown file, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, CSS custom properties, motion tokens, typed component anatomy stubs, a brand voice summary, **page intent + section roles**, **visual DNA** (material language + imagery style), **component library detection**, a **logo file**, a **multi-page consistency report**, and a **prompt pack** of ready-to-paste prompts for v0, Lovable, Cursor, and Claude Artifacts.
+
+But unlike every other tool out there, it also extracts **layout patterns** (grids, flexbox, containers), **motion language** (durations, easings, springs, scroll-linked animations), **component anatomy** (slots, variant × size × state matrices), **brand voice** (tone, CTA verbs, heading style), captures **responsive behavior** across 4 breakpoints, records **interaction states** (hover, focus, active), scores **WCAG accessibility**, lints your own token files, and lets you **drift-check a codebase against a live site**, **visual-diff two URLs**, **compare multiple brands**, or **sync live sites to local tokens**.
+
+## What's New in v10 — The Intent Release
+
+Everything else captures *how* a site looks. v10 captures *what it is* — the semantic signal an LLM needs to rebuild a site faithfully instead of restyling a generic scaffold.
+
+- **Page Intent** — classifier labels the URL as `landing` / `pricing` / `docs` / `blog` / `blog-post` / `product` / `about` / `dashboard` / `auth` / `legal`, with a confidence score and rival alternates. URL + title + meta + DOM-shape signals. Heuristic-only by default; opt into `--smart` for LLM refinement.
+- **Section Roles** — every semantic region gets a role (`hero`, `feature-grid`, `logo-wall`, `stats`, `testimonial`, `pricing-table`, `faq`, `steps`, `comparison`, `gallery`, `bento`, `cta`, `footer`), plus reading order and extracted slot copy (headings, lede, CTA counts).
+- **Multi-Page Crawl** — `--full` (or `--pages <n>`) auto-discovers the site's own canonical pages from its nav (pricing/docs/blog/about/product) and runs the full pipeline on each, then emits a cross-page consistency report — shared tokens, per-page uniques, and pairwise Jaccard scores. LLMs get a real design language, not just a homepage snapshot.
+- **Material Language** — classifies the visual vocabulary as `glassmorphism` / `neumorphism` / `flat` / `brutalist` / `skeuomorphic` / `material-you` / `soft-ui` / `mixed` from shadow complexity, backdrop-filter usage, saturation, and geometry.
+- **Imagery Style** — fingerprints the images: `photography` / `3d-render` / `isometric` / `flat-illustration` / `gradient-mesh` / `icon-only` / `screenshot` / `mixed`, plus dominant aspect ratio and image-radius profile.
+- **Component Library Detection** — identifies `shadcn/ui`, `radix-ui`, `headlessui`, `mui`, `chakra-ui`, `mantine`, `ant-design`, `bootstrap`, `heroui`, `tailwind-ui`, `vuetify`, or plain `tailwindcss`, with evidence and alternates.
+- **Logo Extraction** — `--full` writes `*-logo.svg` (or `.png`) plus `*-logo.json` with dimensions, aspect, and sampled clearspace.
+- **Prompt Pack** — a `*-prompts/` directory with `v0.txt`, `lovable.txt`, `cursor.md`, `claude-artifacts.md`, and atomic `recipe-<component>.md` cards — tokens, section order, voice, and library inlined so one paste is enough.
+- **`--smart` mode** — when a heuristic classifier returns low confidence, fall back to a small LLM call (uses `OPENAI_API_KEY` or `ANTHROPIC_API_KEY` from env). Completely optional — no key, no behavior change.
+
+## What's New in v9 — The Motion & Voice Release
+
+- **Motion Language** — durations bucketed into semantic tokens (`instant`/`xs`/`sm`/`md`/`lg`/`xl`), easings classified into families (ease-out, spring-overshoot, steps), scroll-linked animation detection (`animation-timeline`, `view-timeline-name`), keyframe kind classification (slide / fade / reveal / rotate / scale / pulse), and a `feel` fingerprint — *springy*, *responsive*, *smooth*, *mechanical*, or *mixed*.
+- **Component Anatomy v2** — every component cluster is now an *anatomy tree* with slots (label, icon, badge, heading, media), variant × size × state matrices, and an emitted `*-anatomy.tsx` file of typed React stubs you can wire into your design system.
+- **Brand Voice** — extracts tone (friendly / formal / technical / playful / neutral), pronoun posture (`we→you` / `you-only` / `we-only` / `third-person`), heading style (Title Case / Sentence case / all-lowercase), top CTA verbs, and a microcopy inventory. Feeds LLMs the *voice*, not just the paint.
+- **`designlang lint`** — audit your own `design-tokens.json` (DTCG or flat) or `variables.css` for color sprawl, spacing-scale drift, radius/shadow bloat, and WCAG fg/bg contrast fails. Exits non-zero on errors — CI-ready.
+- **`designlang drift`** — point at a live site, pass your local token file, and get a verdict: `in-sync` / `minor-drift` / `notable-drift` / `major-drift`. Integrates cleanly with the existing GitHub Action.
+- **`designlang visual-diff`** — capture two URLs side-by-side and emit a single-file HTML report with component screenshots, file-size deltas, and changed color tokens. No heavy pixel-diff dependencies — runs in pure Node + Playwright.
 
 ## Quick Start
 
@@ -31,7 +56,7 @@ Get everything at once:
 npx designlang https://stripe.com --full
 ```
 
-## What You Get (8 Files)
+## What You Get (11+ Files)
 
 | File | What it is |
 |------|------------|
@@ -43,6 +68,9 @@ npx designlang https://stripe.com --full
 | `*-figma-variables.json` | Figma Variables import (with dark mode support) |
 | `*-theme.js` | React/CSS-in-JS theme (Chakra, Stitches, Vanilla Extract) |
 | `*-shadcn-theme.css` | shadcn/ui globals.css variables |
+| `*-motion-tokens.json` | **(v9)** Motion tokens — durations, easings, springs, scroll-linked flag |
+| `*-anatomy.tsx` | **(v9)** Typed React stubs for every detected component + variants |
+| `*-voice.json` | **(v9)** Brand voice fingerprint — tone, CTA verbs, heading style |
 
 The markdown output has **19 sections**: Color Palette, Typography, Spacing, Border Radii, Box Shadows, CSS Custom Properties, Breakpoints, Transitions & Animations, Component Patterns (with full CSS snippets), Layout System, Responsive Design, Interaction States, Accessibility (WCAG 2.1), Gradients, Z-Index Map, SVG Icons, Font Files, Image Style Patterns, and Quick Start.
 
@@ -319,7 +347,112 @@ A Manifest-v3 popup lives in [`chrome-extension/`](chrome-extension/). One click
 - **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)
+### 24. Motion Language (NEW in v9)
+
+Extracts the full motion fingerprint, not just transition strings:
+
+```bash
+designlang https://linear.app
+# emits linear-app-motion-tokens.json
+```
+
+```
+Motion: feel = springy, 2 spring easings, scroll-linked = yes
+Durations: instant (80ms), xs (150ms), sm (220ms), md (380ms)
+Easings: ease-out (61%), spring-overshoot (18%), ease-in-out (21%)
+Keyframes: fade-up (slide-y, used 18x), scale-in (reveal, used 4x)
+```
+
+### 25. Component Anatomy v2 (NEW in v9)
+
+Every detected component becomes an anatomy tree with typed React stubs:
+
+```bash
+designlang https://stripe.com
+# emits stripe-com-anatomy.tsx
+```
+
+```tsx
+export interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  leadingIcon?: React.ReactNode;
+  badge?: React.ReactNode;
+  children?: React.ReactNode;
+}
+```
+
+### 26. Brand Voice (NEW in v9)
+
+Pulls the voice alongside the visual:
+
+```bash
+designlang https://vercel.com
+# emits vercel-com-voice.json + a Brand Voice section in the markdown
+```
+
+```
+Tone: technical · Pronoun: we→you · Headings: Sentence case (tight)
+Top CTA verbs: start (14), get (8), deploy (5), try (3)
+Sample headings:
+  > Develop. Preview. Ship.
+  > The React framework for the web.
+```
+
+### 27. `designlang lint` — Token Quality Linter (NEW in v9)
+
+Audit your own token file with the same rules the scorer runs against live sites:
+
+```bash
+designlang lint ./src/tokens/design-tokens.json
+```
+
+```
+Score: 74/100  Grade: C   Tokens: 126
+
+  colorDiscipline      ██████████████░░░░░░ 72
+  spacingSystem        ████████████████░░░░ 84
+  borderRadii          ████████████░░░░░░░░ 60
+  shadows              ██████████░░░░░░░░░░ 50
+  accessibility        █████████████████░░░ 88
+
+  WARN  [color-sprawl] 3 near-duplicate color pair(s) within 8 RGB units
+  ERROR [contrast-wcag-aa] 2 fg/bg pair(s) fail WCAG AA (4.5:1)
+```
+
+Exits non-zero on any `error`-level finding — drop into CI.
+
+### 28. `designlang drift` — Codebase ↔ Live Site Sync Check (NEW in v9)
+
+Point at a deployed site, pass your local tokens, and get a verdict:
+
+```bash
+designlang drift https://yourapp.com --tokens ./src/tokens.json --tolerance 8
+```
+
+```
+Verdict: notable-drift (drift ratio: 0.24)
+
+| token          | local    | nearest live       | Δ  |
+|----------------|----------|--------------------|----|
+| color.primary  | #4338CA  | #5B4CF5 (primary)  | 22 |
+| color.border   | #D4D4D8  | #E5E5EA (surface)  | 18 |
+```
+
+Configurable `--fail-on <level>` for CI: `minor-drift` / `notable-drift` / `major-drift`.
+
+### 29. `designlang visual-diff` — Two-URL Side-by-Side (NEW in v9)
+
+Capture screenshots + token deltas for two URLs in a single self-contained HTML report:
+
+```bash
+designlang visual-diff https://staging.app.com https://app.com
+```
+
+Emits `visual-diff-<timestamp>.html` with embedded images (base64), file-size deltas, and a changed-color-tokens table. Nothing else to serve — just open the file.
+
+### 30. Better Auth + Network Control (v7.1)
 
 Extracting from authenticated, self-signed, or non-default environments now takes one flag:
 
@@ -407,15 +540,18 @@ Options:
   --verbose               Detailed progress output
 
 Commands:
-  apply <url>             Extract and apply design directly to your project
-  clone <url>             Generate a working Next.js starter from extracted design
-  score <url>             Rate design quality (7 categories, A-F, bar chart)
-  watch <url>             Monitor for design changes on interval
-  diff <urlA> <urlB>      Compare two sites' design languages
-  brands <urls...>        Multi-brand comparison matrix
-  sync <url>              Sync local tokens with live site
-  history <url>           View design change history
-  mcp                     Launch stdio MCP server (--output-dir <dir>)
+  apply <url>                       Extract and apply design directly to your project
+  clone <url>                       Generate a working Next.js starter from extracted design
+  score <url>                       Rate design quality (7 categories, A-F, bar chart)
+  watch <url>                       Monitor for design changes on interval
+  diff <urlA> <urlB>                Compare two sites' design languages
+  brands <urls...>                  Multi-brand comparison matrix
+  sync <url>                        Sync local tokens with live site
+  history <url>                     View design change history
+  mcp                               Launch stdio MCP server (--output-dir <dir>)
+  lint <file>                       (v9) Audit a local token file (.json/.css) — CI-ready
+  drift <url> --tokens <file>       (v9) Check local tokens for drift against a live site
+  visual-diff <before> <after>      (v9) Side-by-side HTML diff of two URLs
 ```
 
 ## Example Output
@@ -506,3 +642,5 @@ See [CONTRIBUTING.md](CONTRIBUTING.md). PRs welcome!
 ## License
 
 [MIT](LICENSE) - Manav Arya Singh
+
+

package/bin/design-extract.js

@@ -6,6 +6,10 @@ import { resolve, join } from 'path';
 import chalk from 'chalk';
 import ora from 'ora';
 import { extractDesignLanguage } from '../src/index.js';
+import { refineWithSmart } from '../src/classifiers/smart.js';
+import { crawlCanonicalPages } from '../src/multipage.js';
+import { extractLogo } from '../src/extractors/logo.js';
+import { buildPromptPack } from '../src/formatters/prompt-pack.js';
 import { formatMarkdown } from '../src/formatters/markdown.js';
 import { formatTokens } from '../src/formatters/tokens.js';
 import { formatDtcgTokens } from '../src/formatters/dtcg-tokens.js';
@@ -48,7 +52,7 @@ const program = new Command();
 program
   .name('designlang')
   .description('Extract the complete design language from any website')
-  .version('8.0.0');
+  .version('10.0.0');
 
 // ── Main command: extract ──────────────────────────────────────
 program
@@ -77,6 +81,9 @@ program
   .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')
+  .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('--json', 'output raw JSON to stdout (for CI/CD)')
   .option('--json-pretty', 'output formatted JSON to stdout')
   .option('--no-history', 'skip saving to history')
@@ -173,6 +180,65 @@ program
         design.interactions = await captureInteractions(url, { width: merged.width, height: parseInt(merged.height) || 800, wait: merged.wait });
       }
 
+      // v10: optional LLM refinement for low-confidence classifiers.
+      if (merged.smart) {
+        spinner.text = 'Refining classifiers with smart mode...';
+        try {
+          const refined = await refineWithSmart({
+            enabled: true,
+            rawData: design._raw,
+            design,
+            pageIntent: design.pageIntent,
+            sectionRoles: design.sectionRoles,
+            materialLanguage: design.materialLanguage,
+            componentLibrary: design.componentLibrary,
+          });
+          if (refined.applied) {
+            if (refined.updates?.pageIntent) design.pageIntent = { ...design.pageIntent, ...refined.updates.pageIntent };
+            if (refined.updates?.materialLanguage) design.materialLanguage = { ...design.materialLanguage, ...refined.updates.materialLanguage };
+            if (refined.updates?.componentLibrary) design.componentLibrary = { ...design.componentLibrary, ...refined.updates.componentLibrary };
+            design._smart = { provider: refined.provider, errors: refined.errors };
+          } else {
+            design._smart = { skipped: refined.reason };
+          }
+        } catch (e) { design._smart = { error: e.message }; }
+      }
+
+      // v10: logo extraction via a fresh Playwright session.
+      if (merged.full || merged.screenshots) {
+        spinner.text = 'Extracting logo...';
+        try {
+          const { chromium } = await import('playwright');
+          const browser = await chromium.launch({ headless: true, ...(merged.systemChrome && { channel: 'chrome' }) });
+          const ctx = await browser.newContext({ viewport: { width: merged.width, height: parseInt(merged.height) || 800 } });
+          const lp = await ctx.newPage();
+          await lp.goto(url, { waitUntil: 'domcontentloaded', timeout: 20000 }).catch(() => {});
+          await lp.waitForLoadState('networkidle').catch(() => {});
+          mkdirSync(outDir, { recursive: true });
+          design.logo = await extractLogo(lp, outDir, prefix);
+          await browser.close();
+        } catch (e) { design.logo = { found: false, error: e.message }; }
+      }
+
+      // v10: multi-page canonical crawl (pricing/docs/blog/about/product).
+      const pagesArg = merged.pages != null ? merged.pages : (merged.full ? 5 : 0);
+      if (pagesArg > 0) {
+        spinner.text = `Crawling ${pagesArg} canonical pages...`;
+        try {
+          const mp = await crawlCanonicalPages({
+            homepageUrl: url,
+            homepageRawData: design._raw,
+            maxPages: pagesArg,
+            crawlerOptions: { width: merged.width, height: parseInt(merged.height) || 800 },
+            extract: (u, o) => extractDesignLanguage(u, o),
+          });
+          design.multiPage = mp;
+        } catch (e) { design.multiPage = { error: e.message }; }
+      }
+
+      // Drop the internal raw stash before JSON/output serialization.
+      delete design._raw;
+
       // JSON mode: output and exit
       if (jsonMode) {
         const output = opts.jsonPretty ? JSON.stringify(design, null, 2) : JSON.stringify(design);
@@ -221,6 +287,39 @@ program
       };
       files.push({ name: `${prefix}-mcp.json`, content: JSON.stringify(mcpPayload, null, 2), label: 'MCP companion' });
 
+      // v9: motion tokens + component anatomy stubs + voice
+      const { formatMotionTokens } = await import('../src/formatters/motion-tokens.js');
+      const { formatAnatomyStubs } = await import('../src/extractors/component-anatomy.js');
+      files.push({ name: `${prefix}-motion-tokens.json`, content: formatMotionTokens(design.motion), label: 'Motion Tokens' });
+      if ((design.componentAnatomy || []).length) {
+        files.push({ name: `${prefix}-anatomy.tsx`, content: formatAnatomyStubs(design.componentAnatomy), label: 'Component Anatomy (stubs)' });
+      }
+      files.push({ name: `${prefix}-voice.json`, content: JSON.stringify(design.voice || {}, null, 2), label: 'Brand Voice' });
+
+      // 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 }, null, 2), label: 'Visual DNA' });
+      files.push({ name: `${prefix}-library.json`, content: JSON.stringify(design.componentLibrary || {}, null, 2), label: 'Component Library Detection' });
+      if (design.logo && design.logo.found) {
+        files.push({ name: `${prefix}-logo.json`, content: JSON.stringify(design.logo, null, 2), label: 'Logo Metadata' });
+      }
+      if (design.multiPage) {
+        files.push({ name: `${prefix}-multipage.json`, content: JSON.stringify(design.multiPage, null, 2), label: 'Multi-Page Crawl' });
+      }
+      if (merged.prompts !== false) {
+        const pack = buildPromptPack(design);
+        const promptsDir = join(outDir, `${prefix}-prompts`);
+        mkdirSync(promptsDir, { recursive: true });
+        writeFileSync(join(promptsDir, 'v0.txt'), pack['v0.txt'], 'utf-8');
+        writeFileSync(join(promptsDir, 'lovable.txt'), pack['lovable.txt'], 'utf-8');
+        writeFileSync(join(promptsDir, 'cursor.md'), pack['cursor.md'], 'utf-8');
+        writeFileSync(join(promptsDir, 'claude-artifacts.md'), pack['claude-artifacts.md'], 'utf-8');
+        for (const r of pack.recipes) {
+          const slug = r.name.replace(/[^a-z0-9]+/gi, '-').toLowerCase() || 'component';
+          writeFileSync(join(promptsDir, `recipe-${slug}.md`), r.content, 'utf-8');
+        }
+      }
+
       for (const file of files) {
         writeFileSync(join(outDir, file.name), file.content, 'utf-8');
       }
@@ -804,6 +903,86 @@ program
     }
   });
 
+// ── Token lint (v9) ────────────────────────────────────────
+program
+  .command('lint <file>')
+  .description('Audit a local token file (.json / .css) for color sprawl, scale drift, contrast fails')
+  .option('--json', 'emit machine-readable JSON')
+  .action(async (file, opts) => {
+    try {
+      const { lintTokens } = await import('../src/lint.js');
+      const r = lintTokens(resolve(file));
+      if (opts.json) { process.stdout.write(JSON.stringify(r, null, 2) + '\n'); return; }
+      console.log('');
+      console.log(chalk.bold(`  designlang lint — ${file}`));
+      console.log(`  Score: ${chalk.bold(r.score + '/100')}  Grade: ${chalk.bold(r.grade)}   Tokens: ${r.tokenCount}`);
+      console.log('');
+      for (const [k, v] of Object.entries(r.scorecard)) {
+        const bar = '█'.repeat(Math.round(v / 5)) + '░'.repeat(20 - Math.round(v / 5));
+        console.log(`  ${k.padEnd(20)} ${bar} ${v}`);
+      }
+      console.log('');
+      for (const f of r.findings) {
+        const color = f.severity === 'error' ? chalk.red : f.severity === 'warn' ? chalk.yellow : chalk.cyan;
+        console.log(`  ${color(f.severity.toUpperCase())} [${f.rule}] ${f.message}`);
+      }
+      if (!r.findings.length) console.log(chalk.green('  ✓ no issues found'));
+      console.log('');
+      process.exit(r.findings.some(f => f.severity === 'error') ? 1 : 0);
+    } catch (err) {
+      process.stderr.write(chalk.red(`\n  Error: ${err.message}\n\n`));
+      process.exit(1);
+    }
+  });
+
+// ── Drift (v9) ─────────────────────────────────────────────
+program
+  .command('drift <url>')
+  .description('Compare local tokens against a live site and report drift (CI-friendly)')
+  .requiredOption('--tokens <file>', 'local tokens file (.json or .css)')
+  .option('--tolerance <n>', 'color distance tolerance (0-50)', parseInt, 8)
+  .option('--fail-on <level>', 'exit non-zero on: minor-drift | notable-drift | major-drift', 'notable-drift')
+  .option('--json', 'emit machine-readable JSON')
+  .action(async (url, opts) => {
+    if (!url.startsWith('http')) url = `https://${url}`;
+    validateUrl(url);
+    try {
+      const { checkDrift, formatDriftMarkdown } = await import('../src/drift.js');
+      const r = await checkDrift(url, { tokens: resolve(opts.tokens), tolerance: opts.tolerance });
+      if (opts.json) { process.stdout.write(JSON.stringify(r, null, 2) + '\n'); }
+      else { console.log('\n' + formatDriftMarkdown(r) + '\n'); }
+      const order = ['in-sync', 'minor-drift', 'notable-drift', 'major-drift'];
+      if (order.indexOf(r.verdict) >= order.indexOf(opts.failOn)) process.exit(1);
+    } catch (err) {
+      process.stderr.write(chalk.red(`\n  Error: ${err.message}\n\n`));
+      process.exit(1);
+    }
+  });
+
+// ── Visual diff (v9) ───────────────────────────────────────
+program
+  .command('visual-diff <before> <after>')
+  .description('Side-by-side HTML diff of two URLs with screenshots + token changes')
+  .option('-o, --out <dir>', 'output directory', './design-extract-output')
+  .action(async (before, after, opts) => {
+    if (!before.startsWith('http')) before = `https://${before}`;
+    if (!after.startsWith('http')) after = `https://${after}`;
+    validateUrl(before); validateUrl(after);
+    const spinner = ora('Capturing before + after').start();
+    try {
+      const { visualDiff, formatVisualDiffHtml } = await import('../src/visual-diff.js');
+      const r = await visualDiff({ beforeUrl: before, afterUrl: after });
+      const html = formatVisualDiffHtml(r);
+      mkdirSync(resolve(opts.out), { recursive: true });
+      const path = join(resolve(opts.out), `visual-diff-${Date.now()}.html`);
+      writeFileSync(path, html, 'utf8');
+      spinner.succeed(`Visual diff written → ${path}`);
+    } catch (err) {
+      spinner.fail(err.message);
+      process.exit(1);
+    }
+  });
+
 // ── MCP server command ─────────────────────────────────────
 program
   .command('mcp')

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "designlang",
-  "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.",
+  "version": "10.0.0",
+  "description": "Extract the complete design language from any website — colors, typography, spacing, shadows, motion, component anatomy, brand voice, page intent, section roles, material language, component library, imagery style, and logo. Outputs AI-optimized markdown, W3C design tokens, motion tokens, typed component stubs, Tailwind config, and ready-to-paste v0 / Lovable / Cursor / Claude-Artifacts prompts.",
   "type": "module",
   "bin": {
     "designlang": "./bin/design-extract.js"
@@ -38,7 +38,13 @@
     "vue",
     "svelte",
     "json",
-    "ci-cd"
+    "ci-cd",
+    "motion",
+    "animation",
+    "component-anatomy",
+    "brand-voice",
+    "token-lint",
+    "visual-diff"
   ],
   "author": "masyv",
   "license": "MIT"