База знаний

Pencil — агентный дизайн-канвас с MCP прямо в IDE

Pencil — канвас для дизайна интерфейсов, который живёт в репозитории и общается с ИИ-агентами через MCP. Что умеет, как подключить к Claude Code, Cursor и Codex и где у него слабые места.

Опубликовано 17.04.2026

ИИ-агенты DevTools Frontend

Pencil — это агентный дизайн-канвас, который живёт рядом с вашим кодом, а не в отдельной вкладке Figma. Макеты хранятся в открытом формате .pen внутри репозитория, а ИИ-агенты видят их через MCP (Model Context Protocol) — тот самый стандарт, который уже используют Claude, ChatGPT и Cursor.

Если коротко: Figma — это соседняя студия за углом, куда дизайнер уходит и возвращается с макетом. Pencil — это вторая вкладка в вашем IDE, где макет и код всегда в одном клике друг от друга.

Какую боль закрывает Pencil

Стандартный сценарий выглядит так: макет живёт в Figma, код — в GitHub, а между ними стоит человек и вручную переводит дизайн в CSS. Pencil убирает этот шов: канвас и исходники лежат в одном репозитории, версионируются вместе и редактируются одним и тем же ИИ-агентом.

Что это даёт на практике:

Нет handoff. Дизайнер не «передаёт» макет разработчику — они работают с одним и тем же файлом.
Bi-directional flow. Поправили канвас — код видит изменения. Поправили код — канвас подтянется.
AI multiplayer. Пока вы работаете над одним экраном, агент в соседней панели генерирует варианты второго.

Как MCP-интеграция работает внутри

Как только вы запускаете Pencil, приложение поднимает локальный MCP-сервер. Любой совместимый клиент — Claude Code, Cursor, Codex — подключается к этому серверу и получает набор инструментов для чтения и изменения канваса.

Ключевые принципы:

Локально и без облака. MCP-сервер крутится у вас на машине. Файлы дизайна не уходят на чужие серверы.
Чтение плюс запись. Агент не просто смотрит на макет — он создаёт фреймы, меняет стили, добавляет компоненты.
Человек в цикле. Агент предлагает правку, вы подтверждаете или откатываете — финальное слово всегда за вами.

Если MCP для вас пока новая вещь — общую архитектуру протокола разобрал отдельно в справочнике по MCP.

С кем Pencil работает

Агентная экосистема вокруг Pencil складывается быстро. На старте поддерживаются:

Claude Code — CLI и IDE-панель (самый стабильный вариант по отзывам)
Claude Desktop
Cursor — через официальное расширение
Windsurf IDE (Codeium)
Codex CLI от OpenAI
Antigravity IDE от Google
OpenCode CLI

Именно за счёт MCP Pencil не заперт на один инструмент: любой совместимый агент подтягивается через один и тот же стандартный интерфейс.

Два режима: десктоп и расширение для IDE

Режим	Как выглядит	Когда подходит
Десктоп-приложение	Отдельное окно в стиле Figma: слои слева, свойства справа, панель агента сбоку	Когда вы в «режиме дизайна» и хотите видеть канвас крупно
Расширение для Cursor и VS Code	Канвас открывается как ещё одна вкладка рядом с кодом	Когда вы в основном кодите и заглядываете в дизайн короткими заходами

На практике лучше всего работать в десктоп-приложении для крупных дизайн-сессий и держать расширение в Cursor для мелких правок по ходу кодинга.

Что умеют MCP-инструменты Pencil

Через MCP агенту доступен полный набор операций над канвасом:

Design Tools — создание и модификация фреймов, фигур, текста, компонентов.
Analysis Tools — чтение структуры макета и иерархии слоёв.
Variables & Theming — работа с дизайн-токенами, цветовыми схемами, типографикой.
Полная запись. Агент может собрать экран с нуля, а не только отвечать на вопросы по существующему.

Полный список инструментов легко посмотреть в самом клиенте: в Cursor — в Settings → Tools & MCP, в Codex — командой /mcp.

Сценарии, в которых Pencil раскрывается

Задача	Как решается	Что получаете на выходе
Собрать экран по описанию	Промпт в Claude Code: «Собери экран логина из компонентов нашей дизайн-системы»	Макет на канвасе и синхронно сгенерированный код
Привести код к макету pixel-perfect	Агент видит обе стороны и сверяет отступы, цвета, типографику	Визуальное соответствие кода и макета без ручного выравнивания
Параллельные варианты	Несколько агентов параллельно собирают разные экраны	3–5 рабочих направлений для сравнения за один подход
Данные из внешних источников	К Pencil подключаются другие MCP-серверы: БД, API, Playwright, чарты	Канвас с боевыми данными, а не с lorem ipsum

Как запустить у себя

Скачайте Pencil с pencil.dev. Доступен десктоп-клиент и расширение для Cursor.
Запустите приложение. MCP-сервер поднимается сам — ничего настраивать вручную не нужно.
Откройте настройки → Agents & MCP и выберите свой CLI (Claude Code, Cursor, Codex и так далее). Подсказка покажет, какую строчку добавить в конфиг.
Проверьте подключение. В Cursor — Settings → Tools & MCP, в Codex — /mcp. Должны появиться инструменты с префиксом pencil_.
Начните с простого промпта. Например: «Создай артборд 1440×1024 и собери на нём хедер сайта с навигацией и CTA-кнопкой». Если агент справляется — подключение рабочее.

Где Pencil пока проседает

Репозиторий закрыт. Само приложение уже работает и его можно скачать, но исходники пока не открыты — это не open-source-инструмент, а продукт стартапа. Отдельная фича Design Mode для Cursor анонсирована как «Available soon».
Точность вёрстки. В сложных адаптивных сетках встречаются расхождения в 4–8 пикселей, которые приходится подправлять руками.
Не замена Figma для больших дизайн-команд. Оформление комментариев, ролевая модель, prototyping-возможности у Figma пока сильнее.
Зависимость от агента. Качество макета напрямую зависит от того, какая модель стоит за промптом. Claude Code сейчас даёт наиболее стабильный результат.

Практические советы

Двигайтесь итерациями. Не просите агента сразу пересобрать целый сайт — двигайтесь экранами и компонентами.
Фиксируйте версии до крупных правок. Агент работает с write-доступом к макету, так что git-коммит перед большими изменениями — лучшая страховка.
Комбинируйте MCP-серверы. Самое интересное начинается, когда рядом с Pencil живут MCP-серверы для БД, API и Playwright: агент затягивает в канвас реальные данные.
Начинайте с Claude Code. Связка Pencil + Claude Code сейчас выглядит наиболее отладженной, а перейти на Cursor или Codex можно уже потом.

Полезные ссылки

pencil.dev — официальный сайт и доступ к early access
Документация по AI Integration — раздел про MCP и поддерживаемых клиентов
Подробный гайд Better Stack — разбор интерфейса и настройки
Демо Pencil + Claude Code — живая демонстрация работы

По теме

Если вы собираете собственный контур из ИИ-агентов вокруг продуктовой разработки и думаете, куда сюда вставить дизайн-слой — давайте обсудим, как это собрать под ваши задачи.

Если хотите разобрать свою задачу — напишите мне

Можно прийти с идеей, черновым контекстом или уже живой задачей. Помогу быстро понять, где реальный следующий шаг, а где лишний шум.

Напишите мне в Телеграм Мой Телеграм канал

Обычно хватает 2–3 сообщений, чтобы понять, могу ли я здесь реально помочь и в каком формате лучше двигаться дальше.