ДОПОЛНИТЕЛЬНОЕ ЧТЕНИЕ
Дополнительные материалы по Kiro
Учебные материалы, документация и пошаговые разборы по дизайну с Kiro, перечисленные в опубликованном руководстве.
Kiro 
OpenDesign Проектируйте с
Kiro в
OpenDesign.
Как проектировать интерфейсы с Kiro в OpenDesign: спецификация до написания кода, steering-файлы для текстов и обработки ошибок, одна задача по чекауту от брифа до проверенного файла и ограничения, которые нужно знать перед началом работы.
От брифа к интерфейсу01 / Kiro
ВЫ ПРИНОСИТЕ ИДЕЮ↗
«Оформление заказа, построенное по спецификации,
а не по мудборду».
Три способа начать работу с этим гайдом по Kiro
Выберите, с чего начать работу с Kiro
ЭТО РУКОВОДСТВО · ДИЗАЙН ИНТЕРФЕЙСОВ
Создайте интерфейс продукта с Kiro
Это руководство: бриф, референсы, правила дизайна и проверенный результат в HTML.
Читать это руководство НАСТРОЙКАНастройте Kiro с нуля
Вот полный путь от чистой машины до CLI Kiro, способного создавать и проверять UI.
Перейти к настройке СРАВНЕНИЕСравните Kiro с другими агентами
Чем Kiro отличается от Codex, Claude Code, Cursor для дизайн-задач и когда стоит выбрать другой workflow.
Посмотреть сравнениеНа этой странице Пример
Одна полная дизайн-задача с Kiro
Дизайн-задача с Kiro: от брифа до интерфейса
Одна задача, показанная от начала до конца: бриф и ограничения, которые вы передаёте, артефакт, который возвращается, и проверки, которые вы всё равно выполняете перед завершением. Интерфейс ниже — иллюстративный пример, созданный для этой страницы, а не записанный запуск Kiro.
1Дизайн-бриф и ограничения
БрифСпроектируйте двухстраничный чекаут по прикреплённой спецификации: доставка и оплата, с постоянно видимой сводкой заказа. Следуйте steering-файлам для текстов и обработки ошибок. Desktop и телефон.
- Дизайн-системаOpenDesign paper canvas: Albert Sans, один зелёный акцент
- Брейкпоинты1440px десктоп и 390px мобильный, без горизонтального скролла
- ВзаимодействияНавигация по шагам, автозаполнение адреса, проверка карты, промокод
- РезультатОдин самодостаточный HTML-файл со стабильными хуками
data-od-id
2Разделение работы: вы, Kiro и OpenDesign
- Вы
Пишете бриф, выбираете дизайн-систему и определяете критерии приёмки.
- Kiro
Планирует макет, пишет HTML, CSS и JavaScript и корректирует по запросу.
- OpenDesign
Предоставляет дизайн-систему и skill, рендерит превью и сохраняет каждую версию как файл в проекте.
- Проверка
Перед передачей проверяются визуальная иерархия, отступы по сетке 8px, оба брейкпоинта и каждое взаимодействие.
3Артефакт Kiro: процесс оформления заказа при 1440px и 390px
4Проверка перед передачей
Layout
Сетка и отступы
Форма и сводка на сетке 8px; сводка закреплена на десктопе и сворачивается на телефоне.
Иерархия
Визуальная иерархия
Сначала вопрос, затем поля, затем кнопка; акцентом выделен только текущий шаг.
Responsive
Мобильная раскладка
Сводка становится свёрнутой строкой итога над формой; кнопка занимает всю ширину.
Interaction
Проверка взаимодействия
Вызовите ошибку адреса, примените промокод, вернитесь в корзину.
Fit
Когда Kiro подходит для задачи, а когда нет
Kiro подходит, когда
- Спецификация до кода. Kiro сначала пишет требования, документ дизайна и список задач, поэтому вы правите макет и объём работы до того, как начнётся сборка.
- Файлы steering. Ваши стандарты, соглашения и токены передаются в каждый запуск, поэтому результат ориентируется на бренд, а не на стандартный вид.
- Хуки агента. Автоматизации срабатывают на события, например сохранение файла — это место для проверки или ревью без опоры на память.
- MCP и бесплатный старт. Kiro CLI управляет серверами MCP для внешнего контекста, выполняет вход через Builder ID, Google, GitHub или вашу организацию и бесплатен для старта в предварительной версии.
Выберите другой workflow, если
- Вам нужны редактируемые векторные файлы. Артефакт — это HTML, а не редактируемый дизайн-документ. Проверьте отдельный векторный workflow для нужного вам формата файлов.
- У вас нет ни референса, ни ограничений. Без дизайн-системы или примеров результат стремится к типовому виду; сначала напишите бриф.
- У вас нет учётных данных, необходимых этому агенту. Требуется: AWS Builder ID, Google, GitHub или AWS IAM Identity Center (учётная запись AWS не требуется). OpenDesign не предоставляет и не проксирует учётные данные.
- Ваша команда работает в Cursor или Antigravity. У этих агентов есть свои страницы; рабочее пространство то же, настройка отличается. См. похожие агенты.
Совместимость
Требования Kiro перед началом работы
Это руководство описывает Kiro при подключении через настольное приложение OpenDesign. Ссылки на источники проверены 6 сентября 2026 года.
Область применения инструментаKiro, от Amazon
Kiro — агентный AI от Amazon (AWS), доступный как IDE, CLI и веб-интерфейс, созданный для разработки на основе спецификаций от прототипа до продакшена. Находится в превью. Эта страница о проектировании интерфейсов с Kiro через OpenDesign, а не о собственном интерфейсе Kiro. Заметки по настройке OpenDesign перечисляют доступных агентов.
Учётные записи и аутентификацияAWS Builder ID, Google, GitHub или AWS IAM
AWS Builder ID, Google, GitHub или AWS IAM Identity Center (учётная запись AWS не требуется). Проходите аутентификацию через AWS Builder ID или другой вход — учётные данные остаются на вашей машине. Эта страница не гарантирует квоту или цену.
Система и версииДесктопное приложение или сборка из исходников
Проверьте страницу загрузок на наличие десктопных сборок. Требования к Node.js и pnpm в исходном quickstart относятся к запуску из исходного кода, а не к установке десктопного пакета. Минимальная совместимая версия Kiro: здесь не проверялась.
Проверка подключенияСигнал об успехе
Следуйте инструкциям по подключению, показанным вашей установленной версией, затем выполните небольшую задачу. Убедитесь, что Kiro справился с ней и что артефакт открывается. Одной загрузки недостаточно для установления рабочего подключения.
Начните с десктопного приложения
Настройка Kiro в три шага
Сначала загрузите, завершите настройку Kiro для вашей установленной версии, затем проверьте небольшой результат. Вам не нужно собирать OpenDesign из исходного кода, чтобы пройти этот путь.
- 1
Загрузите десктопное приложение OpenDesign
Выберите пакет для вашего компьютера, установите его и откройте приложение.
Скачать OpenDesignКОНТРОЛЬНАЯ ТОЧКАОткрывается настольное приложение. Уже установлено? Переходите к следующему шагу — повторно скачивать не нужно. - 2
Подготовьте подключение Kiro
Следуйте инструкциям Kiro в установленной версии. Авторизуйтесь через AWS Builder ID или другой способ входа — учётные данные остаются на вашем компьютере.
Документация Kiro CLI# 1. Install Kiro CLI (see kiro.dev/docs/cli for the macOS/Linux/Windows command) # 2. Authenticate — opens your browser to complete sign-in kiro-cli login # choose Builder ID, Google, GitHub, or your organization # 3. Confirm you are signed in kiro-cli whoamiИз заметок по настройке Kiro в опубликованном руководстве; актуальную команду уточняйте в документации поставщика.
КОНТРОЛЬНАЯ ТОЧКАУбедитесь, что выбраны нужный агент и аккаунт. Если он недоступен, проверьте совместимость, прежде чем браться за более крупную задачу. - 3
Запустите одну небольшую задачу в Kiro
Используйте небольшой бриф, чтобы оценить весь цикл, включая одну доработку.
Начальный брифСоздайте экран настроек с формой профиля и подтверждением сохранения. Используйте мои правила дизайна. Проверьте на ширинах для десктопа и мобильных устройств.
КОНТРОЛЬНАЯ ТОЧКАОткройте результат, проверьте состояние сохранения и запросите одно конкретное изменение. Сгенерированный файл — это начало проверки, а не её конец.
Чтобы запустить OpenDesign из исходного кода, следуйте техническому quickstart.
Рабочий процесс дизайна в Kiro
Дизайн-процесс Kiro в пять шагов
Одна и та же задача по процессу оформления заказа, пройденная от брифа до проверенного файла. На каждом шаге указано, что предоставляете вы, что делает Kiro, чем помогает OpenDesign и что вы проверяете.
- 1
Дизайн-бриф
Простой язык, от трёх до шести строк. Укажите аудиторию, задачу экрана и платформы.
- ВыНапишите бриф; приложите референсный скриншот, если он есть.
- KiroЧитает бриф и файл инструкций проекта; задаёт вопросы, если что-то неоднозначно.
- OpenDesignПредоставляет проект, поверхность для промптов и skill для нужного типа артефакта.
- ПроверкаУбедитесь, что в брифе указаны критерии приёмки. Добавить их сейчас дешевле, чем после генерации.
- 2
Дизайн-ограничения
Дизайн-система и несколько строгих правил. Именно это отличает результат в стиле бренда от универсального вида.
- ВыВыберите дизайн-систему; укажите breakpoints и обязательные к использованию компоненты.
- KiroЗагружает токены и правила из DESIGN.md в контекст, прежде чем написать хоть одну строку.
- OpenDesignПоставляет библиотеку дизайн-систем и привязывает выбранную к шаблону skill.
- ПроверкаТокены соответствуют вашему бренду. Один акцентный цвет, нужные шрифты, нужный радиус.
- 3
Сгенерировать интерфейс
Kiro пишет автономный HTML-файл: разметку, стили, взаимодействия и стабильные хуки.
- ВыПодождите или ответьте на уточняющий вопрос. Настраивать ничего не нужно.
- KiroПланирует разделы, пишет HTML, CSS и JavaScript, запускает файл и исправляет ошибки.
- OpenDesignСохраняет артефакт в папку проекта и индексирует его для предпросмотра.
- ПроверкаПока ничего. Оценивайте файл после рендеринга, а не по исходному коду.
- 4
Предпросмотр
Файл отображается внутри OpenDesign при указанных вами ширинах. Именно здесь оценивается дизайн.
- ВыПереключаете ширины, кликаете по интерактивным элементам, оставляете комментарии к элементам.
- KiroЧитает ваши комментарии к предпросмотру и готовит следующую редакцию.
- OpenDesignОтображает предпросмотр, предоставляет цели
data-od-idдля комментариев и правок. - ПроверкаИерархия, контраст, переполнение при 390px, состояния фокуса и то, используется ли акцент умеренно.
- 5
Правки и проверка
Запрашивайте изменения, указывая на элементы в предпросмотре. Каждая правка — это новый файл; ничего не перезаписывается тихо.
- ВыПревращаете комментарии в запросы; решаете, когда задача выполнена.
- KiroПрименяет изменения на месте и повторно запускает файл.
- OpenDesignХранит версии рядом друг с другом; экспортирует изображение или HTML, когда вы закончили.
- ПроверкаПовторно проверяете только изменённую область, затем всю страницу целиком на каждой контрольной точке.
Ресурсы
Ресурсы по дизайну в Kiro
Skills Просмотреть skills Дизайн-системы Просмотреть системы Шаблоны Просмотреть шаблоны
Skills для дизайна
Типы артефактов, которые Kiro может создавать в OpenDesign, — один skill на каждый тип.
Дизайн-системы
Брендовые токены и компоненты, которые нужно привязать до того, как Kiro начнёт что-то генерировать.
Шаблоны
Отправные точки для презентаций, лендингов и экранов продукта.
Ограничения
Ограничения Kiro, ручные проверки и запасные варианты
- Область примененияKiro CLI переносит агента в ваш терминал — интерактивная чат-сессия, настраиваемые агенты, файлы steering, хуки агента и серверы Model Context Protocol. Эта страница описывает Kiro как агента, подключённого к OpenDesign, а не все возможности Kiro.
- Лимиты использованияЛимиты использования и стоимость зависят от учётной записи, которую вы используете (AWS Builder ID, Google, GitHub или AWS IAM Identity Center — без необходимости иметь аккаунт AWS). Эта страница не утверждает что-либо о бесплатных квотах.
- СетьЛокальные файлы проекта не означают офлайн-инференс. Прежде чем передавать конфиденциальные данные, ознакомьтесь с настройками провайдера вашего агента и политиками обработки данных.
- Результат — HTMLПродукты представляют собой HTML-файлы, а не векторные файлы дизайна.
- Ручная проверкаДоступность, реальный контент, соответствие бренду и корректность взаимодействия проверяете вы сами в предпросмотре. Любую самопроверку агента следует считать лишь первым проходом.
- Запасной вариантЕсли агент недоступен или задача завершилась ошибкой, проверьте инструкции по подключению и авторизации для установленной версии. Перед изменением конфигурации сохраните ошибку и последний работающий артефакт.
Вопросы и ответы
Частые вопросы о Kiro и OpenDesign
Действительно ли Kiro CLI справляется с дизайном?
Да — при наличии эстетического skill, дизайн-системы и реальных референсных изображений в контексте Kiro CLI создаёт готовый к продакшену, адаптивный UI, а его workflow, основанный на спецификациях, удерживает сборку в соответствии с заявленным намерением. Без этого контекста агент склоняется к типовому виду — именно этот разрыв закрывает OpenDesign.
Нужен ли мне аккаунт AWS для использования Kiro CLI?
Нет — Kiro позволяет войти с помощью AWS Builder ID, Google, GitHub или через вашу организацию (AWS IAM Identity Center), и аккаунт AWS для использования не требуется. Kiro находится в статусе превью и бесплатен для начала работы. OpenDesign в любом случае никогда не проксирует ваши учётные данные.
Что делает Kiro CLI особенно подходящим для дизайна?
Его workflow, основанный на спецификациях: перед написанием кода Kiro формирует требования, дизайн-документ и список задач, поэтому вы можете исправить макет и объём работ до того, как сборка зафиксируется. Steering-файлы несут ваши конвенции, а hooks могут принудительно выполнять проверки — но вкус всё равно определяется дизайн-системой, skill и референсами, которые вы предоставляете.
Kiro CLI или Claude Code для фронтенд-дизайна?
Оба сильны. Claude Code известен конкретными, учитывающими кодовую базу дизайнерскими решениями; преимущество Kiro CLI — его основанный на спецификациях, проверяемый workflow со steering и hooks. Многие команды используют оба — OpenDesign позволяет переключаться между агентами без изменения вашего дизайн-workflow.
Как подключить Kiro CLI к внешним дизайн-инструментам?
Kiro CLI управляет серверами Model Context Protocol (MCP) — используйте kiro-cli mcp, чтобы добавить их. MCP-сервер может привнести реальный дизайн-контекст и инструменты в агент, чтобы сгенерированный код соответствовал источнику, а не приближённо его повторял.
Начните первую дизайн-задачу с Kiro
Начните с небольшой задачи, оцените результат обмена, а затем переходите к реальному брифу. Выберите вариант, соответствующий вашей настройке; страница не определяет её автоматически.