Pencil: дизайн в IDE через MCP

TL;DR: Pencil — канвас для дизайна, который живёт прямо в твоём IDE. Файлы .pen хранятся в Git-репозитории, AI через MCP рисует и правит макеты, а на выходе — готовый HTML, CSS или React-код. Работает с Claude Code, Cursor, VS Code, Windsurf и OpenAI Codex.

Как работает Pencil

Pencil — бесконечный канвас для дизайна. Запускается как расширение для IDE или отдельное десктопное приложение. Файлы дизайна (формат .pen) лежат прямо в репозитории проекта.

Под капотом — MCP (Model Context Protocol). Когда Pencil запущен, он поднимает локальный MCP-сервер. AI-ассистент подключается и получает инструменты: создавать элементы, двигать, менять цвета, делать скриншоты для проверки. MCP тут двусторонний, то есть AI не просто читает файл, а реально рисует на канвасе.

С чем работает

По документации Pencil работает с Claude Code, Cursor, VS Code, Windsurf, OpenAI Codex CLI, OpenCode CLI и Claude Desktop. Вообще, если твой инструмент поддерживает MCP — скорее всего, подключится.

Что умеет

Vibe designing

Пишешь промпт прямо в контексте дизайна. «Создай дашборд с сайдбаром и графиками» — AI рисует на канвасе. «Сделай сайдбар уже», «поменяй кнопки на синие» — правит. Работает как vibe coding в Cursor, только вместо строчек кода ты двигаешь визуальные элементы.

Из вектора в код

Pencil генерирует HTML, CSS и React-компоненты из макета. Обещают pixel-perfect — насколько это правда на сложных лейаутах, я пока не проверял, но на демо выглядит убедительно.

Design as code

Файлы .pen — открытый формат. Можно дебажить, парсить своими скриптами. И они версионируются через Git: ветки, мерджи, диффы. Дизайнер сломал макет? git blame покажет кто и когда.

Импорт из Figma

Если у тебя уже есть дизайны в Figma, можно скопировать и вставить — векторы, текст, стили переносятся.

Готовые дизайн-kit's

Внутри есть готовые наборы компонентов — кнопки, формы, карточки. Можно собирать из них или подключить свою дизайн-систему из кодовой базы.

Как выглядит рабочий процесс

Типичная сессия по документации:

1. Запускаешь Pencil и Claude Code
2. Открываешь .pen файл в IDE
3. Пишешь: «Создай hero-секцию лендинга с заголовком и CTA»
4. AI через MCP рисует на канвасе
5. Уточняешь: «Добавь секцию фич в три колонки»
6. Просишь: «Сгенерируй React-компонент для всей страницы»
7. Коммитишь design.pen и landing.tsx вместе

Весь цикл без переключения между приложениями. Дизайн и код коммитятся в одном PR.

Pencil – Design on canvas. Land in code.

Pencil fundamentally increases your engineering speed by bringing designing directly into your preferred IDE.

Pencil

Что ещё почитать

• UI UX Pro Max: AI-навык для дизайна в Claude Code и Cursor — ещё один подход к дизайну через AI-агентов
• Топ-6 AI-агентов для кода в 2026 — обзор инструментов, с которыми Pencil интегрируется