Демо

Related MCP server: XcodeBuildMCP

Основные возможности

Создание .icon бандлов программно из PNG или SVG глифов
Полная поддержка 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 прямо в редакторе. При первом запуске потребуется подтверждение доверия.

Сначала включите MCP в Windsurf Settings > Cascade > Model Context Protocol (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 бандл — задайте заливку фона, масштаб слоя и эффекты стекла
ictool от Apple отрисовывает Liquid Glass — блики, тени, глубину и полупрозрачность
Экспорт — просмотр PNG, маркетинговая иконка для App Store или .icon бандл для Xcode

Требования

Node.js 18+
macOS с Icon Composer для рендеринга Liquid Glass
```
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`	Отрисовать Liquid Glass с идеальной точностью через ictool
`export-marketing`	Экспортировать плоский PNG 1024x1024 для App Store Connect (без альфа-канала)
`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)

Вывод: Создает <output_dir>/<bundle_name>.icon/, содержащий манифест icon.json и директорию Assets/.

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

Icon Composer MCP

Демо

Основные возможности

Установка

Как это работает

Требования

Команды CLI

Подробности

Resources

Tools

Latest Blog Posts

MCP directory API