Open Design: БЕСПЛАТНАЯ open-source альтернатива Claude Design

Open Design берёт идею и превращает её в прототипы, сайты, слайды и даже HTML-видео — и всё это работает локально на вашей собственной машине. В этом демо Code A Program устанавливает десктопное приложение, подключает кодинг-агента и собирает премиальный лендинг для ИИ-инструмента для письма под названием Draft, а затем дорабатывает и разворачивает его, не покидая рабочее пространство. Посмотрите весь процесс в видео Code A Program или следуйте текстовому руководству ниже.

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

Что такое Open Design?

Open Design — это open-source, local-first платформа для дизайна, бесплатная альтернатива Claude Design и Figma. Вместо того чтобы привязывать вас к одному поставщику моделей, она работает поверх кодинг-агента, которым вы уже пользуетесь, так что вы приносите своего агента и свой key.

• Open source, Apache-2.0 — читайте каждую строку, разворачивайте у себя или просто скачайте десктопное приложение.
• Работает локально — проекты живут в ваших собственных папках на вашей машине, а не в чужом облаке.
• Приносите своего агента — поддерживается 21+ кодинг-агент, включая Claude Code, Codex, Cursor, Gemini, OpenCode и другие; вы сами выбираете, какая CLI управляет генерацией.
• Больше, чем прототипы — сайты, прототипы, слайд-деки, генерация изображений и даже HTML-видео, всё из одного рабочего пространства.
• Всё в комплекте — 129 встроенных дизайн-систем и 460+ плагинов, чтобы вы никогда не начинали с чистого листа.

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

Шаг 1 — Выберите агента и модель

Скачайте десктопное приложение с open-design.ai, установите его и ответьте на короткие вопросы онбординга. Это выведет вас прямо в основной интерфейс чата.

В правом верхнем углу выберите провайдера ИИ-агента. Из локальных CLI-провайдеров можно выбрать Claude Code, Codex CLI, Gemini CLI (у неё есть бесплатные лимиты), OpenCode и другие. В демо Code A Program использует OpenCode с моделью GLM 5.2, потому что она хорошо показывала себя во фронтенд-работе — но ключевое здесь гибкость: вы не привязаны ни к одной модели или платформе.

Шаг 2 — Напишите промпт

В чате есть опция прикрепить файл для справочных материалов, а также раздел плагинов. Open Design поставляется с 460+ плагинами, охватывающими помощников для сборки и тестов, 3D-макеты, рамки мобильных и десктопных устройств и многое другое — так что если вам нужны 3D-элементы или корпус устройства, вы добавляете плагин, а не боретесь с промптом.

Библиотека плагинов: 460+ плагинов для сборки, тестирования, 3D-макетов, рамок устройств и не только — добавьте то, что нужно вашему дизайну.

Теперь вставьте бриф. Промпт из демо просит премиальный лендинг для ИИ-ассистента для письма под названием Draft, со сдержанной палитрой из сланцево-чёрного, слоновой кости и электрик-оранжевого, смелым редакционным hero с анимацией живой генерации текста, интерактивным холстом для письма, трёхшаговым воркфлоу, секцией результатов, двухуровневой таблицей цен, FAQ и сильным финальным призывом к действию — при этом явно избегая карточек, градиентов, гласморфизма и шаблонных изображений роботов.

Есть ещё один рычаг, о котором стоит знать: вы можете строить дизайн на основе популярной дизайн-системы брендов вроде Apple, Airbnb, BMW, IBM или Spotify. В этом прогоне Code A Program его пропускает, но он под рукой, когда вы хотите попасть в конкретный визуальный стиль.

Шаг 3 — Смотрите, как он строит и проверяет себя

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

В демо сам лендинг готов примерно за шесть минут. Затем Open Design тратит оставшееся время на самопроверки — проверяет структуру, пересматривает вёрстку, контролирует анимации и устраняет мелкие проблемы, прежде чем отметить сборку завершённой. Когда он закончит, нажмите иконку презентации, чтобы открыть сайт в новой вкладке.

Сгенерированный результат: редакционный hero с живой анимацией печати, воркфлоу, результаты, цены, FAQ и футер — адаптивно на планшете и мобильном.

Результат несёт hero с ИИ-анимацией печати, плавные эффекты прокрутки, интерактивную секцию редактора, полосу воркфлоу, секцию результатов клиентов, помесячные/погодовые цены, FAQ и аккуратный футер. Переключитесь на виды планшет и мобильный, чтобы убедиться, что адаптивный дизайн держится.

Шаг 4 — Доводка с помощью панели на холсте

Правая панель инструментов — место, где вы наводите лоск, не сжигая токены на пустячные правки:

• Screenshot — сделайте снимок сайта.
• Comment — выделите любой элемент (скажем, заголовок hero) и опишите изменение, например перекрасить одно слово в оранжевый тематический цвет. Соберите несколько комментариев и отправьте их разом или пошлите один прямо в чат.
• Marker — подсветите любую область страницы и поделитесь ею с агентом.
• Element edit — напрямую меняйте шрифты, ширину, цвета и прочее у выбранного элемента, так что простым правкам никогда не нужна полная регенерация.

Вам также доступны элементы управления масштабом и обзор всех открытых комментариев. В демо текст «actually» перекрашивается в оранжевый прямо там, в панели инструментов.

Шаг 5 — Экспорт и деплой

Над панелью инструментов — опция скачать: экспортируйте проект как PDF, изображение, ZIP или HTML. Есть и сохранить как шаблон, чтобы переиспользовать этот дизайн как отправную точку для будущих проектов.

Самое интересное — меню поделиться. Оттуда вы можете:

• развернуть на Vercel в один клик — подключите аккаунт Vercel токеном доступа и нажмите deploy.
• развернуть на Cloudflare тем же способом.
• открыть в редакторе вроде Cursor или VS Code, либо в CLI-инструментах вроде Gemini CLI, Codex и Claude Code. Open Design передаёт сгенерированный HTML вместе с папкой Skills, так что вы можете превратить дизайн в проект Next.js — или в любой другой фреймворк по вкусу.

В настройках можно добавить глобальные правила (например, «всегда использовать TypeScript»), сохранять полезные memories, как в функции памяти Claude, и настроить поставщиков медиа — key ElevenLabs для голоса и звука, а также Nano Banana, OpenAI или OpenRouter для генерации изображений. Ещё можно добавлять скиллы (есть скилл agent-browser для автоматизации задач в браузере и несколько фронтенд-скиллов), подключать MCP-серверы и менять расположение проектов по умолчанию.

Советы, как выжать больше

• Для старта хватает бесплатных моделей. Весь демо-сайт был сгенерирован на бесплатном тарифе Gemini и всё равно выглядит отлично; берите платную модель, когда хотите более высокое качество в реальной работе.
• Добавляйте плагины до промпта, если знаете, что понадобятся 3D-макеты или рамки устройств.
• Используйте правильный инструмент для правки — редактор элементов и комментарии справляются с мелкими правками без полной пересборки.
• Сохраняйте удачные макеты как шаблоны, чтобы следующий проект стартовал с форой.

Частые вопросы

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

Какие кодинг-агенты он поддерживает? 21+ агент, включая Claude Code, Codex CLI, Cursor, Gemini CLI и OpenCode. Провайдера вы выбираете в меню в правом верхнем углу.

Чем он отличается от Claude Design? То же знакомое ощущение, но open-source, local-first и с заменяемым агентом — вы не привязаны к одной модели или платформе и можете экспортировать или разворачивать проект как угодно.

Можно ли развернуть, не выходя из приложения? Да — меню «поделиться» разворачивает на Vercel или Cloudflare в один клик (токен доступа поставщика вы предоставляете сами) либо передаёт код в Cursor, VS Code или CLI-агенту.

Обязательно ли использовать платную модель ради хорошего результата? Нет — для большинства лендингов и фронтенд-дизайнов бесплатные модели уже достаточно способны; переключайтесь на платную модель только когда хотите более продвинутый результат.

---

Это текстовое руководство основано на демо Code A Program. Посмотрите полное видео выше и подпишитесь на Code A Program ради новых практических видео об ИИ-инструментах.