icon-composer-mcp

   Claude Code

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

   Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json に追加します：

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

   Cursor

プロジェクトのルートにある .cursor/mcp.json に追加します（グローバルに設定する場合は ~/.cursor/mcp.json に追加します）：

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

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

   VS Code

プロジェクトのルートにある .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

まず、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 を出力します。ガラス効果とアルファチャンネルはありません。