designlang 12.3.0 → 12.7.1

package/.claude-plugin/marketplace.json

@@ -1,15 +1,15 @@
 {
-  "name": "design-extract",
+  "name": "designlang",
   "owner": {
     "name": "Manavarya Singh",
     "url": "https://github.com/Manavarya09"
   },
   "plugins": [
     {
-      "name": "design-extract",
+      "name": "designlang",
       "source": "./",
-      "description": "Extract the complete design language from any website — colors, typography, spacing, shadows, components, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.",
-      "version": "1.0.0",
+      "description": "Seven slash commands wrapping the designlang CLI: /extract (full design language \u2192 DTCG, Tailwind, Figma), /grade (shareable HTML report card + SVG badge), /battle (head-to-head graded comparison), /remix (restyle in 6 vocabularies \u2014 brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial), /pack (one downloadable design-system bundle), /theme-swap (OKLCH-correct recolour around a new brand primary), /brand (full editorial brand-guidelines book \u2014 13 chapters, hand-off-ready).",
+      "version": "12.7.1",
       "author": {
         "name": "Manavarya Singh"
       },
@@ -17,12 +17,20 @@
       "tags": [
         "design-system",
         "design-tokens",
-        "css",
+        "dtcg",
         "tailwind",
+        "shadcn",
+        "figma",
         "typography",
         "colors",
-        "web-scraping"
+        "motion",
+        "grade",
+        "battle",
+        "remix",
+        "pack",
+        "mcp",
+        "playwright"
       ]
     }
   ]
-}
+}

package/.claude-plugin/plugin.json

@@ -1,24 +1,35 @@
 {
-  "name": "design-extract",
-  "description": "Extract the complete design language from any website. Produces W3C design tokens, AI-optimized markdown, Tailwind config, and CSS custom properties.",
-  "version": "1.0.0",
+  "name": "designlang",
+  "description": "Extract any website's design language and ship it. Seven slash commands \u2014 /extract, /grade, /battle, /remix, /pack, /theme-swap, /brand \u2014 wrap the designlang CLI to pull DTCG tokens, Tailwind/shadcn/Figma vars, motion + voice, generate shareable graded report cards, head-to-head battle pages, six-vocabulary remixes, downloadable design-system bundles, OKLCH-correct theme recolouring, and full editorial brand-guidelines books.",
+  "version": "12.7.1",
   "author": {
     "name": "Manavarya Singh",
     "url": "https://github.com/Manavarya09"
   },
-  "homepage": "https://github.com/Manavarya09/design-extract",
+  "homepage": "https://designlang.app",
   "repository": "https://github.com/Manavarya09/design-extract",
   "license": "MIT",
   "keywords": [
     "design-system",
     "design-tokens",
     "design-language",
-    "css",
+    "dtcg",
     "tailwind",
+    "shadcn",
+    "figma-variables",
+    "css",
     "playwright",
     "extraction",
     "colors",
-    "typography"
+    "typography",
+    "motion",
+    "grade",
+    "battle",
+    "remix",
+    "pack",
+    "claude-plugin",
+    "mcp"
   ],
-  "skills": "./skills/"
-}
+  "skills": "./skills/",
+  "commands": "./commands/"
+}

package/CHANGELOG.md

@@ -1,5 +1,235 @@
 # Changelog
 
+## [12.7.1] — 2026-05-09
+
+**Brand book — visual polish pass.**
+
+The v12.7.0 brand book had a real-data deficit: the cover used a generic
+grade-coloured accent strip, every section opened with a philosophical
+lede ("the felt pace of an interface", "form follows feeling"), and
+components were a metadata table instead of a real mock. This pass
+replaces all of that with the extracted values themselves.
+
+Changes:
+
+- **Cover** now leads with the brand's actual primary as a full-bleed
+  band (auto-detected, falls back through secondary/accent/most-used).
+  Asymmetric layout — band + label + hex above, host name in massive
+  serif below.
+- **Lede paragraphs replaced with one-line data summaries.**
+  "1 primary · 1 secondary · 1 accent · 27 neutrals · 88 total" instead
+  of "Brand colours carry meaning. Neutrals carry structure."
+- **Type specimen** now uses real headlines extracted from the site's
+  voice (`design.voice.sampleHeadings`). Falls back to a single neutral
+  pangram only when those are absent. The recycled aphorisms ("quiet
+  authority of restraint", "form follows feeling") are gone.
+- **Colour chapter** — primary at full-width hero card, secondary +
+  accent at half-width below, neutrals as a flush horizontal strip,
+  full palette grid below. Hex labels render *inside* the swatch in
+  high-contrast text (auto black/white).
+- **Components chapter** — renders an actual primary + secondary
+  button using the extracted brand colour and radius, plus a card
+  mockup using extracted surface + text colours. Metadata table moved
+  below the visual mock.
+- **Accessibility chapter** — failing pairs render as actual stacked
+  colour blocks (foreground text on background with ratio inline),
+  not a pure table. Big score number on top.
+- **Tokens chapter** — code blocks now have a header bar with the
+  language label and target filename.
+- **"How to use"** trimmed from six rules of thumb to four punchy
+  ones, drops the "rule of thumb" framing.
+- **Layout** — section padding moved into the wrap (no more gutter
+  around the hero band), TOC now sits on a tinted sub-paper background,
+  chapter headers are thinner with a bottom rule.
+
+Same 13 chapters, same public API. No breaking changes.
+
+378/378 tests pass (one assertion updated for the new lowercase
+"Brand guidelines" cover label).
+
+## [12.7.0] — 2026-05-09
+
+**Brand book — full editorial design-guidelines document for any URL.**
+
+\`designlang brand <url>\` produces a self-contained, print-ready HTML
+"brand guidelines book" that documents every dimension of an extracted
+design system. Cover, table of contents, 13 chapters: about, logo,
+colour, typography, spacing, shape, iconography, motion, components,
+voice, accessibility, tokens, how-to-use. Editorial layout, dark-mode
+toggle, smooth-scroll TOC, drop-in code blocks per stack.
+
+\`\`\`bash
+npx designlang brand stripe.com
+\`\`\`
+
+\`\`\`
+Brand book · 54 tokens · 3 fonts · grade B · https://stripe.com
+✓ stripe-com.brand.html
+✓ stripe-com.brand.md
+✓ stripe-com.brand.json
+\`\`\`
+
+### Why this is different from \`pack\`, \`grade\`, and \`design-language.md\`
+
+| Output | Audience | Format |
+|---|---|---|
+| \`pack\` (v12.4) | Devs picking up a design system | Directory of files (tokens, components, Storybook, starter) |
+| \`grade\` (v12.1) | Audit / share | Single audit page with score + verdict |
+| \`design-language.md\` | LLMs | AI-optimized markdown (data-dense) |
+| **\`brand\` (v12.7)** | **Designers + handoff** | **Editorial brand-guidelines book — readable, print-ready, hand-off-ready** |
+
+### Added
+
+- New CLI command: \`designlang brand <url> [-o] [-n] [--format] [--open]\`.
+- New formatter \`src/formatters/brand-book.js\` exporting \`formatBrandBook\`
+  (HTML book) and \`formatBrandBookMarkdown\` (terse markdown summary).
+- 13 chapters with editorial typography (Instrument Serif display + Inter
+  body), generous whitespace, smooth-scroll anchors, dark-mode toggle,
+  print stylesheet with page breaks at chapter boundaries.
+- Per-colour section: large swatch + HEX/RGB/HSL/usage grid for brand
+  colours, mini-grid for neutrals + full palette.
+- Per-token section: drop-in code blocks for CSS variables, Tailwind
+  config, with cross-reference to \`pack\` for the full bundle.
+- Closing "How to use" chapter with six rules of thumb (hierarchy of
+  brand colour, two-family discipline, snap-to-scale spacing, tight
+  radius set, motion as feedback, accessibility as hard constraint).
+- 7 new tests covering chapter coverage, host/colour/font rendering,
+  XSS escaping, sparse-design fallback, and mixed-shape component
+  anatomy (the bug that broke the first integration — slots / variants
+  arrive as objects, strings, or arrays from the extractor).
+
+### Plugin
+
+\`/brand\` is the 7th slash command in the Claude Code plugin
+(\`/extract\`, \`/grade\`, \`/battle\`, \`/remix\`, \`/pack\`, \`/theme-swap\`,
+\`/brand\`). \`.claude-plugin/plugin.json\` and \`marketplace.json\`
+bumped to 12.7.0.
+
+## [12.6.0] — 2026-05-06
+
+**Theme-swap — recolour any extracted design around your brand primary.**
+
+\`designlang theme-swap <url> --primary <hex>\` takes the existing
+extraction and rotates the brand palette around a new primary while
+preserving everything else: type scale, spacing rhythm, neutrals, motion,
+component anatomy. Closes
+[#57](https://github.com/Manavarya09/design-extract/issues/57).
+
+\`\`\`bash
+npx designlang theme-swap stripe.com --primary "#ff4800"
+\`\`\`
+
+\`\`\`
+#533afd → #ff4800 · 91 colours · https://stripe.com
+Hue shift: 118.5° · neutrals preserved · type/spacing/motion untouched
+
+✓ stripe-com-themeswap-ff4800.themeswap.html
+✓ stripe-com-themeswap-ff4800.themeswap.md
+✓ stripe-com-themeswap-ff4800.themeswap.json
+✓ stripe-com-themeswap-ff4800.themeswap.tokens.json
+\`\`\`
+
+### Added
+
+- New CLI command: \`designlang theme-swap <url> --primary <hex>\`
+  with \`--from\`, \`-o\`, \`-n\`, \`--format\`, \`--open\` flags.
+- New module \`src/recolor.js\` exporting \`recolorDesign(design, opts)\`.
+  Operates in OKLCH so perceptual lightness stays constant — only hue
+  rotates. Auto-detects the source primary; pin it with \`--from\`.
+  Neutrals (chroma < 0.04 in OKLCH) are explicitly preserved so body
+  text, surfaces, and rule lines stay readable.
+- New formatter \`src/formatters/theme-swap.js\` exporting
+  \`formatThemeSwap\` (HTML side-by-side preview) and
+  \`formatThemeSwapMarkdown\`.
+- New OKLCH inverse helpers in \`src/utils/color-gamut.js\`:
+  \`srgbToOklab\`, \`srgbToOklch\`, \`hexToOklch\`, \`oklchToHex\` —
+  with chroma fallback for out-of-gamut colours.
+- The recoloured design is fed through every existing emitter (DTCG,
+  Tailwind, shadcn, Figma vars, CSS vars), so the swap propagates
+  for free.
+- 10 new tests covering primary-pinning, neutral preservation,
+  hue rotation, error paths, \`--from\` override, HTML/markdown shapes,
+  and XSS escaping.
+
+### Why
+
+People keep asking *"what would Stripe look like in our brand colors?"*.
+\`theme-swap\` answers it in 30 seconds. Bridges \`remix\` (full-vocab
+restyle) and \`apply\` (token write-through to a project).
+
+## [12.5.0] — 2026-05-06
+
+**Claude Code plugin — five slash commands wrapping the CLI.**
+
+designlang is now a first-class Claude Code plugin. Drop it into any
+session and every CLI verb becomes a slash command:
+
+\`\`\`bash
+/plugin install Manavarya09/design-extract
+\`\`\`
+
+| Command | What it does |
+|---|---|
+| \`/extract <url>\` | Full extraction → DTCG, Tailwind, Figma, motion, voice |
+| \`/grade <url>\` | Shareable HTML Design Report Card (+ \`--badge\`) |
+| \`/battle <urlA> <urlB>\` | Head-to-head graded battle card |
+| \`/remix <url> --as <vocab>\` | Restyle in 6 vocabularies |
+| \`/pack <url>\` | Bundle every output into one design-system directory |
+
+### Added
+
+- \`commands/extract.md\`, \`commands/grade.md\`, \`commands/battle.md\`,
+  \`commands/remix.md\`, \`commands/pack.md\` — five slash-command
+  manifests with \`description\` + \`argument-hint\` frontmatter and prompt
+  bodies that wrap the CLI and surface tight summaries.
+- Refreshed \`.claude-plugin/plugin.json\` (was stale at v1.0.0) — name
+  bumped to \`designlang\`, description rewritten around all v12 surfaces,
+  added \`commands\` directory pointer + expanded keywords.
+- Refreshed \`.claude-plugin/marketplace.json\` — same updates plus
+  marketplace tags.
+- New README section "Claude Code plugin" documenting install + the
+  five slash commands. Existing skills-ecosystem section retained for
+  Cursor / Codex / 40+ other agents.
+
+No CLI behavior change. The slash commands are pure wrappers — they
+shell out to \`npx designlang …\` and read the same output files.
+
+## [12.4.0] — 2026-05-05
+
+**Pack — one command, one polished design-system bundle.**
+
+\`designlang pack <url>\` runs the full extraction once and writes every
+emitter output into a single, signed, layered directory. One artifact a
+designer or dev can clone, drop into a project, or zip up and send to a
+client. Closes [#59](https://github.com/Manavarya09/design-extract/issues/59).
+
+### Added
+
+- New CLI command: \`designlang pack <url> [-o <dir>] [--with-clone] [--open]\`
+- New module \`src/pack.js\` exporting \`buildPack(design, opts)\`
+- Layout:
+  \`\`\`
+  <host>-design-system/
+  ├── README.md           — bespoke, "Built from <host>" + grade + at-a-glance stats
+  ├── LICENSE.txt         — provenance + usage guidance
+  ├── tokens/             — DTCG + Tailwind + CSS vars + Figma vars + motion + theme.js
+  ├── components/         — typed React stubs (anatomy.tsx)
+  ├── storybook/          — runnable Storybook project
+  ├── starter/            — minimal HTML starter wired to tokens/variables.css
+  ├── prompts/            — v0.txt · lovable.txt · cursor.md · claude-artifacts.md
+  │   └── recipes/        — recipe-<component>.md cards (named, no longer indexed)
+  └── extras/             — voice.json + prompt-pack.md rollup
+  \`\`\`
+- 7 new tests covering directory shape, valid JSON outputs, README content,
+  starter wiring, recipe filenames, and a regression test for the
+  double-stringify bug that broke first integration.
+
+### Why
+
+The 17+ loose files designlang already emits are the right pieces, but
+asking a user to zip them themselves is friction. \`pack\` is the same
+artifacts as one polished, downloadable, cite-able bundle.
+
 ## [12.3.0] — 2026-05-05
 
 **Remix — restyle any site in a different design vocabulary.**

package/README.md

@@ -26,10 +26,13 @@ It also goes where extractors don't: **layout patterns**, **responsive behavior
 
 ```bash
 npx designlang https://stripe.com                      # extract everything
-npx designlang remix stripe.com --as cyberpunk         # restyle in another vocabulary  ← v12.3
-npx designlang remix stripe.com --all                  # emit all 6 vocabs at once     ← v12.3
-npx designlang grade https://stripe.com --badge        # report card + SVG badge       ← v12.2
-npx designlang battle stripe.com vercel.com            # head-to-head graded fight     ← v12.2
+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
+npx designlang pack stripe.com                         # one polished design-system directory ← v12.4
+npx designlang remix stripe.com --as cyberpunk         # restyle in another vocabulary       ← v12.3
+npx designlang remix stripe.com --all                  # emit all 6 vocabs at once           ← v12.3
+npx designlang grade https://stripe.com --badge        # report card + SVG badge             ← v12.2
+npx designlang battle stripe.com vercel.com            # head-to-head graded fight           ← v12.2
 npx designlang clone https://stripe.com                # working Next.js starter
 npx designlang --full https://stripe.com               # screenshots + responsive + interactions
 ```
@@ -129,7 +132,10 @@ designlang mcp                              # stdio MCP server for Cursor / Clau
 | Grade (v12.1) | `designlang grade <url>` | Shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence, strengths + fixes |
 | Battle (v12.2) | `designlang battle <A> <B>` | Head-to-head graded battle card with verdict, dimension table, palette comparison |
 | Badge (v12.2) | `designlang grade --badge` | Shields.io-style SVG badge — `design · B · 87` — drop into any README. Live endpoint: `designlang.app/badge/<host>.svg` |
-| Remix (NEW v12.3) | `designlang remix <url> --as <vocab>` | Restyle the audited page in another vocabulary (brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial). `--all` emits all 6 |
+| Remix (v12.3) | `designlang remix <url> --as <vocab>` | Restyle the audited page in another vocabulary (brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial). `--all` emits all 6 |
+| Pack (v12.4) | `designlang pack <url>` | Bundle every output (tokens / components / Storybook / starter / prompts) into one polished design-system directory |
+| Theme-swap (v12.6) | `designlang theme-swap <url> --primary <hex>` | Recolour the extracted design around a new brand primary. OKLCH hue rotation, neutrals preserved, type/spacing/motion untouched |
+| Brand book (NEW v12.7) | `designlang brand <url>` | Full editorial brand-guidelines document (13 chapters: cover, about, logo, colour, type, spacing, shape, iconography, motion, components, voice, a11y, tokens, how-to-use). Print-ready, dark-mode toggle, hand-off-ready |
 | Watch | `designlang watch <url>` | Monitor for design changes on interval |
 | Diff | `designlang diff <A> <B>` | Compare two sites (MD + HTML) |
 | Multi-brand | `designlang brands <urls...>` | N-site comparison matrix |
@@ -185,6 +191,9 @@ Commands:
   grade <url>                       Generate a shareable HTML Design Report Card (--format html|md|json|svg|all, --badge, --open)
   battle <urlA> <urlB>              Head-to-head graded battle card (--format html|md|json|all, --open)
   remix <url>                       Restyle in another vocabulary (--as brutalist|swiss|art-deco|cyberpunk|soft-ui|editorial, --all, --list, --open)
+  pack <url>                        Bundle every output into one design-system directory (--with-clone, --open)
+  theme-swap <url> --primary <hex>  Recolour around a new brand primary (--from, --format html|md|json|tokens|all, --open)
+  brand <url>                       Generate a full editorial brand-guidelines book (--format html|md|json|all, --open)
   watch <url>                       Monitor for design changes on interval
   diff <urlA> <urlB>                Compare two sites' design languages
   brands <urls...>                  Multi-brand comparison matrix
@@ -232,16 +241,37 @@ designlang ships surfaces beyond the CLI:
 | **GitHub Action** | [`github-action/`](github-action/) | "Design regression guard" — diffs tokens on every PR and comments. |
 | **Chrome extension** | [`chrome-extension/`](chrome-extension/) | One-click handoff from any tab (MV3, `activeTab` only). |
 | **MCP server** | `npx designlang mcp` | Exposes the extracted design as MCP resources + tools for Cursor, Claude Code, Windsurf, etc. See [`docs/MCP-REGISTRY.md`](docs/MCP-REGISTRY.md). |
+| **Claude Code plugin** | [`.claude-plugin/`](.claude-plugin/) | Five slash commands inside Claude Code — `/extract`, `/grade`, `/battle`, `/remix`, `/pack`. |
 
-## Agent Skill
+## Claude Code plugin
 
-Works with **Claude Code, Cursor, Codex, and 40+ AI coding agents** via the skills ecosystem:
+Drop designlang straight into Claude Code as a plugin. Every CLI command becomes a slash command:
+
+```bash
+/plugin install Manavarya09/design-extract
+```
+
+Then inside any Claude Code session:
+
+| Slash command | What it does |
+|---|---|
+| `/extract <url>` | Full extraction → DTCG tokens, Tailwind, Figma vars, motion, voice |
+| `/grade <url>` | Shareable HTML "Design Report Card" (+ `--badge` for an SVG) |
+| `/battle <urlA> <urlB>` | Head-to-head graded battle card |
+| `/remix <url> --as <vocab>` | Restyle in brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial |
+| `/pack <url>` | Bundle every output into one design-system directory |
+
+Manifest: [`.claude-plugin/plugin.json`](.claude-plugin/plugin.json) · marketplace: [`.claude-plugin/marketplace.json`](.claude-plugin/marketplace.json) · commands: [`commands/`](commands/) · skills: [`skills/`](skills/).
+
+## Agent skill (other ecosystems)
+
+Works with **Cursor, Codex, and 40+ AI coding agents** via the skills ecosystem:
 
 ```bash
 npx skills add Manavarya09/design-extract
 ```
 
-In Claude Code, use `/extract-design <url>`.
+In Cursor / Codex / etc., use `/extract-design <url>`.
 
 ## Website
 

package/SUPPORT.md

@@ -0,0 +1,22 @@
+# Support
+
+Need help with **designlang**?
+
+- **Bugs** — open an [issue](https://github.com/Manavarya09/design-extract/issues/new/choose) with steps to reproduce and the URL you were extracting.
+- **Feature requests** — see the [open roadmap](https://github.com/Manavarya09/design-extract/issues?q=is%3Aopen+label%3Aroadmap) (issues #56–#70). Feel free to claim one with a comment, or open a new one.
+- **Security issues** — see [SECURITY.md](SECURITY.md). Please report privately.
+- **Questions** — start a [Discussion](https://github.com/Manavarya09/design-extract/discussions) or DM [@manavaryasingh](https://github.com/Manavarya09).
+
+## Surfaces
+
+| Surface | Where to ask |
+|---|---|
+| CLI (`npx designlang`) | issue with the failing command + Node version |
+| Claude Code plugin | issue tagged `claude-code` |
+| MCP server (`designlang mcp`) | issue tagged `mcp` |
+| Website (designlang.app) | issue tagged `website` |
+| VS Code / Raycast / Figma / Chrome extensions | issue tagged with the surface name |
+
+## Response time
+
+Best effort within 5 business days. PRs welcome — see [CONTRIBUTING.md](CONTRIBUTING.md).