Popmelt MCP 服务器 API 文档

组件模板

获取可用模板

返回所有可用组件模板的列表。

端点: 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

示例使用

创建新配置文件

请求:

POST /api/profiles HTTP/1.1
Content-Type: application/json

{
  "name": "My Theme",
  "author": "John Doe",
  "description": "A modern design theme.",
  "components": ["header", "footer"]
}

响应:

{
  "success": true,
  "message": "Profile created successfully."
}

获取所有配置文件

请求:

GET /api/profiles HTTP/1.1

响应:

[
  {
    "name": "Dark Theme",
    "author": "Jane Smith",
    "description": "A dark-themed configuration.",
    "_id": "64b9e3c57f0b..."
  },
  ...
]

错误处理

无效请求体

响应:

{
  "success": false,
  "error": "Invalid request body format."
}

配置文件未找到

响应:

{
  "success": false,
  "error": "Profile not found."
}

许可证

项目遵循 MIT 许可证。请查看 LICENSE 文件获取详细信息。

贡献指南

欢迎贡献！请 fork 仓库并在提交前确保通过所有测试。

问题报告

遇到问题？请在 Issues 提交问题。