mockit-mcp

Что он делает

Спросите Claude Code (или любого MCP-клиента):

Разработай домашний дашборд для фитнес-трекера. Три концентрических кольца активности, еженедельная гистограмма, список недавних тренировок, премиальная темная тема с неоновыми акцентами.

mockit-mcp возвращает настоящий PNG-макет (размером 390×844 при масштабе устройства 2x, вьюпорт класса iPhone) и исходный код HTML/Tailwind — чтобы вы могли визуально итерировать и перенести его в SwiftUI, когда будете готовы к разработке.

Это не статический движок шаблонов и не низкокачественная ИИ-поделка. Системный промпт вручную настроен на премиальную эстетику iOS: реальный контент, SVG-иконки (без эмодзи), стильные градиенты вместо стоковых фото, типографика по HIG (Human Interface Guidelines) и тональная многослойность вместо тяжелых теней.

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

• Два бэкенда, одни и те же инструменты. Используйте локальный CLI claude (подписка, без доплат) или API Anthropic (ключ + оплата за вызов). Переключайтесь одной переменной окружения.

• Реальный вывод в PNG. Безголовый Chromium через Playwright. Вьюпорт по умолчанию — 390×844 @2x (класс iPhone); любой пользовательский размер задается одной переменной окружения.

• Итеративное уточнение. iterate_screen принимает ID экрана + обратную связь ("сделай карточку героя меньше") и создает новую версию, отслеживая связь родитель/потомок.

• Библиотека на диске. Каждая генерация сохраняет HTML + PNG + JSON-метаданные. Просматривайте, фильтруйте, экспортируйте повторно.

• Стандарт MCP. Работает с Claude Code, Claude Desktop, Cursor, Windsurf или любым другим MCP-клиентом.

• Транспорты Stdio + HTTP. Запускайте локально для разработки или как сетевой сервис для общего/контейнеризированного использования.

Инструменты

Установка

Предварительные требования

• Node.js 20+

• Либо авторизованный CLI claude (cli бэкенд, по умолчанию), либо API-ключ Anthropic (api бэкенд)

• Загрузка Chromium для Playwright (~170 МБ, единоразово)

Быстрый старт (CLI бэкенд, рекомендуется для локальной разработки)

git clone https://github.com/karyaboyraz/mockit-mcp.git
cd mockit-mcp
npm install
npx playwright install chromium
npm run build

Добавьте в Claude Code:

claude mcp add mockit -- node "$(pwd)/dist/server.js"

Готово. API-ключ не нужен — используется ваша существующая сессия CLI claude.

API бэкенд (если на хосте нет CLI claude)

echo "CLAUDE_BACKEND=api" > .env
echo "ANTHROPIC_API_KEY=sk-ant-..." >> .env
npm run build
claude mcp add mockit -- node "$(pwd)/dist/server.js"

Docker (HTTP транспорт, для общего развертывания)

cat > .env <<'ENV'
CLAUDE_BACKEND=api
ANTHROPIC_API_KEY=sk-ant-...
# Required if you change the port binding from 127.0.0.1 to 0.0.0.0:
MCP_HTTP_TOKEN=$(openssl rand -hex 32)
ENV
docker compose up -d --build

По умолчанию docker-compose.yml привязывает HTTP-порт только к 127.0.0.1, и сервер требует MCP_HTTP_TOKEN для любого запроса не с локальной машины. Не открывайте этот сервер в публичную сеть без установки надежного MCP_HTTP_TOKEN — каждая генерация расходует лимиты вашего API-ключа Anthropic.

Затем укажите любому клиенту URL локальной петли:

claude mcp add --transport http mockit http://127.0.0.1:7821/mcp \
  -H "Authorization: Bearer <MCP_HTTP_TOKEN>"

Для удаленного доступа измените привязку порта в docker-compose.yml на 0.0.0.0:7821:7821 и убедитесь, что установлен MCP_HTTP_TOKEN — в противном случае сервер откажется запускаться.

Использование

В любом MCP-клиенте просто спросите:

Разработай дашборд фитнес-трекера. Покажи прогресс колец за сегодня, еженедельную диаграмму и список недавних тренировок. Темная тема, неоново-зеленый акцент.

PNG появится в чате. HTML будет сохранен в designs/{project}/{name}-{id}.html.

Для последующих правок:

iterate_screen для того фитнес-дашборда — замени диаграмму на пульс во времени и добавь кнопку "поделиться тренировкой" внизу.

См. examples/ для примеров промптов и готовых результатов.

Конфигурация

Все опционально. См. .env.example для полного списка.

Стоимость

За одну генерацию: ~3 тыс. входных токенов (системный промпт) + ~6–12 тыс. выходных токенов в зависимости от сложности экрана. Выходные токены составляют основную часть стоимости на Opus.

Кэширование системного промпта включено по умолчанию (TTL 5 минут). Это экономит несколько центов за вызов, но не является скидкой на порядок — выходные токены все равно оплачиваются по полной ставке. Для реального снижения затрат переключитесь на модель поменьше (claude-sonnet-4-6 или claude-haiku-4-5).

Архитектура

┌─────────────────┐
│   MCP Client    │  (Claude Code, Cursor, Windsurf, …)
└────────┬────────┘
         │ tool call: generate_screen({ prompt, ... })
         ▼
┌─────────────────────────────────────────────────────┐
│  mockit-mcp                                          │
│                                                      │
│  ┌──────────────┐    ┌────────────────────────┐    │
│  │  Backend     │    │  Renderer              │    │
│  │              │    │                        │    │
│  │ ► cli   ─────┼──► │  Playwright (headless  │    │
│  │ ► api   ─────┘    │  Chromium @ iPhone     │    │
│  │  → HTML+Tailwind  │  viewport)             │    │
│  └──────────────┘    │  → PNG screenshot      │    │
│                      └────────────────────────┘    │
│                                                      │
│  ┌────────────────────────────────────────────┐    │
│  │ Storage (disk): HTML + PNG + JSON metadata │    │
│  └────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────┘

Структура хранения

designs/
└── {project-slug}/
    ├── {name-slug}-{id8}.html   # id8 = first 8 chars of the screen UUID
    ├── {name-slug}-{id8}.png
    └── {name-slug}-{id8}.json   # full UUID, prompt, parent ID, tokens, model, cost

Настройка стиля дизайна

Вручную настроенный системный промпт находится в src/system-prompt.ts. Именно там закодированы соблюдение iOS HIG, правило отсутствия стоковых фото, цепочка фоллбэков SF Pro и предпочтения в типографике. Хотите Material You или стиль десктопного дашборда? Отредактируйте его.

Разработка

npm run dev    # tsx watch mode, stdio transport
npm run http   # tsx watch mode, http transport on :7821
npm run build  # compile to dist/

Дорожная карта

• [ ] Пресеты вьюпортов для Watch / iPad / Android

• [ ] Генерация потоков из нескольких экранов (последовательности онбординга)

• [ ] Инструмент переноса HTML → SwiftUI / Jetpack Compose

• [ ] Импорт дизайн-системы (конфиг Tailwind, дизайн-токены)

• [ ] Ссылки на изображения (используйте --image для визуального вдохновения)

• [ ] Генерация вариантов (3-5 альтернатив на промпт)

Участие в разработке

Проблемы и PR приветствуются — см. CONTRIBUTING.md.

Лицензия

MIT

Благодарности

Построено на базе:

• Anthropic Claude — модель, которая выполняет основную работу

• Model Context Protocol — стандарт интеграции

• Playwright — рендерер

• Tailwind CSS — через CDN, в каждом сгенерированном экране

Товарные знаки

iPhone, iPad, Apple Watch и iOS являются товарными знаками Apple Inc. Claude является товарным знаком Anthropic, PBC. mockit-mcp — это независимый open-source проект, который не связан, не одобрен и не спонсируется Apple Inc. или Anthropic, PBC. Все остальные названия продуктов, логотипы и бренды являются собственностью их соответствующих владельцев.