Прощай, Claude Design! Это ЛУЧШИЙ генератор UI на ИИ с открытым кодом

Это руководство для пользователей Windows, которые хотят запустить Open Design на собственной машине — без облачной учётной записи, без ежемесячных кредитов, которые нужно расходовать. Оно следует пути, который проходит AI Automation в своём разборе установки на Windows, переписанному и обновлённому под текущий релиз, чтобы вы могли повторять шаг за шагом, команда за командой. Посмотрите видео выше, чтобы увидеть всё вживую, или читайте дальше — это текстовая версия.

Open Design, запущенный локально в Windows: рабочее пространство для дизайна с открытым кодом и agent-native подходом, которое вы полностью контролируете.

Что такое Open Design?

Open Design — это платформа для дизайна с открытым кодом и приоритетом локальной работы, agent-native альтернатива Claude Design и Figma. Вместо того чтобы привязывать вас к одному поставщику моделей, она работает поверх того агента для написания кода, которым вы уже пользуетесь: Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode и ещё с десяток других. Это «принеси своего агента», а не просто «принеси свой ключ».

Несколько вещей, ради которых на это стоит взглянуть:

• Открытый код, Apache-2.0 — клонируйте, разворачивайте у себя, читайте каждую строку.
• Работает локально — ваши проекты живут в ваших собственных папках на вашей машине, а не в чужом облаке.
• Подключаемые агенты — поддерживается 21+ агент для написания кода; вы выбираете, какой CLI управляет генерацией, и качество результата зависит от выбранной вами модели.
• Больше, чем прототипы — прототипы, живые артефакты, слайд-деки, журнальные макеты, генерация изображений и даже видео — всё из одного рабочего пространства.
• Встроенная библиотека дизайн-систем и шаблонов, так что вы начинаете не с чистого холста.

Если вы пользовались Claude Design, ощущение будет мгновенно знакомым — Open Design сохраняет ту же спокойную эстетику, а затем добавляет поверх неё возможности (и выбор модели).

Прежде чем начать

Установить Open Design в Windows можно тремя способами. Выберите тот, что подходит вам:

Способ	Кому подходит	Требования
Десктопное приложение (Windows x64)	Большинству пользователей Windows — без настройки	Ничего. Скачать и открыть.
Запуск из исходников (WSL)	Разработчикам, которые хотят читать или менять код	WSL2 + Ubuntu, Node ~24, pnpm 10.33.x
Установка в ваш агент	Тем, кто живёт в терминале	Уже установленный CLI агента для написания кода

В видео используется путь через WSL с запуском из исходников — отличный вариант, если вы хотите жить внутри репозитория. Но для большинства рекомендуемым путём является нативная десктопная сборка для Windows — есть установщик для Windows (x64), которому не нужны ни WSL, ни Node, ни клонирование. Это руководство охватывает оба варианта; разбор WSL ниже — для тех случаев, когда вам конкретно нужен путь через исходники.

Шаг 1 — Настройте WSL

Если вам нужно только десктопное приложение, переходите сразу к Шагу 2, Вариант A. Если вы хотите путь из исходников, сначала вам понадобится среда Linux внутри Windows. Именно это и предоставляет WSL (Windows Subsystem for Linux) — настоящая оболочка Ubuntu, работающая рядом с Windows, без двойной загрузки и без виртуальной машины, за которой нужно присматривать.

1. Установите WSL и Ubuntu. Откройте PowerShell и выполните wsl --install — это включает WSL2 и устанавливает Ubuntu по умолчанию. Перезагрузитесь, если Windows попросит, затем запустите Ubuntu из меню «Пуск» и задайте имя пользователя и пароль Linux при первом запуске. (Уже есть Ubuntu от другого инструмента? Используйте его повторно — повторять это не нужно.)

2. Обновите базовые пакеты. Внутри оболочки Ubuntu обновите индекс пакетов и установите необходимое:

sudo apt update && sudo apt install -y curl git

Совет по устранению неполадок из видео: если на одном из следующих шагов возникнет странная ошибка, чисто перезапустите свой экземпляр Linux — из PowerShell выполните wsl --shutdown, затем снова откройте Ubuntu. Свежий старт устраняет большинство мелких проблем первого запуска.

3. Установите Node 24. Сборка из исходников рассчитана на Node ~24. В чистой Ubuntu ещё нет nvm, поэтому сначала установите его, а затем используйте, чтобы получить Node 24:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc            # загрузить nvm в текущую оболочку
nvm install 24
nvm use 24
node --version              # должно вывести v24.x

Когда Ubuntu настроена и Node 24 активен, вы готовы устанавливать Open Design.

Шаг 2 — Установите Open Design

Вариант A — Десктопное приложение для Windows (рекомендуется, без настройки)

Перейдите на open-design.ai и нажмите Download desktop. Есть нативная сборка для Windows (x64) (наряду с macOS и Linux). Запустите установщик, откройте приложение — и оно автоматически обнаружит каждый CLI агента для написания кода, уже присутствующий в вашем PATH, а затем загрузит для вас встроенные навыки и дизайн-системы. Ни WSL, ни терминала — это самый простой путь в Windows.

Вариант B — Запуск из исходников (внутри WSL)

Это путь, который демонстрирует AI Automation. Работая внутри оболочки Ubuntu с активным Node 24, клонируйте репозиторий и запустите веб-среду выполнения:

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

corepack enable позволяет Corepack выбрать версию pnpm, закреплённую в репозитории (10.33.x), так что вам не нужно устанавливать pnpm самостоятельно. pnpm install подтягивает зависимости и компилирует нативные части — при первом запуске это может занять пару минут, что ожидаемо, а не сбой. Затем pnpm tools-dev run web запускает локальный демон и веб-сервер.

Когда всё завершится, команда выведет локальный URL — скопируйте его и вставьте в браузер Windows. WSL автоматически пробрасывает порт в Windows, так что приложение просто откроется.

Важно: порт назначается динамически при запуске — читайте фактический адрес, который выводит команда. Не предполагайте фиксированный порт; адрес может отличаться на вашей машине и от запуска к запуску.

Вариант C — Установка в ваш агент для написания кода (WSL)

Предпочитаете обойтись без GUI и вызывать Open Design как MCP-сервер внутри своего агента? В WSL сначала есть один дополнительный шаг. Linux уже поставляется с /usr/bin/od (инструмент восьмеричного дампа), который перекрывает собственный od от Open Design — поэтому иначе od mcp install … завершился бы с «file not found» для mcp/install. Добавьте небольшую обёртку, которая направляет od на ваш клон, и поставьте её первой в PATH:

mkdir -p ~/.local/bin
cat > ~/.local/bin/od <<'EOF'
#!/usr/bin/env bash
repo="$HOME/open-design"     # the ~/open-design clone from Option B
cd "$repo" || exit 127
exec corepack pnpm exec od "$@"
EOF
chmod +x ~/.local/bin/od
export PATH="$HOME/.local/bin:$PATH"
hash -r
type -a od                   # теперь должен побеждать od от Open Design

Затем подключите это к своему агенту:

od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

А затем внутри агента просто попросите: Use open-design to generate a landing page with the Airbnb design system.

Первый запуск: подключите свой агент для написания кода

При первой загрузке рабочего пространства Open Design сканирует ваше окружение и показывает каждый найденный CLI. Поскольку WSL — это настоящая Linux-машина, он подхватывает агентов, установленных внутри Ubuntu — так что Gemini CLI или другой агент, живущий в WSL, обнаруживается именно там. Нажмите rescan (повторное сканирование), если что-то ещё не появилось.

• Выберите агент и модель по умолчанию. Доверьте генерацию установленному CLI или укажите конкретного поставщика и модель. Как подчёркивается в видео, более сильная модель означает заметно лучший результат, так что выбирайте мощную, когда результат важен.
• Добавьте поставщиков медиа (необязательно). Чтобы генерировать изображения, видео или аудио, вставьте собственные API-ключи — принцип «принеси свой ключ», только для тех поставщиков, которыми вы действительно пользуетесь.
• Подключите MCP-сервисы (необязательно). Подключите коннекторы, если хотите, чтобы агент брал данные из других источников.
• Задайте настройки. Язык, оформление, уведомления — и даже настольный питомец. Всё это можно изменить позже, так что на первый раз не усложняйте.

Изучите рабочее пространство

Open Design держит вашу работу в рамках проекта: когда вы запускаете его в какой-то папке, создаваемые вами дизайны живут внутри этого каталога проекта. Ваш первый список проектов будет пустым — это нормально.

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

Библиотека дизайн-систем: выберите облик настоящего бренда — Airbnb, Airtable и многие другие — и Open Design перенесёт его токены, цвета и типографику в ваш дизайн.

• Дизайн-системы фиксируют облик бренда в виде DESIGN.md с токенами — основные и дополнительные цвета, типографика, отступы. Просмотрите её — и можно строить прямо поверх неё, вместо того чтобы определять палитру с нуля.
• Шаблоны охватывают прототипы, слайды, а также генерацию изображений и видео. Фильтруйте по типу и форкайте любой, чтобы стартовать с форы.

Шаблоны: отправные точки для прототипов, слайдов, изображений и видео — фильтруйте по типу и форкайте, чтобы начать.

Вы можете просмотреть всю библиотеку в вебе на open-design.ai/plugins, прежде чем что-либо устанавливать.

Создайте что-нибудь

Вот процесс, который проходит AI Automation, переписанный под текущий релиз:

1. Выберите дизайн-систему. Выберите ту, что вам по душе — скажем, Airbnb — и откройте её, чтобы изучить её DESIGN.md и токены.
2. Импортируйте её как отправную точку. Используйте Share → Download as ZIP, затем в своём проекте выберите Import flat design ZIP. Дизайн появится в рабочем пространстве, готовый к работе.
3. Опишите в запросе нужное изменение. Введите бриф простым языком — «Можешь сделать фон тёмным?» — и отправьте. Агент читает дизайн-систему, планирует свою работу и создаёт новую версию артефакта.
4. Свободно итерируйте. Меняйте шрифты, добавляйте или убирайте логотип, загружайте собственные ассеты и размещайте их в нужных местах. Каждый запрос порождает свежий вариант, который можно оставить или отбросить.
5. Экспортируйте, когда довольны. Нажмите Share и скачайте результат в виде ZIP.

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

Советы, как извлечь больше

• Выбирайте сильную модель. Качество результата зависит от подключённого агента — бесплатная модель сгодится, чтобы освоить процесс, но для серьёзной работы мощная того стоит.
• Каждый раз читайте выведенный URL. Локальный адрес динамичен; копируйте то, что выводит tools-dev, а не используйте старую ссылку повторно.
• Устанавливайте агентов там, где Open Design будет искать. Запускаете из исходников в WSL? Устанавливайте свои CLI внутри Ubuntu, чтобы рабочее пространство их обнаружило; десктопное приложение читает ваш PATH в Windows.
• Чтобы начать, дизайн-система не обязательна. Начните со встроенной, импортируйте ZIP или позвольте Open Design определить значения по умолчанию. Ваши дизайны остаются с папкой проекта, так что организуйте работу, запускаясь в нужном каталоге.

Часто задаваемые вопросы

Open Design бесплатен? Да — это открытый код под лицензией Apache-2.0. Вы можете запускать его локально бесплатно; платите вы только за использование модели/API того агента и поставщиков медиа, которых подключаете.

Что выбрать — WSL или десктопное приложение для Windows? Для большинства людей нативная десктопная сборка для Windows (x64) проще — ни WSL, ни Node, ни клонирования. Используйте путь через WSL из исходников, когда вам конкретно нужно читать или менять код. Учтите, что WSL2 — это основной поддерживаемый путь, тогда как Windows-нативный вариант — по мере возможности; если с одним возникнут сложности, попробуйте другой.

Какие агенты для написания кода он поддерживает? 21+ агент, включая Claude Code, Codex, Cursor, Gemini, GitHub Copilot и OpenCode. Open Design обнаруживает CLI, уже установленные на вашей машине — внутри WSL для пути из исходников или в вашем PATH Windows для десктопного приложения.

Чем он отличается от Claude Design? То же знакомое ощущение, но открытый код, приоритет локальной работы и подключаемые агенты — так что вы не привязаны к одной модели и не расходуете фиксированный пул кредитов. Он также выходит за рамки прототипов: слайд-деки, журнальные макеты, генерация изображений и видео.

---

Это текстовое руководство основано на разборе установки на Windows от AI Automation. Посмотрите полное видео выше и подпишитесь на AI Automation, чтобы увидеть больше практичных видео об ИИ-инструментах.