> ## Content Index
> Fetch the complete content index at: https://matveev.tech/llms.txt
> Use this file to discover other available public pages before exploring further.

# Pencil: дизайн в IDE через MCP
- URL: https://matveev.tech/pencil-dev-mcp-design-canvas/
- Published: 2026-03-17T09:00:49.000Z
- Updated: 2026-03-17T09:00:49.000Z
- Description: Pencil — канвас для дизайна, который живёт в IDE. Файлы .pen хранятся в Git, AI рисует макеты через MCP, на выходе — HTML, CSS и React.
- Author: Pavel Matveev
- Tags: Dev Tools, AI, Дизайн, MCP, Vibe Coding, Обзор

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

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

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

![Канвас Pencil в IDE — дизайн интерфейса прямо рядом с кодом](https://matveev.tech/content/images/2026/03/pencil-dev-canvas.png)

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

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

По [документации](https://docs.pencil.dev/getting-started/ai-integration?ref=matveev.tech) Pencil работает с Claude Code, Cursor, VS Code, Windsurf, OpenAI Codex CLI, OpenCode CLI и Claude Desktop. Вообще, если твой инструмент поддерживает MCP — скорее всего, подключится.

## Что умеет

### Vibe designing

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

![Генерация HTML/CSS/React кода из дизайна Pencil](https://matveev.tech/content/images/2026/03/pencil-dev-code-gen.png)

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

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.![](https://static.ghost.org/v5.0.0/images/link-icon.svg)Pencil![](https://matveev.tech/content/images/thumbnail/og-image-2.png)](https://www.pencil.dev/?ref=matveev.tech)

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

- [UI UX Pro Max: AI-навык для дизайна в Claude Code и Cursor](https://blog.matveev.tech/ui-ux-pro-max-skill-obzor/?ref=matveev.tech) — ещё один подход к дизайну через AI-агентов
- [Топ-6 AI-агентов для кода в 2026](https://blog.matveev.tech/luchshie-ai-agenty-dlya-koda-2026/?ref=matveev.tech) — обзор инструментов, с которыми Pencil интегрируется