Quilt MCP
Локальный дизайн-инструмент на бесконечном холсте: описание приложения становится экранами HTML, агент правит холст по MCP.
- 106 ★ репозитория
- Последний коммит
- Apache-2.0
Расширенный доступ
Почему такой уровень
- MCP-сервер слушает локальный адрес без аутентификации, доступный любому процессу на машине
- Описания и экраны уходят выбранному поставщику модели при генерации
Установка
- Работает в
Ручная установка
claude mcp add --transport http quilt http://127.0.0.1:3100/mcpКоманда подключения агента из раздела Connect your coding agent. Сам Quilt предварительно запускают: `node apps/cli/bin/quilt.js` после `pnpm build`.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- MCP-сервер слушает локальный адрес без аутентификации, доступный любому процессу на машине
- Описания и экраны уходят выбранному поставщику модели при генерации
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Quilt работает на вашей машине одним процессом: без учетной записи, без облака, данные лежат в `~/.quilt`. Вы описываете приложение, Quilt планирует основной сценарий из 4–6 экранов, генерирует каждый как самодостаточный HTML в дизайн-системе проекта, проверяет и снимает скриншот и раскладывает на холсте. Экраны можно править текстом, выбирать элемент и менять его бесплатно по токенам, собирать общие компоненты вроде таббара, пересобирать дизайн-систему и проходить макет как прототип, а целиком выгружать одним офлайн-файлом HTML. К холсту подключается MCP-сервер по Streamable HTTP (`claude mcp add --transport http quilt http://127.0.0.1:3100/mcp`). Он отдает 57 инструментов и 7 ресурсов: чтение схемы проекта через `get_outline`, `get_screen`, запись через `patch_screen`, `create_screen`, `edit_element` и запуск генерации. Каналы генерации: подписка Claude через CLI `claude`, ключ Anthropic, Gemini или совместимый с OpenAI.
Для кого. Дизайнеры, основатели и разработчики, которые хотят быстро получить кликабельный макет приложения и передать его агенту в код.
Подходит, если
- Идею приложения нужно быстро превратить в несколько связанных экранов.
- Агент, который пишет код, должен читать экраны и дизайн-систему прямо из макета.
- Макет проходят как прототип со ссылками, формами и переходами между экранами.
- Общий компонент, например таббар, правят один раз для всех экранов.
Не подходит, если
- Нужен макет в Figma с совместной работой в браузере.
- Среда без Node.js 22 и pnpm: сборка идет из исходников.
- Генерацию нельзя отправлять во внешнюю модель.
Пример запроса к агенту
Через Quilt получи структуру проекта командой get_outline, исправь отступы на экране оформления заказа и свяжи его с экраном корзины.MCP
- Транспорт
- http
- Авторизация
- не нужна
Ограничения
Сервер MCP слушает только петлевой адрес без аутентификации, поэтому к нему имеет доступ любой процесс на вашей машине. Запуск требует Node.js 22 или новее и pnpm 11, пакет `quilt-canvas` в README упомянут как будущий, а пока собирается из исходников. Для скриншотов нужен Chrome или Edge либо `npx playwright install chromium`. Генерация идет через выбранного поставщика модели, так что описания и экраны уходят к нему. Последнее обновление репозитория датировано 4 ноября 2026 года, лицензия Apache-2.0.
Как отключить. Выполните `claude mcp remove quilt` и остановите процесс Quilt. Данные проектов лежат в `~/.quilt`, удалите эту папку, если макеты больше не нужны.
Частые вопросы
Где хранятся данные?
В папке `~/.quilt` на вашей машине: встроенная база PGlite, объекты и `config.env` с секретами. Аккаунт и облако не нужны.
Как подключить агента?
Командой `claude mcp add --transport http quilt http://127.0.0.1:3100/mcp`. Сервер слушает только петлевой адрес, поэтому аутентификации нет.
Какие каналы генерации поддерживаются?
Подписка Claude через CLI `claude` по умолчанию, ключ Anthropic или Gemini, а также совместимая с OpenAI конечная точка.
Что агент может делать на холсте?
Читать структуру и экраны (`get_outline`, `get_screen`), писать (`patch_screen`, `create_screen`, `edit_element`), связывать экраны и запускать генерацию.
Можно ли выгрузить прототип?
Да, весь прототип экспортируется одним офлайн-файлом HTML.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыГрафический редактор с открытым кодом и встроенным MCP-сервером: Claude и Cursor создают и правят макеты на вашем сервере
Настольный редактор Scumble с MCP-сервером на 119 инструментов: агент открывает, выделяет, генерирует и экспортирует картинки.
По ссылке на макет Lanhu агент получает HTML с CSS, дизайн-токены, слои и слайсы без ручного экспорта из редактора.
Симулятор масляной живописи на Rust и мольберт с MCP-адаптером: агент рисует кистями, смешивает краски на палитре и смотрит холст
Скилл дизайна интерфейсов привязывает агента к вашему продукту, а необязательный MCP добавляет реальные экраны из каталога.
Открытый холст для дизайна: Claude Code, Codex, ChatGPT и Cursor рисуют на нем макеты через MCP вместе с людьми
Коротко о README
README показывает путь от описания до прототипа, схему процесса Hono с рабочей очередью и MCP, а в разделе «Подключите агента» дает готовую команду.