Log inSubmit server
StyleKit logo

StyleKit

Searches 148 design styles and returns tokens, component recipes, and style-rule lint results through MCP.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install StyleKit

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "stylekit": {
      "command": "npx",
      "args": [
        "-y",
        "shadcn"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

We couldn’t confirm it starts correctly

The install command installed and started the server, which then stopped for configuration (such as an API key) that our sandbox does not have — expected for servers that connect to your account.

npx -y shadcn

No response to initialize.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 7d ago.

Overview

StyleKit MCP server exposes a curated library of 148 visual styles to AI development tools. It supports style search, design-token retrieval, component recipes, and the stylekit_lint_code check for generated UI code. Run it with npx and connect it through an MCP client's developer configuration. Reach for it when an agent needs concrete visual rules instead of an informal design prompt.

Use cases

  • Search for a visual direction before generating a web page
  • Retrieve design tokens for an AI-built interface
  • Apply component recipes while implementing a selected style
  • Lint generated UI code against style rules

Key features

  • Searches 148 curated visual styles
  • Returns design tokens
  • Provides component recipes
  • Checks UI code with stylekit_lint_code
  • Fetches public materials on request

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

8/8 checks healthy over the last 41d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 4h ago via OSV.dev · shadcn (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars649Stargazers on the source repository.
npm downloads45MPackage downloads in the last 30 days.
Last commit1d agoMost recent push to the default branch.
Install checkRunsOur sandbox started it; it then asked for an API key or config.
Directory activity2 viewsConfig copies, upvotes, and views on AllMCPs.

How StyleKit works

What StyleKit MCP server does

StyleKit MCP server gives coding agents access to a library of 148 curated visual styles. Each style includes design tokens, component recipes, Tailwind constraints, AI-oriented rules, and a live page example in the broader StyleKit project. The MCP interface makes selected parts of that material available during an agent session rather than requiring the developer to manually browse the site.

The catalog spans categories including modern and technology-focused styles, brutalism, brand-inspired directions, retro, art, Japanese and anime, cyberpunk and science fiction, layout patterns, cultural and regional themes, and natural or warm styles. The repository also publishes related templates, animations, and export formats, but the README specifically describes the MCP package as providing style search, design tokens, component recipes, and code linting.

How it works

The StyleKit MCP server runs as an npm package through a local process. The documented launch command is npx -y --prefer-online stylekit-mcp@latest. An MCP-compatible client starts that process and invokes its exposed capabilities as needed. Public online materials are fetched per request, so newly added content does not require reinstalling the CLI or MCP package.

The stylekit_lint_code tool checks generated UI code against the rules of a selected style. This is useful after an agent has produced markup or components and you want to identify whether the implementation follows the chosen visual direction.

Setup and configuration

Start the server with:

Terminal
npx -y --prefer-online stylekit-mcp@latest

Use the one-time JSON configuration provided on StyleKit's developer page to register the process with an MCP client. The repository excerpt does not include that JSON, so connection details should be copied from the current developer page rather than reconstructed manually.

The client checks npm for a newer package version whenever it starts the MCP process. A process that is already running must be restarted before it can use an updated version.

Tools and capabilities

The StyleKit MCP server is intended for agents working on web interfaces. Its documented capabilities include:

  • Searching the 148-style catalog.
  • Retrieving design tokens for a selected style.
  • Retrieving component recipes.
  • Checking generated UI code with stylekit_lint_code.

The available style data is designed to turn a visual direction into concrete tokens and constraints that an agent can apply while implementing a page or component.

Limitations and notes

StyleKit does not promise that generated interfaces are ready for production. Integration quality and completeness still depend on the consuming project and the agent's implementation. The MCP package is one of three documented usage paths; the project also supports an Agent Skill package and direct shadcn registry themes.

Because the process checks for updates at startup, running instances do not automatically load a new version. Restart the MCP process after an update is available.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about StyleKit

StyleKit is an MCP server that connects AI development clients to a curated library of 148 visual styles. Its main tools support style search, design-token retrieval, component recipes, and `stylekit_lint_code`, which checks generated UI code against the rules of a selected style.

Run `npx -y --prefer-online stylekit-mcp@latest` and register it with your MCP client using the one-time JSON configuration from StyleKit's developer page. Restart an existing process after updates so it loads the newer package version.

StyleKit MCP can search the style catalog and provide design tokens and component recipes. It also exposes `stylekit_lint_code` for checking generated UI code against a selected style's rules.

Yes, Cursor is named as a compatible tool in the StyleKit documentation.

Yes, the `stylekit_lint_code` tool checks generated UI code against the rules of the selected style. This lets an agent review an implementation after generating it, rather than relying only on the original style prompt.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewStyleKit AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/stylekit?style=directory)](https://allmcps.com/mcp/stylekit)
HTML Embed
<a href="https://allmcps.com/mcp/stylekit"><img src="https://allmcps.com/api/badge/stylekit?style=directory" alt="StyleKit on AllMCPs" /></a>