🚀 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 提交问题。