Макет в 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, проверьте выбранную модель и протестируйте на простом экране перед сложными задачами.
Ссылки