Open Design — open-source альтернатива Claude Design на ваших агентах

OpenDesign — бесплатная среда с открытым исходным кодом для генерации прототипов, презентаций, документов, изображений и видео агентами для работы с кодом. Она работает локально, подключает обнаруженные инструменты командной строки (CLI) или провайдера модели через API-ключ пользователя и применяет переносимые дизайн-системы на базе DESIGN.md.

Что представляет собой OpenDesign

OpenDesign строится вокруг готового артефакта: результат работы агента — редактируемый файл или другой материал, который можно открыть и продолжить править. Проект распространяется под лицензией Apache-2.0 и доступен как настольное приложение, локальное веб-приложение и вариант для самостоятельного развёртывания.

OpenDesign может запускать поддерживаемые агенты для работы с кодом, найденные на компьютере, либо работать в режиме BYOK (Bring Your Own Key — подключение собственного API-ключа). В текущей линейке отдельно присутствует официальный OpenDesign Cloud, а расширение продукта выполняется через плагины и командные рабочие пространства. Локальный CLI и BYOK можно использовать без обязательного входа в OpenDesign Cloud.

Основные возможности

Как устроена система

graph TD
    A[Браузер или Electron] -->|HTTP + SSE| B[Next.js веб-приложение]
    B -->|/api/*| C[Express-демон]
    C --> D[SQLite и файлы проектов]
    C --> E[Скиллы шаблоны дизайн-системы плагины]
    C -->|spawn CLI или ACP| F[Агент для работы с кодом]
    C -->|BYOK proxy| G[Провайдер API]
    B --> H[Изолированный предпросмотр]

Веб-интерфейс построен на Next.js 16, React 18 и TypeScript. Express-демон отвечает за проекты, диалоги, файлы, импорт и экспорт, обнаружение агентов, сборку промпта и Server-Sent Events (SSE — поток событий от сервера).

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

Данные демона хранятся относительно корня, определённого параметром OD_DATA_DIR. Конкретный путь зависит от типа установки, канала сборки и окружения, поэтому полагаться на старую универсальную папку .od/ не следует. Учётные данные принадлежат демону и не должны копироваться в файлы проекта.

Установка и первый запуск

Настольное приложение

Самый простой вариант — скачать сборку на официальной странице или в GitHub Releases.

В релизе 0.21.1 опубликованы установщики для:

• macOS на Apple Silicon;
• macOS на Intel;
• Windows x64.

README также описывает Linux AppImage как дополнительный канал. Наличие актуального Linux-артефакта лучше проверять непосредственно в выбранном релизе.

После запуска OpenDesign ищет поддерживаемые CLI в PATH. Если подходящего агента нет, можно выбрать BYOK и подключить совместимого провайдера. Релиз 0.21.1 отдельно фиксирует возможность начать локальную работу или использовать BYOK без обязательной авторизации в OpenDesign Cloud.

Docker

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
# Для Basic Auth задайте случайный токен в deploy/.env.
echo OD_API_TOKEN=$(openssl rand -hex 32) >> .env
docker compose up -d

После запуска откройте http://127.0.0.1:7456. Если браузер запросит Basic Auth, используйте имя open-design и значение OD_API_TOKEN из deploy/.env как пароль.

Запуск из исходников

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

Откройте URL, который напечатает tools-dev. Если порты не заданы явно, инструмент выбирает свободные значения автоматически. В актуальном README указаны Node примерно версии 24 и pnpm 10.33.x.

Рабочий цикл от брифа до результата

1. Выбор поверхности. На Home выберите прототип, презентацию, мобильное приложение, изображение, документ, HyperFrame или другой доступный тип.
2. Выбор движка. Подключите локальный CLI, BYOK-провайдера или OpenDesign Cloud.
3. Уточнение задачи. Заполните форму: платформа, тон, визуальное направление и контекст бренда.
4. Подключение правил. Выберите дизайн-систему, шаблон или плагин. OpenDesign объединит их с метаданными проекта и инструкциями текущего запуска.
5. Генерация. Агент создаст файлы в рабочей области либо вернёт цельный исходный блок, который хост-приложение материализует в файл для предпросмотра.
6. Проверка и правки. Сравните результат с брифом, откройте предпросмотр, выберите проблемный элемент и сформулируйте изменение обычным языком.
7. Экспорт или передача в разработку. Сохраните подходящий формат либо продолжите работу с живыми файлами через CLI или MCP.

В файловом профиле агент записывает канонические файлы проекта. В BYOK-режиме или другом текстовом профиле без файловых инструментов OpenDesign разбирает полный блок исходного кода и помещает его в ту же рабочую область.

Скиллы, шаблоны и дизайн-системы

В текущей модели каталоги разделены; число 132 из раннего описания не используется как размер одного актуального каталога:

• skills/ содержит 100+ функциональных скиллов с поведением и инструкциями для агента;
• design-templates/ содержит визуальные стартовые шаблоны;
• design-systems/ содержит 151 пакет дизайн-систем;
• plugins/_official/ содержит 277 официальных плагинов и отдельную библиотеку примеров.

Среди шаблонов есть web-prototype, saas-landing, dashboard, mobile-app, social-carousel, email-marketing, magazine-poster, motion-frames, pm-spec, team-okrs, eng-runbook, finance-report, hr-onboarding и guizang-ppt. Для презентаций также заявлены 15 HTML-шаблонов и 36 тем.

DESIGN.md служит брендовым контрактом: описывает цвета, типографику, композицию, компоненты, движение, голос и нежелательные паттерны. Переключение дизайн-системы влияет на следующий рендер. Новые пакеты могут дополнять Markdown машинно-читаемыми токенами и компонентными fixtures.

Подключение через MCP и командную строку

OpenDesign поставляет stdio MCP-сервер и установщик конфигурации для поддерживаемых агентов:

od mcp install codex

Посмотреть конфигурацию без установки можно через режим предварительного просмотра:

od mcp install --print

Примеры машинно-читаемых команд:

od project list --json
od files list --json
od plugin list --json
od skills list --json

MCP позволяет внешнему агенту работать с актуальными файлами проекта без повторного экспорта ZIP. Возможности зависят от выданных разрешений: базовый профиль ограничен чтением, а при соответствующих правах MCP поддерживает запись и удаление файлов, удаление проектов и запуск генерационных циклов.

На macOS команда od может совпасть со встроенной утилитой /usr/bin/od. Для настольной установки надёжнее открыть Settings → MCP server и скопировать конфигурацию с абсолютным путём.

Стоимость, облако и ограничения

Сведения о версиях, интерфейсе и продуктовой линейке ниже сверены по официальным материалам, доступным 7 сентября 2026 года.

Сам OpenDesign остаётся бесплатным проектом под Apache-2.0. При локальном агенте расходы зависят от тарифа используемого агента или модели, а при BYOK вы платите выбранному API-провайдеру по его условиям.

В README OpenDesign Cloud описан как отдельный официальный сервис моделей. Релизные заметки также описывают аккаунты, балансы и планы Cloud. Поэтому фраза «подписки нет» относится к локальному OpenDesign и BYOK; для Cloud нужно смотреть его текущие условия.

Основные ограничения:

• качество и скорость зависят от выбранной модели и возможностей CLI;
• BYOK-запуск без файловых инструментов работает через текстовый профиль передачи результата;
• доступность форматов экспорта различается между настольной, headless- и container-средами;
• внешние модели и медиапровайдеры могут иметь собственные квоты и ограничения;
• URL провайдера, который разрешается в приватный или внутренний адрес, блокируется защитой от SSRF (Server-Side Request Forgery — подделка запросов на стороне сервера), если хост явно не добавлен в разрешённый список;
• для внутреннего провайдера README описывает OD_ALLOWED_INTERNAL_HOSTS: список точных имён хостов или IP-адресов; CIDR-записи не поддерживаются;
• самостоятельное развёртывание требует настройки доступа, origins и обратного прокси.

Сравнение с Claude Design

Полезные сценарии

Прототип лендинга в существующем стиле

Исходные данные: краткий бриф и DESIGN.md либо скриншот бренда.

Действия: выберите Prototype, шаблон saas-landing, дизайн-систему и ответьте на вопросы формы уточнения задачи.

Проверяемый результат: OpenDesign создаёт HTML/CSS-файлы, которые открываются в предпросмотре и используют выбранные токены бренда.

Ограничение: результат нужно отдельно проверить на адаптивность, доступность и пригодность для продакшена.

Питч-дек с последующей правкой

Исходные данные: структура истории, факты и визуальные материалы.

Действия: выберите Deck и guizang-ppt либо другой HTML-шаблон, создайте первый вариант и проверьте страницы в Studio.

Проверяемый результат: дек можно экспортировать в HTML, PDF, PPTX, ZIP или Markdown в зависимости от среды.

Ограничение: числа, цитаты и выводы нужно сверить перед отправкой презентации.

Передача дизайна в рабочий репозиторий

Исходные данные: проект OpenDesign и настроенный MCP-клиент в Codex, Claude Code, Cursor или другой совместимой среде.

Действия: установите MCP-конфигурацию, проверьте список проектов и попросите агента прочитать нужные файлы.

Проверяемый результат: агент видит актуальные CSS, JSX или HTML без повторного экспорта ZIP.

Ограничение: при разрешённой записи сначала ограничьте рабочую директорию и проверьте diff перед сохранением.

Локальная командная среда

Исходные данные: самостоятельное развёртывание демона, общая библиотека плагинов и дизайн-систем, настроенная аутентификация.

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

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

Ограничение: такой вариант требует администрирования, резервного копирования и политики доступа; простой запуск Docker на публичном адресе недостаточен.

Как проверить установку

Для локального веб- или Docker-запуска запросите endpoint состояния:

curl -i http://127.0.0.1:7456/api/health

Успешный минимальный признак — HTTP-ответ демона без ошибки соединения. Затем откройте интерфейс и проверьте:

1. в списке агентов отображается выбранный CLI или успешно проходит тест BYOK;
2. создаётся тестовый проект;
3. агент формирует хотя бы один файл;
4. файл открывается в предпросмотре;
5. после сохранения изменения появляются в предпросмотре;
6. нужный формат экспорта доступен в текущей среде.

Материал основан на официальной документации и снимках репозитория; реальный запуск в рамках этой проверки не выполнялся.

Официальные ссылки

• OpenDesign — официальный сайт
• Руководство для начинающих — установка и первый проект
• GitHub: nexu-io/open-design — исходный код и README
• Архитектура — схема компонентов и потоков данных
• История изменений — релизная история
• GitHub Releases — версии и установочные файлы
• Skills Protocol — устройство скиллов и шаблонов

Следующий шаг

Codex Desktop как визуальный конструктор UI: дизайн-цикл, который превращает ИИ в дизайнера

Если вы выбираете среду для агентного дизайна, полезно заранее определить требования к данным, моделям, экспорту и передаче результата разработчикам.

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov