Прототип со скоростью промпта
Опишите задуманный поток, и агент соберёт настоящий кликабельный прототип — несколько экранов, общие стили и живые взаимодействия — отрисованный прямо в HTML, который можно открыть, поделиться и передать инженерам.
В одну строку
Open Design — это слой дизайна для кодинг-агента, которым вы уже пользуетесь. Для прототипирования это значит пройти путь от идеи в один абзац до навигируемого стилизованного прототипа за одну сессию — без дизайн-инструмента, без шага экспорта, без разрыва при передаче.
Как работает прототипирование с Open Design
- 01
Опишите поток
Расскажите агенту, что вы создаёте, простыми словами — «онбординг с экраном приветствия, выбором тарифа и подтверждением». Open Design загружает навык прототипирования, чтобы агент знал: нужны экраны, а не одна страница.
- 02
Сгенерируйте стилизованные экраны
Агент применяет дизайн-систему и шаблоны прототипов из Open Design, поэтому каждый экран использует общую типографику, отступы и компоненты, а не выглядит черновиком. Вы получаете связный набор экранов, а не разрозненные макеты.
- 03
Свяжите взаимодействия
Кнопки ведут по навигации, вкладки переключаются, модальные окна открываются. Прототип отрисовывается в самодостаточный HTML, поэтому ведёт себя как настоящий продукт в любом браузере — для просмотра не нужен аккаунт в инструменте прототипирования.
- 04
Итерации и передача
Дорабатывайте, разговаривая с агентом — «сделай выбор тарифа в три колонки». Поскольку артефакт живёт в вашем проекте, дизайн и итоговый код имеют один источник истины, закрывая привычный разрыв при передаче от дизайнера к инженеру.
Что можно прототипировать
прототип Прочитать полный промпт → Веб-прототип
Универсальный веб-прототип для десктопа. Автономный HTML-файл создаётся копированием `assets/template.html` и вставкой макетов из `references/layouts.md`. По умолчанию для лендингов, маркетинга, документации и SaaS-страниц.
прототип Прочитать полный промпт → Мобильное приложение
Экран мобильного приложения, отрендеренный в попиксельно точной рамке iPhone 15 Pro на странице. Создается копированием исходного файла assets/template.html и вставкой одного архетипа экрана из references/layouts.md. Используйте, когда в брифе запрашивается 'мобильное приложение', 'iOS приложение', 'Android приложение', 'экран телефона' или 'UI приложения'.
прототип Прочитать полный промпт → SaaS Landing
Одностраничный лендинг SaaS с hero-секцией, возможностями, социальными доказательствами, ценами и CTA. Соответствует активным токенам цвета/типографики/макета из DESIGN.md. Ключевые слова: "saas landing", "marketing page", "product landing".
прототип Прочитать полный промпт → Игровое приложение
Трёхэкранный прототип игрового мобильного приложения: обложка, ежедневные квесты с XP-лентами и полосой уровня, детали квеста. Подходит для игровых приложений, трекеров привычек, RPG-приложений для жизни, приложений с прокачкой, ежедневными квестами и системой XP/стриков.
прототип Прочитать полный промпт → HR-онбординг
План адаптации новых сотрудников на одной странице — расписание первой недели, знакомство с наставником и руководителем, план обучения, чеклист оборудования и критерии 'вы готовы, когда…'. Используйте при упоминании 'онбординг', 'новый сотрудник', 'план первой недели' или '入职'.
прототип Прочитать полный промпт → Kami Landing
Создаёт одностраничный документ печатного качества — тёплый пергаментный фон, чернильно-синий акцент, один вес шрифта с засечками, без курсива, без холодных серых тонов. Результат выглядит как профессиональный white paper или студийный one-pager, а не UI приложения. Многоязычный дизайн (EN · zh-CN · ja). Один автономный HTML-файл, без зависимостей.
Прототипирование с Open Design против старого подхода
| Что вам нужно | С Open Design | Традиционные инструменты прототипирования |
|---|---|---|
| Пройти путь от идеи к первому экрану | ●Один промпт в агенте, который у вас уже открыт | Открыть отдельный инструмент, создать файл, вручную расставлять блоки |
| Несколько связанных экранов | ●Генерируются как набор с общими стилями и рабочей навигацией | Каждый кадр рисуется и связывается вручную |
| Единая визуальная система | ●Берётся из переиспользуемой дизайн-системы, которую применяет агент | Пересоздаётся в каждом файле или поддерживается вручную |
| Результат, которым можно поделиться | ●Самодостаточный HTML — открывается в любом браузере, без аккаунта | Зрителю нужно место в подписке или ссылка для доступа в инструменте вендора |
| Путь к реальному коду | ●Артефакт живёт в вашем репозитории; дизайн и код имеют один источник | Пересобирается с нуля после отдельной передачи |
| Стоимость и привязка к вендору | ●Открытый исходный код, свои ключи, работает локально | Подписка за каждое место, хостинг у вендора, ограничения экспорта |
Каждый из них начинался как промпт и отрисовывался в кликабельный артефакт. Выберите шаблон, близкий к вашей идее, опишите свою вариацию — и агент адаптирует его.
FAQ по прототипированию
-
01 Нужен ли мне дизайн-инструмент вроде Figma, чтобы прототипировать с Open Design?
Нет. Open Design работает внутри вашего кодинг-агента и отрисовывает прототипы в HTML. Вы описываете поток словами, агент создаёт экраны. Нет отдельного инструмента-холста, который надо осваивать или оплачивать.
-
02 Прототипы интерактивны или это просто статичные макеты?
Интерактивны. Навигация, вкладки и модальные окна работают, потому что на выходе настоящий HTML и CSS. Вы можете прокликать их в любом браузере точно так же, как это сделал бы пользователь.
-
03 Какие агенты можно использовать?
Open Design работает с Claude Code, Codex, Cursor Agent, Gemini CLI и десятком других нативных адаптеров. Вы используете свои ключи провайдера; ничего не хостится за вас.
-
04 Может ли прототип стать реальным продуктом?
В этом и смысл. Артефакт живёт в вашем проекте, поэтому та же дизайн-система и компоненты переходят в продакшен-код, а не выбрасываются после передачи.
Прототипируйте свою следующую идею сегодня вечером
Поставьте звезду репозиторию, установите Open Design и превратите своё следующее «а что если» во что-то кликабельное — в агенте, которым вы уже пользуетесь.