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

Open-source, local-first альтернатива Claude Design от Anthropic. Превращает ваш существующий coding-агент (Claude Code, Codex, Cursor, Gemini CLI и ещё 12 CLI) в полноценный дизайн-движок, управляемый 132 скиллами и 150 портативными дизайн-системами в формате DESIGN.md.

Что это такое

Open Design — открытый проект от команды nexu-io, выпущенный в апреле 2026 года под лицензией Apache-2.0. Идея: вместо закрытого облачного сервиса Claude Design — тот же artifact-first подход к дизайну, но локально, с любым агентом и без vendor lock-in.

Open Design не поставляет собственный ИИ-агент. Вместо этого он обнаруживает coding-агенты, уже установленные на вашем компьютере, и превращает их в дизайн-движки через систему скиллов и дизайн-систем. Вы приносите свой ключ (BYOK), свой агент и свою дизайн-систему — Open Design связывает всё в единый рабочий цикл.

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

Архитектура

graph TD
    A["Browser (Next.js 16)"] -->|/api/*| B["Local Daemon (Express + SQLite)"]
    A -->|iframe preview| C["Sandboxed Preview"]
    B -->|spawn CLI| D["Coding Agent"]
    B -->|SSE proxy| E["BYOK API Provider"]
    D -->|Read/Write/Bash| F[".od/projects/<id>/"]
    B -->|SQLite| G[".od/app.sqlite"]

Установка и запуск

Вариант 1: Desktop-приложение (без сборки)

Самый быстрый способ — скачать готовое приложение:

• open-design.ai — официальная страница загрузки
• GitHub Releases — все версии

Доступно для macOS (Apple Silicon + Intel) и Windows (x64).

Вариант 2: Docker

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d

Откройте http://localhost:7456 в браузере.

Вариант 3: из исходников

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

Требования: Node 24, pnpm 10.33.x.

Что происходит при первом запуске

1. Daemon сканирует PATH и находит установленные coding-агенты
2. Загружает 132 скилла + 150 дизайн-систем
3. Открывает welcome-диалог для ввода API-ключа (нужен только для BYOK-режима)
4. Создаёт .od/ — локальную папку для SQLite, проектов и рендеров

Управление жизненным циклом

pnpm tools-dev start web      # фоновый запуск
pnpm tools-dev stop            # остановка
pnpm tools-dev status          # статус
pnpm tools-dev logs            # логи
pnpm tools-dev restart --daemon-port 17456 --web-port 17573  # перезапуск с фиксированными портами

Рабочий цикл: от брифа до артефакта

Open Design выстраивает четырёхшаговый процесс, который не даёт агенту «фристайлить»:

1. Detect — daemon сканирует PATH, находит агенты, загружает скиллы и дизайн-системы
2. Discover — при первом сообщении вместо генерации агент показывает интерактивную форму: поверхность, аудитория, тон, бренд-контекст, масштаб. 30 секунд радио-кнопок экономят 30 минут переделок
3. Direct — если у вас нет бренда, агент предлагает 5 курированных визуальных направлений с детерминированной палитрой и шрифтовым стеком
4. Deliver — агент пишет на диск, артефакт рендерится в sandboxed iframe, экспортируется в HTML / PDF / PPTX / ZIP

Скиллы: что можно генерировать

Design и маркетинг (prototype mode)

Презентации (deck mode)

Офис и операции

pm-spec (спецификация продукта), team-okrs (OKR-таблица), meeting-notes (протокол), kanban-board (доска), eng-runbook (инцидент-ранбук), finance-report (финансовый отчёт), invoice (инвойс), hr-onboarding (онбординг).

Дизайн-системы

150 портативных дизайн-систем в формате DESIGN.md — 9-секционная схема из проекта awesome-design-md:

• Color — палитра в OKLCh
• Typography — шрифтовой стек
• Spacing — сетка отступов
• Layout — принципы компоновки
• Components — UI-компоненты
• Motion — анимации
• Voice — тон коммуникации
• Brand — бренд-гайд
• Anti-patterns — чего избегать

Переключение системы — один клик в dropdown. Следующий рендер использует новые токены без перепромптинга.

Чтобы добавить свою: попросите агента извлечь бренд из скриншота или Figma-экспорта в DESIGN.md, сохраните в design-systems/<name>/.

MCP-сервер

Open Design поставляет встроенный stdio MCP-сервер. Подключите его к Claude Code, Codex, Cursor, VS Code или любому MCP-совместимому клиенту — агент в другом репозитории получит прямой доступ к файлам проекта Open Design:

• search_files — поиск по проекту
• get_file — получение конкретного файла (токены, CSS, JSX)
• get_artifact — получение артефакта

Без аргумента project MCP отдаёт файлы из текущего открытого проекта — промпты вроде «build this in my app» или «match these styles» работают сразу.

Тарифы и лимиты

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

Практические сценарии

Прототипирование лендинга. Выбираете скилл saas-landing, указываете дизайн-систему (или просите агента извлечь из скриншота), заполняете форму discovery — через минуту получаете полный HTML с hero, features, pricing и CTA.

Питч-дек для инвестора. Скилл guizang-ppt генерирует журнальные слайды с WebGL-фоном. Результат — одностраничный HTML, который экспортируется в PDF или PPTX.

Мобильный прототип. Скилл mobile-app рендерит экраны в пиксельно точных рамках iPhone 15 Pro с Dynamic Island и status bar.

Редакционный контент. Скиллы social-carousel и email-marketing генерируют готовые к публикации карусели 1080×1080 и HTML-письма с table-fallback.

Расширение для команды. Запускаете daemon на сервере внутри сети, каждый разработчик подключает свой CLI — общая библиотека скиллов и дизайн-систем, единый стиль.

Ссылки

• GitHub: nexu-io/open-design — исходный код и документация
• open-design.ai — официальный сайт и загрузка desktop-приложения
• GitHub Releases — все версии
• Skills Protocol — документация по созданию скиллов
• awesome-design-md — библиотека дизайн-систем в формате DESIGN.md
• Лицензия: Apache-2.0

По теме

• Статья: Codex Desktop как визуальный конструктор UI: дизайн-цикл, который превращает ИИ в дизайнера
• Блог: Open Design внутри Codex — дизайн, код и анимация в одном диалоге
• База знаний: MagicPath — совместный дизайн-канвас для людей и ИИ-агентов

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