designlang 12.16.0 → 12.18.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # Changelog
 
+## [12.18.0] — 2026-06-12
+
+**`verify` closes the loop — designlang now *proves* its extraction with a fidelity score.**
+
+Every release so far *read* a design system and emitted artifacts. None proved
+the artifacts could rebuild the source. `verify` does exactly that.
+
+- **`designlang verify <url>`** — extracts the design, then for each detected
+  component (button + card in v1) rebuilds a clone styled **only** by the
+  extracted tokens (every visual property snapped to its nearest token; colours
+  matched in CIE-Lab ΔE space), renders it, and **pixel-diffs** it against the
+  live component. Emits a **0–100 fidelity score**, a per-token-family
+  attribution of where information was lost, and a `verify.html` triptych
+  (original │ rebuilt-from-tokens │ loss heatmap) per component, plus
+  `verify.json`. `--min <score>` exits non-zero for CI gating.
+
+  The score is honest by construction: a component not on the page is `n/a`
+  (excluded, never a silent 100), and a property with no matching token is
+  `unmapped` — counted as loss and surfaced in the attribution, so a weak
+  extractor *lowers* the score rather than hiding behind it. Size mismatches are
+  letterboxed, never stretched.
+
+  Adds `pixelmatch` + `pngjs` as dependencies. New modules under `src/verify/`
+  (`tokens`, `restyle`, `render`, `diff`, `index`) are isolated and unit-tested.
+
+## [12.17.0] — 2026-06-12
+
+**motionlang adds two more emitters — GSAP and the framework-free Web Animations API.**
+
+The motion language already shipped to Framer Motion, Motion One, plain CSS
+and Tailwind. This release covers the two most-requested remaining targets:
+GreenSock and the browser-native Web Animations API.
+
+- **GSAP preset (`<host>-motion.gsap.js`)** — registers the page's extracted
+  cubic-bezier curves as named `CustomEase`s (so the site's exact feel is
+  reproducible), exposes duration presets in seconds, and ships `gsap.from()`
+  reveal helpers (`fadeIn` / `slideUp` / `scaleIn` / `pop`). When the page
+  uses scroll-/view-timeline, a `revealOnScroll()` ScrollTrigger batch helper
+  is emitted too. `registerEases(gsap)` wires the CustomEases in one call.
+
+- **Web Animations API preset (`<host>-motion.waapi.js`)** — zero dependency,
+  runs on the browser-native `Element.animate()`. WAAPI accepts cubic-bezier
+  easing strings verbatim, so the extracted curves are reproduced *exactly*
+  (no spring approximation). Emits `easings`, `durations`, keyframe arrays
+  reconstructed from on-page `@keyframes`, and `fadeIn` / `slideUp` / `scaleIn`
+  helpers that return the live `Animation` and honour `prefers-reduced-motion`
+  automatically.
+
+  Both surface as live copy/download cards on the motionlang analyzer at
+  designlang.app/motion.
+
 ## [12.16.0] — 2026-06-06
 
 **motionlang grows two framework-agnostic emitters + the website PDF download is fixed.**

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,132 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+smanavarya@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

package/README.md

@@ -10,14 +10,23 @@
 
 </p>
 
----
-
 <p align="center">
   <img src="https://raw.githubusercontent.com/Manavarya09/design-extract/main/designlang.png" alt="designlang in action — extracts DTCG tokens, Tailwind config, Figma variables, brand book PDF" width="100%">
 </p>
 
 [![designlang on npm](https://pkgfolio.vercel.app/embed/pkg/designlang?v=2)](https://www.npmjs.com/package/designlang)
 
+<p align="center">
+  <a href="https://www.atlascloud.ai/?utm_source=github&utm_medium=referral&utm_campaign=design-extract">
+    <img src="./assets/atlas-cloud-logo.svg" alt="Atlas Cloud" width="220">
+  </a>
+</p>
+
+<p align="center">
+  Powered by <a href="https://www.atlascloud.ai/?utm_source=github&utm_medium=referral&utm_campaign=design-extract">Atlas Cloud</a> for OpenAI-compatible <code>--smart</code> classification.
+  For AI coding workflows, try the <a href="https://www.atlascloud.ai/console/coding-plan?utm_source=github&utm_medium=referral&utm_campaign=design-extract">Atlas Cloud coding plan</a>.
+</p>
+
 **designlang** points a headless browser at any URL and reads the design system off the live DOM. One command emits 17+ files — DTCG tokens, Tailwind config, shadcn theme, Figma variables, motion tokens, typed component anatomy, brand voice, page-intent labels, and a paste-ready prompt pack for v0 / Lovable / Cursor / Claude Artifacts.
 
 It also goes where extractors don't: **layout patterns**, **responsive behavior across 4 breakpoints**, **hover / focus / active states**, **WCAG contrast scoring**, **multi-page consistency**, **drift checks against a live source-of-truth**, **visual-diffs**, and a **shareable graded report card**.
@@ -26,6 +35,7 @@ It also goes where extractors don't: **layout patterns**, **responsive behavior
 
 ```bash
 npx designlang https://stripe.com                      # extract everything
+npx designlang verify stripe.com                       # fidelity score: rebuild from tokens vs live ← v12.18
 npx designlang pair stripe.com linear.app              # fuse two designs (visuals A × voice B)    ← v12.8
 npx designlang brand stripe.com                        # full brand-guidelines book (13 chapters)  ← v12.7
 npx designlang theme-swap stripe.com --primary "#ff4800"  # recolour around your brand        ← v12.6
@@ -51,6 +61,21 @@ npm i -g designlang                         # global
 npx skills add Manavarya09/design-extract   # as an agent skill (40+ agents)
 ```
 
+## Atlas Cloud for `--smart`
+
+`designlang --smart` can now use Atlas Cloud through its OpenAI-compatible chat API, so low-confidence classifiers can stay zero-dependency while routing to Atlas-hosted models.
+
+```bash
+export ATLASCLOUD_API_KEY="<atlascloud-api-key>"
+export ATLASCLOUD_MODEL="deepseek-ai/deepseek-v4-pro"
+
+npx designlang https://stripe.com --smart
+```
+
+- Atlas Cloud envs: `ATLASCLOUD_API_KEY`, `ATLASCLOUD_MODEL`, optional `ATLASCLOUD_API_BASE`
+- Alias envs also work: `ATLAS_CLOUD_API_KEY`, `ATLAS_CLOUD_MODEL`, `ATLAS_CLOUD_API_BASE`
+- Existing `OPENAI_API_KEY` and `ANTHROPIC_API_KEY` flows keep working unchanged
+
 ## What you get
 
 Each run writes 17+ files to `./design-extract-output/`. The headline outputs:
@@ -276,9 +301,6 @@ npx skills add Manavarya09/design-extract
 
 In Cursor / Codex / etc., use `/extract-design <url>`.
 
-## Website
-
-**[https://designlang.manavaryasingh.com](https://designlang.manavaryasingh.com/)** — the brutalist product page.
 
 ## Contributing
 
@@ -288,4 +310,3 @@ See [CONTRIBUTING.md](CONTRIBUTING.md). PRs welcome!
 
 [MIT](LICENSE) - Manav Arya Singh
 
-

package/assets/atlas-cloud-logo.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1224 792">
+  <defs>
+    <style>
+      .cls-1 {
+        clip-path: url(#clippath);
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+
+      .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-4 {
+        clip-path: url(#clippath-1);
+      }
+
+      .cls-5 {
+        clip-path: url(#clippath-2);
+      }
+
+      .cls-3 {
+        fill: #000;
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-2" x="20.73" y="315.14" width="1182.55" height="161.72"/>
+    </clipPath>
+    <clipPath id="clippath-1">
+      <rect class="cls-2" x="20.73" y="315.14" width="1182.55" height="161.72"/>
+    </clipPath>
+    <clipPath id="clippath-2">
+      <rect class="cls-2" x="20.73" y="315.14" width="1182.55" height="161.72"/>
+    </clipPath>
+  </defs>
+  <g class="cls-1">
+    <path class="cls-3" d="M104.38,315.14L20.73,476.86c38.73-15.32,70.03-17.6,98.12-16.26l-12.85-28.4c-5.63-.57-21.86-.57-29.57,1.45l27.95-62.14s42.06,91.31,42.13,91.32c8.09,1.27,29.8,8.55,41.52,14.03l-83.66-161.72Z"/>
+  </g>
+  <polygon class="cls-3" points="207.87 323.37 207.87 361.57 189.68 361.57 189.68 381.76 207.87 381.76 207.87 471.35 234.07 471.35 234.07 381.76 252.87 381.76 252.87 361.57 234.07 361.57 234.07 323.37 207.87 323.37"/>
+  <rect class="cls-3" x="268.07" y="323.37" width="26.19" height="147.98"/>
+  <g class="cls-4">
+    <path class="cls-3" d="M340.48,416.95c0,13.6,9.79,33.39,33.39,33.39,14.6,0,24.2-7.6,29.2-17.59,2.6-4.8,3.8-10,4.2-15.4.2-5.2-.8-10.6-3-15.4-4.6-10.4-14.8-19.4-30.6-19.4-21.2,0-33.19,17.2-33.19,34.19v.2ZM433.26,471.35h-26.19v-15.8c-7,12.8-21.6,19.2-36.99,19.2-35.2,0-55.8-27.4-55.8-58.4,0-34.6,25-58.19,55.8-58.19,20,0,32.19,10.6,36.99,19.4v-16h26.19v109.78Z"/>
+    <path class="cls-3" d="M506.87,391.16c-.2-5.8-3.2-11.8-13.4-11.8-8.8,0-12.99,5.6-12.99,11,.2,7,8.2,10.79,18.6,13.8,17.6,4.8,36.6,10,36.8,33.59.4,22.6-18.6,36.99-41.59,36.99-17,0-40-8.8-41.99-35.39h26.19c1,11.8,11.2,14.2,16.2,14.2,8.2,0,15.2-5.4,15-12.8,0-9.4-8.2-12-28.4-18.99-14.8-4.6-26.79-12.8-26.99-28.6,0-21.6,18.19-35,39.39-35,14.8,0,36.8,6.6,39,33h-25.8Z"/>
+    <path class="cls-3" d="M760.26,421.76c-9,30.59-37.8,52.39-72.39,52.39-45.19,0-77.59-35.8-77.59-76.99s30.59-76.58,77.39-76.58c42.59.2,66.79,31.59,72.59,53.19h-31.4c-4.6-10.19-17.8-26.79-41.39-26.99-28.8,0-47.39,24.2-47.39,50.39s19.4,50.79,47.6,50.79c26.39,0,38.39-20.8,41.19-26.19h31.4Z"/>
+  </g>
+  <rect class="cls-3" x="779.68" y="323.37" width="26.19" height="147.98"/>
+  <g class="cls-5">
+    <path class="cls-3" d="M852.09,416.56c0,19.2,14.59,33.39,32.59,33.39s32.4-14.2,32.4-33.6-14.4-33.59-32.4-33.59-32.59,14.2-32.59,33.59v.2ZM825.89,416.15c0-28,20.6-57.79,58.79-57.79s58.79,29.79,58.79,57.99-20.59,58.19-58.79,58.19-58.79-29.79-58.79-58.19v-.2Z"/>
+    <path class="cls-3" d="M1064.87,471.35h-24.6v-14.6c-4.6,8.6-14.4,18.2-34.19,18-36-.2-42.79-27.6-42.79-46.8v-66.39h26.19v59.79c0,16.2,5.4,28.99,23.99,28.8,18.8,0,25.2-12.4,25.2-28v-60.59h26.2v109.78Z"/>
+    <path class="cls-3" d="M1111.28,416.35c0,18.6,13.4,33.8,33.59,33.8,9.6,0,18.2-3.8,24.4-10,6.2-6.2,9.8-14.8,9.39-24.4,0-9.6-3.8-17.8-9.8-23.6-6-6-14.39-9.6-23.79-9.6-21.4,0-33.8,16.4-33.8,33.59v.2ZM1203.27,471.35h-25v-15.8c-4.8,8.2-15.2,19.2-37.6,19.2-33.79,0-55.59-26.4-55.59-58.4,0-35.59,25.4-58.19,55.19-58.19,21,0,32.8,11.19,36.8,17.59v-52.39h26.2v147.98Z"/>
+  </g>
+</svg>

package/bin/design-extract.js

@@ -32,6 +32,8 @@ import { formatFramerMotion } from '../src/formatters/framer-motion.js';
 import { formatMotionOne } from '../src/formatters/motion-one.js';
 import { formatMotionCss } from '../src/formatters/motion-css.js';
 import { formatMotionTailwind } from '../src/formatters/motion-tailwind.js';
+import { formatMotionGsap } from '../src/formatters/motion-gsap.js';
+import { formatMotionWaapi } from '../src/formatters/motion-waapi.js';
 import { formatCssVars } from '../src/formatters/css-vars.js';
 import { formatPreview } from '../src/formatters/preview.js';
 import { formatFigma } from '../src/formatters/figma.js';
@@ -112,7 +114,7 @@ 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('--smart', 'use optional LLM fallback when heuristic classifiers have low confidence (supports ATLASCLOUD_API_KEY, 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)')
@@ -361,6 +363,8 @@ program
         { name: `${prefix}-motion.one.js`,      content: formatMotionOne(design),    label: 'Motion One presets (animate() + springs + scroll)' },
         { name: `${prefix}-motion.css`,         content: formatMotionCss(design),    label: 'Motion CSS (vars + keyframes + utilities + reduced-motion)' },
         { name: `${prefix}-motion.tailwind.js`, content: formatMotionTailwind(design), label: 'Tailwind motion preset (duration/easing/keyframes/animation)' },
+        { name: `${prefix}-motion.gsap.js`,     content: formatMotionGsap(design),   label: 'GSAP presets (CustomEase + reveals + ScrollTrigger)' },
+        { name: `${prefix}-motion.waapi.js`,    content: formatMotionWaapi(design),  label: 'Web Animations API presets (zero-dependency, exact curves)' },
         { name: `${prefix}-variables.css`, content: formatCssVars(design), label: 'CSS Variables' },
         { name: `${prefix}-preview.html`, content: formatPreview(design), label: 'Visual Preview' },
         { name: `${prefix}-figma-variables.json`, content: formatFigma(design), label: 'Figma Variables' },
@@ -1916,6 +1920,51 @@ program
     }
   });
 
+// ── Verify — fidelity loop: rebuild from tokens, pixel-diff vs original ──
+program
+  .command('verify <url>')
+  .description('Rebuild components from the extracted tokens and pixel-diff them against the live page — a 0-100 fidelity score + loss heatmaps.')
+  .option('-o, --out <dir>', 'output directory', './design-extract-output')
+  .option('-c, --components <list>', 'comma-separated components to check (button,card,input,nav)', 'button,card')
+  .option('--min <score>', 'exit non-zero if site fidelity is below this (CI gate)', parseInt)
+  .option('--system-chrome', 'use the system Chrome install instead of bundled Chromium')
+  .action(async (url, opts) => {
+    if (!url.startsWith('http')) url = `https://${url}`;
+    validateUrl(url);
+    const spinner = ora('Extracting + rebuilding from tokens').start();
+    try {
+      const { verifyDesign } = await import('../src/verify/index.js');
+      const { formatVerifyHtml, formatVerifyJson } = await import('../src/formatters/verify.js');
+      const components = String(opts.components).split(',').map((s) => s.trim()).filter(Boolean);
+      const report = await verifyDesign(url, {
+        components,
+        out: resolve(opts.out),
+        channel: opts.systemChrome ? 'chrome' : undefined,
+      });
+      mkdirSync(resolve(opts.out), { recursive: true });
+      const htmlPath = join(resolve(opts.out), 'verify.html');
+      const jsonPath = join(resolve(opts.out), 'verify.json');
+      writeFileSync(htmlPath, formatVerifyHtml(report), 'utf8');
+      writeFileSync(jsonPath, formatVerifyJson(report), 'utf8');
+
+      const score = report.fidelity;
+      spinner.succeed(`Fidelity ${score == null ? 'n/a' : score + '/100'} → ${htmlPath}`);
+      for (const c of report.components) {
+        const line = c.status === 'ok'
+          ? `${chalk.bold(c.component.padEnd(8))} ${chalk.cyan(String(c.fidelity).padStart(3))}/100`
+          : `${chalk.bold(c.component.padEnd(8))} ${chalk.gray(c.status)} ${chalk.gray(c.reason || '')}`;
+        console.log('  ' + line);
+      }
+      if (opts.min != null && score != null && score < opts.min) {
+        console.error(chalk.red(`\n  Fidelity ${score} is below --min ${opts.min}\n`));
+        process.exit(1);
+      }
+    } catch (err) {
+      spinner.fail(err.message);
+      process.exit(1);
+    }
+  });
+
 // ── Chat — REPL over a live extraction (v12) ──────────────
 program
   .command('chat <target>')

package/commands/extract.md

@@ -35,7 +35,15 @@ Useful flags the user may pass via `$ARGUMENTS`:
 | `--depth <n>` | crawl N additional canonical pages |
 | `--dark` | also extract dark mode |
 | `--platforms ios,android,flutter,wordpress` | multi-platform emitters |
-| `--smart` | LLM fallback for low-confidence classifiers (needs `OPENAI_API_KEY` or `ANTHROPIC_API_KEY`) |
+| `--smart` | LLM fallback for low-confidence classifiers (supports `ATLASCLOUD_API_KEY`, `OPENAI_API_KEY`, or `ANTHROPIC_API_KEY`) |
 | `--cookie-file ./session.json` | authenticated extraction |
 
 Full reference: https://github.com/Manavarya09/design-extract#full-cli-reference
+
+Atlas Cloud quick setup for `--smart`:
+
+```bash
+export ATLASCLOUD_API_KEY="<atlascloud-api-key>"
+export ATLASCLOUD_MODEL="deepseek-ai/deepseek-v4-pro"
+npx designlang https://stripe.com --smart
+```

package/docs/INTERVIEW_PREP.md

@@ -0,0 +1,98 @@
+# designlang — Interview Prep (Plain English)
+
+---
+
+## What is it, in one sentence
+
+You give it any website URL. It opens a real browser, reads every style off the page, and spits out 17+ files — design tokens, Tailwind config, Figma variables, a full brand book — everything you'd need to recreate or match that design.
+
+---
+
+## How it actually works — step by step
+
+### 1. Opens a real browser
+
+It uses Playwright (basically headless Chrome) and loads the actual live website — not the source code, not a screenshot. The real thing, fully rendered, fonts loaded, dark mode checked, hover states triggered.
+
+> **Say this:** *"We're reading the computed styles off the live DOM — what the browser actually rendered, not what someone wrote in a CSS file. That means it catches inline styles, CSS variables, third-party component libraries, everything."*
+
+### 2. Pulls every style off the page
+
+Once the page is loaded, it walks up to 5,000 elements and reads their computed styles — colors, fonts, spacing, shadows, borders, z-index, animations. It also grabs CSS variables, media queries, and keyframe animations separately.
+
+### 3. Runs 30+ extractors in parallel
+
+Each piece gets its own focused extractor — one for colors, one for typography, one for spacing, one for motion, one for accessibility contrast, and so on. They all run on the same raw data. If one crashes, the others keep going (`safeExtract` wraps each one, so a broken extractor returns `null` instead of killing the whole run).
+
+> **Say this:** *"Each extractor is isolated. The whole thing can't blow up because one extractor failed on a weird site."*
+
+### 4. Does the smart stuff
+
+A few things are more interesting than just reading values:
+
+- **Colors** — clusters similar colors together (so 40 near-identical blues become "primary blue") and figures out which one is the brand color based on how often it shows up on buttons and CTAs
+- **Interactions** — actually hovers over elements, opens menus, triggers modals, and diffs the styles before and after to capture hover states and transitions
+- **Scoring** — grades the design system (color discipline, typography consistency, spacing system) against real production benchmarks like Stripe and Linear
+- **Accessibility** — checks every foreground/background color pair against WCAG, and suggests the nearest passing color as a fix
+
+### 5. Writes 17+ output files
+
+Each formatter takes the extracted data and writes a specific file. Tailwind config, Figma variables JSON, DTCG tokens, a big markdown doc for feeding into AI tools, CSS variables, typed React component stubs, a graded report card HTML, and more.
+
+---
+
+## The interesting features to talk about
+
+**Interaction states** — most extractors just read static CSS. designlang actually *does things* to the page: scrolls, hovers buttons, opens dropdowns, clicks modals. Then it captures what changed. That's how you get real hover colors and transition details, not just the default state.
+
+**The grading system** — it scores the design on things like "how many unique colors does this site use?" (≤12 gets 100, >100 gets 35 with a warning). It has real calibration data from sites like Stripe, Vercel, GitHub. So when it says a site scores 80/100 for typography consistency, that's against a real benchmark, not made up.
+
+**Remix / vocabulary** — you can say "restyle this site as brutalist" or "cyberpunk" and it rewrites the tokens into that vocabulary. There are 6 vocabulary modules (brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial), each with its own rules for color, type, spacing.
+
+**Pair** — point it at two sites (e.g. `designlang pair stripe.com linear.app`) and it fuses them: takes the visual identity of one and the brand voice/tone of the other.
+
+**MCP server** — the extracted data can be served over MCP so any AI tool that speaks MCP can query the design tokens directly, without re-crawling.
+
+---
+
+## How it handles dark mode
+
+It loads the page twice — once with `colorScheme: light`, once with `colorScheme: dark`. Both passes run the color and variable extractors. The output has a `darkMode` section with its own palette and CSS variable overrides.
+
+---
+
+## What makes it different from other design extraction tools
+
+> **Say this:** *"Most tools give you the colors and fonts. designlang reads the architecture — the layout system, the responsive behavior across 4 breakpoints, what changes on hover, how the motion feels. The diff between a color picker and a design system reverse-engineer."*
+
+The things no one else does:
+- Hover/focus/active state capture (actually simulates interaction)
+- Motion fingerprint — figures out if the site feels "springy", "smooth", "mechanical" based on the easing curves
+- Multi-page consistency — crawls internal links and reconciles which tokens are shared vs per-route
+- Accessibility remediation — not just "this fails WCAG" but "here's the nearest color that would pass"
+- Brand voice — reads button labels and headings to figure out tone, pronoun posture, CTA verb patterns
+
+---
+
+## The whole thing in one breath
+
+> "It opens a real browser, renders the site, walks every element, and runs 30+ extractors on the computed styles. Colors get clustered into a palette, interactions get simulated to capture hover states, the design gets graded against real benchmarks, and everything formats out into whatever you need — Tailwind config, Figma variables, DTCG tokens, an AI prompt pack."
+
+---
+
+## Quick answers for common questions
+
+**Why use a headless browser instead of fetching the CSS?**
+CSS files only tell you what was written. The browser tells you what was actually applied — after cascade, after JS, after third-party components inject their own styles. The computed styles are the ground truth.
+
+**What if the site uses React or loads content lazily?**
+The crawler waits for `networkidle` and `fonts.ready` before extracting. For interaction states, it also scrolls and clicks to trigger lazy-loaded content.
+
+**How does it know which color is the "primary" brand color?**
+It clusters all colors by visual similarity, then looks at which cluster appears most on interactive elements — buttons, links, CTAs. The one with the highest interactive-background score wins.
+
+**How accurate is the grade?**
+It's calibrated against real production design systems (Stripe, Linear, Vercel, GitHub, Apple). Not perfect, but it's a relative signal — a 90 means "this is as tight as Stripe," not "this passed a spec."
+
+**What's the hardest part technically?**
+Color clustering. You can't just bucket by hex — hover states and opacity variants create hundreds of near-identical colors. The clustering groups them by perceptual distance so the output is readable instead of noise.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "12.16.0",
+  "version": "12.18.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": {
@@ -8,9 +8,9 @@
   },
   "main": "src/index.js",
   "exports": {
-    ".":       "./src/index.js",
-    "./api":   "./src/api.js",
-    "./mcp":   "./src/mcp/index.js",
+    ".": "./src/index.js",
+    "./api": "./src/api.js",
+    "./mcp": "./src/mcp/index.js",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -24,7 +24,9 @@
     "commander": "^12.0.0",
     "ora": "^8.0.0",
     "pdf-lib": "^1.17.1",
-    "playwright": "^1.42.0"
+    "pixelmatch": "^7.2.0",
+    "playwright": "^1.42.0",
+    "pngjs": "^7.0.0"
   },
   "engines": {
     "node": ">=20"