延伸阅读
Kiro 延伸阅读
已发布指南中列出的、使用 Kiro 进行设计的教程、文档和演练。
Kiro 
OpenDesign 用 Kiro
在 OpenDesign
做设计。
如何在 OpenDesign 中用 Kiro 设计界面：先写 spec 再动手写代码，用 steering 文件规范文案与错误处理，一个从 brief 到已审阅文件的结账任务，以及开始前需要了解的各项限制。
从 brief 到界面01 / Kiro
您带来想法↗
“根据规格说明构建的结账流程，
而不是根据氛围板。”
一个完整的 Kiro 设计任务
一个 Kiro 设计任务：从 brief 到界面
完整展示单个任务的全过程：你交出的 brief 与约束条件、返回的产物，以及在完成之前仍需运行的检查。下方界面是为本页构建的示例说明，并非实际记录的 Kiro 运行结果。
1设计 Brief 与约束条件
Brief根据所附 spec 设计一个两页结账流程：配送与支付，且订单摘要始终可见。请遵循 steering 文件中关于文案和错误处理的规范。适配桌面端和手机端。
- 设计系统OpenDesign 纸感画布：Albert Sans，单一绿色强调色
- 断点1440px 桌面端与 390px 移动端，无横向滚动
- 交互步骤导航、地址自动完成、银行卡验证、优惠码
- 输出一个自包含的 HTML 文件，带有稳定的
data-od-id挂钩
2分工：你、Kiro 与 OpenDesign
- 你
撰写 brief，选择设计系统并定义验收标准。
- Kiro
规划布局，编写 HTML、CSS 和 JavaScript，并按要求进行修改。
- OpenDesign
提供设计系统与 skill，渲染预览，并将每个版本作为文件存储在项目中。
- 审查
在交付前，检查视觉层级、8px 网格上的间距、两个断点以及每一项交互。
3Kiro 产物：1440px 与 390px 下的结账流程
4交付前审查
Layout
网格与间距
表单与摘要遵循 8px 网格；摘要在桌面端为吸顶固定，在手机端可折叠。
Hierarchy
视觉层级
先是问题，再是字段，最后是按钮；强调色仅标记当前步骤。
Responsive
移动端布局
摘要变为表单上方的折叠总计行；按钮横跨整个宽度。
Interaction
交互检查
触发一个地址错误，应用一个优惠码，返回购物车。
Fit
Kiro 适合什么任务，不适合什么任务
Kiro 适合的场景
- 先规范，后编码。Kiro 会先编写需求、设计文档和任务列表，让您在构建提交前先修正布局和范围。
- 引导文件。您的标准、约定和 token 会带入每次运行，使输出针对品牌而非默认样式。
- Agent 钩子。自动化会在文件保存等事件发生时触发——让您无需依赖记忆即可强制执行验证或审查步骤。
- MCP 且免费开始使用。Kiro CLI 管理用于外部上下文的 MCP 服务器，可使用 Builder ID、Google、GitHub 或您的组织账号登录，预览版免费开始使用。
选择其他工作流的场景
- 你需要可编辑的矢量文件。 产物是 HTML，而非可编辑的设计文档。请查看其他矢量工作流以获取所需的资源格式。
- 没有参考图也没有约束条件。 缺少设计系统或示例时，输出往往趋于千篇一律；请先写好 brief。
- 您没有此 Agent 所需的凭证。所需：AWS Builder ID、Google、GitHub 或 AWS IAM Identity Center（无需 AWS 账户）。OpenDesign 不提供也不代理凭证。
- 您的团队使用 Cursor 或 Antigravity 工作。这些 Agent 都有各自的页面；工作区相同，但设置方式不同。请参阅相关 Agent。
兼容性
开始前需要满足的 Kiro 要求
本指南介绍通过 OpenDesign 桌面应用连接的 Kiro。已核实的公开参考资料截至 2026 年 9 月 6 日。
工具范围Kiro，由 Amazon 出品
Kiro 是 Amazon（AWS）出品的智能 AI，以 IDE、CLI 和网页界面形式提供，专为从原型到生产的 spec 驱动开发而构建。目前处于预览阶段。本页介绍的是通过 OpenDesign 使用 Kiro 设计界面，而非 Kiro 自身的界面。OpenDesign 的设置说明列出了可用的 Agent。
账户与身份验证AWS Builder ID、Google、GitHub 或 AWS IAM
AWS Builder ID、Google、GitHub 或 AWS IAM Identity Center（无需 AWS 账户）。使用你的 AWS Builder ID 或其他登录方式进行身份验证——凭据保留在你的机器上。本页不承诺任何配额或价格。
系统与版本桌面应用或源码
请查看下载页面以获取桌面版构建。源码快速入门中提到的 Node.js 和 pnpm 要求适用于从源码运行，而非安装桌面版软件包。此处未验证最低兼容 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 设置说明；请查阅供应商文档以获取当前命令。
检查点确认目标 Agent 与账户。如果不可用，请在尝试更大任务之前先检查兼容性。 - 3
运行一个小型 Kiro 任务
使用一个小 brief，以便您评估整个流程，包括一次修改。
入门 brief构建一个设置页面，包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。
检查点打开结果，测试保存状态，并提出一个具体的修改请求。生成的文件是评审的开始，而不是结束。
若要从源代码运行 OpenDesign，请参阅技术快速入门。
Kiro 设计工作流
Kiro 设计工作流的五个步骤
同一个结账流程任务，从 brief 到可验证文件的完整流程。每一步列出你提供的内容、Kiro 完成的工作、OpenDesign 贡献的部分，以及你需要检查的内容。
- 1
设计 Brief
用简明语言写三到六行，说明目标受众、该界面要完成的任务，以及适用的平台。
- 您撰写 brief；如有参考截图，请附上。
- Kiro阅读 brief 和项目的说明文件；遇到不明确之处时会询问。
- OpenDesign提供项目、prompt 界面，以及对应产物类型的 skill。
- 检查确认 brief 中已写明验收标准。现在补充比生成之后再补充成本更低。
- 2
设计约束
一套设计系统加几条硬性规则。正是这些将符合品牌调性的产出与千篇一律的效果区分开来。
- 您选择一个设计系统；说明断点及必须使用的组件。
- Kiro在写下第一行代码之前，将 DESIGN.md 的 token 和风格规则加载到上下文中。
- OpenDesign提供设计系统库，并将所选设计系统绑定到 skill 模板中。
- 检查确认 token 与您的品牌相符：单一强调色、正确的字体、正确的圆角。
- 3
生成界面
Kiro 编写一个自包含的 HTML 文件：布局、样式、交互和稳定的钩子。
- 您等待即可，或回答澄清性问题。无需进行任何配置。
- Kiro规划各个部分，编写 HTML、CSS 和 JavaScript，运行文件并修复失败之处。
- OpenDesign将产物保存到项目文件夹中，并为预览建立索引。
- 检查此步骤暂无需检查。请在文件渲染后进行判断，而非查看源代码。
- 4
预览
文件会以你要求的宽度在 OpenDesign 中渲染。设计的好坏就在这里被检验。
- 你切换宽度，点击交互，在元素上留下评论。
- Kiro阅读您在预览上的评论，并准备下一版修订。
- OpenDesign渲染预览，暴露
data-od-id目标以供评论和编辑。 - 检查层级结构、对比度、390px 下的溢出、焦点状态，以及强调色是否使用得克制。
- 5
修订与验证
通过在预览中指向元素来请求修改。每次修订都是一个新文件，绝不会被静默覆盖。
- 你把评论转化为请求；决定任务何时完成。
- Kiro就地应用更改并重新运行文件。
- OpenDesign将各版本并排保留；完成后导出图片或 HTML。
- 检查只重新检查发生变化的区域，然后在每个断点上完整检查一次整页。
资源
Kiro 设计资源
限制
Kiro 的局限性、手动检查与后备方案
- 范围Kiro CLI 将该 Agent 带到您的终端——交互式聊天会话、自定义 Agent、steering 文件、Agent hooks，以及 Model Context Protocol 服务器。本页涉及作为已连接到 OpenDesign 的 Agent 的 Kiro，而非 Kiro 的所有功能。
- 使用限制使用限制和费用取决于您使用的凭证（AWS Builder ID、Google、GitHub 或 AWS IAM Identity Center（无需 AWS 账户））。本页不对免费额度做任何说明。
- 网络本地项目文件并不代表离线推理。在分享敏感输入之前，请检查你的 Agent 供应商设置和数据政策。
- 输出为 HTML产物是 HTML 文件，而非矢量设计文件。
- 人工审查可访问性、真实内容、品牌契合度和交互正确性均由你在预览中审查。将 Agent 的任何自检视为初步检查。
- 后备方案如果 Agent 不可用或任务失败，请检查所安装版本的连接说明和身份验证。在更改配置前，请保留错误信息和最后一个可用的产物。
常见问题
关于 Kiro 与 OpenDesign 的常见问题
Kiro CLI 真的能做设计工作吗？
可以——在上下文中提供审美 skill、设计系统和真实参考图片时，Kiro CLI 能产出生产级别的响应式 UI，其 spec 驱动的工作流也能让构建过程对既定意图负责。缺少这些上下文时，它往往会退回到通用外观，这正是 OpenDesign 填补的空白。
使用 Kiro CLI 需要 AWS 账户吗？
不需要——Kiro 支持使用 AWS Builder ID、Google、GitHub 或您所在组织（AWS IAM Identity Center）登录，使用它并不需要 AWS 账户。Kiro 目前处于预览阶段，可免费开始使用。无论哪种方式，OpenDesign 都不会代理您的凭据。
Kiro CLI 在设计方面具体有什么优势？
它的 spec 驱动工作流：Kiro 会先编写需求、设计文档和任务列表，然后再编码，因此您可以在构建提交前纠正布局和范围。Steering 文件承载您的约定，hooks 可以强制执行检查——但审美依然来自您提供的设计系统、skill 和参考资料。
前端设计该选 Kiro CLI 还是 Claude Code？
两者都很出色。Claude Code 以具体、深知代码库的设计决策著称；Kiro CLI 的优势在于其 spec 驱动、可审查的工作流，配合 steering 和 hooks。许多团队会同时使用两者——OpenDesign 让您切换 Agent 时无需改变设计工作流。
如何将 Kiro CLI 连接到外部设计工具？
Kiro CLI 管理 Model Context Protocol（MCP）服务器——使用 kiro-cli mcp 添加它们。MCP 服务器可以为 Agent 带来真实的设计上下文和工具，使生成的代码匹配源文件，而不是近似还原。
用 Kiro 开始第一个设计任务
从一个小任务开始，评估往返效果，然后再提交真实的 brief。请选择与您的环境相符的选项；本页不会自动检测。