系统设计MCP
一个集成了模型上下文协议（MCP）的综合设计系统，具有带有Storybook文档的React前端和提供AI驱动的组件发现和代码生成功能的Node.js后端。
🏗️ 项目架构
这是一个包含以下内容的monorepo：
- 前端：基于React的设计系统，带有Storybook文档
- 后端：MCP服务器，用于AI与组件发现和代码生成的集成
- 整合：设计系统和人工智能工具之间的无缝连接
🚀 特性
前端（设计系统）
- 现代React组件：按钮、卡片、输入等
- 故事书文档：交互式组件游乐场
- Tailwind CSS：实用性优先的造型
- TypeScript：全型安全
- 热模块更换：快速开发经验
后端（MCP服务器）
- 组件发现：AI驱动的组件搜索和列表
- 代码生成：使用props自动生成JSX代码
- 故事书集成：实时抓取组件文档
- 缓存：使用智能缓存进行性能优化
- 多种工具：用于组件交互的全面API
🛠️ 技术栈
前端
- 反应18 -UI库
- 维特 -构建工具和开发服务器
- 故事书7 -组件文档
- 顺风CSS 4 -造型框架
- TypeScript -类型安全
后端
- Node.js -运行时环境
- 模型上下文协议（MCP） -AI集成协议
- 快速 -Web框架（如果需要）
- 再见 -故事书抓取的HTML解析
- 节点缓存 -性能缓存
- 萨德 -架构验证
📦 可用组件
按钮
多功能按钮组件，有多种变体：
- 变体：初级、次级、大纲、重影
- 尺寸：医学博士，法学博士
- 州：正常、禁用
卡
柔性容器组件：
- 变体：默认、提升、概述
- 填充：医学博士，法学博士
- 特性：可选标题和副标题
输入
带验证的表单输入组件：
- 类型：文本、电子邮件、密码、号码、电话、网址
- 尺寸：医学博士，法学博士
- 州：正常、错误、禁用、必需
- 特性：标签、帮助文本、错误消息
🚀 快速开始
先决条件
- Node.js 18+
- pnpm（推荐）或npm
安装
- 克隆存储库
git clone
cd system-design-mcp- 安装依赖项
# Install all dependencies (root + frontend + backend)
pnpm install:all
# Or install individually
pnpm install
pnpm --filter frontend install
pnpm --filter backend install发展
开始一切（推荐）
# Start both frontend and backend concurrently
pnpm dev启动个人服务
# Frontend only (Vite dev server)
pnpm dev:frontend
# Backend only (MCP server)
pnpm dev:backend
# Storybook only
pnpm dev:storybook接入点
- 前端应用程序: http://localhost:5173
- 故事书文档: http://localhost:6006
- MCP服务器：通过stdio运行（用于AI集成）
🔧 MCP服务器工具
后端为组件交互提供了几个AI驱动的工具：
1. list-components
列出设计系统中的所有可用组件。
2. get-component-info
检索特定组件的详细信息，包括：
- 道具及其类型
- 默认值
- 描述
- 可用示例
3. generate-component-code
为具有特定属性的组件生成JSX代码。
4. search-components
按功能或关键字搜索组件。
5. get-component-examples
检索特定组件的使用示例。
6. check-storybook-status
验证故事书的可访问性和状态。
📁 项目结构
system-design-mcp/
├── frontend/ # React design system
│ ├── src/
│ │ ├── components/ # Reusable components
│ │ │ ├── Button.tsx
│ │ │ ├── Button.stories.tsx
│ │ │ ├── Card.tsx
│ │ │ ├── Card.stories.tsx
│ │ │ ├── Input.tsx
│ │ │ ├── Input.stories.tsx
│ │ │ └── index.ts
│ │ ├── App.tsx
│ │ ├── main.tsx
│ │ └── index.css
│ ├── .storybook/ # Storybook configuration
│ ├── package.json
│ └── vite.config.ts
├── backend/ # MCP server
│ ├── src/
│ │ └── mcp-server.ts # Main MCP server implementation
│ ├── package.json
│ └── tsconfig.json
├── package.json # Root package.json
├── pnpm-workspace.yaml # Monorepo configuration
└── README.md🎨 设计系统使用
添加新组件
- 创建组件 在
frontend/src/components/ - 创建故事 在
frontend/src/components/[Component].stories.tsx - 导出组件 在
frontend/src/components/index.ts - 在故事书中查看:
pnpm dev:storybook - 在应用程序中查看:
pnpm dev:frontend
组件开发工作流程
- 开发组件
frontend/src/components/ - 为文档创建交互式故事
- Storybook中的测试组件
- MCP服务器自动发现新组件
- AI工具可以立即访问组件信息
🔌 人工智能集成
MCP服务器使AI工具能够：
- 发现组件：自动查找所有可用组件
- 了解道具：获取详细的道具信息和类型
- 生成代码：使用适当的道具创建JSX代码
- 搜索组件：按功能查找组件
- 访问示例：从Storybook中获取实际使用示例
AI使用示例
// AI can ask: "Show me all button components"
// MCP responds with: Button component details, props, examples
// AI can ask: "Generate a primary button with 'Click me' text"
// MCP responds with: Click me🚀 生产部署
构建全部
pnpm build构建个性化服务
pnpm build:frontend
pnpm build:backend启动生产服务器
pnpm start🧪 测试
# Run backend tests
pnpm test📝 环境变量
创建一个 .env 后端目录中的文件：
STORYBOOK_URL=http://localhost:6006
STORYBOOK_API_URL=http://localhost:6006
CACHE_TIMEOUT=300🤝 贡献
- 分叉存储库
- 创建要素分支
- 为您的组件添加适当的故事
- 故事书中的测试
- 提交拉取请求
📄 许可证
MIT许可证-有关详细信息，请参阅许可证文件
🔗 链接
______________________________________________________________________
内置❤️ 用于现代设计系统和人工智能集成