Описание
pen.dev — это агентный дизайн-канвас от High Agency Inc., производителя, ранее известного как Pencil (pencil.dev). Продукт теперь описывает себя как созданный для разработки программного обеспечения, а не только статических экранов: дизайнеры и разработчики работают на открытом холсте, где ИИ-агенты могут проектировать вместе с ними, уточнять существующую работу или создавать новые экраны по запросу.
Читать далее
Холст сохраняет дизайны в открытом файловом формате .pen, простом JSON-файле, который могут читать и редактировать как люди, так и агенты, хранящемся в том же кодовом базисе, что и продукт, который он описывает. Работа происходит либо вручную, с использованием инструментов, знакомых из Figma и Sketch, таких как инструмент пера, градиенты, компоненты и гибкая компоновка, либо путем направления агента на создание, уточнение или расширение экрана. Встроенный браузер и расширение для Chrome позволяют пользователям импортировать любую веб-страницу, приложение или дизайн прямо на холст в виде редактируемых слоев, а файлы Figma, включая векторы, текст и стили, импортируются напрямую.
Пользователи приносят свою собственную модель на холст: pen.dev работает с Claude, GPT, Grok, Qwen, Gemini, Kimi, DeepSeek и Minimax, подключенными через существующую подписку на ChatGPT или Claude, API-ключ или MCP, WebMCP или командную строку. Тот же MCP-ссылка позволяет таким инструментам, как Claude Code, Codex, Cursor или Antigravity, проектировать безголовным образом через CLI pen.dev, не открывая холст вообще.
Другие функции канваса включают эффекты шейдеров в реальном времени, называемые Vibe Shaders, рисование иконок и иллюстраций с помощью ИИ, называемое AI Pen, общие библиотеки компонентов между файлами и собственный конвейер рендеринга WebGL, созданный для плавной работы с тысячами слоев или десятками гигабайт контента. Завершенная работа экспортируется в формате PNG, JPEG, WEBP или PDF в любом масштабе, в HTML и CSS или Tailwind одним щелчком мыши, или в виде ссылки для совместного использования, которая открывает последнюю версию в любом браузере. Встроен режим слайдов и презентаций для превращения работы на холсте в колоду.
pen.dev в настоящее время бесплатен; компания заявляет, что четко опишет любой платный план перед его оплатой. Он поставляется как загружаемое настольное приложение, а также расширения для браузера и редактора для Chrome, VS Code, Cursor и OpenVSX и поддерживается программой Speedrun от a16z. Он подходит для продуктовых дизайнеров и небольших команд разработчиков программного обеспечения, которые хотят перемещаться между визуальным дизайном и рабочим кодом без переключения инструментов, больше, чем для команд, ищущих чисто графический продукт.
- КатегорияИИ-инструменты для UI/UX-дизайна
- Модель ценообразованияFreemium
- РазвёртываниеРабочий стол, Расширение IDE, CLI
- ПлатформыmacOS, Windows, Linux
Основные функции pen.dev
Открытый формат файлов .pen, который агенты могут читать и редактировать нативно
Поддержка «принеси свою модель» для Claude, GPT, Gemini, Grok, Qwen, Kimi, DeepSeek и Minimax
Подключения MCP, WebMCP и CLI для безголовного дизайна от Claude Code, Cursor или Codex
Встроенный браузер и расширение для Chrome для импорта любой веб-страницы как редактируемых слоев
Импорт Figma, который сохраняет векторы, текст и стили
Пользовательский холст WebGL, созданный для плавной работы с тысячами слоев
Vibe Shaders для визуальных эффектов и градиентов в реальном времени
AI Pen для генерации иконок и иллюстраций с помощью агентов
Экспорт в HTML/CSS/Tailwind или PNG/JPEG/WEBP/PDF одним щелчком
Режим слайдов и презентаций для превращения работы на холсте в колоду
Как использовать pen.dev?
Скачать: Получите настольное приложение pen.dev или добавьте расширение для Chrome, Cursor или VS Code.
Начать холст: Откройте пустой холст или импортируйте дизайн из Figma, веб-страницы или своего собственного кодового базиса.
Подключить модель: Войдите с подпиской на Claude или ChatGPT, добавьте API-ключ или свяжите агента через MCP.
Дизайн или запрос: Рисуйте вручную с помощью инструмента пера и компонентов или попросите агента создать или уточнить экран.
Добавить эффекты: Применяйте шейдеры, градиенты и иконки, нарисованные ИИ, где это необходимо.
Экспортировать или поделиться: Экспортируйте в HTML/CSS, форматы изображений или PDF, или отправьте ссылку на последнюю версию.
Варианты использования pen.dev
- Агентный UI-дизайн
- Передача дизайна в код
- Клонирование веб-страниц
- Безголовной дизайн через MCP
