diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index 746fb7d..acd323a 100644 --- a/.claude-plugin/marketplace.json +++ b/.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": "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" }, @@ -17,11 +17,19 @@ "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 index df242c0..9366c51 100644 --- 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 index 13d4679..73117a0 100644 --- 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 \` | Full extraction → DTCG, Tailwind, Figma, motion, voice | +| \`/grade \` | Shareable HTML Design Report Card (+ \`--badge\`) | +| \`/battle \` | Head-to-head graded battle card | +| \`/remix --as \` | Restyle in 6 vocabularies | +| \`/pack \` | 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 index 7ae7d16..ca7a731 100644 --- 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 ` | Full extraction → DTCG tokens, Tailwind, Figma vars, motion, voice | +| `/grade ` | Shareable HTML "Design Report Card" (+ `--badge` for an SVG) | +| `/battle ` | Head-to-head graded battle card | +| `/remix --as ` | Restyle in brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial | +| `/pack ` | 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 `. +In Cursor / Codex / etc., use `/extract-design `. ## Website diff --git a/commands/battle.md b/commands/battle.md new file mode 100644 index 0000000..8a8fc3c --- /dev/null +++ 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: +--- + +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/`: + +- `-vs-.battle.html` — the shareable card +- `-vs-.battle.md` — markdown summary +- `-vs-.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 --badge` so each side has a permanent badge to link back to. diff --git a/commands/extract.md b/commands/extract.md new file mode 100644 index 0000000..4104abb --- /dev/null +++ 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: [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 ` — shareable HTML Design Report Card + SVG badge +- `/battle ` — head-to-head graded comparison +- `/remix --as ` — restyle in another vocabulary +- `/pack ` — 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 ` | 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 new file mode 100644 index 0000000..fc84d4e --- /dev/null +++ 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: [--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/.svg) +``` + +This endpoint is blob-cached 24h with edge caching for ~50ms repeat hits. + +Compare two sites with `/battle `, restyle with `/remix`, bundle everything with `/pack`. diff --git a/commands/pack.md b/commands/pack.md new file mode 100644 index 0000000..725ba3a --- /dev/null +++ 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: [--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 `./-design-system/`. + +Layout produced: + +``` +-design-system/ +├── README.md bespoke "Built from " + 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 · ./`) +2. Read the auto-generated `README.md` and tell the user what's inside +3. Suggest next steps: + - `cd && zip -r ../.zip .` to package for sharing + - `cd /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 new file mode 100644 index 0000000..b58ec04 --- /dev/null +++ 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: --as | --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 ` | 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..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 index 864e538..43d52e6 100644 --- 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": {