Разворачиваем Open Design в cloud с помощью Sealos Skills

Open Design отлично работает на собственной машине — но локальный URL доступен только вам, а не команде, клиентам или партнёрам. Это руководство следует за демо от Sealos, где кодинг-агент поднимает Open Design из его репозитория GitHub, а затем Sealos Skills разворачивает его по публичному cloud-URL. Посмотрите видео выше, чтобы увидеть всё вживую, или читайте дальше письменную версию.

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

Что такое Open Design?

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

• Открытый исходный код, Apache-2.0 — читайте каждую строку и разворачивайте у себя, где захотите.
• Local-first или self-hosted — запускайте на своей машине или переносите в cloud (именно это и делает данное руководство).
• Свой агент и свой key — генерация идёт через Claude Code, Codex, Gemini и другие, используя ваш собственный доступ к моделям.
• Больше, чем прототипы — веб-страницы, прототипы, дашборды, слайд-деки и другие результаты — всё из одного рабочего пространства.

Зачем переносить Open Design в cloud

Когда вы запускаете Open Design из исходников, рабочее пространство открывается по локальному URL. Это идеально для работы в одиночку: запустили, спроектировали, увидели результат вживую. Но, как отмечает демо Sealos, есть загвоздка — этот адрес по сути localhost. Он работает только для вас, и больше никто не может до него достучаться.

Чтобы поделиться дизайном с коллегами, передать работающий прототип клиенту или дать внешним пользователям опробовать результат, приложению нужен публичный URL. Именно в этом суть данного руководства: перенести Open Design из локального рабочего пространства в онлайн-сервис, чтобы «запуск локально» был лишь началом.

Поднимаем Open Design из репозитория GitHub

Вместо того чтобы вручную читать документацию по установке, в демо всю работу поручают кодинг-агенту (в данном случае Codex). Идея простая: направить агента на репозиторий Open Design на GitHub и позволить ему самому выполнить настройку.

• Дайте агенту репозиторий. Отправьте ему ссылку на GitHub и попросите запустить Open Design. Он прочитает README и руководство по быстрому старту, разберётся с шагами установки и выполнит их за вас.
• Откройте локальный URL. Когда запуск завершится, агент выдаст URL. Откройте его — и рабочее пространство загрузится, без ручной, команда за командой, установки с вашей стороны.

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

Проектируем в рабочем пространстве

Открыв рабочее пространство, вы заметите, что это не обычный чат-инструмент. Можно выбрать один из набора skills — веб-страницы, прототипы, дашборды, деки — и выбрать design system, чтобы результат имел единый визуальный стиль.

В демо выбирают skill для прототипа, вставляют бриф, и агент сразу же приступает к работе. По ходу дела он спрашивает про ваш творческий замысел, а вы отвечаете, исходя из того, чего хотите. Агент работает слева, а результат в реальном времени отображается справа — всё работает точно так же, как локальная рабочая среда для дизайна на базе ИИ.

Лендинг, сгенерированный в рабочем пространстве — агент работает слева, живое превью рендерится справа.

Вы можете просмотреть полный каталог skills и design systems в хабе плагинов, так что никогда не придётся начинать с чистого листа.

Хаб плагинов: skills и design systems, которые можно применить, чтобы определить, что производит рабочее пространство.

Разворачиваем на Sealos Cloud с помощью Sealos Skills

Именно здесь решается проблема локального URL. В демо следующая инструкция для Codex проста: использовать Sealos Skills — набор skills для ИИ-агентов — чтобы проанализировать проект Open Design и развернуть его в Sealos Cloud.

Sealos Skills даёт агенту знания о развёртывании, которых у него иначе не было бы. Вот как выглядит процесс, который выполняет демо:

1. Анализ проекта. Skill изучает структуру проекта, настройку Docker, порты и переменные окружения — детали, которые определяют, как приложение должно работать в cloud.
2. Формирование плана развёртывания. На основе этого анализа он создаёт конфигурацию развёртывания для Sealos Cloud.
3. Подтверждение и развёртывание. Если план выглядит корректно, вы отвечаете yes, когда вас об этом спросят, и проект автоматически разворачивается на Sealos Cloud.
4. Получение публичного URL. После развёртывания Sealos возвращает ссылку для публичного доступа — это уже не локальный адрес. Участники команды, партнёры и внешние пользователи могут открыть её и напрямую опробовать приложение.

Ключевой сдвиг здесь в том, кто выполняет работу. Развёртывание проекта с открытым исходным кодом обычно требует множества ручных решений: чтения конфигураций, сопоставления портов, настройки переменных окружения и устранения неполадок, когда что-то ломается. Sealos Skills превращает всё это в рабочий процесс, который ИИ-агент может выполнить от начала до конца — проанализировать, развернуть, проверить и выпустить.

От локального рабочего пространства к работающему cloud-приложению

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

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

Обязательно ли использовать Sealos, чтобы запустить Open Design? Нет. Open Design — это local-first решение, и запуск на собственной машине работает прекрасно. Sealos — сторонний cloud-хостинг, используемый в этом демо, чтобы сделать приложение доступным по публичному URL; вы также можете развернуть его самостоятельно, как вам удобно, поскольку это открытый исходный код под лицензией Apache-2.0.

Что такое Sealos Skills? Это набор skills для ИИ-агентов, показанный в демо за управлением Codex. Он даёт агенту знания о развёртывании — анализ настройки Docker проекта, портов и переменных окружения, формирование плана развёртывания и публикацию приложения на Sealos Cloud.

Что именно делает агент во время развёртывания? Он читает структуру проекта, проверяет конфигурацию Docker, порты и переменные окружения, формирует конфигурацию развёртывания и — после вашего подтверждения — разворачивает приложение в cloud и возвращает публичный URL.

Open Design бесплатен? Да — это открытый исходный код под лицензией Apache-2.0. Вы платите только за использование модели/API того кодинг-агента, который подключаете, плюс за любой cloud-хостинг (например, Sealos), которым решите воспользоваться.

Какой кодинг-агент используется здесь? В демо используется Codex, но Open Design работает поверх любого кодинг-агента, который вы подключите, — Claude Code, Codex, Gemini и другие — с использованием вашего собственного key.

---

Это письменное руководство основано на демо Sealos. Посмотрите полное видео выше и подпишитесь на Sealos, чтобы узнать больше о развёртывании в cloud с помощью ИИ-агентов.