Stats
Actions
Tags
From designlang
Recolors extracted site design around new brand primary hex via OKLCH hue rotation, preserving neutrals, type, spacing, motion. Outputs side-by-side HTML preview + tokens for Tailwind, shadcn, DTCG, Figma.
How this command is triggered — by the user, by Claude, or both
Slash command
/designlang:theme-swap <url> --primary <hex> [--from <hex>] [--open]The summary Claude sees in its command listing — used to decide when to auto-load this command
Take any extracted site and swap its brand primary to the user-provided hex. The whole palette rotates around that hue while neutrals and structural tokens stay put. If `$ARGUMENTS` doesn't contain both a URL and `--primary <hex>`, ask the user for the missing piece. After the run completes, all output goes to `./design-extract-output/`: - `*.themeswap.html` — editorial side-by-side preview (open this) - `*.themeswap.md` — markdown diff table - `*.themeswap.json` — structured before→after deltas - `*.themeswap.tokens.json` — recoloured DTCG token set you can drop into a project After ...
Take any extracted site and swap its brand primary to the user-provided hex. The whole palette rotates around that hue while neutrals and structural tokens stay put.
npx designlang theme-swap $ARGUMENTS
If $ARGUMENTS doesn't contain both a URL and --primary <hex>, ask the user for the missing piece.
After the run completes, all output goes to ./design-extract-output/:
*.themeswap.html — editorial side-by-side preview (open this)*.themeswap.md — markdown diff table*.themeswap.json — structured before→after deltas*.themeswap.tokens.json — recoloured DTCG token set you can drop into a projectAfter the command finishes:
*.themeswap.md to summarise the swap (from → to, hue shift, count of changed colours).--open does this automatically).| Flag | Effect |
|---|---|
--primary <hex> | required. Target brand colour (e.g. "#ff4800"). |
--from <hex> | Override the auto-detected source primary when the extractor misclassifies (e.g. a neutral got promoted by usage count). |
--format html|md|json|tokens|all | Pick the output(s). Default all. |
--out <dir> | Output directory. Default ./design-extract-output. |
--open | Open the HTML preview in your default browser. |
/grade <url> — grade the recoloured site by feeding the same target through /extract then /grade./pack <url> — bundle the recoloured tokens as a downloadable design-system folder./remix <url> --as <vocab> — full vocabulary swap (brutalist, art-deco, cyberpunk…) instead of just brand colour.npx claudepluginhub manavarya09/design-extract --plugin designlang/design-systemGenerates design tokens and theme configuration from a brand color, Figma URL, or by extracting an existing project's design system. Also supports extracting from code or Figma files.
/tailwind-theme-builderSets up Tailwind v4 theming with CSS variables and dark mode. Accepts optional hex color for primary brand or uses defaults.
/brand-paletteGenerates derived (color theory harmonies, tints) or alternative mood-based color palettes from brand colors in brand-philosophy.md. Displays previews and supports saving.
/paletteGenerate color palettes from design styles with semantic colors, scales (50-900), contrast ratios, and accessibility validation for light, dark, or both modes.
/design-context-extractExtracts design DNA—colors, typography, spacing, components—from screenshots, URLs, or project styles. Outputs design-tokens.json, Tailwind config, CSS variables, or Markdown spec.
/color-paletteGenerate an accessible color palette from a hex color value (e.g., #1E40AF). Prompts for brand color if none provided.