v12.0.0 — chat · permalinks · gallery · spec

The "best in the game" release: takes designlang from one-shot extractor to iterative + shareable + standardized + distributed.

Iterative — `designlang chat`

A REPL over a live extraction. Heuristic-only router (zero new deps, no LLM), eight built-in mutation ops:

```
$ npx designlang chat stripe.com

make it brutalist # radii → 0, hard shadows, mono font
primary #ff4800 # swap a role color
dark mode # invert background ↔ foreground
sharpen / soften # halve / double every radius
font Geist # swap the primary font family
show # print current palette + tokens
save # write DTCG, Tailwind, CSS vars, DESIGN.md
reset # restore the original
```

Loads from a URL or an existing `*-design-tokens.json`.

Shareable — every extraction is a permalink

• `designlang.app/x/` — every cached extraction has a stable URL with the full 12-tab viewer (DESIGN.md, DTCG tokens, Tailwind, CSS vars, Figma, shadcn, React theme, WordPress, iOS, Android, Flutter), Source/Preview toggle, per-file Copy + Download.
• The URL bar updates mid-stream via `history.replaceState` so refresh-and-share works during the extraction.
• `/gallery` — public directory of recent extractions. Palette-strip cards, intent + material + library signals, relative timestamps. Cached for 10 min.

Standardized — DESIGN.md spec

• `designlang.app/spec` — formal spec for the agent-native single-file artifact. Eight canonical sections (Overview · Colors · Typography · Layout · Elevation and Depth · Shapes · Components · Do's and Don'ts), YAML front-matter schema, MIT-licensed reference implementation. Spec itself published under CC BY 4.0.
• Embeddable Verified badge SVG any site can drop on its own `/DESIGN.md` to signal compliance.
• Credit acknowledged: design-extractor.com pioneered the format.

Distributed — submission playbook

`marketplace/SUBMISSION-PLAYBOOK.md` ships pre-written listing copy + manifests for 6 marketplaces:

• Figma Community
• Cursor / Claude Desktop / Windsurf (via MCP)
• VS Code Marketplace
• Claude Code Skills registry
• Raycast Store
• Chrome Web Store

Each listing is a standalone `*-listing.md` file with title, description, tags, screenshot brief, and tweet drafts. Ordered by review-queue speed.

Try it

```
npx designlang@12 chat stripe.com
npx designlang@12 example.com # writes 25 files including *-DESIGN.md
designlang.app/x/ # share permalink
```

Tests: 317/317 pass.

v11.2.0 — DESIGN.md + vs/design-extractor

The agent-native artifact, ours by default

`designlang ` now writes a `*-DESIGN.md` alongside everything else. Single-file, 8-section (Overview · Colors · Typography · Layout · Elevation and Depth · Shapes · Components · Do's and Don'ts), YAML front matter with the machine-readable token snapshot. Compatible with the convention pioneered by design-extractor.com, but the body is fed by our v10/v11 semantic layer (intent, material, voice, library, anatomy) so it has more to say than a token dump.

```
npx designlang stripe.com # writes stripe-com-DESIGN.md
npx designlang stripe.com --no-design-md # opt out
```

And the comparison page

/vs/design-extractor — honest feature table, a real DESIGN.md sample, and the extraction we ran on design-extractor.com itself (`library: tailwindcss (0.842)`, `voice: friendly · sentence case · tight`, 8 colors). Live on the website.

v11.1.0 — storybook emitter + motion replay

Closes #9 and #10.

`--storybook`

Emits a runnable Storybook project from detected `componentAnatomy`:

• One `*.stories.tsx` per kind (button, card, input, …) with variant + size controls
• `stories/Tokens.mdx` with `ColorPalette` blocks
• `stories/tokens.css` derived from extracted palette, radius, shadow, font
• `.storybook/main.ts`, `.storybook/preview.ts`, `package.json`, `tsconfig.json`, `README.md`

```
npx designlang --storybook --full
cd /-storybook && npm install && npm run storybook
```

`designlang replay`

Records a short WebM of a site's motion via Playwright's built-in recording — scripted scroll + hover to force transitions and keyframes to fire. Optional MP4 if `ffmpeg` is on PATH. Zero new deps.

```
npx designlang replay stripe.com -d 5
npx designlang replay stripe.com -d 5 --mp4
```

Also stubbed / closed with evidence

• #8 — figma plugin already shipped in `figma-plugin/`
• #11 — cross-origin CSS fetch + parse already in `crawler.js` (`parseCrossOriginCSS`)
• #12 — open shadow roots already traversed in `collectElements`; closed roots are unreachable by web platform spec

Security

• SECURITY.md added, coordinated disclosure via GitHub private vulnerability reporting
• CodeQL workflow (`security-and-quality` queries, weekly + per-PR)
• postcss override `>=8.5.10` (clears GHSA-qx2v-qp2m-jg93)

v11.0.2 — --ignore-widgets

Closes #15.

• designlang <url> --ignore-widgets — appends a curated 46-selector list to any user --ignore selectors. Covers Intercom, Drift, HubSpot, Crisp, Zendesk, Tawk, LiveChat, Helpshift, Freshchat, Olark, CookieBot, OneTrust, Termly, reCAPTCHA, AddThis, ShareThis + generic catch-alls.
• designlang widgets — prints the full list for audit. PRs to extend welcome: src/widgets.js.

v11.0.1 — community patches

Community bug fixes merged. Thanks @ArturLinnik and @ahaostudy.

• #42 — shadow objects with .raw crashed prompt-pack.js and multipage.js. Normalized to String(s.raw ?? s.value ?? s) across 5 spots.
• #45 — Tailwind generateColorScale passed the wrong object shape to rgbToHsl, producing hsl(NaN, NaN%, …) across every shade. Uses the pre-computed .hsl now.

v11.0.0 — clone · ci · studio

The release that kills the competition

Three new commands. One CLI. No account. No keys.

• `designlang clone ` — generates a working Next.js repo that mirrors the target's section order, CTA verbs, material treatment, and voice. Driven by v10 intel (`sectionRoles`, `voice`, `materialLanguage`). Not a palette demo — a real project.
• `designlang ci ` — one-shot PR-comment-ready markdown combining score + drift + optional visual-diff. Works in any CI. Writes `GITHUB_STEP_SUMMARY` automatically. Exits non-zero on drift threshold.
• `designlang studio` — zero-dep local web studio over the latest extraction at `localhost:4837`. Clickable swatches, voice/DNA/motion blocks, `/raw` endpoint.

Website rewritten with a v11 showcase section, v10 demoted to supporting strip, v9 re-done as editorial rows.

```
npx designlang@11 clone stripe.com
npx designlang@11 ci app.yoursite.com --tokens ./tokens.json
npx designlang@11 studio
```

v10.5.0 — Forms & States

Closes the v10.x minor series. Surfaces forms, modals, skeleton/spinner loading, empty + error states, and toast library detection (Sonner / react-hot-toast / react-toastify / Radix / Chakra / Notistack). Emits *-form-states.json. 317/317 tests.

v10.4.0 — Icons, Backgrounds & Stack Intel

Icon library fingerprinter (Lucide/Heroicons/Phosphor/Tabler/Feather/Remix/Material), background-pattern classifier (noise/dot-grid/gradient-mesh/svg-pattern), and CMS + analytics + experimentation platform detection. Emits *-icon-system.json and *-stack-intel.json, folds backgrounds into *-visual-dna.json. 313/313 tests.

v10.3.0 — Perf + SEO

Core Web Vitals (LCP/CLS/INP) + bundle profile via fresh Playwright context, plus OG/Twitter/favicons/manifest/JSON-LD structured-data extraction. Emits *-perf.json and *-seo.json. New flag: --perf (auto-on with --full). 307/307 tests.

v10.2.0 — Dark Mode & Responsive

Light ↔ dark semantic pairing and full-page captures at 4 breakpoints × (light, dark). Adds *-dark-mode.json and *-responsive.json. New flag: --responsive-shots (auto-on with --full). 303/303 tests.