Liquid Composer — иконки Liquid Glass для iOS 27
Liquid Composer
CLI и MCP-сервер, которые собирают иконки Liquid Glass для iOS 27 из JSON-рецепта и отдают PNG, архивы и файлы .icon
- 68 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Локальный рендер запускает установленный Google Chrome и пишет файлы на диск
- Удаленный MCP получает рецепт иконки на проверку, хотя ссылка с рецептом на сервер не уходит
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/liquid-composerОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Локальный рендер запускает установленный Google Chrome и пишет файлы на диск
- Удаленный MCP получает рецепт иконки на проверку, хотя ссылка с рецептом на сервер не уходит
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Liquid Composer воспроизводит в браузере редактор Apple Icon Composer с материалом Liquid Glass из iOS 27. Иконка описывается JSON-рецептом: фон, слои сверху вниз, настройки стекла и список выходных файлов. Агенты работают через тот же движок, что и редактор, а рендер выполняет WebGL2 в безголовом Chrome. Пакет дает три интерфейса. Команды npx liquid-composer apply, render, import, validate и schema печатают JSON с путями файлов и состоянием документа. Локальный MCP-сервер запускается командой npx -y liquid-composer mcp и открывает инструменты liquid_apply, liquid_update, liquid_render, liquid_export, liquid_import_icon, liquid_state и liquid_schema с превью-картинками. Удаленный MCP на liquid-composer.vercel.app/mcp только проверяет рецепт и возвращает ссылку, открывающую иконку в браузере. Рецепт задает преломление, размытие, блики, тени, прозрачность и расцветку для вариантов Default, Dark, Clear Light и Clear Dark. Экспорт идет в PNG, ZIP со всеми вариантами или .icon, который открывают Icon Composer и Xcode.
Для кого. Дизайнерам и iOS-разработчикам, которым нужны иконки приложений в стиле Liquid Glass без ручной работы в Icon Composer на каждой итерации.
Подходит, если
- Агент по описанию собирает иконку из векторных слоев и сразу рендерит превью
- Надо выгрузить иконку во всех вариантах оформления одним архивом
- Существующий файл .icon требуется импортировать и посмотреть его рендер в 512 пикселей
- Перед загрузкой в Xcode рецепт хочется проверить командой validate
- Серию иконок для разных приложений нужно делать из одного шаблона рецепта
Не подходит, если
- Нужен вариант Tinted из iOS 27: в редакторе он не реализован
- Нужна точная копия вывода Apple: движок воспроизводит формулы и значения Icon Composer 27, но совпадение с ним не гарантируется
- Нужен рендер без установленного Google Chrome: безголовый рендер использует его через playwright-core
Пример запроса к агенту
Собери иконку из логотипа logo.svg на темном фоне с эффектом Liquid Glass, отрендери 512 пикселей и выгрузи все варианты оформления.MCP
- Транспорт
- stdio, http
- Авторизация
- не нужна
Ограничения
Для рендера в командной строке нужен установленный Google Chrome, по умолчанию он работает на программном SwiftShader, флаг --gpu включает видеокарту. Документ с преломлением или бликами внутри и снаружи требует Xcode 27, так как Icon Composer 2 пишет такие файлы так же. Варианты Tinted не реализованы. Удаленный MCP рецепт только проверяет и отдает ссылку, рендера в нем нет. Приложение хранит работу в браузере, политика приватности доступна на сайте проекта. Расход трафика и данные открытой веб-версии зависят от настроек аналитики: параметр ?agent в адресе отключает аналитику и автосохранение.
Как отключить. Выполните claude mcp remove liquid-composer и удалите навык командой из менеджера навыков агента. Установка через npx ничего не оставляет в проекте, кроме кеша npm.
Частые вопросы
Какие форматы экспорта поддерживаются?
PNG размером 4096, 2048, 1024, 512 или 256 пикселей, JPEG на 1024, ZIP со всеми вариантами оформления и пакет .icon для Icon Composer и Xcode. Размеры до 1024 считаются со сглаживанием.
Чем локальный MCP отличается от удаленного?
Локальный запускается через npx, рендерит иконки в безголовом Chrome и возвращает картинки. Удаленный на liquid-composer.vercel.app/mcp только проверяет рецепт и дает ссылку, рецепт лежит во фрагменте адреса и на сервер не уходит.
Есть ли отдельный навык?
Да, команда npx skills add frontedu/liquid-composer учит агента формату рецепта и порядку работы с иконкой.
Какие файлы принимает импорт?
Редактор принимает SVG, PNG и JPEG для слоев, а команда import читает готовые документы .icon и сразу рендерит их в нужном размере.
Работает ли приложение без интернета?
Да, после первого визита веб-версия открывается офлайн и устанавливается как приложение из Chrome или Edge. Работа автосохраняется в браузере.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыПоиск и вставка иконок из более чем 150 коллекций Iconify как MCP-сервер, CLI и скилл, с записью SVG прямо в файл проекта
MCP-сервер ищет иконку coolicons по смыслу и отдает SVG с готовым импортом: агент не выдумывает имена, сборка не падает
MCP-сервер и CDN с иконками сервисов: подбирает логотипы к docker-compose.yml и отдает SVG, PNG и WEBP
Скилл веб-дизайна в стиле Apple: светлый фон, единая белая панель вместо россыпи карточек, стекло только на перекрытиях.
MCP-сервер набора Keyline Icons: агент ищет иконку по имени, берет SVG и готовый импорт React без угадывания названий
MCP-сервер и скилл для набора из тысяч брендовых SVG-иконок: агент ищет и вставляет иконки без ключа
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| Liquid Composer — иконки Liquid Glass для iOS 27 (эта карточка) | нет | не нужна | 68 | |
| Better Icons | нет | не нужна | 1 476 | поиск готовых иконок, собственные иконки не собирает |
| Keyline Icons MCP | да | не нужна | 205 | набор линейных иконок для вставки в проект, стеклянного материала не рисует |
Коротко о README
README рассказывает, чем iOS 27 меняет Liquid Glass: свет сверху, блики по краям, варианты размещения бликов и инверсное преломление. Даны возможности редактора, команды для агентов, горячие клавиши и устройство движка на WebGL2.