Quickstart

No config is needed in a shadcn/ui project (Tailwind v3 or v4), a monorepo whose components live in a workspace package, or the design-system package itself (how it finds them). Other layouts take a config file. Requires Node.js 22.18 or later.

1. Give your agent the tools. Pick one:

• Claude Code: install the plugin, which brings the server, a skill that has Claude look components up before writing UI, and a hook that checks every UI file Claude writes:

  /plugin marketplace add dgesteves/design-system-mcp/plugin install design-system@dgesteves

• Cursor or VS Code: use the install buttons on this page, or add the config to the repository.

• Any other MCP client: run npx -y @dgesteves/design-system-mcp as a stdio server. There are configs for Claude Desktop, Codex CLI, GitHub Copilot CLI, Windsurf, JetBrains IDEs, Zed, Gemini CLI and Grok Build.

2. See what it found, from the app's folder:

npx -y @dgesteves/design-system-mcp inspect

3. Try it. Ask your agent for some UI, such as "Add a danger-zone card to the settings page." It looks the components, variants and tokens up before writing and runs check_ui on the result. In Claude Code the plugin's skill loads by itself for UI work (or run /design-system:design-system), and the hook checks each file as it is written.

4. Check the codebase, then add it to CI:

npx -y @dgesteves/design-system-mcp check .

check . lints every .tsx and .jsx file under the folder, whatever the layout, and leaves out the design system's own components.