デモ

Related MCP server: XcodeBuildMCP

主な機能

PNGまたはSVGグリフからプログラムで .icon バンドルを作成
フルLiquid Glassサポート：鏡面ハイライト、ぼかし素材、影、半透明
ダークモード + 外観バリエーション：外観ごとの塗りつぶし設定
AIエージェント対応：12個のMCPツール + 組み込み指示付きの3つのワークフロープロンプト

インストール

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は "servers"（"mcpServers"ではありません）を使用し、"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

仕組み

グリフの提供 — PNGまたはSVGのロゴ/画像
.icon バンドルの作成 — 背景の塗りつぶし、レイヤーのスケール、ガラスエフェクトを設定
AppleのictoolがLiquid Glassをレンダリング — 鏡面ハイライト、影、深度、半透明
エクスポート — プレビューPNG、App Storeマーケティング用アイコン、またはXcode用の .icon バンドル

要件

Node.js 18+
macOS（Liquid Glassレンダリングには Icon Composer が必要）
```
brew install --cask icon-composer
```
フラットなプレビュー、バンドルの作成/編集、マーケティング用エクスポートは、Icon Composerなしでどのプラットフォームでも動作します

icon-composer doctor を実行してセットアップを確認してください。

CLIコマンド

コマンド	説明
`create`	前景画像から新しい `.icon` バンドルを作成
`add-layer`	既存のバンドルにレイヤーを追加
`remove`	レイヤーまたはグループを削除
`inspect`	バンドルの中身を読み取って表示
`glass`	グループのLiquid Glassエフェクトを設定
`appearance`	ダークモード/ティントモードのオーバーライドを設定
`fill`	背景の塗りつぶしを設定（単色、グラデーション、自動、なし）
`position`	レイヤー/グループのスケールとオフセットを設定
`fx`	すべてのガラスエフェクトのオン/オフを切り替え
`preview`	プレビューPNGをエクスポート（Liquid Glassまたはフラット）
`render`	ictool経由でピクセルパーフェクトなLiquid Glassをレンダリング
`export-marketing`	App Store Connect用に1024x1024のフラットPNGをエクスポート（アルファなし）
`doctor`	システムのセットアップと依存関係を確認

詳細

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

オプション	デフォルト	説明
`--bg-color <hex>`	必須	背景色 (例: `"#0A66C2"`)
`--bundle-name <name>`	`AppIcon`	バンドル名 (`.icon` 拡張子なし)
`--dark-bg-color <hex>`	—	ダークモードの背景色
`--glyph-scale <n>`	`1.0`	グリフのスケール (1.0 = 標準でアイコン領域の約65%)
`--specular / --no-specular`	`true`	鏡面ハイライト
`--shadow-kind <kind>`	`layer-color`	影のタイプ: `neutral`, `layer-color`, `none`
`--shadow-opacity <n>`	`0.5`	影の不透明度 (0–1)
`--blur-material <n>`	—	ぼかし素材の値 (0–1)
`--translucency-enabled`	`false`	半透明グラデーションを有効化
`--translucency-value <n>`	`0.4`	半透明の量 (0–1)

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

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

オプション	デフォルト	説明
`--name <name>`	必須	レイヤー名
`--group-index <n>`	`0`	ターゲットグループインデックス
`--create-group`	`false`	このレイヤー用に新しいグループを作成
`--opacity <n>`	`1.0`	レイヤーの不透明度 (0–1)
`--scale <n>`	`1.0`	レイヤーのスケール
`--offset-x <n>`	`0`	Xオフセット (ポイント単位)
`--offset-y <n>`	`0`	Yオフセット (ポイント単位)
`--blend-mode <mode>`	`normal`	ブレンドモード (例: `multiply`, `screen`, `overlay`)
`--glass / --no-glass`	`true`	Liquid Glassエフェクトに参加

サポートされている形式: .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]

オプション	説明
`--group-index <n>`	ターゲットグループ (デフォルト: `0`)
`--specular / --no-specular`	鏡面ハイライト
`--blur-material <n>`	ぼかしの量 (0–1)
`--shadow-kind <kind>`	`neutral`, `layer-color`, または `none`
`--shadow-opacity <n>`	影の不透明度 (0–1)
`--translucency-enabled / --no-translucency-enabled`	半透明の切り替え
`--translucency-value <n>`	半透明の量 (0–1)
`--opacity <n>`	グループの不透明度 (0–1)
`--blend-mode <mode>`	グループのブレンドモード
`--lighting <type>`	`combined` または `individual`

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

オプション	説明
`--target <type>`	`fill` (背景色) または `group` (ガラスエフェクト)
`--appearance <mode>`	`dark` または `tinted`
`--bg-color <hex>`	この外観の背景色
`--specular / --no-specular`	この外観の鏡面ハイライト
`--shadow-kind <kind>`	この外観の影のタイプ
`--shadow-opacity <n>`	この外観の影の不透明度

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

オプション	説明
`--type <type>`	`solid`, `gradient`, `automatic`, または `none`
`--color <hex>`	プライマリカラー (単色またはグラデーションの下部)
`--color2 <hex>`	セカンダリカラー (グラデーションの上部)
`--gradient-angle <n>`	グラデーションの角度 (度単位、デフォルト: `0`)

icon-composer position <bundle_path> [options]

オプション	デフォルト	説明
`--target <type>`	`layer`	`layer` または `group`
`--group-index <n>`	`0`	グループインデックス
`--layer-index <n>`	—	レイヤーインデックス (`--target layer` の場合に必須)
`--scale <n>`	—	スケール係数 (0.05–3.0)
`--offset-x <n>`	—	Xオフセット (ポイント単位)
`--offset-y <n>`	—	Yオフセット (ポイント単位)

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

すべてのグループの鏡面、影、ぼかし、半透明を一度に有効または無効にします。

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

オプション	デフォルト	説明
`--size <n>`	`1024`	出力サイズ (ピクセル単位)
`--appearance <mode>`	—	`dark` または `tinted`
`--flat`	`false`	フラットレンダリングを強制 (Liquid Glassをスキップ)
`--canvas-bg <preset>`	—	`light`, `dark`, `checkerboard`, `homescreen-light`, `homescreen-dark`
`--apple-preset <name>`	—	Apple壁紙: `sine-purple-orange`, `sine-gasflame`, `sine-magenta`, `sine-green

Icon Composer MCP

デモ

主な機能

インストール

仕組み

要件

CLIコマンド

詳細

Resources

Tools

Latest Blog Posts

MCP directory API