Manavarya09 · Manavarya09 · May 5, 2026 · May 5, 2026
diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json
@@ -1,27 +1,35 @@
 {
-  "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": "Five slash commands wrapping the designlang CLI: /extract (full design language → DTCG, Tailwind, Figma), /grade (shareable HTML report card + SVG badge), /battle (head-to-head graded comparison), /remix (restyle in 6 vocabularies — brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial), /pack (one downloadable design-system bundle).",
+      "version": "12.5.0",
       "author": {
         "name": "Manavarya Singh"
       },
       "category": "design",
       "tags": [
         "design-system",
         "design-tokens",
-        "css",
+        "dtcg",
         "tailwind",
+        "shadcn",
+        "figma",
         "typography",
         "colors",
-        "web-scraping"
+        "motion",
+        "grade",
+        "battle",
+        "remix",
+        "pack",
+        "mcp",
+        "playwright"
       ]
     }
   ]

diff --git a/.claude-plugin/plugin.json b/.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. Five slash commands — /extract, /grade, /battle, /remix, /pack — 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, and full downloadable design-system bundles.",
+  "version": "12.5.0",
   "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/"
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,42 @@
 # Changelog
 
+## [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.**

diff --git a/README.md b/README.md
@@ -235,16 +235,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
 

diff --git a/commands/battle.md b/commands/battle.md
@@ -0,0 +1,27 @@
+---
+description: Head-to-head graded battle card between two sites — eight dimensions, bar-by-bar, verdict line.
+argument-hint: <urlA> <urlB>
+---
+
+Pit two sites against each other and emit a single shareable HTML battle card.
+
+```bash
+npx designlang battle $ARGUMENTS
+```
+
+If `$ARGUMENTS` is empty or contains fewer than two URLs, ask the user for both sites.
+
+Both sites are extracted in parallel (~30s total). Outputs land in `./design-extract-output/`:
+
+- `<a>-vs-<b>.battle.html` — the shareable card
+- `<a>-vs-<b>.battle.md` — markdown summary
+- `<a>-vs-<b>.battle.json` — structured scores
+
+After the run:
+
+1. Read the `*.battle.md` file
+2. Show the user the verdict line ("X wins" / "tie") and the per-dimension table
+3. Highlight the dimensions where the gap is widest
+4. Offer to open the HTML card
+
+This is pure viral content — battles are designed to be tweeted. Pair with `/grade <url> --badge` so each side has a permanent badge to link back to.
diff --git a/commands/extract.md b/commands/extract.md
@@ -0,0 +1,41 @@
+---
+description: Extract the complete design language from a URL — DTCG tokens, Tailwind, Figma vars, motion, voice, components.
+argument-hint: <url> [extra flags…]
+---
+
+Run **designlang** against the user-provided URL and surface the result.
+
+```bash
+npx designlang $ARGUMENTS
+```
+
+If no `$ARGUMENTS` were supplied, ask the user which URL to extract.
+
+Default output goes to `./design-extract-output/`. Once it finishes, read the generated `*-design-language.md` (the AI-optimized markdown) and present a tight summary to the user:
+
+- Primary palette (hex codes)
+- Type families + scale
+- Spacing base + scale
+- WCAG accessibility score
+- Component patterns detected
+- Notable signals (motion feel, material language, brand voice tone)
+
+Then offer follow-ups:
+
+- `/grade <url>` — shareable HTML Design Report Card + SVG badge
+- `/battle <urlA> <urlB>` — head-to-head graded comparison
+- `/remix <url> --as <vocab>` — restyle in another vocabulary
+- `/pack <url>` — bundle every output into one design-system directory
+
+Useful flags the user may pass via `$ARGUMENTS`:
+
+| Flag | Effect |
+|---|---|
+| `--full` | screenshots + responsive + interactions + deep-interact |
+| `--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`) |
+| `--cookie-file ./session.json` | authenticated extraction |
+
+Full reference: https://github.com/Manavarya09/design-extract#full-cli-reference
diff --git a/commands/grade.md b/commands/grade.md
@@ -0,0 +1,29 @@
+---
+description: Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm), strengths + fixes, plus an SVG badge.
+argument-hint: <url> [--badge] [--open]
+---
+
+Audit the design system at the user-provided URL. Emits a self-contained HTML report card plus JSON + Markdown variants. Pass `--badge` to also emit a shields.io-style SVG you can drop into any README.
+
+```bash
+npx designlang grade $ARGUMENTS
+```
+
+If no `$ARGUMENTS` were supplied, ask the user which URL to grade.
+
+After the run completes:
+
+1. Read the generated `*.grade.md` file from `./design-extract-output/`
+2. Surface the headline grade (A–F · score · 8 dimensions)
+3. Highlight the top 3 strengths and top 3 issues from the report
+4. Offer to open the HTML in the browser (the `--open` flag does this automatically)
+
+If the user wants the live shareable badge URL instead of generating files locally, they can use:
+
+```markdown
+![Design Score](https://designlang.app/badge/<host>.svg)
+```
+
+This endpoint is blob-cached 24h with edge caching for ~50ms repeat hits.
+
+Compare two sites with `/battle <A> <B>`, restyle with `/remix`, bundle everything with `/pack`.
diff --git a/commands/pack.md b/commands/pack.md
@@ -0,0 +1,37 @@
+---
+description: Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts) into one polished design-system directory ready to zip and ship.
+argument-hint: <url> [--with-clone] [--open]
+---
+
+Run the full extraction once and write every emitter output into a single, signed, layered directory.
+
+```bash
+npx designlang pack $ARGUMENTS
+```
+
+If no URL is provided, ask the user. Default output is `./<host>-design-system/`.
+
+Layout produced:
+
+```
+<host>-design-system/
+├── README.md           bespoke "Built from <host>" + grade + at-a-glance
+├── 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 / Lovable / Cursor / Claude Artifacts + named recipes/*.md
+└── extras/             voice.json + prompt-pack.md rollup
+```
+
+After the run:
+
+1. Surface the headline (`X files, Y KB · ./<dir>`)
+2. Read the auto-generated `README.md` and tell the user what's inside
+3. Suggest next steps:
+   - `cd <dir> && zip -r ../<dir>.zip .` to package for sharing
+   - `cd <dir>/storybook && npm install && npm run storybook` to run the design system locally
+   - Copy `tokens/tailwind.config.js` straight into a project
+
+Use `--with-clone` to swap the minimal HTML starter for the full Next.js clone (slower; only when the user wants a runnable app).
diff --git a/commands/remix.md b/commands/remix.md
@@ -0,0 +1,29 @@
+---
+description: Restyle a site in another design vocabulary — brutalist, swiss, art-deco, cyberpunk, soft-ui, or editorial. Preserves page shape, swaps the visual vocabulary.
+argument-hint: <url> --as <brutalist|swiss|art-deco|cyberpunk|soft-ui|editorial> | --all
+---
+
+Restyle the page shape of an extracted site under a different visual vocabulary.
+
+```bash
+npx designlang remix $ARGUMENTS
+```
+
+If `$ARGUMENTS` is empty, ask the user for a URL and offer the six vocabularies. If only a URL is given, default to `--all` so they see every variant side by side.
+
+The six vocabularies:
+
+| `--as <id>` | Vibe |
+|---|---|
+| `brutalist` | Raw, blocky, monospace, no shadows |
+| `swiss` | Clean grid, sans, minimal palette |
+| `art-deco` | Geometric, gold accents, serif display |
+| `cyberpunk` | Neon, dark, glowing CTAs |
+| `soft-ui` | Pastel, soft shadows, generous radii |
+| `editorial` | Newspaper feel, serif, narrow columns |
+
+Use `--all` to emit all six in one pass — six standalone HTML files plus a comparison index.
+
+After the run, read the comparison index (`*-remix-index.html` or `*-remix.<vocab>.html`) and tell the user which file to open. Offer to launch `--open` automatically.
+
+Pair with `/battle` for cross-vocab fights ("Stripe-as-cyberpunk vs Vercel-as-art-deco"), or `/pack` to bundle a remixed system as a downloadable design directory.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "12.4.0",
+  "version": "12.5.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": {