Pencilфайл .pen в репозиторииriviera.penвекторный файл холста, версионируется в GitUI-китвстроенные компонентыПравка: более спокойный заголовокредактирование на холсте или блок промпта
Pencil 
OpenDesign Полностью открытая альтернатива Pencil.dev: OpenDesign
OpenDesign и Pencil необычайно близки: оба управляются агентами и хранят дизайн в виде файлов в вашем репозитории под управлением Git. OpenDesign — это бесплатная, полностью открытая, независимая от провайдеров альтернатива: Apache-2.0 для всего приложения, BYOK с любым крупным ИИ-агентом для написания кода, а также результаты, охватывающие UI, презентации, прототипы и дизайн-систему. На этой странице рассказывается, где они пересекаются, в чем холст Pencil действительно выигрывает, и как перейти с одного на другой.
Вердикт по задачам12 / Pencil
OpenDesign против Pencil, три разные потребности
Начните в правильном месте
Эта страница · выбор
OpenDesign или Pencil?
Вердикт по ситуации, один бриф в обоих инструментах, сравнение функций на текущую дату и условия, которые меняют ответ.
Читать вердикт Уже используете PencilПеренос дизайна .pen в OpenDesign
Оба хранят файлы в репозитории, поэтому ничего не теряется при облачном экспорте. Что переносится, что остается на холсте, и четыре шага.
Посмотреть, что переносится Другой вопросУходите из Figma, а не из Pencil?
Если холст, который вы покидаете, принадлежит Figma, это сравнение также охватывает совместную работу и Dev Mode.
Читать OpenDesign против FigmaНа этой странице Обзор
Что представляет собой каждый из них
Pencil против OpenDesign: что представляет собой каждый инструмент
Pencil и OpenDesign разделяют общую идею — управляемый агентами дизайн, хранящийся в виде файлов в вашем репозитории, — и различаются тем, что именно открыто, какие агенты являются первоклассными и насколько широк спектр результатов. OpenDesign пишет это сравнение о собственном продукте и не связан с Pencil.
Краткий ответ. OpenDesign — это бесплатная, полностью открытая (Apache-2.0), local-first альтернатива Pencil: та же идея управляемого агентами дизайна в виде файлов в репозитории, но с открытым исходным кодом всего приложения, а не только формата файлов, независимым от провайдеров BYOK для Claude, Codex, Cursor, Gemini, OpenCode и Qwen, а также результатами, охватывающими UI, лендинги, презентации, прототипы и дизайн-систему DESIGN.md. В нем нет векторного холста; если ручное редактирование подобного Figma холста внутри вашей IDE с нативной вставкой из Figma — это то, что вы цените, оставайтесь на Pencil.
Pencil
Pencil (pencil.dev) — это "дизайн на холсте, воплощение в коде": бесконечный векторный холст для дизайна, который живет внутри вашей IDE и кодовой базы, при поддержке a16z Speedrun. Дизайн-файлы используют открытый, задокументированный формат .pen JSON, который находится в вашем репозитории под управлением Git, а локальный сервер MCP позволяет ИИ-агентам читать и писать в них. Он поставляется со встроенными UI-китами и нативным копированием-вставкой из Figma, и бесплатен на этапе раннего доступа.
- РаботаетЛокальное десктопное приложение, расширение для IDE и локальный сервер MCP
- МодельMCP с несколькими агентами, оптимизировано для Claude Code
- РезультатФайлы .pen JSON в вашем репозитории; экраны UI и компоненты в код
- СтоимостьБесплатно в раннем доступе; заявлены платные тарифынет опубликованных лимитов
OpenDesign
OpenDesign — это local-first дизайн-агент с открытым исходным кодом, на который вы направляете своего собственного ИИ-агента для написания кода. Навыки и портативный бренд живут в виде файлов в вашем репозитории; десктопное приложение рендерит и проверяет результат.
- РаботаетДесктопное приложение и локальный демон на вашей машине
- АгентВаш: Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen и другие
- РезультатФайлы в директории вашего проекта
- СтоимостьApache-2.0; вы платите своему провайдеру за использование API
Где они пересекаются
Управляемые агентами дизайн-файлы в репозитории под управлением Git и UI, который становится кодом. Это большая часть того, что делают оба инструмента, и все, что сравнивается на остальной части страницы.
О чем эта страница не заявляет
О том, что в OpenDesign есть векторный холст, панель слоев, встроенные UI-киты или нативная вставка из Figma, или что файлы .pen конвертируются автоматически. Если холст — это главное, вердикт ниже гласит: оставайтесь на Pencil.
Вердикт
Pencil или OpenDesign? Вердикт по ситуации
Выбирайте Pencil, если…
- Вы хотите вручную редактировать зрелый, подобный Figma векторный холст внутри Cursor или VS Code.
- Вы часто вставляете из Figma и вам нужно, чтобы слои и auto-layout оставались нетронутыми.
- Встроенные UI-киты и опыт работы с агентом, ориентированным в первую очередь на Claude, — это то, что вы цените больше всего.
Выбирайте OpenDesign, если…
- Вам нужен полностью открытый инструмент — чтобы форкать, проверять и хостить самому, а не только документированный формат.
- Вы хотите, чтобы «бесплатно» оставалось бесплатным, без ограничений от вендора после раннего доступа; вы платите только за использование моделей.
- Вам нужен независимый от провайдеров BYOK: Claude, Codex, Cursor, Gemini, OpenCode и Qwen поддерживаются на равных.
- Вам нужны UI, презентации, прототипы и дизайн-система, сгенерированные из одного DESIGN.md.
Используйте оба, если…
Посмотреть, что меняется, а что остается
- Дизайнеры рисуют на холсте Pencil; остальные артефакты генерируются в том же стиле в OpenDesign.
- Вам нужен открытый запасной вариант на случай, если цены после раннего доступа или оптимизация под Claude перестанут вас устраивать.
- Оба инструмента хранят файлы в репозитории, поэтому их параллельное использование почти ничего не стоит.
Один бриф, два результата
Один и тот же бриф в Pencil и OpenDesign
Сравнение честно лишь настолько, насколько честны его исходные данные. Один и тот же бриф и один и тот же бренд загружаются в Pencil и в OpenDesign; то, что возвращается, как это редактируется и что еще из этого можно отрендерить — вот что вы сравниваете. Панели ниже — это иллюстрации, а не скриншоты; 20-минутный тест позволяет вам запустить бриф самостоятельно.
Бриф · идентичен в обоих инструментах
Спроектируйте лендинг для небольшой студии, которая бронирует жилье для медленных путешествий. Один главный экран с сильным заголовком, три избранных места, короткая заметка о том, как работает бронирование, и финальный призыв к действию. Десктоп и телефон.
- Бренд
- Бумажный фон, Albert Sans, один зеленый акцент, скругление 8px
- Брейкпоинты
- 1440 десктоп, 390 мобильный; без горизонтальной прокрутки
- Тест редактирования
- После первого результата: «сделай заголовок спокойнее, замени второе место»
- Запись
- Модель, дата, время до первого результата, необходимые правки, формат экспорта
Pencilфайл .pen в репозиторииOpenDesign + ваш агентфайлы в репозиторииriviera-landing.htmlновый · v2DESIGN.mdпривязанПравка: более спокойный заголовокукажите на элемент, агент пересмотрит
ИллюстрацияОбе панели являются иллюстрациями, нарисованными для этой страницы, а не скриншотами какого-либо из инструментов, и вердикт не основывается на них. Запустите бриф самостоятельно с помощью 20-минутного теста ниже и обратите внимание на перечисленные здесь пункты, чтобы оба результата можно было сравнить справедливо.
На что обратить внимание · оба инструмента
Модель и версия, дата прогона, время до первого пригодного результата, количество правок до готовности, что содержал экспорт.
На что обратить внимание · Pencil
Какой агент работал через MCP и как он вел себя вне Claude, чисто ли файл .pen конвертировался в код и обратно, что сохранилось при вставке из Figma.
На что обратить внимание · OpenDesign
Использованный агент и ключ, соблюдался ли DESIGN.md без повторных промптов, проверены ли оба брейкпоинта, сохранены ли версии как файлы.
Функция за функцией
OpenDesign против Pencil, функция за функцией
Девять аспектов, в которых OpenDesign и Pencil различаются на практике: лицензия, среда выполнения, файлы дизайна, аккаунт, стоимость, модель, основная поверхность, диапазон вывода и зрелость. Факты о Pencil были проверены по открытым источникам 2026-09-06; условия раннего доступа могут измениться.
| Измерение | OpenDesign | Pencil |
|---|---|---|
| Лицензия | Apache-2.0; все приложение с открытым исходным кодом | Приложение с закрытым исходным кодом; документирован только формат .pen |
| Среда выполнения | Локальный демон и десктопное приложение | Локальное десктопное приложение, расширение IDE и локальный сервер MCP |
| Файлы дизайна | Файлы в вашем репозитории: DESIGN.md и артефакты | JSON-файлы .pen в вашем репозитории |
| Аккаунт | Не требуется | Вход, ранний доступ |
| Стоимость | Бесплатно и с открытым исходным кодом; ваши собственные расходы на модели | Бесплатно в раннем доступе; заявлены платные тарифыусловия могут измениться |
| Модель | Независимый от провайдеров BYOK: Claude, Codex, Cursor, Gemini, OpenCode, Qwen | MCP с несколькими агентами, оптимизировано для Claude Code |
| Основная поверхность | Управляется агентом: от брифа до артефактов, плюс UI для ревью | Векторный холст в стиле Figma, который вы редактируете напрямую; агент через MCP |
| Диапазон вывода | UI, лендинги, презентации, прототипы, дизайн-системы | Экраны UI и компоненты в код |
| Свой хостинг / форк | Да | Нет; приложение с закрытым исходным кодом |
В чем выигрывает Pencil
Холст для ручной работы: зрелая поверхность в стиле Figma, которую вы редактируете напрямую, с нативной вставкой из Figma, сохраняющей слои и авто-лейаут, встроенными UI-китами, и все это внутри вашей IDE. Разработчик, который занимается дизайном, никогда не покидает редактор.
В чем выигрывает OpenDesign
Владение и диапазон: все приложение имеет открытый исходный код, BYOK не зависит от провайдеров, а не ориентирован на Claude, бесплатное остается бесплатным, потому что нет вендора, который будет на вас зарабатывать, а вывод охватывает гораздо больше, чем просто UI-в-код.
Решение
Когда OpenDesign — правильная альтернатива Pencil
Разработчик, который дизайнит в IDE
Рисуйте экран вручную, рядом с кодом, с помощью Claude Code
PencilХолст внутри Cursor или VS Code, нативная вставка из Figma и настройка в первую очередь под Claude — это именно рабочий процесс этого человека. OpenDesign не может предложить им холст.
Не подходит, если команда использует Codex, Gemini или Qwen вместо Claude.
Команда с политикой open-source
Весь инструмент должен быть доступен для аудита и форка
OpenDesignApache-2.0 для агента, библиотеки навыков и рендерера; документированный формат .pen — это не то же самое.
Не подходит, если политика удовлетворяется только открытым форматом файла.
Бренд для множества типов артефактов
Презентации, лендинги, прототипы и UI в одном бренде
OpenDesignОдин DESIGN.md рендерит их все без повторного промптинга; область применения Pencil — от UI до кода. См. решение для дизайн-системы.
Не подходит, если экраны UI — единственный результат.
Пользователь Pencil, страхующий ранний доступ
Бесплатно сегодня, заявлены платные тарифы
Использовать обаПродолжайте рисовать в Pencil; извлеките бренд в DESIGN.md и рендерите остальное в OpenDesign, чтобы ничего не зависело от ценообразования одного поставщика. Оба хранят файлы в репозитории.
Не подходит, если вы ожидаете, что файлы .pen и DESIGN.md будут синхронизироваться автоматически; они этого не делают.
Перенесите дизайн или используйте оба
Как перенести дизайн из Pencil в OpenDesign
Оба инструмента хранят дизайн в виде файлов в вашем репозитории, поэтому нет необходимости бороться с облачным экспортом с потерями. Переносится бренд и бриф посредством однократного извлечения из экспорта Pencil; файлы холста .pen остаются редактируемыми в Pencil.
| Переносится | |
|---|---|
| Бренд | Направьте своего агента на экспорт Pencil, вставку из Figma или скриншот; он извлекает цвета, шрифты, интервалы и голос в DESIGN.md. |
| Промпты | Обычный текст. Блоки промптов с холста вставляются в бриф OpenDesign как есть. |
| Сгенерированный код | Код, созданный Pencil из файла .pen, может служить структурным ориентиром; агент выполняет повторный рендеринг в соответствии с DESIGN.md, а не патчит его. |
| Остается в Pencil | |
| Файлы холста .pen | Векторные слои не конвертируются; выполните повторный рендеринг из брифа и DESIGN.md. |
| Встроенные UI-киты | Киты в стиле Shadcn перевыражаются через DESIGN.md и ваши собственные компоненты. |
| Нативная вставка из Figma | Если член команды продолжает вставлять из Figma, этот шаг остается в Pencil. |
-
Установите OpenDesign и откройте тот же репозиторий
Загрузите десктопное приложение и откройте репозиторий, в котором уже хранятся ваши файлы .pen, как проект. Быстрый старт рассматривает путь сборки из исходников отдельно.
-
Экспортируйте один экран Pencil в качестве ориентира
Экспортируйте PNG (или сгенерированный код) экрана, внешний вид которого вы хотите сохранить, и добавьте его в проект.
-
Попросите агента извлечь бренд в DESIGN.md
Проверьте файл вручную: один акцент, правильные шрифты, правильный радиус. Это единственный шаг миграции, требующий оценки.
-
Отрендерите исходный бриф с новым брендом
Выберите навык и отрендерите; отсюда каждый навык — UI, презентации, прототипы — рендерится в вашем бренде без повторного промптинга, и каждая версия является файлом.
Использование обоих
Оставьте Pencil для ручного редактирования UI на холсте; используйте OpenDesign для всего, что рендерится из бренда. Оба живут в одном репозитории; обновляйте DESIGN.md при изменении холста. Ничего не синхронизируется автоматически.
Резервный вариант и потери
Попробовав, вы мало что потеряете: файлы .pen в любом случае останутся в репозитории. Если рендеринг OpenDesign не удался, последняя версия остается на диске, а бриф не изменяется; повторите попытку с тем же агентом или другим.
20-минутный тест
Попробуйте OpenDesign на экране, который вы уже нарисовали в Pencil
Возьмите экран, который вы нарисовали в Pencil, и пересоберите его в OpenDesign с любым агентом, который вам нравится. Если результат не будет пригоден к использованию через двадцать минут, это сравнение сообщило вам нечто, что стоит знать.
1Задача
Вот PNG-экспорт экрана, который я спроектировал в Pencil. Извлеки его бренд в DESIGN.md, затем пересобери тот же экран из этого брифа, используя мои правила дизайна, и добавь обложку презентации из одного слайда в том же бренде. Проверь экран на ширине десктопа и мобильного устройства.
- 01Экран Pencil на входеPNG-экспорт экрана .pen, внешний вид которого вы хотите сохранить.
- 02DESIGN.md на выходеВаш бренд извлечен в файл рядом с файлами .pen — проверьте его вручную.
- 03Экран и обложка презентации, отрендеренныеЭкран на десктопе и телефоне плюс обложка презентации в том же бренде, затем одно редактирование путем указания на элемент.
2Это сработало, если…
- DESIGN.md закоммичен рядом с файлами .pen, и вы бы утвердили его токены.
- Экран рендерится при 1440 и 390 без горизонтальной прокрутки, а обложка презентации разделяет бренд.
- Одно редактирование ("более спокойный заголовок") применено путем указания на элемент, с агентом, отличным от Claude, если хотите.
- Две версии лежат рядом как файлы; ничего не было перезаписано молча.
Если это не сработало: убедитесь, что ваш агент подключен и аутентифицирован для выбранного вами режима, затем повторите попытку с меньшим брифом, прежде чем судить об инструменте.
Другие варианты
Другие альтернативы Pencil.dev
Часто задаваемые вопросы
Альтернатива Pencil.dev: FAQ
Является ли Pencil (pencil.dev) open source?
Не само приложение. Pencil — это продукт с закрытым исходным кодом, поддерживаемый a16z; открытым является формат файла .pen, который задокументирован, но может меняться. OpenDesign полностью open source под лицензией Apache-2.0 — все приложение, а не только формат.
Является ли Pencil.dev бесплатным?
Сегодня он бесплатен, явно находясь в раннем доступе, и основатели сигнализировали о платных тарифах и лимитах. OpenDesign бесплатен, потому что это open source; вы используете свой собственный ключ агента (BYOK), поэтому расходы на модели оплачиваются вами без ограничений со стороны поставщика.
В чем разница между OpenDesign и Pencil?
Они похожи: оба управляются агентами и хранят дизайн в виде файлов в вашем репозитории под Git. OpenDesign — это полностью open source, независимый от провайдера BYOK, а не ориентированный в первую очередь на Claude, и рендерит UI, презентации, прототипы и дизайн-систему; Pencil — это векторный холст в вашей IDE, ориентированный на переход от UI к коду. В вердикте перечислены условия для каждого.
Работает ли Pencil с агентами, отличными от Claude?
Да, он подключает несколько агентов через MCP, но он оптимизирован для Claude Code, и рецензенты сообщают о более слабом опыте в других местах. OpenDesign рассматривает Claude, Codex, Cursor, Gemini, OpenCode и Qwen как первоклассные.
Могу ли я продолжать использовать Pencil вместе с OpenDesign?
Да. Оба хранят файлы в одном репозитории, поэтому их параллельный запуск стоит недорого: рисуйте в Pencil, рендерите все остальное из DESIGN.md в OpenDesign. Посмотрите, что переносится, а что остается.
Действительно ли OpenDesign — это open source?
Да. Он находится на github.com/nexu-io/open-design под лицензией Apache-2.0 и может быть размещен на собственном сервере.
Связан ли OpenDesign с Pencil?
Нет. OpenDesign — это независимый open-source проект. Pencil — это отдельный продукт, поддерживаемый a16z, на pencil.dev; это независимое сравнение, написанное командой OpenDesign.
Попробуйте OpenDesign на одном реальном экране
Пересоберите экран, который вы нарисовали в Pencil, с любым кодящим агентом, оцените полный цикл, а затем принимайте решение. Выберите ситуацию, которая вам подходит; страница не определяет вашу конфигурацию.