StyleKit

Name: StyleKit
Author: AnxForever

远程服务

stylekit.top开发工具699今天更新

代码仓库访问官网

关于 StyleKit

StyleKit 是面向设计样式、资源、令牌、组件配方和界面代码检查的 MCP 服务，供开发者与编码 Agent 查找设计指引，并按样式规则验证生成的界面代码。

主要功能

01按关键词或类别搜索设计样式
02浏览并获取公开资源
03获取样式配置和类型化设计令牌
04获取组件配方及 shadcn 命令
05检查界面代码并提供修复建议

适用场景

01查找样式并查看设计规则
02获取模板或许可范围内的源文件
03依据配方和令牌生成组件
04检查生成的界面代码是否违反样式规则

MCP 相关

通过 stdio 向 MCP 客户端提供只读的 StyleKit 搜索、资源、样式、令牌、配方、实现简报和代码检查工具。

配置

远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。

服务地址https://www.stylekit.top/mcp

一键复制安装命令

Claude CodeTerminalclaude mcp add --transport http anxforever-stylekit https://www.stylekit.top/mcp

Cursor.cursor/mcp.json{"mcpServers":{"anxforever-stylekit":{"type":"http","url":"https://www.stylekit.top/mcp"}}}在 Cursor 中打开

VS Code.vscode/mcp.json{"servers":{"anxforever-stylekit":{"type":"http","url":"https://www.stylekit.top/mcp"}}}在 VS Code 中打开

Claude Desktopclaude_desktop_config.json{"mcpServers":{"anxforever-stylekit":{"type":"http","url":"https://www.stylekit.top/mcp"}}}

Windsurf~/.codeium/windsurf/mcp_config.json{"mcpServers":{"anxforever-stylekit":{"serverUrl":"https://www.stylekit.top/mcp"}}}

命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

安装包

npmstylekit-mcp0.5.0stdio

工具

参数	类型	必填	说明
limit	integer	否	每页大小
query	string	否	要匹配的关键词
offset	integer	否	分页时要跳过的结果数
category	enum	否	风格类别筛选条件modern \| retro \| minimal \| expressive

详细介绍

stylekit-mcp

StyleKit 的 MCP 服务——可在 Claude、Cursor 或 Windsurf 中搜索设计风格，并获取模板、素材、令牌、配方和代码检查结果。

该服务使用官方 MCP SDK，通过 stdio 在本地运行。它包含 stylekit-core；已发布的进程依赖 @modelcontextprotocol/sdk 和 zod，仅在获取实时目录数据和远程素材时需要网络连接。该项目采用 MIT 许可证。

工具

所有工具均为只读。

工具	功能
`stylekit_search_styles`	按关键词和／或类别搜索风格
`stylekit_list_assets`	按类型或查询条件浏览公开模板和设计素材，支持分页并提供来源信息
`stylekit_get_asset`	获取带命名空间的公开素材详情，以及许可证允许获取的源文件
`stylekit_get_implementation_brief`	完整的 AI 指引、CSS、模板、配方、令牌、就绪状态、合并后的代码检查规则和来源信息（0.3.0）
`stylekit_get_style`	完整的风格档案：设计理念、配色、应做／不应做的规则、质量／能力信号
`stylekit_get_style_tokens`	类型化设计令牌：边框、阴影、排版、间距、颜色
`stylekit_get_component_recipe`	渲染后的组件 `className` + JSX（按钮／卡片／输入框）
`stylekit_get_shadcn_install`	用于安装某个风格主题的 `npx shadcn add` 命令
`stylekit_lint_code`	根据某个风格的规则检查生成的 UI 代码，并为每处违规提供原因和修复建议

stylekit_lint_code 值得加入你的工作流：在 Agent 编写 UI 代码后调用它，确保风格约束经过验证，而不是凭空假定。它会在匹配前解析变体前缀（dark:、md:、hover:），并能识别 JSX／HTML 类属性、cn()／clsx() 调用和模板字面量。

设置

将此配置添加到 MCP 客户端中即可：

{
  "mcpServers": {
    "stylekit": {
      "command": "npx",
      "args": ["-y", "--prefer-online", "stylekit-mcp@latest"]
    }
  }
}

Claude Desktop / Claude Code：claude_desktop_config.json 或 .mcp.json
Cursor：.cursor/mcp.json
Windsurf：Windsurf MCP 配置

客户端启动 MCP 进程时，npx 会向 npm 检查当前的 latest 版本，即使程序包已缓存也会如此。运行中的 MCP 进程不会自行替换；重启服务或客户端即可加载更新。若要确保设置可复现，请将 stylekit-mcp@latest 替换为确切的已发布版本，例如 [email protected]。npm 缓存选项介绍了 --prefer-online 如何处理缓存的程序包。

若要改为运行本地构建的副本，请将客户端指向绝对路径：

{
  "mcpServers": {
    "stylekit": { "command": "node", "args": ["/abs/path/to/packages/mcp/dist/index.js"] }
  }
}

公开素材

stylekit_list_assets 可接受可选的 kind 和 query 筛选条件，以及 offset／limit。它会返回结构化分页结果，其中包含命名空间、内容级别、可用性、许可证和署名元数据，以及该页面来自实时 API 还是内置快照。偏移量超出最后一条结果时，会返回空的成功页面。

stylekit_get_asset 会以结构化数据和 JSON 文本的形式返回完整的素材详情。contentLevel 表示实际可用的内容：source 和 remote 素材可以包含源文件；metadata 和 restricted 条目则不包含。availability 用于区分内置、远程、外部和受限内容。外部和受限条目仅提供元数据或源链接；不会以可下载的完整源代码形式呈现。远程模板需要实时 API 才能返回实际文件集；若该来源不可用，工具会报告错误，而不会将占位内容作为代码返回。

示例

在编辑器的 AI 聊天中：

“在 StyleKit 中搜索磨砂玻璃风格，然后提供它的按钮配方和 shadcn 安装命令。”

Agent 会依次调用 stylekit_search_styles → stylekit_get_component_recipe → stylekit_get_shadcn_install，并返回可直接使用的代码。

开发

pnpm --filter stylekit-mcp build # compile to dist/
node scripts/smoke.mjs  # smoke-test all tools over stdio

许可证

MIT

发布内容

已发布的 MCP 软件包包含上述公共资源工具、来源溯源信息和发现可靠性修复。该软件包捆绑了 stylekit-core；运行时 npm 依赖仍为 MCP SDK 和 Zod。

生成前请调用 brief 工具，并保存其 stylekit-brief-v1 负载以供后续验证。provenance.source 用于标识数据来源；contentHash 用于检测内容变更。

Lint 会返回 status: pass | fail | inconclusive。只有静态检查明确通过时，ok 才为 true。除非已知字面值中包含违规内容，否则运行时表达式会报告为无法得出结论。缺少要求仅提供提示；传入 strict: true 和 checkRequired: ["button"]，即可在静态组件代码片段中将其判定为失败。必需项检查会覆盖整个输入，而非逐个检查元素。这些检查无法认证视觉质量或无障碍性。

支持 Markdown

登录后评论