MCP Server Test 01

🚀 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 提交問題。