Перейти к содержанию

Pencil — AI-дизайн баннеров и интерфейсов через MCP✦

Pencil (pencil.dev) — бесплатное десктопное приложение для дизайна визуальных элементов (баннеров, макетов, интерфейсов), работающее по принципу «дизайн на холсте → код». В нашем разборе пяти лучших инструментов для Claude Code это пятый инструмент: им мы оформляем рекламные баннеры по текстам, которые ранее сгенерировала агентная система. Ключевая особенность — Pencil не требует отдельной подписки на ИИ: он подключается к уже установленному у вас агенту через локальный MCP-сервер и использует вашу существующую подписку. Интерфейс похож на Figma: реальный векторный холст со слоями.

Установка и подключение✦

На сайте во вкладке Downloads доступны три компонента: Pencil Desktop (Windows/macOS/Linux), Pencil CLI и расширение Pencil для VS Code; вместе с приложением ставится MCP-сервер. После установки нужно залогиниться, подключить агента (Agents → Setup → выбрать подписку), подключить репозиторий — ту же папку, что открыта в VS Code, — и сохранить .pen-файл проекта внутри репозитория. Дизайн-файлы живут в кодовой базе и версионируются через Git.

По нашему опыту Pencil подключается к любому агентному harness — Claude Code, Codex, Gemini, Moonshot, DeepSeek. (официальная документация на момент проверки перечисляет Claude Code, Cursor, Windsurf, Codex CLI, OpenCode и др., но не упоминает Gemini явно — состав поддерживаемых агентов стоит перепроверить перед выбором.)

Два способа работы✦

  1. Через MCP из VS Code. Пишете агенту обычный промт, например «запусти дизайн обложки A3 из этого файла, используя Pencil MCP», и наблюдаете, как элементы появляются на холсте в реальном времени.
  2. Внутри самого Pencil. Вставляете промт прямо в чат приложения — вы общаетесь с тем же Claude Code / Codex, а не с отдельной «непонятной» моделью.

Библиотеки, варианты, параллельные агенты✦

Панель Libraries позволяет подключить UI-библиотеки (по умолчанию — shadcn) и загрузить свои кастомные. Перед генерацией задаются: модель (например, Opus 4.8), число параллельных агентов (больше агентов — быстрее результат, но выше расход токенов) и число вариантов одного баннера (2–6), которые Pencil делает одновременно; итерировать варианты можно по лейауту или по стилю (пресеты либо кастомные). Полученные макеты — не сгенерированные картинки, а редактируемые проекты: их можно дорабатывать или заменить своим готовым макетом, под который Claude Code подстроит остальные маркетинговые материалы.

Источники✦