Проектируйте с
Antigravity в
OpenDesign.

signup-flow.html · 1440px

4Проверка перед передачей

1. 1

   Загрузите десктопное приложение OpenDesign

   Выберите пакет для вашего компьютера, установите его и откройте приложение.

   Скачать OpenDesign

   КОНТРОЛЬНАЯ ТОЧКА

   Открывается настольное приложение. Уже установлено? Переходите к следующему шагу — повторно скачивать не нужно.
2. 2

   Подготовьте подключение к Antigravity

   Следуйте инструкциям Antigravity в вашей установленной версии. Авторизуйтесь через аккаунт Google — учётные данные остаются на вашем устройстве.

   # 1. Download Antigravity for your OS (macOS, Windows, Linux)
   #    from the official download page: antigravity.google/download
   
   # 2. Launch it and sign in
   agy               # opens Antigravity; sign in with your Google account
   
   # 3. Accept the data-use policy, pick a theme, and open your project folder

   Из заметок по настройке Antigravity в опубликованном руководстве; актуальную команду уточняйте в документации производителя.

   КОНТРОЛЬНАЯ ТОЧКА

   Убедитесь, что выбраны нужный агент и аккаунт. Если он недоступен, проверьте совместимость, прежде чем браться за более крупную задачу.
3. 3

   Выполните одну небольшую задачу в Antigravity

   Используйте небольшой бриф, чтобы оценить весь цикл, включая одну доработку.

   Начальный бриф Копировать

   Создайте экран настроек с формой профиля и подтверждением сохранения. Используйте мои правила дизайна. Проверьте на ширинах для десктопа и мобильных устройств.

   КОНТРОЛЬНАЯ ТОЧКА

   Откройте результат, проверьте состояние сохранения и запросите одно конкретное изменение. Сгенерированный файл — это начало проверки, а не её конец.

Чтобы запустить OpenDesign из исходного кода, следуйте техническому quickstart.

1. 1

   Дизайн-бриф

   Простой язык, от трёх до шести строк. Укажите аудиторию, задачу экрана и платформы.

   • ВыНапишите бриф; приложите референсный скриншот, если он есть.
   • AntigravityЧитает бриф и файл инструкций проекта; уточняет, если что-то неоднозначно.
   • OpenDesignПредоставляет проект, поверхность для промптов и skill для нужного типа артефакта.
   • ПроверкаУбедитесь, что в брифе указаны критерии приёмки. Добавить их сейчас дешевле, чем после генерации.

   New project · PromptAntigravity

   You

   Design a three-step signup: account, workspace, invite. Verify each step in the browser at 1440 and 390 before handoff.

   Antigravity

   Understood. Should the URL slug be editable, or derived from the workspace name and locked?
2. 2

   Дизайн-ограничения

   Дизайн-система и несколько строгих правил. Именно это отличает результат в стиле бренда от универсального вида.

   • ВыВыберите дизайн-систему; укажите breakpoints и обязательные к использованию компоненты.
   • AntigravityЗагружает токены и правила подхода из DESIGN.md в контекст, прежде чем написать хоть строку.
   • OpenDesignПоставляет библиотеку дизайн-систем и привязывает выбранную к шаблону skill.
   • ПроверкаТокены соответствуют вашему бренду. Один акцентный цвет, нужные шрифты, нужный радиус.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Сгенерировать интерфейс

   Antigravity создаёт самодостаточный HTML-файл: разметку, стили, интерактивность и стабильные хуки.

   • ВыПодождите или ответьте на уточняющий вопрос. Настраивать ничего не нужно.
   • AntigravityПланирует разделы, пишет HTML, CSS и JavaScript, запускает файл и исправляет ошибки.
   • OpenDesignСохраняет артефакт в папку проекта и индексирует его для предпросмотра.
   • ПроверкаПока ничего. Оценивайте файл после рендеринга, а не по исходному коду.

   Project files3 files

   • signup-flow.htmlnew
   • AGENTS.mdbound
   • DESIGN.mdread
4. 4

   Предпросмотр

   Файл отображается внутри OpenDesign при указанных вами ширинах. Именно здесь оценивается дизайн.

   • ВыПереключаете ширины, кликаете по интерактивным элементам, оставляете комментарии к элементам.
   • AntigravityЧитает ваши комментарии к превью и готовит следующую редакцию.
   • OpenDesignОтображает предпросмотр, предоставляет цели data-od-id для комментариев и правок.
   • ПроверкаИерархия, контраст, переполнение при 390px, состояния фокуса и то, используется ли акцент умеренно.

   Preview · 390pxComment mode

   Comment on · stepper

   Only the current step in green; done steps get a check, not the accent.

   Comment on · summary

   On the phone keep only “Due today”; the rest is noise here.
5. 5

   Правки и проверка

   Запрашивайте изменения, указывая на элементы в предпросмотре. Каждая правка — это новый файл; ничего не перезаписывается тихо.

   • ВыПревращаете комментарии в запросы; решаете, когда задача выполнена.
   • AntigravityПрименяет изменения на месте и повторно запускает файл.
   • OpenDesignХранит версии рядом друг с другом; экспортирует изображение или HTML, когда вы закончили.
   • ПроверкаПовторно проверяете только изменённую область, затем всю страницу целиком на каждой контрольной точке.

   Verification · v23 of 4

   • ✓Current step only in accent
   • ✓Summary collapses at 390px
   • ✓No horizontal scroll at 390px
   • Validation states — checked by you