От промпта к рабочему URL — редактирование, инспекция и деплой в один клик с Open Design

Это руководство проводит один прототип от промпта до рабочего URL: выбрать дизайн-систему, сгенерировать, доработать с помощью инструментов Edit и Inspect прямо на холсте, а затем развернуть сразу на Vercel или Cloudflare Pages — не покидая Open Design. Оно основано на демонстрации, которую 01Coder проводит в своём разборе, адаптировано для этого текстового руководства и обновлено под текущий релиз. Посмотрите видео выше, чтобы увидеть процесс вживую, или читайте дальше текстовую версию.

Рабочее пространство Open Design: опишите, что хотите создать, выберите режим, а остальное сделает ваш агент.

Что такое Open Design?

Open Design — это открытая, local-first дизайн-платформа, которая работает поверх кодинг-агента, которым вы уже пользуетесь — Claude Code, Codex, Gemini, Hermes и других — либо на вашем собственном API key. Она поставляется как десктопное приложение (компиляция не требуется) и сочетает глубокую библиотеку навыков с глубокой библиотекой дизайн-систем брендового уровня, так что вы начинаете с настоящей эстетики, а не с пустого холста.

• Открытый код, Apache-2.0 — клонируйте, разворачивайте у себя или просто скачайте приложение.
• Работает локально — ваши проекты живут на вашей собственной машине.
• Сменяемые агенты — переключайте агента в левом нижнем углу в любой момент.
• Дизайн-системы реальных брендов — Apple, Airbnb, ElevenLabs и многие другие.

Шаг 1 — Установите и выберите дизайн-систему

Самый простой путь — десктопное приложение с open-design.ai/download (macOS и Windows; Docker или pnpm, если предпочитаете запускать из исходников). При запуске в левом нижнем углу показан активный агент (01Coder использует Codex) — кликните по нему, чтобы переключить.

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

Библиотека плагинов: устанавливайте навыки прямо из реестра — включая anti-slop дизайн-навыки.

Шаг 2 — Генерация с этапом уточнения + визуальным направлением

Напишите своё задание и отправьте. Open Design задаёт короткий набор уточняющих вопросов (для кого это, тон дизайна, контекст бренда, язык), а затем предлагает выбор визуального направления — 01Coder выбирает редакционное направление «FT Magazine». Выберите одно, и справа будет построена первая версия.

Шаг 3 — Тонкая настройка с Edit и Inspect

Здесь вы шлифуете без повторного промпта:

• Edit — кликните по любому элементу и измените его содержимое напрямую. 01Coder сокращает подпись с «GitHub» до «GH» и переписывает слово в заголовке, затем нажимает apply content. Так же можно править ссылки, а левая панель показывает артефакт, организованный по слоям.
• Inspect — для визуального стиля. В первый раз он предупреждает, что у артефакта нет тегов data-oid; позвольте агенту добавить их (именно так Open Design надёжно нацеливается на элементы), затем перезагрузите. Теперь клик по любому элементу (скажем, по h1 героя) позволяет настроить цвет, фон и размер шрифта, со сбросом, если переборщили.

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

Шаг 4 — Деплой на рабочий URL в один клик

Когда всё готово, меню Share (вверху справа) экспортирует в PDF, PPTX, ZIP или автономный HTML — либо деплоит на Vercel или Cloudflare Pages в один клик. Используя Cloudflare, как делает 01Coder:

1. Нажмите deploy → Cloudflare, затем get / create an API token.
2. Создайте пользовательский токен с разрешением Cloudflare Pages, перейдите к сводке и создайте его.
3. Вставьте токен в Open Design, добавьте свой account ID (скопируйте его из дашборда Cloudflare) и задеплойте.
4. Откройте выданную ссылку — если первая загрузка выглядит криво, обновите страницу раз-другой, пока идёт распространение.

Настоящий сгенерированный прототип, отрисованный в превью — тёмная, кинематографичная лендинг-страница агентства.

Недовольны результатом в онлайне? Вернитесь в чат, итерируйте и задеплойте заново.

Советы

• Начинайте с дизайн-системы, чтобы первый проход уже соответствовал бренду.
• Позвольте агенту добавить теги data-oid перед использованием Inspect, затем перезагрузите превью.
• Используйте Edit для текста, Inspect для стиля, чат для структуры — выбирайте правильный инструмент под изменение.
• Для деплоя на Cloudflare нужны оба: API-токен (с разрешением Pages) и ваш account ID.
• Обновите страницу после первого деплоя, если она ещё не распространилась.

FAQ

Действительно ли я могу задеплоить на публичный URL прямо из Open Design? Да — меню Share деплоит на Vercel или Cloudflare Pages в один клик (токен провайдера предоставляете вы; для Cloudflare также нужен ваш account ID).

Что такое data-oid и почему Inspect его запрашивает? Это атрибут, который Open Design добавляет к элементам, чтобы надёжно на них нацеливаться. Позвольте агенту добавить его, перезагрузите — и Inspect заработает.

Обязательно ли запускать из исходников? Нет — скачайте десктопное приложение для macOS или Windows. Docker и pnpm из исходников — варианты, если так удобнее.

Это бесплатно? Приложение с открытым кодом под Apache-2.0 и бесплатно для локального запуска. Вы платите только за использование модели и медиа того агента и провайдеров, которые подключаете.

---

Это письменное руководство основано на практической демонстрации 01Coder. Посмотрите полное видео выше и подпишитесь на 01Coder ради новых глубоких разборов AI-продуктов.