Icon Composer MCP

claude mcp add icon-composer -- npx -y icon-composer-mcp

~/Library/Application Support/Claude/claude_desktop_config.json に以下を追加:

{
  "mcpServers": {
    "icon-composer": {
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

プロジェクトルートの .cursor/mcp.json（グローバルの場合は ~/.cursor/mcp.json）に追加:

{
  "mcpServers": {
    "icon-composer": {
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

サーバーは Cursor Settings > MCP Servers に表示されます。再起動は不要です。

プロジェクトルートの .vscode/mcp.json（グローバルの場合は Command Palette > MCP: Open User Configuration を開く）に追加:

注意: VS Code では "mcpServers" ではなく "servers" を使用し、"type" フィールドが必須です。

{
  "servers": {
    "icon-composer": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

エディタ内に Start/Stop/Restart ボタンがインライン表示されます。初回起動時には信頼確認が求められます。

まず Windsurf Settings > Cascade > Model Context Protocol (MCP) で MCP を有効にします。

次に ~/.codeium/windsurf/mcp_config.json に追加:

{
  "mcpServers": {
    "icon-composer": {
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

Windsurf 設定の 更新ボタン を押してサーバーを読み込みます。

このサーバーは stdio トランスポートを使用します。ほとんどの MCP クライアントは以下の設定形式を使用します:

{
  "mcpServers": {
    "icon-composer": {
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

または、サーバーを直接実行:

npx -y icon-composer-mcp

npm install -g icon-composer-mcp
icon-composer --help

icon-composer create <foreground_path> <output_dir> --bg-color <hex> [options]

出力: <output_dir>/<bundle_name>.icon/ を作成し、icon.json マニフェストと Assets/ ディレクトリを含みます。

icon-composer add-layer <bundle_path> <image_path> --name <name> [options]

対応フォーマット: .png、.jpg、.jpeg、.svg、.webp、.heic、.heif

icon-composer remove <bundle_path> --target <layer|group> --group-index <n> [--layer-index <n>]

icon-composer inspect <bundle_path>

出力: 完全なマニフェスト JSON を出力し、すべてのアセットをサイズとともに一覧表示します。

icon-composer glass <bundle_path> [options]

icon-composer appearance <bundle_path> --target <fill|group|layer> --appearance <dark|tinted> [options]

icon-composer fill <bundle_path> --type <solid|gradient|automatic|none> [options]

icon-composer position <bundle_path> [options]

icon-composer fx <bundle_path> --enable|--disable

すべてのグループに対してスペキュラ、シャドウ、ブラー、半透明を一度に有効または無効にします。

icon-composer preview <bundle_path> <output_path> [options]

出力: PNG ファイル。デフォルトでは Liquid Glass レンダリングを使用します (Icon Composer がインストールされていない場合はフラットにフォールバック)。

icon-composer render <bundle_path> <output_path> [options]

必須: Icon Composer.app がインストールされていること。見つからない場合はインストール手順を含むエラーを返します。

icon-composer export-marketing <bundle_path> <output_path> [--size <n>]

出力: アルファチャンネルのないフラット PNG (ITMS-90717 の却下を回避)。デフォルト 1024x1024。

icon-composer doctor

出力: Node バージョン、プラットフォーム、ictool のパスとバージョンを報告します。Icon Composer が見つからない場合はインストール手順を出力します。

前景画像から .icon バンドルを作成します。

add_layer_to_icon

既存のバンドルにレイヤーを追加します。

remove_layer

レイヤーまたはグループを削除します。target=layer の場合は layer_index が必須です。

read_icon

バンドルを検査します。完全なマニフェスト JSON とサイズ付きのアセット一覧を返します。

set_glass_effects

グループに Liquid Glass を設定します。すべてのエフェクトパラメータはオプションです — 指定された値のみが変更されます。

set_appearances

背景の塗り、グループエフェクト、または個別レイヤーのプロパティに対してダーク/ティントのオーバーライドを設定します。

set_fill

背景の塗りを設定します。

set_layer_position

レイヤーまたはグループのスケールとオフセットを調整します。

toggle_fx

すべてのグループのガラスエフェクトを有効または無効にします。

export_preview

プレビュー PNG をレンダリングします。デフォルトでは Liquid Glass を使用し、フラットにフォールバックします。

render_liquid_glass

Apple の ictool 経由でピクセルパーフェクトな Liquid Glass をレンダリングします。Icon Composer.app が必要です。

export_marketing

App Store Connect 用のフラットマーケティング PNG。ガラスエフェクトなし、アルファチャンネルなし。