
Icon Composer Mcp
io.github.ethbak由 GitHub 帳號 ethbak 發布v1.1.0更新於 Oct 24, 2026
CLI and MCP server for creating Apple .icon bundles with Liquid Glass effects (iOS 26+)
概覽
建立與編輯帶有 Liquid Glass 效果的 Apple .icon 圖示套件,並匯出預覽圖與 App Store 行銷圖示。
- 可以做什麼
- 提供 12 個 MCP 工具與 3 個引導式提示,可從 PNG 或 SVG 圖形建立 Apple .icon 圖示套件。工具能建立套件、新增或移除圖層與群組、設定背景填色、配置高光、模糊、陰影與半透明等 Liquid Glass 效果,並定義深色或色調外觀覆寫。它也能匯出預覽 PNG、透過 Apple 的 ictool 算繪像素級精確的 Liquid Glass,以及匯出供 App Store Connect 使用的扁平 1024x1024 行銷圖示。
- 適用情境
- 適合需要產生或反覆調整 iOS 26+ 應用程式圖示、標誌或品牌圖示集的場合,包括深色模式變體與 App Store 行銷素材。最適合想取得 Liquid Glass 算繪的 macOS 使用者;扁平預覽與套件編輯在其他平台也能使用。
- 執行需求
- 透過 npx icon-composer-mcp 以 stdio 在本機執行,需要 Node.js 18+。Liquid Glass 算繪需要 macOS 並安裝 Apple 的 Icon Composer.app;扁平預覽、套件建立與編輯以及行銷匯出可在任何平台使用。未宣告需要帳號、API 金鑰或環境變數。
安裝
在 SourceWeft 中
- 開啟 儀表板中的 Icon Composer Mcp,將其新增到工作區。
- 為需要使用其工具的對話啟用該服務。
Desktop only,透過 STDIO。 STDIO 服務會啟動本機處理程序,因此需要 SourceWeft 桌面主機。
其他 MCP 客戶端
參照 儲存庫 中的啟動說明。
README
Icon Composer MCP
CLI and MCP server for creating images, icons, and logos with Liquid Glass effects (iOS 26+). Not affiliated with Apple .
[npm version] [license] [platform] [MCP compatible] [Glama score]
Demo
Key Features
- Create
.iconbundles programmatically from PNG or SVG glyphs - Full Liquid Glass support: specular highlights, blur material, shadows, translucency
- Dark mode + appearance variants with per-appearance fill specializations
- AI-agent ready: 12 MCP tools + 3 workflow prompts with built-in instructions
Installation
[圖片] Claude Code
[圖片] Cursor
Add to .cursor/mcp.json in your project root (or ~/.cursor/mcp.json for global):
The server will appear in Cursor Settings > MCP Servers. No restart required.
[圖片] VS Code
Add to .vscode/mcp.json in your project root (or open Command Palette > MCP: Open User Configuration for global):
Note: VS Code uses
"servers"(not"mcpServers") and requires a"type"field.
You'll see Start/Stop/Restart buttons inline in the editor. First launch will prompt a trust confirmation.
[圖片] Windsurf
First, enable MCP in Windsurf Settings > Cascade > Model Context Protocol (MCP).
Then add to ~/.codeium/windsurf/mcp_config.json:
Press the refresh button in Windsurf settings to load the server.
Other MCP clients
The server uses stdio transport. Most MCP clients use this config format:
Or run the server directly:
CLI only (no MCP)
How It Works
- Provide a glyph — any PNG or SVG logo/image
- Create a
.iconbundle — sets background fill, layer scale, and glass effects - Apple's ictool renders Liquid Glass — specular highlights, shadows, depth, and translucency
- Export — preview PNGs, App Store marketing icon, or the
.iconbundle for Xcode
Requirements
- Node.js 18+
- macOS with Icon Composer for Liquid Glass rendering
- Flat previews, bundle creation/editing, and marketing export work on any platform without Icon Composer
Run icon-composer doctor to check your setup.
CLI Commands
Details
create — Create a new .icon bundle
Output: Creates <output_dir>/<bundle_name>.icon/ containing icon.json manifest and Assets/ directory.
add-layer — Add a layer to an existing bundle
Supported formats: .png, .jpg, .jpeg, .svg, .webp, .heic, .heif
remove — Remove a layer or group
inspect — Read and display bundle contents
Output: Prints the full manifest JSON and lists all assets with sizes.
glass — Configure Liquid Glass effects
appearance — Set dark/tinted mode overrides
fill — Set background fill
position — Set layer/group scale and offset
fx — Toggle all glass effects
Enables or disables specular, shadow, blur, and translucency on every group at once.
preview — Export a preview PNG
Output: PNG file. Uses Liquid Glass rendering by default (falls back to flat if Icon Composer is not installed).
render — Render Liquid Glass via ictool
Requires: Icon Composer.app installed. Returns an error with install instructions if missing.
export-marketing — Export for App Store Connect
Output: Flat PNG with no alpha channel (avoids ITMS-90717 rejection). Default 1024x1024.
doctor — Check system setup
Output: Reports Node version, platform, ictool path and version. Prints install instructions if Icon Composer is missing.
MCP Tools
All tools return { content: [{ type: "text", text: "..." }], isError?: true }.
Details
create_icon
Create a .icon bundle from a foreground image.
add_layer_to_icon
add_layer_to_icon
Add a layer to an existing bundle.
remove_layer
remove_layer
Remove a layer or group. layer_index required when target=layer.
read_icon
read_icon
Inspect a bundle. Returns full manifest JSON and asset list with sizes.
set_glass_effects
set_glass_effects
Configure Liquid Glass on a group. All effect parameters are optional — only provided values are changed.
set_appearances
set_appearances
Set dark/tinted overrides for background fill, group effects, or individual layer properties.
set_fill
set_fill
Set background fill.
set_layer_position
set_layer_position
Adjust layer or group scale and offset.
toggle_fx
toggle_fx
Enable or disable all glass effects on every group.
export_preview
export_preview
Render a preview PNG. Uses Liquid Glass by default, falls back to flat.
render_liquid_glass
render_liquid_glass
Pixel-perfect Liquid Glass via Apple's ictool. Requires Icon Composer.app.
export_marketing
export_marketing
Flat marketing PNG for App Store Connect. No glass effects, no alpha channel.
MCP Prompts
Example Workflows
Create a branded icon
Export for App Store
Multi-layer icon with glass
Limitations
- Liquid Glass rendering requires macOS with Apple's Icon Composer.app installed. Flat rendering works everywhere.
- ClearLight/ClearDark renditions render against gray. Apple's glass transparency requires Metal GPU, not available via CLI.
Architecture
Contributing
來源:README.md,提交 e7d2b32
工具
0版本歷史
1- v1.1.0最新Sep 16, 2026
評分
已滿足適用檢查項的 50%
該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。
- 近 30 天內可連通25 分
請保持端點能夠回應 MCP 握手;SourceWeft 每 30 天探測一次。
- 已宣告認證方式10 分
請在註冊中心條目中宣告憑證請求標頭,或保持端點能夠回應探測,以便判定其認證方式。
- 已列出工具15 分
請讓伺服器在無憑證時回應 tools/list,或發布可在沙箱中無憑證啟動的軟體包。
- 描述必需15 分
- 圖示10 分
- 文件15 分
- 授權條款10 分