Brand To Theme MCP Server

🚀 ブランドからテーマへのMCPサーバー

このMCPサーバーは、企業のブランドマニュアルのPDFファイルを自動的にShopifyの完全なテーマテンプレートに変換し、ブランドの一貫性を維持するためのツールセットを提供します。

🚀 クイックスタート

このMCPサーバーは、高度なPDF解析技術とコード生成技術を利用して、ブランドの視覚要素（色、フォントなど）を完全でインストール可能なShopifyテーマに変換します。

✨ 主な機能

• 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ツール

サーバーは以下の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：メインショップテーマとして設定する

🔧 技術詳細

• Node.jsとnpmがシステムにインストールされている必要があります。
• Shopify開発アカウントとAPIアクセス権が必要です。
• 基本的なコマンドライン操作の知識が必要です。