Спроектируйте сайт в духе вашего бренда с помощью Open Design

Это руководство посвящено фирменному приёму Open Design: наведите его на ваш существующий сайт, и агент вытянет ваш настоящий бренд — шрифты, цвета, тон — в спецификацию, а затем спроектирует в вашем стиле. Также рассматривается установка настольного приложения в один клик и честный взгляд на то, почему стоит обратиться к открытой альтернативе. Оно следует практической сборке, которую Brendan O'Connell проводит в своём разборе, переписанной и приведённой в соответствие с текущим релизом. Смотрите видео выше для живого прогона или читайте дальше — текстовую версию.

Реальный сгенерированный прототип в предпросмотре — тёмная, кинематографичная лендинг-страница агентства.

Что такое Open Design?

Open Design — это открытая, ориентированная на локальную работу платформа для дизайна, которая работает поверх агента для кодинга, которым вы уже пользуетесь — Claude Code, Codex, Cursor, Gemini, OpenCode и других — или с вашим собственным ключом API. По сути это рабочее пространство в стиле Claude Design, которое вы запускаете на собственной машине, не будучи привязанным к облаку одного поставщика и без его лимитов использования. Оно под лицензией Apache-2.0, поставляется с обширной библиотекой навыков и дизайн-систем и добавляет сверху генерацию медиа (изображения, видео, аудио).

Зачем обращаться к открытой альтернативе

Мотивация Brendan конкретна, и её стоит повторить, потому что для многих это решающий фактор. Он сгенерировал одну дизайн-систему в закрытом облачном инструменте, и это съело ~75 % его недельного лимита — оставив его в тупике до следующей недели. Этот лимит отделён от обычного квоты тарифа, из-за чего рабочий процесс кажется почти непригодным для реальной итеративной работы. Запуск на вашей собственной подписке Claude Code (или любой другой) убирает эту стену: вы не упираетесь в отдельный лимит на дизайн и не заперты в одной экосистеме.

Шаг 1 — Установка (путь в один клик)

Самый простой путь, который рекомендует Brendan, — это настольное приложение: зайдите на open-design.ai/download и возьмите исполняемый файл для macOS или Windows. Приложение запускается за короткое время и автоматически обнаруживает CLI агентов, уже имеющиеся на вашей машине — Brendan ничего не настраивал; оно подхватило его подписку Claude Code и было готово к работе.

Предпочитаете терминал? Из исходников:

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

Откройте локальный URL, который оно выведет (порт динамический — не прописывайте его жёстко). Справа вы найдёте настройки: обнаруженные агенты, а также поставщиков медиа (OpenAI для изображений, MiniMax для видео, ElevenLabs для голоса), коннекторы (Composio MCP) и даже настольных питомцев. Вы также можете подключить собственный ключ для любого поставщика.

Шаг 2 — Проектирование на основе вашего существующего бренда

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

В видео Brendan наводит его на свой собственный сайт, и Open Design:

1. Получает страницу и считывает реальное содержимое.
2. Пишет brand-spec.md, фиксируя его фактический шрифт (он правильно распознал Fig Tree), его цвет и его дизайнерские решения — «никаких кнопок-пилюль, никаких полностью скруглённых карточек, акцентный цвет используется сдержанно, щедрые пробелы» — плюс его тон («без захлёбывающегося маркетинга»).
3. Генерирует DESIGN.md и строит страницу в этом стиле, сочетая его существующий бренд с более чистой компоновкой.

Рабочее пространство Open Design: опишите, что хотите создать, выберите режим, а остальное сделает ваш агент.

Перед сборкой Open Design прогоняет короткую форму обнаружения (одна страница или несколько? визуальное направление? соответствовать текущему сайту? реалистичные заглушки?), чтобы зафиксировать верное направление. Результат сохраняет его слоган, его синий цвет и его шрифт, а затем накладывает поверх более чёткую компоновку — многостраничный вывод, по которому можно пройтись кликами.

Шаг 3 — Просмотрите самопроверку против «шлака» и экспортируйте

Завершая работу, Open Design выполняет самопроверку против «шлака» — Brendan видит, как она подтверждает: «никаких эмодзи, один шрифт, один решительный штрих, настоящий позиционирующий текст повсюду». Это и есть ограждение, которое не даёт результату выглядеть сгенерированным.

Галерея HyperFrames: анимационные и видеоработы на основе кода, которые можно форкнуть и переработать.

Просмотрите вкладки примеры и дизайн-системы в поисках отправных точек (каждая дизайн-система даёт вам полностью редактируемый DESIGN.md), и когда останетесь довольны, экспортируйте артефакт как HTML, PDF или ZIP. Поскольку всё работает локально на вашем собственном агенте, во время итераций нет отдельного лимита на дизайн, в который можно упереться.

Советы

• Наведите его на ваш действующий сайт, чтобы унаследовать ваши настоящие шрифты, цвета и тон — самый быстрый путь к результату в духе бренда.
• Используйте настольное приложение для пути без настройки; оно автоматически обнаруживает вашего агента.
• Запускайте на вашей собственной подписке CLI, чтобы обойти отдельный недельный лимит на дизайн у закрытых инструментов.
• Прочитайте сгенерированные brand-spec.md / DESIGN.md — это редактируемые файлы, так что исправьте всё, что выборка распознала неверно.
• Уделите немного внимания промпту — более насыщенный бриф даёт заметно лучший первый результат.

ЧаВо

Действительно ли он может проектировать на основе моего существующего сайта? Да — у агента есть инструмент веб-выборки. Скажите ему проектировать для вашего сайта, и он считает ваши шрифты, цвета, решения по компоновке и тон в brand-spec.md, а затем спроектирует в этом стиле.

Нужно ли мне настраивать моего агента? Обычно нет. Настольное приложение автоматически обнаруживает уже установленные CLI агентов (Claude Code, Codex, Gemini и другие). Вы также можете подключить собственный ключ.

Есть ли у него лимиты использования закрытого инструмента? Никакого отдельного лимита на дизайн — генерация идёт через тот агент/подписку, что вы подключаете, поэтому вы не блокируетесь после одного дизайна.

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

---

Это текстовое руководство основано на разборе Brendan O'Connell. Посмотрите полное видео выше и подпишитесь на Brendan O'Connell, чтобы получать больше разборов инструментов с открытым исходным кодом.