Brand-to-Theme MCP Server

ブランドからテーマを生成する MCP サーバー

ブランドアイデンティティの PDF を、Shopify の実用的なテーマに変換する MCP サーバーです。

概要

この MCP サーバーは、ブランドアイデンティティのマニュアルを PDF から Shopify の実用的なテーマに自動変換するためのツールセットを提供し、ブランドアイデンティティとの一貫性を保ちます。

高度な PDF 抽出技術とコード生成技術を活用して、ブランドの視覚的要素（色、タイポグラフィなど）を、インストール可能な完全な Shopify テーマに変換します。

特徴

• PDF 抽出：PDF を解析し、カラーパレット、タイポグラフィ、その他のデザイン要素を取得します
• デザイントークンの生成：抽出した要素を標準化されたデザイントークンに変換します
• Shopify テーマの作成：ブランドアイデンティティに基づいて、完全なテーマファイルを生成します
• Shopify との連携：接続済みのストアにテーマを直接インストールできます
• Figma との連携：Figma から抽出したコンポーネントに対応しています（Figma MCP を使用）

MCP ツール

サーバーは以下の MCP ツールを公開します。

1. extract_pdf_branding

PDF ファイルから視覚的要素とブランドアイデンティティを抽出します。

パラメーター：

• pdfPath：ブランドアイデンティティマニュアルの PDF ファイルへのパス
• extractOptions：抽出オプション（色、タイポグラフィ、ロゴ）

2. generate_design_tokens

抽出したブランドアイデンティティからデザイントークンを生成します。

パラメーター：

• brandingData：抽出したブランドアイデンティティのデータ
• figmaData：任意で Figma から抽出したデータ
• format：トークンの出力形式（json、css、scss）

3. create_shopify_theme

デザイントークンに基づいて Shopify テーマを生成します。

パラメーター：

• designTokens：生成したデザイントークン
• themeName：生成するテーマの名前
• outputPath：テーマファイルの保存先パス

4. preview_shopify_theme

Shopify テーマのプレビューを生成します。

パラメーター：

• themePath：テーマファイルへのパス
• previewType：生成するプレビューの種類（thumbnail、full）

5. install_shopify_theme

生成したテーマを接続済みの Shopify ストアにインストールします。

パラメーター：

• themePath：テーマファイルへのパス
• installationType：新しいテーマとしてインストールするか、既存のテーマを更新するか
• existingThemeId：更新する既存テーマの ID（該当する場合）
• setAsMain：ストアのメインテーマとして設定するかどうか

インストール

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 設定ファイルで 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,
      "autoApprove": []
    }
  }
}

基本的な使い方

1. PDF からブランド要素を抽出します。

const brandingData = await extract_pdf_branding({
  pdfPath: "/ruta/a/manual-identidad.pdf"
});

2. デザイントークンを生成します。

const designTokens = await generate_design_tokens({
  brandingData: brandingData,
  format: "json"
});

3. Shopify テーマを作成します。

const themeResult = await create_shopify_theme({
  designTokens: designTokens,
  themeName: "MiMarca Theme"
});

4. Shopify にテーマをインストールします。

const installResult = await install_shopify_theme({
  themePath: themeResult.path,
  installationType: "new",
  setAsMain: true
});

要件

• Node.js v16+
• Shopify Partner アカウント（テーマのインストールに必要）
• Claude 対応 MCP