mcpsystem.design MCP Server

mcpsystem.design MCP服务器

一个生产就绪的MCP（模型上下文协议）服务器，为AI助手提供设计系统组件和风格指南。部署在Vercel上，使用SSE传输进行远程访问。

实时服务器： https://www.mcpsystem.design/

特性

• 组件规格：访问UI组件的详细道具、类型和描述
• 代码示例：准备好为每个组件使用Tailwind CSS代码片段
• 风格指南：检索颜色、排版、间距比例和断点
• 搜索：按名称、描述或类别查找组件
• 苏格兰和南方能源公司运输：通过服务器发送事件进行远程访问以进行web部署
• 安全强化：输入验证、速率限制和结构化日志记录

快速开始

1.安装依赖项

npm install

2.地方发展

运行Next.js开发服务器：

npm run dev

MCP SSE端点将在 http://localhost:3000/api/sse

3.部署到Vercel

# Install Vercel CLI if not already installed
npm i -g vercel

# Deploy
vercel

项目结构

├── app/                    # Next.js App Router
│   ├── api/
│   │   └── sse/
│   │       └── route.ts    # MCP SSE transport endpoint
│   ├── patterns/           # Pattern documentation pages
│   ├── docs/               # Documentation pages
│   └── page.tsx            # Landing page
├── lib/
│   ├── design-system/      # Design system data
│   │   ├── index.ts        # Main exports and helpers
│   │   ├── components.ts   # Component definitions
│   │   ├── style-guide.ts  # Colors, typography, spacing
│   │   └── types.ts        # TypeScript types
│   ├── mcp/                # MCP protocol utilities
│   │   ├── schemas.ts      # Zod validation schemas
│   │   ├── errors.ts       # JSON-RPC error codes
│   │   ├── logger.ts       # Structured logging
│   │   └── types.ts        # TypeScript types
│   └── security/           # Security utilities
│       ├── host-validator.ts  # Host header validation
│       └── rate-limiter.ts    # Rate limiting
├── components/             # React components for the website
├── packages/               # Publishable packages
│   └── ui/                 # @mcpsystem/ui Web Components
├── scripts/                # Build and validation scripts
│   ├── validate-css-tokens.ts       # CSS token validation
│   └── validate-component-colors.ts # Component color validation
├── package.json
├── tsconfig.json
├── vercel.json
└── README.md

API终点

可用的MCP工具

模式工具（顺风CSS）

顺风模式是复制粘贴HTML，具有变体、大小和状态的类变体。

样式指南工具

组件工具（@mcpsystem/ui）

@mcpsystem/ui组件是您导入和使用的基于Lit的Web组件。

连接到AI助手

光标

1. 打开光标设置(Cmd+, 在macOS或 Ctrl+, 在Windows/Linux上）
2. 搜索“MCP”或导航到 特性→ MCP服务器
3. 点击 “添加新的MCP服务器”
4. 配置为：

- 姓名： mcpdesignsystem - 类型： sse - 网址： https://www.mcpsystem.design/sse

或者，添加到您的 .cursor/mcp.json 文件：

{
  "mcpServers": {
    "mcpdesignsystem": {
      "url": "https://www.mcpsystem.design/sse"
    }
  }
}

克劳德桌面版

添加到您的Claude桌面配置(~/Library/Application Support/Claude/claude_desktop_config.json 在macOS上）：

{
  "mcpServers": {
    "mcpdesignsystem": {
      "url": "https://www.mcpsystem.design/sse"
    }
  }
}

克劳德代码CLI

添加到您的 .claude/settings.json:

{
  "mcpServers": {
    "mcpdesignsystem": {
      "url": "https://www.mcpsystem.design/sse"
    }
  }
}

定制设计系统

修改组件

编辑 lib/design-system/components.ts 添加或修改组件。每个组件都遵循此结构：

{
  name: "ComponentName",
  slug: "component-name",
  description: "Component description",
  category: "Category",
  usageNote: "",
  tailwind: true,
  specs: {                          // Class variations - which Tailwind classes to swap
    variants: [
      { name: "Primary", classes: "bg-primary text-primary-foreground" },
      { name: "Secondary", classes: "bg-surface-hover text-default" }
    ],
    sizes: [
      { name: "Small", classes: "h-8 px-3 text-xs" },
      { name: "Medium", classes: "h-10 px-4 text-sm" }
    ],
    states: [
      { name: "Disabled", classes: "opacity-70 cursor-not-allowed" }
    ]
  },
  examples: [
    {
      title: "Example Title",
      code: `
Example
`,
      preview: "preview-id"
    }
  ],
  relatedComponents: ["OtherComponent"]
}

修改样式指南

更新 lib/design-system/style-guide.ts:

• 颜色：按类别组织（语义标记、灰度、重音）
• 排版：每种样式的字体系列、大小、粗细、线条高度
• 间距：令牌名称、CSS值和像素等效值
• 断点：响应断点值和描述

颜色标记规则

组件示例必须使用 语义颜色标记 而不是原始的顺风颜色：

验证

该项目包括两个在构建时自动运行的验证脚本：

CSS令牌验证

确保CSS变量 globals.css 匹配中的设计标记 style-guide.ts:

npm run validate:tokens

组件颜色验证

确保组件示例使用语义颜色标记，而不是原始的顺风颜色：

npm run validate:component-colors

运行所有验证

npm run validate

始终运行 npm run validate 在提交更改之前，确保设计系统的一致性。

发展

类型检查

npm run typecheck

验证

npm run validate          # Run all validations (recommended before commits)
npm run validate:tokens   # CSS token validation only
npm run validate:component-colors  # Component color validation only

建筑

npm run build             # Runs validation + production build

安全

SSE端点包括几个安全强化措施：

输入验证

• 所有JSON-RPC请求都使用Zod模式进行验证
• 执行前对工具参数进行类型检查
• 批量请求最多限制为100个项目

速率限制

• 每个IP地址每分钟100个请求
• 返回HTTP 429 Retry-After 超过标题时
• 内存速率限制（冷启动时重置）

主机标头验证

• 基于白名单的验证可防止主机头注入
• 允许的主机： www.mcpsystem.design, mcpsystem.design, localhost
• 默认为的主机无效 www.mcpsystem.design

结构化日志记录

• 所有请求都包含唯一的请求ID(X-Request-Id 头球
• Vercel日志聚合的JSON格式日志
• 调试和审核的请求跟踪

故障排除

SSE连接问题

• 确保您的客户支持MCP的SSE传输
• 检查是否为您的客户端源正确配置了CORS标头
• Vercel对无服务器功能有60秒的超时时间；长时间运行的连接可能会被终止

连接中断

SSE端点定期发送ping消息以保持连接的活动状态。如果您的客户端经常断开连接，请检查您的网络配置或代理设置。

速率限制错误（HTTP 429）

如果您收到429状态码，则表示您已超过速率限制（100个请求/分钟）。等待中指定的持续时间 Retry-After 在重试之前，请先发送标头。

许可证

麻省理工学院