pen.dev

Привычный графический редактор встречается с кодом и автономными агентами. pen.dev устроен как бесконечный холст на базе WebGL, который спокойно держит десятки тысяч слоёв и тяжёлую графику на шестидесяти кадрах в секунду. Сюда подключаются Claude, OpenAI, Gemini, DeepSeek и другие модели: агент не просто комментирует макет в сайдбаре, а сам двигает кривые, собирает экраны и генерирует векторные иконки инструментом AI Pen прямо на рабочей плоскости.

Что умеет

• Связка с агентами и средами. Поддерживает подключение моделей через API-ключи, подписки ChatGPT и Claude, а также протокол MCP. Позволяет связывать холст с Cursor, Claude Code, Codex или управлять процессом без интерфейса через собственный CLI.
• Импорт живого веба и макетов. Забирает любую веб-страницу целиком через встроенный браузер или Chrome-расширение, моментально разбирая её на редактируемые векторные слои. Поддерживает вставку файлов Figma и прямой копипаст.
• Графика и шейдеры. Помимо классического пера и меш-градиентов, холст снабжён шейдерами реального времени для генерации процедурных текстур, шумов и визуальных эффектов.
• Дизайн-система. Полноценные компоненты со слотами под контент, переменные стилей, общие UI-библиотеки и flex-разметка.
• Открытый формат .pen. Файлы сохраняются в открытом формате JSON, с которым нейросети могут работать напрямую без сторонних парсеров.
• Экспорт разметки. Переводит выбранные фреймы в HTML и Tailwind в один клик, а также экспортирует графику в PDF, PNG, JPEG и WEBP с масштабированием.

Нас подкупило, что авторы отказались от идеи «нейросети как отдельного чатика справа». Когда сайт из браузера вставляется на холст редактируемыми шейпами, а подключённый агент перекраивает компоненты по знакомым хоткеям из Figma — дистанция между идеей и рабочим интерфейсом сокращается до минимума.