Я заменил Claude Design этой опенсорсной альтернативой!

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

Рабочее пространство Open Design, работающее локально — ваши проекты, ваш агент, ваша машина.

Что такое Open Design?

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

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

Несколько вещей, которые стоит знать:

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

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

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

Есть три способа установить Open Design. Выберите тот, что вам подходит:

Способ	Лучше всего для	Требования
Десктопное приложение	Большинства людей — без настройки	Никаких. Просто скачайте и откройте.
Запуск из исходного кода	Разработчиков, которые хотят читать или менять код	Node ~24, pnpm 10.33.x
Установка в вашего агента	Тех, кто живёт в терминале	Уже имеющийся CLI агента для кода

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

Для полностью локальной настройки вам также понадобится установленный до старта агент командной строки, способный работать локально — например OpenCode, который поставляется со встроенными бесплатными моделями и может указывать на локальный раннер вроде Ollama. Open Design обнаружит его автоматически, как только он окажется в вашем PATH.

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

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

Перейдите на open-design.ai и нажмите Download desktop. Сборки доступны для macOS (Apple Silicon и Intel), Windows (x64) и Linux (AppImage). После установки приложение автоматически обнаруживает каждый CLI агента для кода, уже находящийся в вашем PATH, и загружает для вас встроенные скиллы и дизайн-системы.

Вариант B — Запуск из исходного кода

Чтобы запустить его прямо из репозитория — как в видео — нужно всего несколько команд:

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

Затем откройте локальный URL, который он выведет в терминале. Вам нужны Node ~24 и pnpm 10.33.x; Corepack сам выберет закреплённую версию pnpm. Порт назначается динамически, поэтому используйте тот адрес, который показывает команда, а не угадывайте.

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

Чтобы управлять Open Design из терминала — вызывая его как скилл или MCP-сервер внутри вашего агента, без GUI — выполните:

od mcp install <agent>
# od ships with Open Design; <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Затем попросите внутри агента: Use open-design to generate a dense analytics dashboard with the Airbnb design system.

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

При первом запуске Open Design сканирует вашу машину и показывает каждого найденного агента командной строки — Claude Code, OpenCode, Codex, Gemini и других. Это тот момент, который делает работу только локально реальной: вы выбираете, какой агент генерирует ваши дизайны.

• Выберите локального агента, чтобы не тратить кредиты. Claude Code превосходен, но он расходует ваши кредиты Claude. Выбор бесплатного локального варианта вроде OpenCode означает, что генерация происходит на вашей машине бесплатно. OpenCode объединяет несколько бесплатных моделей (среди них MiniMax) и может стоять перед локальным раннером, таким как Ollama, так что модель никогда не покидает ваш компьютер.
• Добавляйте API-ключи поставщиков только если хотите. Есть место для вставки ключей Anthropic, OpenAI, Azure и Google Gemini, если вы когда-нибудь захотите обратиться к размещённой модели. Для полностью локального прогона это можно полностью пропустить.
• Добавьте поставщиков медиа (опционально). Если вы хотите генерировать изображения, видео или аудио, добавьте свои ключи для этих поставщиков. Это и есть часть «приноси свой ключ» — и она по выбору.
• Включайте скиллы и дизайн-системы. Включайте только те возможности, что нужны для работы перед вами.

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

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

Open Design держит вашу работу в рамках проекта — создаваемые вами дизайны живут внутри той папки проекта, в которой вы работаете. Смените папку — и вы смените проект.

Запустите новый прототип (в видео один назван «Tube Analytics»), и вы сразу получаете выбор: начать с дизайн-системы или работать в свободной форме. Вас не вынуждают сначала определять дизайн-систему. Вы можете выбрать одну из встроенных систем — систему Claude/Anthropic, Airbnb, Airtable и другие — или импортировать ZIP из Claude Design, чтобы все ваши существующие токены и компоненты переехали вместе с вами.

Библиотека дизайн-систем: реальные брендовые стартовые точки, которые можно предпросмотреть, получить их DESIGN.md и встроить в любой проект.

Здесь есть не только брендовые системы. Open Design поставляется с галереей примеров дизайнов, которые можно предпросмотреть перед использованием — кликните по одному, и он откроет живой предпросмотр вместе с промптом, который его создал. Нажмите Use prompt, чтобы начать оттуда. Рядом с ними расположены шаблоны изображений, которые можно форкнуть как стартовую точку.

Примеры дизайнов и шаблоны изображений — предпросмотрите любой, затем форкните его или повторно используйте его промпт.

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

Теперь часть, доказывающая, что локальный цикл работает. В видео автор открывает SaaS-дашборд аналитики и просит Open Design расширить его.

1. Запустите прототип. Выберите дизайн-систему (или свободную форму) и при желании импортируйте ваш ZIP из Claude Design, чтобы у агента был полный контекст вашего существующего дизайна.
2. Прикрепите референс. Перетащите или вставьте изображения для визуального референса, либо наберите @, чтобы прикрепить файл из проекта — например файл «SaaS Analytics dashboard».
3. Напишите бриф. Дайте ему конкретный промпт: «Build out the remaining tabs in the dashboard using your design system.» Вы получаете знакомую разделённую раскладку — диалог слева, живой предпросмотр и файлы дизайна справа.
4. Наблюдайте, как он работает на вашем агенте. Open Design вызывает выбранный вами CLI — OpenCode в видео — и строит новые экраны. Поскольку он работает локально через бесплатные модели OpenCode, это стоит ноль кредитов: ничего не списывается с Claude, Gemini или Codex. Появляются новые вкладки (тренды, генераторы контент-скриптов, транскрипты, комментарии), стилизованные под существующую систему.
5. Экспортируйте или разверните. Когда дизайн готов, попросите скачать его в виде ZIP, чтобы передать в вашу кодовую базу, или развернуть сразу на Vercel прямо из Open Design — то, чего Claude Design не предлагает. Чтобы вмонтировать изменения обратно в ваше приложение, бросьте ZIP в агента для написания кода вроде Claude Code и скажите «implement these design changes using the ZIP file.»

Результат — реальный, интерактивный дизайн, собранный от начала до конца на вашей собственной машине, вашим собственным агентом, бесплатно.

Советы

• Выберите бесплатного локального агента для бесплатной генерации. OpenCode со встроенными бесплатными моделями (или локальная модель через Ollama) удерживает каждый прогон на нуле кредитов.
• Приберегите размещённые ключи на случай, когда они нужны. Вставляйте ключи Anthropic/OpenAI/Gemini только если хотите обратиться к премиум-модели; локальному агенту они не нужны.
• Чтобы начать, дизайн-система не нужна. Начните со встроенной, импортируйте ZIP из Claude Design или просто работайте в свободной форме.
• Ваши дизайны остаются с папкой проекта — организуйте работу, запуская Open Design в нужной директории.
• Экспорт — это передача, а не привязка. Скачайте в виде ZIP, разверните на Vercel или подайте файлы агенту для написания кода, чтобы влить их в ваш существующий код.

FAQ

Можно ли действительно запускать Open Design без каких-либо облачных затрат? Да. Сам Open Design — это открытый исходный код (Apache-2.0), и запускать его бесплатно. Если вы направите его на бесплатного локального агента вроде OpenCode — при желании с локальным раннером, таким как Ollama — генерация будет происходить на вашей машине без затрат кредитов. Вы платите только если решите подключить платную размещённую модель или поставщика медиа.

Как держать всё локально и приватно? При первом запуске выберите локального агента командной строки вместо облачного. Поскольку Open Design работает поверх того агента, которого вы выбираете, локальный агент и локальная модель означают, что ваши промпты и дизайны никогда не покидают ваш компьютер.

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

Чем он отличается от Claude Design? То же знакомое ощущение работы в браузере, но опенсорсное, local-first и с подключаемыми агентами. Вы приносите своего агента (локального или размещённого), вас не вынуждают определять дизайн-систему заранее, и вы можете делать дополнительные вещи, которые Claude Design не может — например развернуть напрямую на Vercel и генерировать слайды, изображения и видео из того же рабочего пространства.

---

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