@ classic-homes/ 主题- mcp

经典主题设计系统的MCP(模式上下文协议)服务器. 这个软件包使得克洛德等AI助手能够理解并正确使用经典主题组件,设计符号,布局模式,以及验证计划.

为什么用这个?

当AI助手可以访问MCP服务器时,他们可以:

• 生成正确的组件代码 带有适当的道具和变体
• 遵循设计系统模式 用于布局和表格
• 使用正确的设计符号 用于颜色、间距和打字
• 验证用途 以在运行时间前捕捉出错
• 加快发展 删除猜测

快速启动

有 npx( 无安装)

npx @classic-homes/theme-mcp

全球安装

npm install -g @classic-homes/theme-mcp
classic-theme-mcp

在工程中安装

npm install --save-dev @classic-homes/theme-mcp

配置 Claude 代码

添加到您的 ~/.claude/settings.json数字 :

{
  "mcpServers": {
    "classic-theme": {
      "command": "npx",
      "args": ["@classic-homes/theme-mcp"]
    }
  }
}

或为本地安装:

{
  "mcpServers": {
    "classic-theme": {
      "command": "node",
      "args": ["./node_modules/@classic-homes/theme-mcp/dist/cli.js"]
    }
  }
}

更新配置后重新启动 Claude 代码 .

包含什么

资源(只读数据)

核心构成部分和设计系统资源:

• components://catalog
• components://list
• components://{name}
• components://category/{category}
• tokens://all
• tokens://colors
• tokens://spacing
• tokens://typography
• styles://all
• styles://integration
• styles://base
• styles://accessibility
• styles://utilities
• patterns://all
• patterns://layouts
• patterns://forms
• patterns://auth
• patterns://notifications
• patterns://{id}
• schemas://all
• schemas://auth
• schemas://common

特定软件包资源:

• auth://all
• auth://core
• auth://svelte
• auth://testing
• auth://types
• auth://api
• auth://core/{module}
• auth://svelte/{module}
• auth://quick-reference
• notifications://all
• notifications://core
• notifications://svelte
• notifications://types
• notifications://api
• notifications://utils
• notifications://core/{module}
• notifications://quick-reference
• docs://all
• docs://components
• docs://utilities
• docs://types
• docs://extensions
• docs://styles
• docs://quick-reference
• charts://all
• charts://theme
• charts://types
• charts://utils
• charts://quick-reference
• charts://props
• charts://data
• charts://events
• charts://reporting
• gantt://all
• gantt://types
• gantt://scheduling
• maps://all
• maps://theme
• maps://types
• maps://utils
• maps://route
• maps://geocoding
• maps://components
• maps://quick-reference
• maps://props
• maps://data
• maps://events
• maps://hooks
• maps://best-practices
• maps://theme-types
• maps://overlay-layers
• maps://migration
• maps://positioning
• native://all
• native://react
• native://svelte
• native://core
• native://features
• native://types
• native://quick-reference
• viewers://all
• viewers://formats
• viewers://setup

工具( 可查询函数)

提示( 模板)

示例互动

叫克洛德创建一个仪表盘

"Create a dashboard page with sidebar navigation and a data table"

Claude会用MCP向上看 DashboardLayout 道具吗, DataTable 配置,并生成正确的类型脚本代码.

询问组件变体

"What variants does the Alert component have?"

克劳德查询 get_component_props 和返回:默认、破坏性、成功、警告、信息.

生成窗体

"Create a contact form with name, email, and message fields"

克劳德使用 build_form 生成窗体 FormField 组件、 Zod 验证和正确处理错误.

构成部分类别

• 核心项目:按钮,输入,卡片,徽章,标签等.
• 表单: 窗体字段、 选择、 复选框、 无线电组、 幻灯片等.
• 版式: DashboardLayout, PublicLayout, AuthLayout, 错误Layout, 动作标题、 工具栏、 分块控制、 视图切换
• 反馈: 土司、斯宾纳、斯凯通、警报
• 数据: 数据表,标签
• 覆盖: 对话框、 提醒对话框、 工具提示、 滴出菜单
• 导航: 侧边栏、页眉、页脚、快链接
• 商标: LogoMain, 装入Logo

对于软件包维护者

重新生成目录

当经典 更新主题组件:

npm run generate
npm run build

构建

npm run build      # Generate catalog + build
npm run build:fast # Build only (skip generation)

本地测试

# Run the server
npm run start

# Test with MCP Inspector
npx @modelcontextprotocol/inspector node dist/cli.js

所需资源

• 节点.js 18或以后
• 经典 在您的工程中安装的主题包( 用于全部功能)

相关软件包

• @classic-homes/theme-svelte - Svelte 组件库
• @classic-homes/theme-react - 反应组件库
• @classic-homes/theme-tokens - 设计标志
• @classic-homes/theme-tailwind-preset - 尾风配置

文档

• AI 融合指南
• 构成部分文件
• 开始

许可证

麻省理工学院