Quilt MCP

Локальный дизайн-инструмент на бесконечном холсте: описание приложения становится экранами HTML, агент правит холст по MCP.

  • 106 ★ репозитория
  • Последний коммит
  • Apache-2.0
MCP-сервер

Расширенный доступ

Почему такой уровень

  • MCP-сервер слушает локальный адрес без аутентификации, доступный любому процессу на машине
  • Описания и экраны уходят выбранному поставщику модели при генерации
Все причины и проверки

bearisbug/quilt

Установка

Ручная установка

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 создают и правят макеты на вашем сервере

MCP-серверШирокий доступ2,7 тыс.Звезды репозитория
Официальный

Настольный редактор Scumble с MCP-сервером на 119 инструментов: агент открывает, выделяет, генерирует и экспортирует картинки.

MCP-серверРасширенный доступ176Звезды репозитория

По ссылке на макет Lanhu агент получает HTML с CSS, дизайн-токены, слои и слайсы без ручного экспорта из редактора.

MCP-серверРасширенный доступ148Звезды репозитория

Симулятор масляной живописи на Rust и мольберт с MCP-адаптером: агент рисует кистями, смешивает краски на палитре и смотрит холст

CLIРасширенный доступ156Звезды репозитория

Скилл дизайна интерфейсов привязывает агента к вашему продукту, а необязательный MCP добавляет реальные экраны из каталога.

СкиллРасширенный доступ83Звезды репозитория

Открытый холст для дизайна: Claude Code, Codex, ChatGPT и Cursor рисуют на нем макеты через MCP вместе с людьми

MCP-серверРасширенный доступ2 тыс.Звезды репозитория

Коротко о README

README показывает путь от описания до прототипа, схему процесса Hono с рабочей очередью и MCP, а в разделе «Подключите агента» дает готовую команду.

Бейдж для README

Сообщить о проблеме