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

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

Данные в руководстве проверены по официальной документации 4 сентября 2026 года.

Содержание

  1. Как устроена связка дизайна и кода
  2. Какие клиенты поддерживаются
  3. Что агент может делать через MCP
  4. Установка приложения или расширения
  5. Подключение Cursor и Codex
  6. Работа из терминала через pen.dev CLI
  7. Полезные сценарии
  8. Ограничения и меры предосторожности
  9. Официальные ссылки

Как устроена связка дизайна и кода

Файл .pen хранит макет в структурированном JSON-формате. Его можно разместить в рабочей папке проекта, открыть в IDE (интегрированной среде разработки) и версионировать через Git вместе с исходным кодом.

Когда запущено приложение или расширение pen.dev, локальный MCP-сервер предоставляет совместимому агенту инструменты для чтения и изменения макета. По официальной документации, MCP-сервер и операции с дизайном работают локально, а файлы дизайна остаются на вашей машине. Для авторизации интерфейса командной строки (CLI) и работы ИИ-функций документация предусматривает внешние учётные данные и API, поэтому локальность MCP не означает, что весь связанный контур работает без сети.

Двусторонний процесс выглядит так:

  1. Из дизайна в код. Вы создаёте экран или компонент в .pen, затем просите агента сгенерировать реализацию на React, Next.js, Vue, Svelte или другом указанном стеке.
  2. Из кода в дизайн. Агент читает компонент из рабочей папки и воссоздаёт его структуру, расположение и стили на канвасе.
  3. Последующие изменения. После правки дизайна вы отдельно просите агента обновить код. После изменения кода можно таким же образом обновить макет.

В документации описан агентный процесс: направление и объём каждого изменения задаются отдельным запросом.

Какие клиенты поддерживаются

В официальном списке AI Integration указаны:

  • Claude Code в терминале и IDE;
  • Claude Desktop;
  • Cursor;
  • Windsurf IDE;
  • Codex CLI;
  • Antigravity IDE;
  • OpenCode CLI.

Клиенты используют общий MCP-интерфейс, поэтому базовые операции с .pen не привязаны к одному редактору. Способ авторизации зависит от клиента, а отдельные возможности могут зависеть от его ограничений и тарифа.

pen.dev доступен в трёх вариантах:

ВариантКак работаетДля каких задач подходит
Десктоп-приложениеОтдельное приложение с полноценным канвасомПродолжительные дизайн-сессии
Расширение VS Code или Cursor.pen открывается как файл внутри IDEПравки дизайна рядом с кодом
pen.dev CLIСоздание, изменение и экспорт макетов из терминала, включая headless-режим без интерфейсаСкрипты, пакетная обработка и CI/CD

Десктоп-приложение заявлено для macOS, Linux и Windows. Для Linux официальная документация предупреждает о возможных проблемах интерфейса в Wayland и Hyprland; X11 считается более стабильным вариантом.

Что агент может делать через MCP

Основные операции с макетом доступны через инструмент execute:

  • создавать, копировать, перемещать, обновлять, заменять и удалять элементы;
  • читать узлы, иерархию и вычисленные границы;
  • искать проблемы компоновки, включая обрезанные элементы;
  • читать и изменять переменные и темы;
  • создавать и размещать изображения;
  • получать снимок макета через операцию TakeScreenshot;
  • экспортировать результат в PNG, JPEG, WebP, PDF или HTML через операцию Export.

Инструмент get_app_state возвращает текущий контекст редактора, сведения об активном файле и текущем выделении. В CLI также доступен get_guidelines для загрузки правил и стилей работы с .pen.

Список подключённых инструментов можно проверить:

  • в Cursor: Settings → Tools & MCP;
  • в Codex CLI: команда /mcp и список инструментов сервера pencil.

Название продукта в документации — pen.dev, а MCP-сервер по-прежнему отображается как pencil.

Установка приложения или расширения

VS Code и Cursor

  1. Откройте раздел расширений.
  2. Найдите pen.dev и установите расширение.
  3. Завершите активацию.
  4. Создайте файл, например test.pen.
  5. Откройте его и убедитесь, что в правой верхней части редактора появился значок pen.dev.

Если значка нет, проверьте, включено ли расширение, и найдите команды pen.dev через палитру команд.

Десктоп-приложение

Скачайте актуальную сборку с сайта pen.dev или страницы релизов. После первого запуска завершите активацию. На macOS при предупреждении системы может потребоваться открыть приложение через контекстное меню Open.

Для встроенных AI-функций официальная инструкция также требует установить и авторизовать Claude Code.

Подключение Cursor и Codex

MCP-сервер запускается автоматически вместе с pen.dev. Для базовой работы отдельный ручной запуск сервера не нужен.

Проверка в Cursor

  1. Запустите pen.dev или откройте .pen через расширение.
  2. Перейдите в Settings → Tools & MCP.
  3. Найдите сервер pencil.
  4. Откройте тестовый макет и попросите агента добавить простой элемент, например кнопку.
  5. Проверьте результат на канвасе и в панели слоёв.

Если сервер не появился, перезапустите Cursor и pen.dev, проверьте активацию расширения и состояние авторизации.

Проверка в Codex CLI

  1. Сначала запустите десктоп-приложение или IDE-расширение pen.dev.
  2. Откройте Codex в терминале.
  3. Выполните /mcp.
  4. Убедитесь, что в списке есть pencil и его инструменты.
  5. Попросите создать простой компонент в открытом .pen и проверьте изменение на канвасе.

Официальная документация предупреждает, что pen.dev может изменить или продублировать записи в config.toml Codex. Перед первым подключением сохраните резервную копию конфигурации.

Работа из терминала через pen.dev CLI

Отдельный CLI использует тот же редакторный движок и умеет работать без запущенного графического интерфейса. Требуется Node.js 18 или новее.

npm install -g @pen.dev/cli
pen version
pen login

Создание нового макета:

pen --out login.pen --prompt "Create a login page with email and password fields"

Изменение существующего файла:

pen --in dashboard.pen --out dashboard-v2.pen --prompt "Add a sidebar navigation"

Экспорт в PNG:

pen --in dashboard-v2.pen --export dashboard.png

CLI также поддерживает интерактивный режим, пакетные задачи из JSON и подключение к запущенному desktop- или VS Code-приложению. Для CI/CD документация предусматривает PEN_CLI_KEY и ANTHROPIC_API_KEY; оба секрета передавайте через переменные окружения, а не сохраняйте в репозитории.

Полезные сценарии

Перенос существующего компонента из кода на канвас

Задача: визуально доработать компонент, который уже существует в проекте.

Условие: .pen и исходники находятся в одной рабочей папке, доступной агенту.

Действие: откройте макет и попросите агента воссоздать, например, src/components/Button.tsx, включая структуру, расположение и стили.

Проверка: компонент появился на канвасе, его слои читаются отдельно, а цвета и размеры можно сопоставить с исходным кодом.

Ограничение: импорт выполняет агент. Сложное поведение и интерактивность могут потребовать ручной проверки.

Создание экрана с последующей генерацией кода

Задача: быстро получить исходную реализацию нового экрана.

Условие: на канвасе есть макет и, желательно, переменные или компоненты дизайн-системы.

Действие: укажите целевой стек прямо в промпте, например: Generate a Next.js page with TypeScript and Tailwind CSS from this design.

Проверка: агент сгенерировал реализацию в нужном стеке, а основные блоки, тексты и стили соответствуют макету.

Ограничение: сгенерированный код требует обычной инженерной проверки, включая адаптивность, доступность и поведение компонентов.

Синхронизация дизайн-токенов

Задача: использовать одинаковые цвета, типографику и интервалы в дизайне и CSS.

Условие: в проекте есть файл с CSS-переменными либо переменные уже определены в pen.dev.

Действие: попросите агента создать переменные pen.dev из globals.css или перенести переменные макета обратно в CSS.

Проверка: значения совпадают в обоих представлениях, а компоненты используют переменные вместо произвольных цветов и размеров.

Ограничение: синхронизация выполняется по явной команде. После следующих изменений её нужно запускать повторно.

Ограничения и меры предосторожности

  • Исходный код pen.dev пока не опубликован, согласно официальной странице AI Integration.
⚠️
Внимание: В .pen пока нет автосохранения. Регулярно нажимайте Cmd/Ctrl + S и делайте Git-коммиты.
  • AI-правки могут оказаться неожиданными. Формулируйте запросы конкретно и проверяйте результат на канвасе и в слоях.
  • Перед крупной правкой фиксируйте рабочую версию в Git, чтобы можно было сравнить изменения или откатиться.
  • Наличие двустороннего процесса не гарантирует полного визуального соответствия. Проверяйте адаптивные состояния, типографику и доступность уже в работающем приложении.
  • Некоторые функции Cursor могут зависеть от подписки Cursor Pro.
  • Материал основан на официальной документации; описанные команды и процессы не проверялись запуском в этом редакторском проходе.

Официальные ссылки

Следующий шаг

Разобраться в общей архитектуре подключения агентов к инструментам поможет справочник MCP (Model Context Protocol) — стандарт подключения ИИ к внешним системам.

Если вы выбираете дизайн-слой для агентной разработки, можно обсудить подходящий процесс, границы автоматизации и способ проверки результата.

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov