What is the StyleKit MCP server?
The StyleKit MCP server runs locally over stdio with npx -y --prefer-online stylekit-mcp@latest. It gives your agent nine read-only tools to search styles, fetch tokens and component recipes, get a shadcn install command, and lint generated UI code against a style's rules.
StyleKit is an open-source library of visual styles for AI-generated UI. The repo describes 148 curated styles, each with design tokens, component recipes, Tailwind constraints and copyable prompts. The MCP server exposes that library to an AI coding agent.
The idea is that choosing a named style stops output from drifting toward the same generic look. The repo is clear that it does not promise ship-ready interfaces, and integration and completeness still depend on your project.
What it changes in your workflow
- The agent searches styles by keyword or category, then reads a style's philosophy, palette and do and don't rules.
- It pulls typed tokens and rendered component recipes, such as a button, card or input as className plus JSX.
- It gets the shadcn install command for a style's theme, which is also compatible with the shadcn MCP server.
- After writing UI, it can lint the code against the style's rules and get a reason and a fix per violation.
Who it is for
Best for
- Tailwind and shadcn projects that want a consistent, named visual direction.
- Teams who want a verify step: the lint tool checks that a style's rules were actually followed.
- Developers who prefer data from a tool over style descriptions pasted into prompts.
Not for
- Reading existing sites or Figma files. For tokens from a live site see Dembrandt MCP.
- Teams that need a single product design system. This is a style catalog, not your brand's own rules.
Use it with UiChemy
StyleKit shapes the look of front-end code in your agent. UiChemy covers the WordPress side. Composer is a visual editor for Elementor or Gutenberg, and AI to WordPress imports an existing AI build as an editable page. Click Get Started on uichemy.com.
Connect StyleKit MCP Server: Design Styles and Lint for Agents to your AI client
npx -y --prefer-online stylekit-mcp@latestAdd the config
Put the config above in your client's MCP file: .mcp.json for Claude Code, .cursor/mcp.json for Cursor, or the Windsurf MCP config.
Or copy it from the site
The repo says a one-time JSON config is available on the StyleKit developers page.
Pin a version if you need stability
Replace stylekit-mcp@latest with an exact version, such as [email protected], for a reproducible setup.
Restart the client
A running MCP process does not update itself, so restart the server or client to load a new release.
Try a prompt
Ask for a frosted glass style, then its button recipe and the shadcn install command.
Client configuration
{
"mcpServers": {
"stylekit": {
"command": "npx",
"args": ["-y", "--prefer-online", "stylekit-mcp@latest"]
}
}
}Endpoints and ports
npx -y --prefer-online stylekit-mcp@latestStarts the server over stdio and checks for the latest release each launch.node /abs/path/to/packages/mcp/dist/index.jsRuns a locally built copy instead.https://stylekit.top/r/<slug>.jsonEach style ships as a shadcn registry theme.https://stylekit.top/llms.txtPlain-text catalog for LLMs.What you can do with it
- 148 curated stylesThe repo groups them in ten categories, from modern and tech to brutalist, brand-inspired, retro and cyberpunk.
- Tokens and recipesEach style has design tokens, component code, AI rules and a full-page live demo.
- Lint as a verify stepThe lint tool resolves variant prefixes and understands JSX, HTML classes, cn() and clsx() calls and template literals.
- Honest lint statusLint returns pass, fail or inconclusive, and runtime expressions are reported as inconclusive.
- shadcn theme installEvery style ships as a shadcn registry theme and works with Tailwind v4.
- Read-only toolsAll nine tools only read data. Nothing is written to your project by the server.
- Live and bundled dataPublic assets come live from the API, with a bundled snapshot noted in results when the API is not used.
Tools it exposes
stylekit_search_styles
Searches styles by keyword and/or category.
stylekit_get_style
Returns a full style profile: philosophy, palette, do and don't rules, and quality and capability signals.
stylekit_get_style_tokens
Returns typed design tokens for border, shadow, typography, spacing and colors.
stylekit_get_component_recipe
Returns a rendered component className plus JSX for a button, card or input.
stylekit_get_shadcn_install
Returns the shadcn add command for a style's theme.
stylekit_get_implementation_brief
Returns complete guidance, CSS, templates, recipes, tokens, readiness, merged lint rules and provenance.
stylekit_list_assets
Browses public templates and design assets by kind or query, with pagination and source provenance.
stylekit_get_asset
Retrieves one namespaced asset and any source files its license permits.
stylekit_lint_code
Checks generated UI code against a style's rules and returns a reason and a fix per violation.
Frequently asked questions
What is the StyleKit MCP server?
It is the MCP server for StyleKit, an open-source library of 148 visual styles for AI-generated UI. It lets an AI coding agent search styles, read tokens and component recipes, get a shadcn theme install command, and lint generated code against a style's rules.
How do I set up the StyleKit MCP server?
Add an entry with command npx and args -y, --prefer-online and stylekit-mcp@latest to your client's MCP config, then restart the client. The package README names Claude Desktop, Claude Code, Cursor and Windsurf config locations.
What does the lint tool check?
stylekit_lint_code checks generated UI code against the chosen style's rules and returns pass, fail or inconclusive with a reason and a fix per violation. It is static, so runtime expressions are inconclusive unless known literals already break a rule.
Do the tools change my files?
No. The README states all tools are read-only. The agent gets data and install commands, and your agent or you apply them in your project and review the diff. It also does not run the install command it returns.
Does it need a network connection?
The server runs locally over stdio but needs network access for live catalogue data and remote assets. It also falls back to bundled data for some results. Remote templates report an error if the live source is unavailable.
Does it work with shadcn projects?
Yes. Each style is published as a shadcn registry theme, and one tool returns the add command. The target project needs a tsconfig.json or the shadcn CLI exits with an error. See the shadcn skill for composition rules.
Which AI coding agents work with it?
The README names Claude Desktop, Claude Code, Cursor and Windsurf. The repo also offers an Agent Skill for Agent Skills compatible tools. Any MCP client that can launch a stdio command should work, but only those are named.