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

notification-preferences.html · 1440px

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

1. 1

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

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

   Скачать OpenDesign

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

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

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

   Следуйте инструкциям Kimi в вашей установленной версии. Авторизуйтесь с помощью своего API-ключа Moonshot (BYOK) — учётные данные остаются на вашем устройстве.

   Документация Kimi CLI — Начало работы

   # 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended)
   curl -LsSf https://code.kimi.com/install.sh | bash
   # or, if you already have uv:
   uv tool install --python 3.13 kimi-cli
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   kimi              # then run /login: OAuth via Kimi Code, or paste a Moonshot API key

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

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

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

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

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

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

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

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

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

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

1. 1

   Дизайн-бриф

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

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

   New project · PromptKimi

   You

   Design notification preferences: channels, quiet hours, per-project overrides. Match the reference for tone. Desktop and phone.

   Kimi

   Understood. Should per-project overrides live on this page as expandable rows, or on each project’s own settings page?
2. 2

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

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

   • ВыВыберите дизайн-систему; укажите breakpoints и обязательные к использованию компоненты.
   • KimiЗагружает токены и правила поведения из 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

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

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

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

   Project files3 files

   • notification-preferences.htmlnew
   • AGENTS.mdbound
   • DESIGN.mdread
4. 4

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

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

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

   Preview · 390pxComment mode

   Comment on · rows

   One toggle per row on the phone; the helper text goes under the label.

   Comment on · quiet

   Quiet hours need an explicit “off” state, not two empty pickers.
5. 5

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

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

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

   Verification · v23 of 4

   • ✓Single toggle per row at 390px
   • ✓Quiet hours has an off state
   • ✓No horizontal scroll at 390px
   • Per-project expand — checked by you