VorobeoffМакет в Figma, код в GitHub, между ними — человек, который вручную переносит отступы и цвета в CSS. Дизайнер отдаёт спецификацию, разработчик читает и расставляет пиксели. Каждое изменение на канвасе — новый цикл пересогласований. Канвас и код версионируются отдельно и синхронизируются только руками.
Pencil предлагает другую модель. Дизайн и код — в одном git-репозитории, версионируются одним коммитом и редактируются одним ИИ-агентом. Файлы дизайна хранятся в открытом формате.pen среди исходников, а агенты получают к ним доступ через MCP — протокол, который уже применяют Claude, ChatGPT и Cursor для подключения внешних инструментов.
Это не замена Figma для большой дизайн-команды. Это второй канал для тех, кто кодит и хочет видеть макет в той же вкладке IDE, в том же коммите, в той же ветке.
Что это
Pencil — канвас для проектирования интерфейсов, который хранится в репозитории, а не в облаке. Макеты лежат в открытом формате.pen среди исходников, и ИИ-агенты читают и изменяют их через MCP.
MCP (Model Context Protocol) — открытый стандарт, по которому ИИ-агенты подключаются к внешним инструментам и данным. Вместо того чтобы работать вслепую, агент через MCP-сервер получает список доступных действий — создать фрейм, поменять цвет, добавить компонент — и вызывает их как функции. Pencil запускает MCP-сервер на вашей машине, и любой совместимый клиент может к нему подключиться.
Формат .pen — открытый: файлы хранятся в git, версионируются вместе с кодом и читаются без приложения. Дизайн и код — в одной папке.
Инсайт: Главное отличие от Figma — отсутствие handoff, ручной передачи макета от дизайнера к разработчику. Оба работают с одним файлом. Изменили канвас — код видит правку. Изменили код — канвас синхронизируется. Поток двунаправленный, без промежуточной синхронизации.
Зачем нужно
Pencil закрывает три практические задачи, которые в классической связке Figma + GitHub требуют ручной работы.
- Убирает handoff. Дизайнер не «передаёт» макет — обе стороны работают с одним файлом.pen в репозитории. Промежуточный слой спецификаций, экспорта и пересогласований исчезает.
- Двунаправленная синхронизация. Правка на канвасе сразу видна в коде. Правка в коде подтягивается на канвас. Изменения текут в обе стороны — без ручного переноса отступов и цветов из макета в CSS.
- Параллельная работа с агентом. Пока вы проектируете один экран, агент в соседней панели собирает варианты другого. Несколько агентов одновременно генерируют 3–5 рабочих направлений для сравнения за один подход.
Важно: Pencil переносит логику контроля версий на дизайн. Каждый коммит фиксирует состояние канваса — как и состояние кода. Откатиться к предыдущей версии макета — то же, что откатить коммит.
Как устроено
Pencil устанавливается в одном из двух видов: отдельное приложение или плагин для редактора кода.
| Режим | Как выглядит | Когда подходит |
|---|---|---|
Десктоп | Полноценное окно со слоями слева, панелью свойств справа и боковой панелью агента | Для масштабных сессий проектирования, когда канвас нужен крупным планом |
Плагин для Cursor и VS Code | Канвас в виде соседней вкладки с кодом | Для работы в коде, когда дизайн нужен на коротких заходах |
Рабочий контур на практике: десктоп для больших сессий, плагин в Cursor для мелких правок по ходу кодинга.
MCP-интеграция
При запуске Pencil поднимает на вашей машине локальный MCP-сервер. Совместимый клиент — Claude Code, Cursor, Codex — соединяется с ним и получает доступ к инструментам для работы с канвасом.
Три принципа работы:
- Локально, без облака. Сервер работает на вашей машине, и файлы дизайна не покидают компьютер.
- Доступ на чтение и запись. Агент не ограничен просмотром — он может создавать фреймы, править стили, добавлять компоненты.
- Контроль человека. Агент предлагает правку, а вы её принимаете или отклоняете. Последнее слово — за разработчиком.
Благодаря MCP Pencil не привязан к одному агенту: любой совместимый клиент подключается через стандартный интерфейс.
С кем Pencil работает
Экосистема агентов вокруг Pencil растёт быстро. На старте доступны:
- Claude Code — CLI и панель в IDE (самый стабильный вариант по отзывам)
- Claude Desktop
- Cursor — через официальный плагин
- Windsurf IDE (Codeium)
- Codex CLI от OpenAI
- Antigravity IDE от Google
- OpenCode CLI
Что умеют MCP-инструменты Pencil
Агенту через MCP доступны три категории операций:
- Design Tools — построение и правка фреймов, фигур, текстовых блоков, компонентов.
- Analysis Tools — анализ структуры макета и дерева слоёв.
- Variables & Theming — управление дизайн-токенами, палитрами, типографикой.
Агент может построить экран с нуля, а не только анализировать существующий. Чтобы увидеть полный список инструментов, откройте клиент: в Cursor — Settings → Tools & MCP, в Codex — команда /mcp.
Когда использовать
Pencil раскрывается в четырёх сценариях.
| Задача | Как решается | Что получаете на выходе |
|---|---|---|
Сборка экрана из текстового описания | Промпт в Claude Code с просьбой собрать экран из компонентов дизайн-системы | Готовый макет на канвасе и код, сгенерированный синхронно |
Доведение кода до макета | Агент видит обе стороны и сравнивает отступы, цвета, шрифты | Код, визуально совпадающий с макетом — без ручной подгонки |
Параллельные варианты | Несколько агентов одновременно генерируют разные экраны | 3–5 рабочих направлений для сравнения за один подход |
Внешние данные на канвасе | К Pencil подключаются другие MCP-серверы: БД, API, Playwright, чарты | Канвас с боевыми данными вместо заглушек |
Совет: Комбинируйте MCP-серверы. Самое полезное — подключить к Pencil серверы для БД, API и Playwright. Тогда агент заполняет канвас настоящими данными, и макет перестаёт быть абстракцией.
Пример
Минимальный запуск — 5 шагов от скачивания до первого промпта.
-
- Заберите Pencil с pencil.dev — доступен десктоп-клиент и плагин для Cursor.
-
- Запустите приложение — MCP-сервер стартует автоматически, без ручной настройки.
-
- В настройках → Agents & MCP укажите свой CLI (Claude Code, Cursor, Codex). В подсказке появится строка для добавления в конфиг.
-
- Убедитесь, что подключение работает: в Cursor — Settings → Tools & MCP, в Codex —
/mcp. В списке должны появиться инструменты с префиксомpencil\_.
- Убедитесь, что подключение работает: в Cursor — Settings → Tools & MCP, в Codex —
-
- Дайте первый промпт: попросите агента собрать артборд 1440×1024 с хедером сайта — навигацией и CTA-кнопкой. Если экран появился — всё настроено.
Важно: Связка Pencil + Claude Code сейчас выглядит наиболее отладженной. Начните с неё, а перейти на Cursor или Codex можно уже потом.
Ограничения
Pencil — молодой продукт стартапа, и у него есть конкретные технические границы, которые стоит знать до внедрения.
| Пункт | Пояснение |
|---|---|
Закрытый исходный код — Приложение работает и доступно для скачивания, но исходники не открыты. | Это коммерческий продукт, а не open-source. Отдельная фича Design Mode для Cursor анонсирована как «Available soon» — точных сроков нет. Если для вашей команды критичен open-source, Pencil пока не подходит. |
Точность вёрстки в сложных сетках — В адаптивных раскладках возможны расхождения в 4–8 пикселей, которые приходится исправлять вручную. | На простых экранах агент работает чисто, но многоуровневые сетки с вложенными контейнерами — пока зона ручной доводки. |
Не покрывает корпоративные сценарии Figma — Комментарии, роли и prototyping у Figma сильнее. | Pencil не рассчитан на команды с десятками дизайнеров и сложным ревью-процессом. |
Зависимость от модели — Качество макета зависит от ИИ-модели за промптом. | Claude Code сейчас даёт наиболее стабильный результат. Другие агенты могут работать менее предсказуемо, особенно на сложных экранах. |
Антипаттерны
Чего не делать при работе с Pencil.
| Пункт | Пояснение |
|---|---|
Не делать: просить агента сразу пересобрать весь сайт — Работайте по одному экрану и компоненту за раз. | Один большой промпт «перепиши весь интерфейс» перегружает контекст модели, расхождения накапливаются, и результат приходится переделывать вручную. Разбейте задачу на экраны: сначала хедер, потом навигация, потом карточки. Каждый экран — отдельный промпт, отдельная проверка, отдельный коммит. |
Не делать: править канвас без git-коммита перед крупными изменениями — Агент работает с write-доступом к макету, и если результат не устроит, без коммита вы потеряете предыдущую версию. | Git-коммит перед большими правками — страховка, которая позволяет откатиться к проверенной версии за секунды. |
Не делать: рассчитывать на pixel-perfect в адаптивных сетках без ручной проверки — Расхождения в 4–8 пикселей возможны, и агент не всегда замечает их сам. | Проверяйте сложные раскладки вручную, особенно на брейкпоинтах и вложенных контейнерах. |
Чеклист
Проверка перед запуском.
| Пункт | Пояснение |
|---|---|
Проверка подключения MCP — После установки откройте настройки агента (в Cursor — Settings | → Tools & MCP, в Codex — команда /mcp) и убедитесь, что в списке есть инструменты с префиксом pencil_. Если их нет — MCP-сервер не стартовал, перезапустите Pencil и проверьте раздел Agents & MCP. Без этих инструментов агент не видит канвас. |
Проверка тестовым промптом — Дайте агенту простую задачу: построить артборд 1440×1024 с шапкой сайта — меню и кнопкой действия. | Если агент создаёт артборд и компоненты — подключение рабочее. Если агент не отвечает или выдаёт ошибку — проверьте конфигурацию CLI в настройках Pencil. |
Проверка git-статуса — Перед первой правкой убедитесь, что файлы.pen находятся в git-репозитории. | Выполните git status в директории проекта: файлы.pen должны отслеживаться. Если нет — добавьте их в коммит, чтобы агент работал с версионируемым канвасом, а не с временной копией. |
Проверка модели — Убедитесь, что за промптом стоит стабильная модель. | Claude Code сейчас даёт наиболее предсказуемый результат. Если используете Cursor или Codex, проверьте выбранную модель и протестируйте на простом экране перед сложными задачами. |
