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：设置为主商店主题