Open Design — честное первое знакомство (баги, обходные пути и настройка любой модели)

Это руководство — намеренно честное первое знакомство с Open Design: то, что просто работает, и шероховатости, с которыми вы столкнётесь, показаны вживую, а не вырезаны при монтаже. В нём также рассматривается по-настоящему полезный приём: дёшево подключить любую модель через провайдера, совместимого с OpenAI. Оно основано на практическом обзоре, который Sasha (ИИШНЫЙ) записывает в своём разборе, адаптировано для этого текстового руководства и обновлено под текущий релиз. Посмотрите видео выше, чтобы увидеть процесс вживую, или читайте дальше текстовую версию.

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

Что такое Open Design?

Open Design — это платформа для дизайна с открытым исходным кодом и принципом local-first, agent-native альтернатива Claude Design. Проблема «фиолетовой ИИ-кашицы» (когда каждый сгенерированный UI выглядит одинаково) — это именно то, что пытаются решить подобные инструменты, и ответ Open Design в том, чтобы работать поверх кодового agent, которым вы уже пользуетесь, а не поставлять собственную модель. Он обнаруживает Claude Code, Codex, Cursor, Gemini, OpenCode и другие на вашей машине и использует их в качестве движка. Формулировка Саши: он собрал десятки тысяч звёзд на GitHub за первую неделю, потому что бесплатен, открыт и не привязан к одному провайдеру.

• Открытый исходный код, Apache-2.0 — клонируйте, читайте, разворачивайте у себя.
• Работает локально — ваши проекты это папки на вашей собственной машине.
• Любой agent, любая модель — включая ваш собственный API key через любого OpenAI-совместимого провайдера.
• Встроенная обширная библиотека дизайн-навыков и дизайн-систем.
• Не только прототипы — слайд-деки, изображения, даже видео.

Шаг 1 — Установка и настройка

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.ai/download. При первом запуске страница настроек обнаруживает CLI agent на вашей машине — Саша использует Codex — и позволяет задать модель по умолчанию, добавить медиа-провайдеров (MiniMax, OpenAI GPT Image и другие), подключить источники данных, сменить язык и выбрать тему.

Шаг 2 — Используйте любую модель через OpenAI-совместимого провайдера

Это самый полезный самородок в обзоре Саши. Помимо обнаруженных CLI, Open Design позволяет принести свой собственный key для любого OpenAI-совместимого API — а значит, вы можете маршрутизировать через агрегатор вроде OpenRouter и использовать почти любую модель, зачастую дешевле:

1. У вашего провайдера создайте API key и скопируйте его.
2. В настройках Open Design выберите тип провайдера OpenAI (OpenRouter и аналогичные агрегаторы говорят на OpenAI API).
3. Вставьте key и, что критически важно, измените base URL на эндпоинт вашего провайдера (например, base URL OpenRouter), затем выберите нужную модель.
4. Сохраните — генерация теперь идёт через этого провайдера.

Один подводный камень, на который наткнулся Саша: выбор модели переключается глобально, а не по проекту, так что если после переключения сломалась генерация медиа — это потому, что провайдер изображений последовал за сменой модели. Задавайте ключи медиа-провайдеров явно.

Шаг 3 — Соберите прототип (со всеми шероховатостями)

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

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

Честные оговорки, которые Саша показывает на камеру (и как с ними быть):

• По умолчанию он может выбрать не тот навык. Если он начинает строить «checkpoint/blog», когда вам нужно было мобильное приложение, скажите ему явно: «используй навык mobile-app / front-end». Задавайте навык до генерации.
• Inspect требует тегов data-oid. Инструменту Inspect на холсте нужен размеченный артефакт; если он сообщает, что не может выбрать элементы, попросите agent «пересобрать прототип с тегами data-oid», затем перезагрузите.
• Он молод и выпускается быстро. Ожидайте редких сбоев (после правки исчезает навигация и т. п.) — проект обновляется почти ежедневно, так что чаще делайте повторный pull.

Шаг 4 — Инструменты на холсте (главная изюминка)

После разметки цикл редактирования и есть главное достоинство. Inspect позволяет навести на любой элемент и напрямую подправить цвет, размер и стиль. Edit позволяет переписывать текст прямо на месте (без хождения в чат ради смены одного слова). Comment/picker позволяет выделить область, нарисовать и отправить заметку agent («сделай это меню прокручиваемой каруселью с индикатором прогресса»). Это быстрый, визуальный цикл обратной связи, который неудобно воспроизводить с простым agent в терминале.

Хаб плагинов: просматривайте реестр, импортируйте плагины и готовьте их для своей команды.

Когда закончите, Share экспортирует в PDF, PPTX, автономный HTML или markdown — или разворачивает на Vercel в один клик. Честный вердикт Саши: для презентаций и лид-магнит-страниц это уже удобный мини-конструктор; для прототипирования сложных приложений/сайтов ждите реальной итерации. Учитывая, что ему всего неделя и он постоянно обновляется, фундамент крепкий.

Советы

• Подключите OpenRouter (или любого OpenAI-совместимого провайдера), чтобы использовать более дешёвые или другие модели — не забудьте изменить base URL.
• Задавайте навык явно перед генерацией, чтобы он не выбрал по умолчанию не тот шаблон.
• Запросите теги data-oid, если Inspect не может выбрать элементы, затем перезагрузите.
• Опирайтесь на Inspect/Edit/Comment для быстрых визуальных правок вместо повторных промптов в чате.
• Чаще делайте повторный pull — проект выпускает исправления почти ежедневно.

Частые вопросы

Можно ли использовать модель, отличную от Claude, и платить меньше? Да. Направьте Open Design на любую обнаруженную CLI или принесите свой key для любого OpenAI-совместимого провайдера (например, OpenRouter), задав key и base URL — это открывает почти любую модель.

Inspect/edit не выбирает элементы — почему? Артефакту нужны теги data-oid. Попросите agent пересобрать прототип с ними, затем перезагрузите превью.

Готов ли он к продакшену? Он ещё на ранней стадии и быстро развивается. Для деков и лид-магнит-страниц он уже отлично подходит; для сложных приложений относитесь к результату как к крепкому черновику, который вы дорабатываете.

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

---

Это письменное руководство основано на практическом обзоре Саши (ИИШНЫЙ). Смотрите полное видео выше и подпишитесь на ИИШНЫЙ ради новых честных, несмонтированных тестов ИИ-инструментов.