Pencil.dev: дизайн в IDE, компоненты и быстрый прототип

Если ты вайбкодишь в Cursor или Claude Code, то наверняка сталкивался с этой вечной болью: накидал красивый дизайн в Figma → экспортировал → перекинул дизайнеру или сам переписал в код → что-то сломалось при адаптации → снова в Figma. Круг за кругом, потерянные часы и нервы.

Я это ненавидел. Поэтому когда увидел Pencil.dev — инструмент, который позволяет дизайнить прямо внутри IDE, а дизайн-файлы живут в твоём репозитории рядом с кодом, я сразу запросил доступ.

## Что такое Pencil.dev на самом деле

Pencil — это agent-driven MCP vector canvas (бесконечный векторный холст с поддержкой AI-агентов), построенный вокруг открытого формата файлов, который живёт прямо в твоём codebase.

Простыми словами:

• Ты открываешь файл .pen прямо в VS Code / Cursor
• Видишь бесконечный canvas как в Figma
• Дизайнишь вручную или просишь AI сгенерировать экраны
• Всё сразу превращается в чистый, production-ready код (HTML + Tailwind, React, etc.)
• Файлы дизайна коммитятся в Git вместе с кодом

Никаких «экспорт → импорт». Дизайн и код — это одно целое.

## Ключевые фичи, от которых я в восторге

1. Бесконечный canvas прямо в IDE
   Переключаешься между кодом и дизайном одним кликом. Никаких отдельных окон.

2. AI Multiplayer
   Пока ты рисуешь один экран, Claude параллельно генерирует второй и третий. Экономия времени огромная.

3. Vibe-designing с точностью пикселя
   Пишешь промпт прямо на canvas: «сделай современный hero с градиентом и тремя карточками». Или используешь curated actions (готовые кнопки действий).

4. Импорт из Figma 1:1
   Копируешь любой фрейм из Figma → вставляешь в Pencil. Векторы, текст, стили — всё остаётся.

5. Открытый формат .pen
   Это не чёрный ящик. Файл читается, дебаггится, можно писать свои инструменты. Полная свобода.

6. Bi-directional связь с кодом
   Изменяешь дизайн — код обновляется. Меняешь код компонента — дизайн подтягивается.

7. Интеграция с любыми агентами
   Работает с Cursor, Claude Code, OpenCode, VS Code + любые MCP-сервера (Playwright, базы данных, API и т.д.).

## Как установить и запустить за 10 минут

1. Заходишь на https://www.pencil.dev/ → Request Access (сейчас early access полностью бесплатный).
2. Получаешь ссылку на скачивание (есть версии для Mac (Apple Silicon + Intel), Windows, Linux AppImage/Tarball).
3. Устанавливаешь расширение Pencil в Cursor или VS Code.
4. Создаёшь в проекте файл mcp.json (инструкция в docs, 5 минут).
5. Создаёшь файл design.pen — и canvas готов.

Всё. Никаких сложных настроек.

## Реальный пример из моей практики

Делал лендинг для AI-инструмента:

• Создал landing.pen
• Набросал hero-секцию вручную (5 минут)
• Написал промпт: «добавь секцию testimonials в стиле glassmorphism, 4 карточки»
• AI сгенерировал за 30 секунд
• Импортировал pricing-таблицу из старого Figma
• Одним кликом превратил всё в React + Tailwind компоненты

Итог: полный лендинг (hero + features + testimonials + pricing + footer) за ~25 минут. Раньше на это уходило 2–3 часа + правки.

## Плюсы и честные минусы (после недели использования)

Плюсы:

• Полностью убирает дизайн-хэнд-оффы
• Дизайн в Git = ветки, PRы, ревью вместе с кодом
• Экономит кучу Claude-кредитов (потому что не нужно 50 раз перегенерировать в чате)
• Идеально для соло-разработчиков и маленьких команд
• Качество кода на уровне senior-frontend

Минусы (пока):

• Early stage: иногда мелкие баги с рендером сложных векторов
• Нет коллаборации (пока только один пользователь на проект)
• Desktop-приложение нужно держать открытым
• Работает лучше всего именно с Claude Code (другие модели пока слабее)

## Кому точно стоит попробовать прямо сейчас

• Ты вайбкодишь в Cursor/Claude Code
• Делаешь пет-проекты, лендинги, внутренние инструменты
• Устал от переключения между Figma и кодом
• Хочешь, чтобы дизайн был частью codebase, а не отдельным артефактом

Если ты из этой категории — Pencil.dev станет одним из самых полезных инструментов 2026 года.

## Итог

Pencil.dev — это не просто новый дизайн-инструмент. Это следующий шаг после Cursor: теперь и дизайн стал частью AI-native workflow.

Ссылка на официальный сайт: https://www.pencil.dev/

## Что читать дальше

• Как обновить дизайн сайта с ИИ: быстрый маршрут без хаоса
• Почему IDE важнее модели: база для стабильного вайбкодинга