Ещё один open-source-репозиторий просто клонировал Claude Design
Структурированное первое знакомство с Open Design: установите его, запустите демо, изучите встроенные design systems и шаблоны и придите к честному вердикту о том, стоит ли он вашего времени. По мотивам практического разбора от Chase AI.
Это руководство — структурированное первое знакомство с Open Design: установите его, запустите быстрое демо, изучите встроенные design systems и шаблоны и завершите честной оценкой того, в чём он силён, а где пока сыроват. Оно повторяет путь, который прошёл Chase AI в своём практическом разборе, переписанный и обновлённый под текущую версию, чтобы вы могли следовать шаг за шагом. Посмотрите видео выше, чтобы увидеть запуск вживую, или читайте дальше письменную версию.
Рабочее пространство Open Design — спокойное, привычное полотно, где прототипы, презентации, изображения и видео собраны в одном месте.
Что такое Open Design?
Open Design — это open-source-платформа дизайна с принципом local-first, которая работает поверх уже используемого вами агента для кодинга. Вместо того чтобы привязывать вас к одному поставщику модели, она обнаруживает CLI, уже установленные на вашей машине — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode и ещё пару десятков — и позволяет этому агенту управлять генерацией. Chase называет это «bring your own agent», и в этом весь смысл: вы не платите отдельную плату за API поверх подписки, которая у вас уже есть, потому что генерация идёт через ваш собственный CLI.
Несколько причин, по которым на него стоит взглянуть:
- Open source, Apache-2.0 — клонируйте, разворачивайте у себя, читайте каждую строку.
- Работает локально — ваши проекты живут в папках на вашей собственной машине, а не в чьём-то чужом облаке.
- Подключаемые агенты — поддерживается более 21 агента для кодинга; вы выбираете, какой CLI ведёт работу, или подключаете собственный ключ API для другой обвязки.
- Больше, чем прототипы — прототипы, презентации, журнальные вёрстки, генерация изображений и даже видео — всё из одного рабочего пространства.
- Глубокая встроенная библиотека design systems и skills, чтобы вы не начинали с чистого листа.
Если вы пользовались Claude Design, интерфейс покажется мгновенно знакомым — Open Design сохраняет ту же спокойную эстетику, а затем добавляет поверх дополнительные возможности (презентации, изображения и видео). Если честно: это самостоятельное открытое, локальное, agent-native рабочее пространство, а не просто перекрашенная копия какого-либо одного инструмента.
Прежде чем начать
Установить Open Design можно тремя способами. Выберите тот, что подходит вам:
| Способ | Кому подходит | Требования |
|---|---|---|
| Настольное приложение | Большинству людей — без настройки | Ничего. Просто скачайте и откройте. |
| Запуск из исходников | Разработчикам, которые хотят читать или менять код | Node ~24, pnpm 10.33.x |
| Установка в ваш агент | Тем, кто живёт в терминале | Существующий CLI агента для кодинга |
Chase в своём видео показывает путь через терминал, но рекомендуемый способ сегодня — это настольное приложение: ни Node, ни pnpm, ни клонирования, и оно само обнаруживает ваши агенты.
Шаг 1 — Установите Open Design
Вариант A — Настольное приложение (рекомендуется, без настройки)
Перейдите на open-design.ai/download и возьмите сборку для вашей ОС. После установки приложение автоматически обнаруживает каждый CLI агента для кодинга, уже находящийся в вашем PATH, и загружает за вас встроенные skills и design systems. Это самый быстрый способ получить рабочее пространство.
Вариант B — Запуск из исходников
Если вы предпочитаете запускать его из репозитория — как делает Chase в видео — вам понадобится всего несколько команд:
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. (Если dev-сервер не поднимается, вы можете сказать своему агенту «подними dev-сервер Open Design» и доверить ему выполнение команды.)
Вариант C — Установка в ваш агент для кодинга
Чтобы использовать Open Design, вообще не открывая графический интерфейс — вызывая его как skill внутри вашего агента — выполните:
od mcp install <agent>
# od поставляется вместе с Open Design; <agent> = claude | codex | cursor | copilot | gemini | opencode | …Затем внутри агента просто попросите: Use open-design to generate a landing page with the Airbnb design system.
Шаг 2 — Первый запуск: подключите свой агент для кодинга
При первом запуске Open Design сканирует вашу машину и показывает каждый найденный локальный CLI. Появляется запрос о том, как вы хотите управлять ИИ. Это и есть шаг «bring your own agent».
- Выберите локальный CLI. Указав Open Design на Claude Code, Codex или OpenCode, вы делаете так, что генерация берётся из подписки, за которую вы уже платите, вместо отдельной платы за API. (При желании вы также можете подключить собственный ключ API, если предпочитаете другую обвязку.)
- Оставьте модель по умолчанию, если у вас нет причин поступить иначе — она следует собственной конфигурации вашего CLI.
- Добавьте поставщиков медиа (опционально). Хотите генерировать изображения, видео или аудио? Добавьте собственные ключи API для таких поставщиков, как OpenAI, MiniMax, ElevenLabs и других. Именно это открывает в рабочем пространстве сторону изображений и видео — то, чего чистый клон Claude Design вам не даёт.
- Включите skills и design systems. Активируйте только те возможности, которые нужны для стоящей перед вами задачи.
Всё это можно изменить позже, поэтому при первом проходе не усложняйте.
Шаг 3 — Изучите рабочее пространство
Вверху вы найдёте Designs, Examples, Design systems, а также библиотеки шаблонов image и video. Два раздела, которые важнее всего при первом знакомстве, — это design systems и examples.
Библиотека design systems: каждая запись разбирает реальный бренд на палитру, типографику, компоненты и визуальную атмосферу, которые можно переиспользовать как отправную точку.
Библиотека design systems — главная изюминка. Каждая запись берёт реальный бренд — например, Airbnb — и раскладывает его на палитру, типографику, компоненты и общую визуальную атмосферу. Если вам нужна страница, ощущающаяся как этот бренд, вы подключаете систему, и генерация стартует из этих правил, а не с чистого листа.
Честное замечание из разбора Chase: примеры создаются однострочными промптами, причём точный промпт показан прямо на карточке. Они выглядят впечатляюще, но никакого секретного ингредиента за ними нет — что видите, то и набрали. Относитесь к ним как к источнику вдохновения, а не как к обещанию магии в один клик. Галереи шаблонов изображений и видео похожи: удобны как справка, но в повседневной работе ценны меньше, чем рабочие процессы с прототипами и презентациями. Сосредоточьтесь на тех результатах, которые вы действительно будете сдавать.
Библиотека шаблонов: отправные точки для прототипов, презентаций, изображений и видео, которые можно фильтровать по типу и форкнуть, чтобы начать.
Вы можете просмотреть всю библиотеку плагинов в вебе по адресу open-design.ai/plugins, прежде чем что-либо устанавливать.
Шаг 4 — Создайте что-нибудь
Настоящий рабочий процесс — и то, чем Open Design оправдывает себя — это создание прототипов и презентаций. Он работает примерно так, как вы и ожидаете:
- Назовите проект и выберите одну или несколько design systems из встроенного списка.
- Выберите уровень детализации — wireframe, чтобы быстро набросать структуру, или high fidelity для полностью стилизованного результата.
- При желании импортируйте ZIP из Claude Design. Собрали собственную design system в Claude Design? Откройте там проект, выберите Share → Download project as .zip, затем загрузите этот ZIP в Open Design. Все файлы дизайна появятся в рабочем пространстве, готовые к переиспользованию. (Сейчас этот импорт ZIP — самый чистый способ принести собственный бренд: кнопки «создать design system с нуля» пока нет.)
- Напишите бриф и нажмите «создать». Open Design проводит тот же набор уточняющих вопросов-ответов, что и Claude Design — для кого это, сколько слайдов, какой уровень детализации, какой визуальный тон — затем составляет список задач и прорабатывает его. В видео Chase просит лендинг для вымышленного SaaS под названием Lighthouse с тремя сопоставимыми направлениями (классическое стопкой, редакционное и кричащее), затем генерирует презентацию в стиле брутализм и экспортирует её в PowerPoint.
На выходе — реальный интерактивный артефакт, собранный из выбранной вами design system. Честная оценка Chase: результаты выходят примерно на «решение на 90 %» — презентация в духе бренда и пригодная к использованию, с парой правок по отступам и форматированию, оставленных вам. Для продукта на ранней стадии это сильная отправная точка.
Советы
- Используйте локальный CLI, а не API, чтобы генерация бралась из уже имеющейся подписки, а не оплачивалась за каждый вызов.
- Начинайте со встроенной design system, чтобы пропустить чистый лист; импортируйте ZIP из Claude Design, когда нужен собственный бренд.
- Добавляйте только те ключи медиа, которые действительно будете использовать — чтобы начать, не нужны все поставщики.
- Ожидайте черновик на 90 %, а затем дорабатывайте. Экспортируйте пораньше (в том числе в PowerPoint), чтобы поймать мелкие огрехи форматирования до передачи.
- Опирайтесь сначала на прототипы и презентации. Это самые отполированные поверхности; галереи примеров и шаблонов лучше как вдохновение, чем как готовые результаты.
FAQ
Open Design бесплатен? Да — это open source под лицензией Apache-2.0. Локально вы запускаете его бесплатно; вы платите только за использование модели и медиа того агента и поставщиков API, которые подключаете. Указав его на локальный CLI, вы делаете так, что генерация опирается на уже имеющуюся у вас подписку.
Какие агенты для кодинга он поддерживает? Более 21 агента, включая Claude Code, Codex, Cursor, Gemini, GitHub Copilot и OpenCode. Open Design автоматически обнаруживает CLI, уже установленные на вашей машине, так что обычно ничего настраивать не нужно.
Могу ли я использовать собственную design system? Да. Самый гладкий путь сегодня — собрать систему в Claude Design, скачать проект в виде ZIP и импортировать этот ZIP в Open Design — ваши токены и компоненты переносятся напрямую. Отдельной кнопки «создать design system» в графическом интерфейсе пока нет, поэтому импорт ZIP — рекомендуемый путь.
Чем он отличается от Claude Design? То же знакомое ощущение, но open source, local-first и с подключаемыми агентами через более чем 21 CLI — плюс дополнительные возможности вроде презентаций, журнальных вёрсток, генерации изображений и видео, которых не предлагает инструмент с единственным поставщиком. Это ранняя версия, так что ждите нескольких шероховатостей, но фундамент крепкий.
Это письменное руководство основано на практическом разборе от Chase AI. Посмотрите полное видео выше и подпишитесь на Chase AI, чтобы получать больше практических разборов ИИ-инструментов.