Brand To Theme MCP Server

🚀 品牌到主題 MCP 服務器

此 MCP 服務器是一套強大的工具，可自動把企業品牌手冊的 PDF 文件轉化為完整的 Shopify 主題模板，同時確保品牌的連貫性，為企業在 Shopify 平臺上打造一致的品牌形象提供了便利。

🚀 快速開始

在使用此 MCP 服務器前，需要滿足以下先決條件：

• Node.js 和 npm 安裝在系統上
• Shopify 開發賬戶和 API 訪問權限
• 基礎的命令行操作知識

✨ 主要特性

• PDF 提取：分析 PDF 以獲取色板、字體和其他設計元素
• 生成設計令牌：將提取的品牌元素轉換為標準化的設計令牌
• 創建 Shopify 主題：根據品牌信息生成完整的主題文件
• 與 Shopify 集成：支持直接在連接的商店中安裝主題
• 與 Figma 集成：兼容從 Figma 中提取的組件（通過 Figma 的 MCP）

📦 安裝指南

1. 克隆此倉庫：

git clone https://github.com/mmokarzel/brand-to-theme-mcp-server.git
cd brand-to-theme-mcp-server

2. 安裝依賴項：

npm install

3. 編譯項目：

npm run build

4. 在您的 MCP 配置文件中配置此服務器：

{
  "mcpServers": {
    "github.com/mmokarzel/brand-to-theme-mcp-server": {
      "command": "node",
      "args": [
        "/ruta/a/brand-to-theme-mcp/build/index.js"
      ],
      "env": {},
      "disabled": false,
      "description": "品牌到主題的 MCP 服務器"
    }
  }
}

💻 使用示例

基礎用法

// 1. 提取 PDF 中的品牌信息
const result = await invoke('extract_pdf_branding', {
  pdfPath: '/path/to/brand指南.pdf',
  extractOptions: {
    colors: true,
    fonts: true,
    logos: false
  }
});

// 2. 根據提取的信息生成設計令牌
const tokens = await invoke('generate_design_tokens', {
  brandingData: result,
  format: 'CSS'
});

// 3. 使用設計令牌創建 Shopify 主題
await invoke('create_shopify_theme', {
  designTokens: tokens,
  themeName: 'BrandTheme',
  outputPath: '/path/to/output'
});

// 4. 預覽生成的主題
const preview = await invoke('preview_shopify_theme', {
  themePath: '/path/to/output/brandTheme.json',
  previewType: 'full'
});

// 5. 將主題安裝到 Shopify 商店中
await invoke('install_shopify_theme', {
  themePath: '/path/to/output/brandTheme.json',
  installationType: 'new',
  setAsMain: true
});

📚 詳細文檔

服務器公開了以下 MCP 工具：

1. extract_pdf_branding

從 PDF 文件中提取品牌視覺元素和信息。

參數：

• pdfPath：品牌手冊 PDF 文件的路徑
• extractOptions：提取選項（顏色、字體、標誌）

2. generate_design_tokens

根據提取的品牌信息生成設計令牌。

參數：

• brandingData：從 PDF 中提取的品牌數據
• figmaData：可選的 Figma 提取數據
• format：輸出令牌格式（JSON、CSS、SCSS）

3. create_shopify_theme

根據設計令牌生成完整的 Shopify 主題。

參數：

• designTokens：生成的設計令牌
• themeName：主題名稱
• outputPath：保存主題文件的路徑

4. preview_shopify_theme

生成 Shopify 主題的預覽視圖。

參數：

• themePath：主題文件的路徑
• previewType：要生成的預覽類型（縮略圖、全屏）

5. install_shopify_theme

將生成的主題安裝到連接的 Shopify 商店中。

參數：

• themePath：主題文件的路徑
• installationType：以新主題形式安裝或更新現有主題
• existingThemeId：要更新的現有主題 ID（如有必要）
• setAsMain：設置為主商店主題