Kiro 延伸阅读
Kiro 设计工作的教程、文档与操作演示,均汇总于已发布的指南中。
如何在 OpenDesign 中用 Kiro 设计界面:先写 spec 再动手写代码,用 steering 文件规范文案与错误处理,一个从 brief 到已审阅文件的结账任务,以及开始前需要了解的各项限制。
一个完整的 Kiro 设计任务
一个从头到尾完成的任务:你交付的简报和约束、返回的成果,以及你在宣布完成之前运行的检查。下方界面是为本页面构建的示例,并非记录下来的 Kiro 运行。
Brief根据所附规格设计一个两页结账流程:配送和支付,并带有始终可见的订单摘要。文案和错误处理请使用引导文件。桌面端和手机端。
data-od-id 挂钩撰写简报、选择设计系统,并定义验收标准。
规划布局,编写 HTML、CSS 和 JavaScript,并按请求进行修改。
提供设计系统和技能,渲染预览,并将每个版本存储为项目文件。
在交付前,检查视觉层级、8px 网格上的间距、两个断点以及每一个交互。
表单和摘要对齐到 8px 网格;摘要在桌面端固定,在手机端折叠。
先问题,后字段,再按钮;强调色仅高亮当前步骤。
摘要在表单上方折叠为一行总计;按钮横跨全宽。
触发地址错误,应用促销码,然后返回购物车。
Fit
兼容性
本指南聚焦于通过 OpenDesign 桌面应用连接的 Kiro。发布的参考资料核查于 2026 年 9 月 6 日。
Kiro 是来自 Amazon(AWS)的智能体式 AI,提供 IDE、CLI 和 Web 界面形式,专为从原型到生产的规格驱动开发而设计。它处于预览阶段。本页面涵盖的是通过 OpenDesign 使用 Kiro 设计界面,而不是 Kiro 自身的界面。OpenDesign 的设置说明列出了可用的智能体。
身份验证选项:AWS Builder ID、Google、GitHub 或 AWS IAM Identity Center(无需 AWS 账户)。使用你的 AWS Builder ID 或其他方式登录——凭据保留在你的机器上。本页面不对配额或定价作任何承诺。
桌面版构建请参见下载页面。源码快速入门中的 Node.js 和 pnpm 要求仅适用于从源码运行,不适用于安装桌面软件包。最低兼容的 Kiro 版本:此处未验证。
按照你所安装版本提供的连接说明操作,然后运行一个小任务。确认 Kiro 处理了它且成果可以打开。仅下载并不能保证连接正常工作。
从桌面应用开始
先下载,完成你所安装版本的 Kiro 设置,然后验证一个小结果。此路径不需要从源码构建 OpenDesign。
选择适合你计算机的软件包,安装并打开应用。
下载 OpenDesign按照你所安装版本提供的 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 设置说明;当前命令请参见供应商文档。
从一份精简的简报开始,这样你就能评判整个循环,包括一次修改。
构建一个设置页面,包含个人资料表单和保存确认。使用我的设计规则。在桌面端和移动端宽度下验证。
若要从源码运行 OpenDesign,请改为参阅技术快速入门。
Kiro 设计工作流
一个结账任务勾勒出从你的简报到已验证文件的路径。每一步都展示你提供什么、Kiro 做什么、OpenDesign 贡献什么,以及你检查什么。
保持简洁:用三到六行说明目标受众、该屏幕的用途以及平台。
一个设计系统加上几条明确的规则。这种组合能让输出保持品牌一致,而不是千篇一律。
Kiro 产出一个自包含的 HTML 文件:布局、样式、交互和稳定的钩子。
该文件会在 OpenDesign 内以你要求的宽度渲染。设计判断正是在此发生。
data-od-id 目标,供评论和编辑使用。通过在预览中指向元素来请求修改。每次修订都是一个新文件,绝不会被静默覆盖。
资源
Kiro 设计工作的教程、文档与操作演示,均汇总于已发布的指南中。
限制
常见问题
# 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
# 4. Start an interactive session in your project
cd your-project
kiro-cli chat
# 5. Wire MCP servers (optional, e.g. for design handoff)
kiro-cli mcp add ...kiro-cli chat
# in the prompt:
> Here are my references: reference-desktop.png and reference-mobile.png.
Write a spec, then implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens (see my steering files).
Match spacing, layout, and hierarchy; make it responsive.
Render it in the browser and iterate until it matches the references
across breakpoints.