Swatchbook Mcp

БесплатноПоддерживается

Model Context Protocol server for swatchbook — exposes a DTCG project's tokens, axes, and diagnostics to AI agents without running Storybook.

автор: GitHub Actions

GitHub Embed

Описание

Model Context Protocol server for swatchbook — exposes a DTCG project's tokens, axes, and diagnostics to AI agents without running Storybook.

README

A Storybook addon and MDX doc blocks for visualising DTCG design tokens.

Built on Terrazzo's parser. Your production build runs Terrazzo's CLI against the same DTCG source; swatchbook reads it too, inside Storybook.

If your stories already style with CSS variables, they pick up the toolbar's axis flips automatically. That's mostly what the tool does.

Documentation · unpunnyfuns.github.io/swatchbook Live Storybook · /storybook

Install

npm install -D @unpunnyfuns/swatchbook-addon

One package pulls the whole React surface: toolbar, preview decorator, MDX doc blocks, ThemeSwitcher, useToken(). See the Quickstart for configuration.

Packages

Package	Purpose
@unpunnyfuns/swatchbook-addon	Storybook 10 addon. Re-exports the blocks + switcher React surface.
@unpunnyfuns/swatchbook-core	Framework-free DTCG loader.
@unpunnyfuns/swatchbook-blocks	MDX doc blocks.
@unpunnyfuns/swatchbook-switcher	Framework-agnostic axis / preset popover UI.
@unpunnyfuns/swatchbook-integrations	Tailwind v4 and CSS-in-JS adapters for the addon.
@unpunnyfuns/swatchbook-mcp	Model Context Protocol server for AI agents.

Most consumers only install the addon; the rest travel transitively. Each sub-package is publishable on its own for slice-only use (for example, the switcher in a Docusaurus navbar).

Development

pnpm workspaces + Turborepo. Node 24. ESM.

pnpm install
pnpm dev                           # apps/storybook on :6006
pnpm turbo run lint typecheck test build

Credits

Parses DTCG tokens through Terrazzo by the Terrazzo team. Its parser, resolver evaluation, and alias resolution are the foundation.

License

MIT © unpunnyfuns.

from github.com/unpunnyfuns/swatchbook

Установить Swatchbook Mcp в Claude Desktop, Claude Code, Cursor

Рекомендуется · одна команда, все IDE

unyly install swatchbook-mcp

Ставит в Claude Desktop, Claude Code, Cursor и VS Code — сам разбирается с npx, uvx и сборкой из исходников.

Впервые? Поставь CLI: curl -fsSL https://unyly.org/install | sh

Или настроить вручную

Выполни в терминале:

claude mcp add swatchbook-mcp -- npx -y @unpunnyfuns/swatchbook-mcp

FAQ

Swatchbook Mcp MCP бесплатный?

Да, Swatchbook Mcp MCP бесплатный — установка в пару кликов через Unyly без оплаты.

Нужен ли API-ключ для Swatchbook Mcp?

Нет, Swatchbook Mcp работает без API-ключей и переменных окружения.

Swatchbook Mcp — hosted или self-hosted?

Self-hosted: сервер запускается локально на твоей машине командой из раздела установки.

Как установить Swatchbook Mcp в Claude Desktop, Claude Code или Cursor?

Открой Swatchbook Mcp на unyly.org, выбери вкладку своего клиента (Claude Desktop, Claude Code, Cursor) и нажми Install — конфиг сгенерируется автоматически, без правки JSON.