Open Design — мечта каждого vibe-кодера

Это руководство — практический playbook по Open Design для vibe-кодера: подключите того агента, которым вы уже пользуетесь, выберите дизайн-систему, чтобы результат не кричал «сгенерировано ИИ», задайте промпт для структуры, которая действительно конвертирует, и дальше дорабатывайте всё через диалог. Оно повторяет три идущие подряд сборки, которые Sean Kochel показывает в своих практических демо — лендинг, мобильное приложение и десктопное приложение — переписанные и обновлённые под текущий релиз. Посмотрите видео выше, чтобы увидеть процесс вживую, или читайте текстовую версию ниже.

Рабочее пространство Open Design — прототипы, презентации, изображения и видео на одном спокойном и привычном холсте.

Что такое Open Design?

Open Design — это открытая, local-first дизайн-платформа, которая работает поверх того кодинг-агента, которым вы уже пользуетесь. Она находит CLI, уже установленные на вашей машине — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode и ещё пару десятков других — и позволяет этому агенту управлять генерацией. Как говорит Шон: есть слой CLI, где вы настраиваете своего агента, есть системный промпт, который задаёт качество, а есть то, что делает всё это ценным — поддержка скиллов и обширная библиотека дизайн-систем. Результат — это настоящие HTML-файлы, так что всё, что вы создаёте, ложится прямо в ваш реальный проект.

Почему это важно для vibe-кодеров:

• Подключаете своего агента и свой ключ — никаких вторых подписок, никакой привязки к провайдеру.
• Работает локально — на выходе HTML, который можно перенести прямо в кодовую базу.
• Дизайн-системы убирают вид «AI-мусора» — вы стартуете с настоящего бренда, а не с чистого листа.
• Скиллы настраиваемы — добавляйте собственные правила копирайтинга, UX-парадигмы или процессы.
• Открытый код, Apache-2.0 — читайте, форкайте, делайте на нём клиентские проекты.

Две проблемы, с которыми сталкивается любая vibe-сборка

Шон строит весь процесс вокруг двух типов провалов, и их стоит назвать, потому что весь остальной playbook — это то, как их избежать:

1. Выглядит как AI-мусор. Шаблонные градиенты, один и тот же serif-шрифт, «суп из контейнеров» — такое вам и самим не нравится.
2. Не выстроено под свою задачу. Лендинг, который не конвертирует; приложение, логика которого не складывается.

Дизайн-система решает первую проблему. Продуманный промпт с реальной структурой решает вторую. Держите оба пункта в голове для каждой сборки ниже.

Шаг 1 — Установите Open Design и выберите агента

Есть три способа начать:

Способ	Кому подходит	Требования
Десктопное приложение	Большинству — без настройки	Ничего. Просто скачайте и откройте.
Запуск из исходников	Разработчикам, которые хотят читать или менять код	Node ~24, pnpm 10.33.x
Установка в своего агента	Тем, кто живёт в терминале	Уже установленный CLI кодинг-агента

Самый быстрый путь — десктопное приложение: скачайте его с open-design.ai/download; оно само находит CLI агентов, уже доступные в вашем PATH. Чтобы вместо этого запустить из исходников:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Откройте локальный URL, который она выведет (используется динамический порт — не прописывайте его жёстко). При первом запуске укажите Open Design агента, который будет вести работу, или подключите собственный API-ключ.

Шаг 2 — Соберите лендинг, который конвертирует

Это первое демо Шона, и оно задаёт шаблон для всего остального:

1. Выберите дизайн-систему. В демо он выбирает систему Anthropic. Это ваш барьер против «мусора» — агент наследует палитру, типографику и язык компонентов этого бренда.

Библиотека дизайн-систем: каждая запись разбирает реальный бренд на палитру, типографику, компоненты и визуальную атмосферу, которые можно переиспользовать.

2. Прописывайте структуру, а не только настроение. Шон точно указывает, какие секции построить — их одиннадцать — и вставляет краткое резюме (executive summary) из своего PRD (видение продукта, постановка проблемы, целевой пользователь, предлагаемое решение, ключевые функции), чтобы у текста был реальный контекст для работы.
3. Ответьте на уточняющие вопросы. Как и Claude Design, Open Design задаёт уточняющие вопросы, прежде чем начать писать. Здесь он берёт свой скилл лендинга для SaaS, чтобы выполнить задачу — а поскольку скиллы это просто файлы, вместо него вы могли бы загрузить как скилл собственные правила копирайтинга или структуру секций.
4. Дайте ему отработать. Примерно через пять минут у него готов профессиональный первый вариант — реальная структура, ориентированная на конверсию, аккуратная сравнительная таблица, со вкусом оформленная карточка кейса, добротный FAQ.

Хотите другое ощущение? Шон прогоняет ровно тот же бриф в брутализме вместо редакционного стиля и получает заметно другой дизайн — та же структура, другая «обёртка», потому что основную работу делает дизайн-система.

Шаг 3 — Соберите мобильное приложение, экран за экраном

Для мобильного демо Шон работает по одному экрану за раз. Он сохраняет ту же дизайн-систему Anthropic, а затем для каждого экрана вставляет промпт, собранный из своего PRD — домашняя лента, экран рекомендаций «заполни пробелы», быстрый дневник питания. Агент задаёт уточняющие вопросы, делает макет в стиле iOS и придерживается выбранной дизайн-системы на всех трёх экранах.

Урок: то, как вы прописываете UX, определяет бо́льшую часть результата. Когда он переформулирует то же приложение как chat-first интерфейс коучинга, он получает совершенно другой — но при этом цельный — набор экранов. Дизайн-система удерживает всё в рамках бренда; ваш промпт определяет парадигму.

Библиотека шаблонов: отправные точки для прототипов, слайдов, изображений и видео, которые можно фильтровать по типу и форкать, чтобы начать.

Шаг 4 — Перейдите в мультимодальность: от экранов к десктопному приложению

Последнее демо показывает мультимодальный трюк. Шон делает скриншоты своих трёх мобильных экранов, бросает их в новый чат и даёт открытую задачу: «сделай макет веб-версии этой основной функциональности». Через пять минут у него аккуратный трёхпанельный десктопный вариант — навигация слева, рабочий холст по центру, панель прогресса справа — и взаимодействия через slash-команды тоже намечены.

Даже размытый промпт плюс референсные изображения дают вам пригодную для работы отправную точку. С нормальной спецификацией всё получается точнее, но суть остаётся: вы можете свободно перемещаться между форматами.

Советы

• Всегда начинайте с дизайн-системы. Это самый мощный рычаг против вида «AI-мусора».
• Прописывайте структуру явно. Перечислите секции или экраны; вставьте реальный контекст из PRD, чтобы текст не был пустым.
• Опирайтесь на скиллы — и пишите свои. Скиллы это просто файлы; загружайте свои правила копирайтинга или UX-парадигмы прямо в рабочий процесс.
• Дорабатывайте через диалог. Разные формулировки UX дают очень разные результаты; это фича, так что попробуйте несколько.
• Используйте референсные изображения. Делайте скриншоты существующих экранов и подкидывайте их, чтобы переносить идеи между форматами.
• Помните, что на выходе HTML. Он создан для того, чтобы лечь в уже начатый проект.

FAQ

Обязательно ли использовать конкретную модель? Нет. Open Design управляет любым агентом, которого вы настроили — Claude Code, Codex, Cursor, Gemini, OpenCode и другими — или вашим собственным API-ключом. Никакой привязки к провайдеру.

Чем это отличается от Claude Design? То же привычное ощущение, но бесплатно, с открытым кодом, local-first, без привязки к модели и куда более настраиваемо — вы можете добавлять собственные скиллы и процессы. Плюс генерация изображений и видео, которой инструмент с одним провайдером вам не даст.

Могу ли я встроить то, что собрал, в существующее приложение? Да — на выходе HTML-файлы, так что они рассчитаны на то, чтобы лечь в уже начатый проект. Спецификационные сценарии слияния Шон разбирает в отдельном видео.

Это бесплатно? Приложение с открытым кодом под Apache-2.0 и бесплатно для локального запуска. Вы платите только за использование модели и медиа того агента и тех провайдеров, которых подключаете.

---

Это текстовое руководство основано на практических демо Шона Кочела (Sean Kochel). Посмотрите полное видео выше и подпишитесь на Sean Kochel, чтобы увидеть больше воркфлоу по сборке на ИИ.