Pencil — новый бесплатный инструмент, который объединяет возможности Figma с AI-дизайном через MCP-серверы и позволяет создавать полноценные лендинги, адаптивы и дизайн-системы с помощью промтов — без написания кода и без платной подписки.
Что такое Pencil и зачем он нужен
Pencil — это инструмент, который объединяет два мощных подхода:
- Визуальный редактор в стиле Figma: слои, flex-контейнеры, компоненты, переменные, автолейауты.
- AI-дизайн через MCP-сервер: вы подключаете Claude CLI, OpenAI Codex или другой инструмент — и AI дизайнит прямо внутри холста.
По сути, это то, что Figma пытается внедрить в виде встроенного AI — но здесь это уже доступно и пока полностью бесплатно. Pencil доступен как расширение для VS Code / Cursor, так и в виде отдельного приложения.
Как создать лендинг с нуля: пошаговый процесс
- Техническое задание. Промт в Claude — и получаем готовое ТЗ с описанием блоков лендинга, контентом и структурой. Ничего не нужно придумывать с нуля.
- Визуальный референс. Вставляем скриншот понравившегося дизайна прямо в чат — AI берёт его за основу стиля.
- Генерация дизайна. Отправляем ТЗ + референс. AI читает гайдлайны, формирует переменные (цвета, шрифты, токены) и строит страницу блок за блоком.
- Первый драфт за считанные минуты: шапка с навигацией и CTA, секция виджета, три шага, отзывы, FAQ, футер.
Инструменты правки: sticky notes и ручное редактирование
После генерации дизайн неизбежно требует доработки. В Pencil для этого есть два подхода:
- Sticky Note. Перетаскиваете заметку прямо на проблемный блок, пишете замечание («высота карточек не одинаковая»), нажимаете Run — AI делает скриншот, находит блок и исправляет. Быстро и наглядно.
- Ручное редактирование. Все инструменты Figma на месте: flex-контейнеры, rectangle, импорт SVG-иконок, перетаскивание слоёв. Если умеете верстать — всё интуитивно понятно.
Дизайн-система: переменные и компоненты
При генерации AI автоматически выносит стили в переменные:
- Акцентные и фоновые цвета
- Типографика (display, body, caption)
- Скругления, отступы, gap-значения
Это обеспечивает консистентность: каждая следующая страница или экран будет строиться на той же теме. Поддерживается и мультитема — например, светлая + тёмная. Компоненты тоже создаются и переиспользуются, что особенно полезно при экспорте в Figma или при дальнейшей вёрстке.
Адаптив — одним промтом
Выделяете весь лендинг, пишете «Сделай адаптив под мобильное устройство» — и рядом появляется второй фрейм с мобильной версией. Шрифты, виджеты, меню — всё пересчитывается автоматически. Это значительно удобнее, чем делать адаптив в коде: вы видите готовую мобильную раскладку и можете использовать её как точный макет для вёрстки.
Экспорт в HTML через MCP-сервер
Прямого экспорта в HTML нет, но есть MCP-сервер — и это даже лучше. Открываете терминал, запускаете Claude с командой сверстать страницу из открытого Pencil-файла, и AI:
- Читает структуру макета через MCP
- Получает все параметры: шрифты, цвета, иконки, отступы
- Генерирует HTML/CSS (или сразу Next.js / Angular — на ваш выбор)
Таким образом, дизайн и вёрстка замыкаются в единый автоматизированный пайплайн.
Импорт макетов из Figma
Существующие Figma-макеты переносятся через обычный Ctrl+C / Ctrl+V. Структура, стили и наименования слоёв сохраняются. Но есть нюансы:
- Цвета некоторых иконок при вставке могут слетать.
- Если автолейауты в Figma настроены некорректно — элементы могут «улетать» в Pencil.
В целом инструмент справляется, но требует проверки после импорта.
Вывод: кому и когда использовать Pencil
Pencil — сильный инструмент для быстрого прототипирования и создания реальных дизайн-макетов с помощью AI. Он особенно полезен:
- Разработчикам, которым нужен дизайн без дизайнера
- Продуктовым командам на этапе MVP и быстрых итераций
- Тем, кто хочет получить адаптивный макет и сразу сверстать его через MCP
Пока инструмент бесплатный — это уникальное окно возможностей. С ростом аудитории цены, скорее всего, появятся. Но уже сейчас Pencil закрывает большую часть задач, которые раньше требовали платной Figma и отдельного дизайнера.
Как разработчик, смотрю на Pencil прежде всего через призму экспорта: если MCP-сервер действительно читает структуру макета и генерирует чистый HTML — это меняет пайплайн. Обычно дизайнер делает в Figma, разработчик переверстывает с нуля. Здесь же можно получить рабочую базу напрямую из макета. Надо проверить, насколько чистый код на выходе.
Тестировал Midjourney и DALL-E для генерации визуалов под лендинги — результат красивый, но вставить это в реальный макет всё равно нужно руками. Pencil закрывает именно этот gap: AI не просто рисует, а строит структуру прямо в редакторе. Для небольших проектов и стартапов, где нет выделенного дизайнера, это может быть реальной экономией.
Слежу за тем, как AI-инструменты выходят за рамки чат-ботов и встраиваются в реальные рабочие процессы. Pencil — хороший пример: MCP-сервер превращает Claude из текстового помощника в полноценного участника дизайн-процесса. Мы у себя уже тестируем похожий подход с генерацией контента через API — интересно, насколько Pencil стабилен при работе с большими проектами.
Давно слежу за тем, как AI встраивается в дизайн-инструменты — пробовал Canva AI и Prezi с генерацией слайдов, но там AI скорее помощник, а не исполнитель. Pencil интересен именно тем, что AI работает через MCP напрямую с холстом, а не просто предлагает варианты. Адаптив одним промтом — это то, чего очень не хватает в том же Canva. Надо будет потестировать в связке с Claude.