Open Design — пошаговое знакомство: как правильно использовать открытый Claude Design

Обзор проекта

Open Design — это открытая альтернатива Claude Design, разработанная и поддерживаемая nexu-io/open-design.

Его ключевая идея предельно проста: не изобретать колесо заново. Уже имеющиеся на вашем компьютере код-агенты (Claude Code, Codex, Cursor Agent и т. п. — всего 16 CLI) становятся движком дизайна. Они работают в связке с 31 компонуемым дизайном навыком и 72 наборами брендовых дизайн-систем — и весь дизайн-процесс выполняется локально.

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

---

Целевая аудитория

• Фронтенд/фулстек-разработчики: хотят использовать AI для генерации дизайн-макетов, но не хотят разбираться со сложной работой в Figma
• Индивидуальные разработчики: нужно быстро выпускать landing page, прототипы мобильных приложений, продуктовые демо
• Дизайнерские команды: хотят решение с приоритетом локальной работы и без зависимости от облачной автоматизации дизайна
• Любители AI-инструментов: хотят исследовать потенциал уже существующих код-агентов в задачах дизайна

---

Основные зависимости и окружение

Node.js ~24
pnpm 10.33.x (через Corepack)
ОС: macOS / Windows / Linux

Open Design автоматически сканирует код-агенты, установленные в PATH. Если на вашей машине нет ни одного CLI, он проведёт вас через настройку BYOK-режима (нужен API Key).

---

Полное дерево структуры проекта

open-design/
├── apps/
│   ├── daemon/                 # Локальный сервис (Express + SQLite)
│   │   └── src/
│   │       ├── agents.ts       # Детект код-агентов и адаптеры
│   │       ├── skills.ts       # Загрузчик навыков
│   │       └── server.ts       # API-маршруты
│   └── web/                    # Next.js 16 фронтенд
│       └── src/
│           ├── prompts/        # Шаблоны промптов
│           ├── artifacts/      # Парсинг артефактов
│           └── components/     # UI-компоненты
├── skills/                     # 31 навык дизайна
│   ├── web-prototype/          # Веб-прототип
│   ├── mobile-app/             # Мобильное приложение
│   ├── dashboard/              # Дашборд
│   ├── guizang-ppt/            # Презентация
│   └── ...
├── design-systems/           # 72 дизайн-системы
│   ├── linear-app/
│   ├── vercel/
│   ├── anthropic/
│   └── ...
├── assets/frames/            # Фреймы устройств (iPhone, Pixel, iPad, MacBook)
└── .od/                        # Данные во время выполнения (SQLite, файлы проекта)

---

Пошаговая инструкция

1) Клонируйте репозиторий и установите зависимости

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

corepack enable автоматически считывает зафиксированную в package.json версию pnpm (10.33.x), чтобы обеспечить единообразие в команде.

2) Запустите локальный dev-сервер

pnpm tools-dev run web

После успешного запуска вы увидите два URL:

✅ Daemon running at http://localhost:17456
✅ Web running at http://localhost:17573

Откройте Web URL в браузере — и можно начинать пользоваться.

3) Выберите код-агент

При первом открытии веб-интерфейса Open Design автоматически определит код-агенты в вашем PATH.

Поддерживаются 16 CLI:

В правом верхнем углу интерфейса переключатель моделей покажет обнаруженные агенты. Если не обнаружено ни одного CLI — нажмите переключатель BYOK и запускайте через ваши API Key (OpenAI/Anthropic/Azure/Gemini).

4) Выберите дизайнерский навык

На стартовой странице перечислены 31 навык — они сгруппированы по сценариям:

• Design: web-prototype (по умолчанию), mobile-app, mobile-onboarding, gamified-app, wireframe-sketch, critique, tweaks
• Marketing: saas-landing, pricing-page, blog-post, email-marketing, social-carousel, magazine-poster, motion-frames, sprite-animation
• Operation/Engineering/Product: dashboard, docs-page, pm-spec, team-okrs, meeting-notes, kanban-board, eng-runbook, finance-report, invoice, hr-onboarding
• Deck (презентации): guizang-ppt (по умолчанию), simple-deck, replit-deck, weekly-update

Выберите нужный навык под задачу: например, выберите mobile-app, чтобы сгенерировать прототип мобильного приложения.

5) Выберите дизайн-систему

После выбора навыка вы увидите панель дизайн-системы. По умолчанию доступны два стартовых варианта: default (Neutral Modern) и warm-editorial (Warm Editorial).

Полная библиотека содержит 72 брендовые дизайн-системы:

• AI & LLM: claude, cohere, mistral-ai, ollama, x-ai…
• Инструменты разработки: cursor, vercel, linear-app, supabase, posthog, sentry…
• Продукты: notion, figma, airtable, intercom, raycast…
• E-commerce: shopify, airbnb, uber, nike, starbucks…
• Автомобили: tesla, bmw, ferrari, lamborghini…
• Прочее: apple, ibm, nvidia, spotify…

Также можно загрузить свой файл DESIGN.md, который задаёт дизайн-спецификацию по 9 параметрам: брендовые цвета, шрифты, отступы и т. д.

6) Отправьте дизайнерскую инструкцию

В поле ввода опишите требования, например:

make me a mobile onboarding flow for a fitness app with dark theme

После заполнения формы и отправки агент сделает:

1. Сгенерирует план TodoWrite и будет обновлять его в режиме стрима
2. Прочитает шаблоны навыков и выбранную дизайн-систему
3. Выполнит самопроверку по 5 измерениям (философия, иерархия, исполнение, специфичность, сдержанность)
4. Выведет код в формате <artifact>
5. Отрендерит превью в sandbox iframe

7) Превью и экспорт

После отрисовки макета вы можете:

• Редактировать в реальном времени: правьте HTML/CSS прямо в файловом рабочем пространстве справа
• Скачать: экспорт в HTML (с встроенными ресурсами), PDF, PPTX, ZIP или Markdown
• Сохранить на диск: нажмите «Save to disk», артефакты сохранятся в .od/artifacts/
• Продолжить диалог: скажите агенту «пусть кнопки станут с закруглёнными углами» или «замени цветовую схему» — и он продолжит дорабатывать на основе текущего макета

Другие частые команды:

# Проверить статус запуска
pnpm tools-dev status

# Посмотреть логи
pnpm tools-dev logs

# Остановить все сервисы
pnpm tools-dev stop

# Перезапуск (когда нужно сменить порты)
pnpm tools-dev restart --daemon-port 17456 --web-port 17573

# Диагностика проблем
pnpm tools-dev check

---

Изменение существующих проектов

Многие, впервые получив Open Design, думают: «это же просто инструмент для генерации новых страниц?». На самом деле его можно использовать для изменения уже существующих проектов — и вам вообще не нужен DESIGN.md внутри вашего проекта.

Ключевая логика проста: у агента есть полный доступ к файловой системе — Read, Write, Bash, WebFetch есть всё. Если он проанализирует ваш код, то поймёт ваш дизайн-язык и сможет выдать результат, опираясь на текущий стиль.

Быстрое создание визуальной базы через селектор направлений

Если у вас нет дизайн-спецификаций, на Turn 2 появятся 5 преднастроенных направлений. Каждое — это детерминированная палитра OKLch + шрифтовой стек:

После выбора направления агент подменит :root-переменные в шаблоне навыка этой палитрой — и все последующие компоненты будут следовать выбранным правилам.

Загрузите скриншоты — пусть агент извлечёт дизайн-язык

Это способ ближе к реальным проектам. В Open Design встроен протокол извлечения бренд-активов:

1. Locate  — определить ключевые цветовые блоки на скриншоте
2. Download — скачать скриншот в директорию проекта
3. Grep hex — извлечь hex-значения
4. Codify   — записать brand-spec.md
5. Vocalise — агент строит вывод на brand-spec.md, а не угадывает по памяти

Как это сделать — очень просто:

"Here's our current app, I want you to match the styles"
# затем прикрепите скриншот или вставьте URL текущей страницы

Агент проанализирует основные/вспомогательные цвета, шрифты и особенности отступов, затем сгенерирует brand-spec.md. Все дальнейшие изменения будут опираться на эту спецификацию.

Читать код напрямую — точнее, чем скриншоты

Агент по умолчанию работает в каталоге .od/projects/<id>/, но вы можете положить туда ваш существующий проект:

# Скопируйте проект в рабочую директорию Open Design
cp -r ~/my-app/.   .od/projects/<ID_проекта>/

Либо используйте MCP-сервер, чтобы агент мог читать через директории (см. следующий раздел).

Затем отправьте такие команды:

"Read all .css files in ./src/styles and extract the color palette"

"Read the component library at ./components/. Generate a new
form component using the same spacing and border-radius tokens"

"I see you use Tailwind. Add a new button variant that matches
your existing primary/secondary button styles"

Агент пройдёт по файлам, распарсит CSS-переменные / Tailwind-конфиг, извлечёт дизайн-токены и создаст результат в стиле, совпадающем с текущим кодом.

MCP-сервер: чтение дизайн-файлов между проектами

Не хотите копировать файлы? Open Design предоставляет MCP-сервер, благодаря которому ваш код-агент может напрямую читать файлы проекта Open Design.

На странице Settings → MCP Server в Open Design есть гайды по настройке для разных клиентов. После настройки ваши Claude Code / Cursor-агенты, которые запускаются в других проектах (например, ~/my-app), смогут напрямую запрашивать в Open Design дизайн-файлы открытого проекта.

Рекомендуемый процесс под сценарии правок

1. Откройте Open Design и выберите навык, максимально похожий по стилю на ваш проект (например, web-prototype)

2. Turn 1 — форма:
   - Surface: Web
   - Audience: существующая аудитория пользователей
   - Tone: сохранить согласованность с текущим продуктом

3. Turn 2 — выбор направления:
   - Хотите остаться в рамках текущего стиля → загрузите скриншот с существующей страницы, чтобы агент извлёк brand-spec.md
   - Допускаете умеренный редизайн → выберите направление как визуальную базу

4. Отправьте инструкцию:
   "Add a settings page to my existing project at ./src,
    match the color palette and typography from the attached screenshot"

Агент выполнит:

1. Прочитает скриншот → извлечёт brand-spec.md (или прочитает CSS-переменные из кода)
2. Прочитает ваши текущие файлы проекта
3. На новой странице переиспользует основные/вспомогательные цвета и шрифты
4. Выведет рабочий HTML, сохраняя стиль вашего существующего проекта

---

Поиск и устранение типичных проблем

Q1: Неверная версия Node, ошибка Requested version v24.x.x is not currently installed

Open Design требует Node 24. Установите его через nvm или fnm:

nvm install 24 && nvm use 24
# или
fnm install 24 && fnm use 24

Если вы используете fnm, убедитесь, что в конфигурации shell загружается fnm env (см. официальную документацию fnm).

Q2: Код-агент не обнаружен

Open Design при первом старте сканирует PATH. Убедитесь, что CLI установлен и доступен глобально:

# Проверка конкретного агента
which claude     # macOS/Linux
where claude     # Windows

# Если он установлен, но всё равно не детектится — попробуйте перезапустить сервис
pnpm tools-dev stop && pnpm tools-dev start web

Q3: Порты заняты

Порты по умолчанию 17456 (daemon) и 17573 (web) могут быть уже заняты:

# Перейти на другие порты
pnpm tools-dev run web --daemon-port 17457 --web-port 17574

Q4: После переключения дизайн-системы стиль не меняется

Дизайн-системы в Open Design применяются через чтение CSS-переменных из DESIGN.md и их инъекцию. После каждого переключения агент в новом диалоге будет использовать новые переменные. Старые диалоги не обновляются автоматически. Чтобы применить новую систему, начните новый диалог.

Q5: Sandbox iframe показывает пустоту

Sandbox iframe рендерит через srcdoc. Если содержимое не отображается:

1. Проверьте консоль браузера на ошибки CSP
2. Убедитесь, что плагины для блокировки рекламы не перехватывают загрузку iframe
3. Нажмите «Download HTML», скачайте файл и проверьте локально, открыв его напрямую

Q6: BYOK-режим — ошибка API Key

BYOK-агент находится по пути /api/proxy/{anthropic,openai,azure,google}/stream. Проверьте:

1. что в странице Settings указан корректный baseUrl (формат OpenAI-compatible)
2. что API Key валиден и есть права на соответствующую модель
3. что поле apiKey не пустое: если оно не заполнено, сервер отклонит запрос (защита от SSRF)

---

Дополнительное чтение / Продвинутые направления

Добавление собственной дизайн-навыка

Навыки хранятся в виде папок SKILL.md + assets/ + references/ и следуют SKILL.md-спецификации Claude Code.

Создайте новую папку в skills/, добавьте SKILL.md и определите od: frontmatter (mode, scenario, design_system.requires и т. п.). После перезапуска сервиса навык автоматически появится в выборе навыков.

Импортировать экспорт Claude Design

У Claude Design от Anthropic есть экспорт ZIP. Перетащите ZIP в приветственный диалог Open Design — POST /api/import/claude-design распарсит архив, воссоздаст проект, и агент сможет бесшовно продолжить редактирование.

Интеграция MCP-сервера

Open Design предоставляет MCP-сервер через stdio. Настройте его в MCP-клиентах, например в Claude Code / Cursor / VS Code — после этого агент сможет напрямую читать дизайн-файлы и ассеты проекта Open Design, без ручного экспорта ZIP.

Сборка десктопного приложения

Electron-десктоп-версия поддерживает macOS (Apple Silicon) и Windows (x64):

# macOS
pnpm tools-pack mac build --to all
pnpm tools-pack mac install

# Windows
pnpm tools-pack win build --to nsis
pnpm tools-pack win install

Собранное приложение работает автономно, а данные сохраняются в директории системного AppData.

Расширение генерации медиа

Помимо кодовых артефактов, Open Design также интегрирует модели генерации изображений (gpt-image-2), видео (Seedance 2.0, HyperFrames) и аудио (Suno, Udio). После настройки API Key в дизайн-процессе можно напрямую получать .mp4, .png и другие медиа-файлы.

---

Адрес проекта: nexu-io/open-design