🚀 Popmelt MCP 服务器 API 文档
Popmelt MCP 服务器 API 提供了一系列功能，用于管理设计系统的组件模板、配置文件等。通过该 API，用户可以方便地创建、获取和管理设计系统，同时服务器会自动将设计代币转换为 CSS 变量，便于在整个设计系统中重复使用。
🚀 快速开始
如果你想快速了解如何使用 Popmelt MCP 服务器 API，可以参考以下示例：
创建新配置文件
POST /api/profiles HTTP/1.1
Content-Type: application/json
{
"name": "My Theme",
"author": "John Doe",
"description": "A modern design theme.",
"components": ["header", "footer"]
}
获取所有配置文件
GET /api/profiles HTTP/1.1
✨ 主要特性
- 组件模板管理：可以获取可用的组件模板列表，并使用模板创建新的设计系统配置文件。
- 结构化配置文件：使用结构化的 JSON 配置文件来定义设计系统，包括基本元数据、设计代币和组件定义。
- CSS 变量生成：服务器自动将设计代币转换为 CSS 变量，方便在整个设计系统中重复使用。
- 健康检查：提供健康检查接口，方便监控服务器状态。
📦 安装指南
文档未提及安装步骤，暂不提供相关内容。
💻 使用示例
基础用法
获取可用模板
GET /api/templates
响应示例：
{
"success": true,
"templates": [
{
"name": "button",
"description": "一个带有主要和次要变体的按钮组件"
},
{
"name": "card",
"description": "一个带有悬停效果和阴影的卡片容器"
}
]
}
使用模板创建配置文件
POST /api/templates/create-profile
请求体示例：
{
"name": "My Design System",
"author": "Designer Name",
"slug": "my-design-system",
"description": "我的自定义设计系统",
"components": ["button", "card", "input", "alert"]
}
响应示例：
{
"success": true,
"profile": {
/* 创建的配置文件元数据 */
}
}
高级用法
文档未提及高级用法示例，暂不提供相关内容。
📚 详细文档
配置文件结构
Popmelt MCP 服务器使用结构化的 JSON 配置文件来定义设计系统。每个配置文件包括：
基本元数据
name: 设计系统的名称author: 设计系统的创建者slug: URL 友好的标识符description: 对设计系统的描述version: 半角版本号
设计代币
colors: 颜色板，包括主要、次要、强调、背景和文本颜色spacing: 间距尺度，用于边缘、内边距和布局typography: 字体家族、大小、重量和行高borders: 边界宽度、样式和半径animations: 持续时间、缓动和延迟值
组件定义
每个组件包括:
- 基本样式
- 变体（主要、次要、第三）
- 状态（悬停、焦点、活动、禁用）
- 嵌套元素（图标、标签、容器）
- 响应式断点
查看 /profiles 目录中的示例配置文件以获取完整结构。
CSS 变量生成
服务器自动将设计代币转换为 CSS 变量，使其易于在整个设计系统中重复使用。例如:
:root {
--color-background: #ffffff;
--color-text-primary: #1a1a1a;
--color-accent: #3d7aff;
--spacing-small: 0.5rem;
--spacing-medium: 1rem;
--typography-family: 'Arial', sans-serif;
}
健康检查
GET /api/health
响应示例：
{
"status": "ok",
"timestamp": "2023-10-05T14:30:00Z"
}
🔧 技术细节
服务器基于以下技术构建:
- Node.js: JavaScript 运行时环境
- Express.js: Node.js 的快速开发框架
- MongoDB: 分布式数据库系统
- Redis: 高性能键值存储
项目结构如下：
popmelt-mcp/
├── src/ # 源代码目录
│ ├── routes/ # 路由定义
│ │ └── components.js # 组件路由
│ ├── controllers/ # 控制器逻辑
│ │ └── profileController.js # 配置文件控制器
│ └── models/ # 数据模型
│ └── Profile.js # 配置文件模型
├── public/ # 公共资源目录
└── package.json # 依赖管理文件
依赖项如下：
- express: ^4.18.2
- mongoose: ^5.0.3
- redis: ^3.0.2
- CORS: ^2.8.5
📄 许可证
项目遵循 MIT 许可证。请查看 LICENSE 文件获取详细信息。
贡献指南
欢迎贡献！请 fork 仓库并在提交前确保通过所有测试。
问题报告
遇到问题？请在 Issues 提交问题。