Kiro OpenDesign

用 Kiro
在 OpenDesign
做设计。

如何在 OpenDesign 中用 Kiro 设计界面:先写 spec 再动手写代码,用 steering 文件规范文案与错误处理,一个从 brief 到已审阅文件的结账任务,以及开始前需要了解的各项限制。

本页内容 示例
  1. 示例
  2. 适用场景
  3. 兼容性
  4. 环境搭建
  5. 工作流
  6. 资源
  7. 局限性
  8. 常见问题

一个完整的 Kiro 设计任务

从简报到界面:一个 Kiro 设计任务

一个从头到尾完成的任务:你交付的简报和约束、返回的成果,以及你在宣布完成之前运行的检查。下方界面是为本页面构建的示例,并非记录下来的 Kiro 运行。

1设计 Brief 与约束条件

Brief

根据所附规格设计一个两页结账流程:配送和支付,并带有始终可见的订单摘要。文案和错误处理请使用引导文件。桌面端和手机端。

  • 设计系统OpenDesign 纸感画布:Albert Sans,单一绿色强调色
  • 断点1440px 桌面端和 390px 移动端,无水平滚动条
  • 交互步骤导航、地址自动补全、卡片验证和促销码字段
  • 输出一个自包含的 HTML 文件,带有稳定的 data-od-id 挂钩

2分工:你、Kiro 和 OpenDesign

  • 你

    撰写简报、选择设计系统,并定义验收标准。

  • Kiro

    规划布局,编写 HTML、CSS 和 JavaScript,并按请求进行修改。

  • OpenDesign

    提供设计系统和技能,渲染预览,并将每个版本存储为项目文件。

  • 审查

    在交付前,检查视觉层级、8px 网格上的间距、两个断点以及每一个交互。

3Kiro 成果:1440px 和 390px 下的结账流程

Kiro 成果:1440px 和 390px 下的结账流程 — 桌面端
示意性示例

4交付前审查

Layout

网格与间距

表单和摘要对齐到 8px 网格;摘要在桌面端固定,在手机端折叠。

Hierarchy

视觉层级

先问题,后字段,再按钮;强调色仅高亮当前步骤。

Responsive

移动端布局

摘要在表单上方折叠为一行总计;按钮横跨全宽。

Interaction

交互检查

触发地址错误,应用促销码,然后返回购物车。

Fit

Kiro 何时适合该任务,何时不适合

Kiro 适合的场景

  • 先规格后代码。 Kiro 会预先起草需求、设计文档和任务列表,让你在构建提交之前就能修正布局和范围。
  • 引导文件。 你的标准、约定和令牌会带入每次运行,因此输出符合品牌,而非默认外观。
  • 智能体钩子。 自动化会在文件保存等事件上触发——一个无需依赖记忆即可强制执行验证或评审步骤的位置。
  • MCP 且免费起步。 Kiro CLI 管理用于外部上下文的 MCP 服务器,可通过 Builder ID、Google、GitHub 或你的组织登录,并在预览阶段免费起步。

选择其他工作流的场景

  • 你需要可编辑的矢量文件。 成果是 HTML,而不是可编辑的设计文档。请转向独立的矢量工作流,以获得你所需的素材格式。
  • 你没有任何参考,也没有约束。 缺少设计系统或示例时,输出会趋向通用外观;请先写好简报。
  • 你没有该智能体所需的凭据。 必需:AWS Builder ID、Google、GitHub 或 AWS IAM Identity Center(无需 AWS 账户)。OpenDesign 既不提供也不代理凭据。
  • 你的团队使用 Cursor 或 Antigravity。 那些智能体有自己的页面;工作区保持一致,但设置不同。参见相关智能体。

兼容性

开始前需要满足的 Kiro 要求

本指南聚焦于通过 OpenDesign 桌面应用连接的 Kiro。发布的参考资料核查于 2026 年 9 月 6 日。

工具范围Kiro,由 Amazon 出品

Kiro 是来自 Amazon(AWS)的智能体式 AI,提供 IDE、CLI 和 Web 界面形式,专为从原型到生产的规格驱动开发而设计。它处于预览阶段。本页面涵盖的是通过 OpenDesign 使用 Kiro 设计界面,而不是 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 要求仅适用于从源码运行,不适用于安装桌面软件包。最低兼容的 Kiro 版本:此处未验证。

连接检查成功的标志

按照你所安装版本提供的连接说明操作,然后运行一个小任务。确认 Kiro 处理了它且成果可以打开。仅下载并不能保证连接正常工作。

从桌面应用开始

三步完成 Kiro 设置

先下载,完成你所安装版本的 Kiro 设置,然后验证一个小结果。此路径不需要从源码构建 OpenDesign。

  1. 1

    下载 OpenDesign 桌面应用

    选择适合你计算机的软件包,安装并打开应用。

    下载 OpenDesign
    检查点
    桌面应用打开。已安装?跳到下一步;无需再次下载。
  2. 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. 3

    运行一个小型 Kiro 任务

    从一份精简的简报开始,这样你就能评判整个循环,包括一次修改。

    入门 brief

    构建一个设置页面,包含个人资料表单和保存确认。使用我的设计规则。在桌面端和移动端宽度下验证。

    检查点
    打开结果,测试保存状态,并提出一项具体的修改。生成的文件只是开启评审流程,而不是结束它。

若要从源码运行 OpenDesign,请改为参阅技术快速入门。

Kiro 设计工作流

Kiro 的五步设计工作流

一个结账任务勾勒出从你的简报到已验证文件的路径。每一步都展示你提供什么、Kiro 做什么、OpenDesign 贡献什么,以及你检查什么。

  1. 1

    设计 Brief

    保持简洁:用三到六行说明目标受众、该屏幕的用途以及平台。

    • 您你撰写简报;如果有参考截图,请附上。
    • KiroKiro 阅读简报和项目的指令文件;当有内容含糊不清时它会询问。
    • OpenDesignOpenDesign 提供项目、提示界面以及针对该成果类型的技能。
    • 检查检查简报是否写明了验收标准。现在添加它们的代价低于生成之后再添加。
  2. 2

    设计约束

    一个设计系统加上几条明确的规则。这种组合能让输出保持品牌一致,而不是千篇一律。

    • 您选择一个设计系统;说明断点以及任何必须使用的组件。
    • Kiro在编写代码之前,Kiro 会将 DESIGN.md 令牌和姿态规则加载到上下文中。
    • OpenDesignOpenDesign 提供设计系统库,并将所选的设计系统绑定到技能模板中。
    • 检查确认 token 与您的品牌相符:单一强调色、正确的字体、正确的圆角。
  3. 3

    生成界面

    Kiro 产出一个自包含的 HTML 文件:布局、样式、交互和稳定的钩子。

    • 您等待,或回答一个澄清问题。无需任何配置。
    • KiroKiro 规划各个区块,编写 HTML、CSS 和 JavaScript,运行该文件并修复失败之处。
    • OpenDesignOpenDesign 将成果保存到项目文件夹,并为其建立索引以供预览。
    • 检查暂时什么都不做。等文件渲染后再评判,而不是看它的源码。
  4. 4

    预览

    该文件会在 OpenDesign 内以你要求的宽度渲染。设计判断正是在此发生。

    • 你切换宽度,点击体验各项交互,在元素上留下评论。
    • KiroKiro 读取你对预览的评论,并准备下一版修订。
    • OpenDesignOpenDesign 渲染预览,并暴露 data-od-id 目标,供评论和编辑使用。
    • 检查层级结构、对比度、390px 下的溢出、焦点状态,以及强调色是否使用得克制。
  5. 5

    修订与验证

    通过在预览中指向元素来请求修改。每次修订都是一个新文件,绝不会被静默覆盖。

    • 你把评论转化为请求;决定任务何时完成。
    • KiroKiro 就地应用更改,并重新运行该文件。
    • OpenDesignOpenDesign 将各版本并排保留;完成后可导出图片或 HTML。
    • 检查只重新检查发生变化的区域,然后在每个断点上完整检查一次整页。

资源

Kiro 设计资源

限制

Kiro 的局限、人工检查与回退方案

  • 范围Kiro CLI 将智能体放进你的终端——交互式聊天会话、自定义智能体、引导文件、智能体钩子和 Model Context Protocol 服务器。本页讨论的是作为连接到 OpenDesign 的智能体的 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 CLI 究竟是什么
Kiro 是来自 Amazon 的智能体式 AI,以 IDE、命令行界面和 Web 界面的形式发布,旨在通过规格驱动开发(spec-driven development)带你从原型走向生产。Kiro CLI 把这个智能体带到你的终端:你可以启动交互式聊天会话、创建和管理智能体,以及运行 Model Context Protocol 服务器——全部在命令行中完成。Kiro 目前处于预览阶段。

就设计工作而言,它的决定性特征在于工作流。Kiro 不会把提示词直接变成代码,而是先写出一份规格——需求、设计文档和有序的任务清单——再依据它来实现。这使得智能体的计划在构建任何 UI 之前就可见、可审查,而这恰好契合设计决策应有的制定方式:先明确意图,再执行。

规格(Specs):Kiro 在写代码之前先把提示词转化为结构化规格——需求、设计文档和离散任务——因此计划从一开始就可审查。

引导(Steering)+ 钩子(Hooks):引导文件把你的标准、约定和偏好工具带入每一次运行;智能体钩子会在文件保存等事件上触发,自动运行后台任务。

免费起步,支持 MCP:使用 Builder ID、Google、GitHub 或你的组织账号登录即可免费开始;Kiro CLI 还能管理 MCP 服务器,以引入外部上下文。

凭据:AWS Builder ID、Google、GitHub,或通过 kiro-cli login 使用 AWS IAM Identity Center(无需 AWS 账户)

状态:预览阶段;以 IDE、CLI 和 Web 界面形式提供

厂商:Amazon (AWS)
为什么规格驱动开发契合设计
Kiro CLI 的设计优势来自它的工作流——但和所有智能体一样,品味仍然得由你来提供。

先有意图,再有像素:因为 Kiro 先写规格和设计文档,你可以在规划阶段就修正布局、层级和范围——在智能体已经锁定某个通用实现之前。

引导承载你的品牌:引导文件让智能体每次运行都能看到你的 token、组件和约定,因此产出是围绕某个品牌展开的,而不是默认外观。

钩子强制执行流程:智能体钩子可以在保存时自动运行检查——这是接入验证或审查步骤的地方,而不必指望智能体自己记得去做。

品味来自你提供的三种输入:一套设计系统、一项技能(skill),以及真实的参考图片。

教训和每个智能体教的一样:Kiro CLI 默认并没有品味。规格能让构建保持诚实,但只有当你给它约束——一套设计系统、一项美学技能和具体的参考——它才能产出好的设计。OpenDesign 恰好打包了这些输入,这正是两者契合的原因(详见下文)。
从零开始为设计配置 Kiro CLI
配置顺序:安装 → 认证 → 添加引导和设计规格 → 添加一项技能 → 启用浏览器验证。

把你的设计规则编码下来:把你的 token、基础元素(primitives)和约定放进引导文件,让智能体每次运行都读取它们,产出就会匹配品牌,而不是退回到通用外观。

添加浏览器验证:接入 Playwright 或浏览器 MCP 服务器,让 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 的截图到 UI 工作流
使用 Kiro CLI 时杠杆效应最高的设计循环,就是把参考图变成可用的响应式 UI,并不断迭代直到匹配——让规格先捕捉意图,再据此构建。

从你能拿到的最清晰的视觉参考开始——并包含多种状态(桌面端和移动端、悬停、空态、加载态),而不只是一张主视觉图。

让 Kiro 根据你的提示词写出规格和设计文档,并在它动手构建前审查计划——这是你及早发现布局和范围问题的地方。

把你的设计系统和约定放在引导文件中,并告诉 Kiro 各项 token 和规范基础元素所在的位置。

运行开发服务器,让 Kiro 在真实浏览器中渲染,并调整尺寸到各个断点来检查结果。

通过让 Kiro 把实现结果与参考图对照来迭代——而不只是确认它能构建。

开启交互式会话,并在一开始就给出具体的约束,这样它写出的规格才能反映你的真实意图:

让任务保持小而聚焦,提交好的迭代、回退坏的迭代(回退时告诉 Kiro),这样每一轮都建立在干净的基础上。

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.
这是上一版指南中的历史命令示例;当前语法请以所链接的厂商文档为准。
规格、引导、钩子与 MCP
有四个扩展点让 Kiro CLI 适用于持续的设计工作,而这四个都恰好契合开放的设计工作流。

规格(Specs):需求、设计文档和有序的任务清单——记录某个功能应当是什么的持久档案,在构建前和构建中都可审查。

引导文件(Steering files):添加上下文、编码标准,以及智能体每次运行都会读取的偏好工作流或工具——这是你的设计约定和 token 的天然归宿。

智能体钩子(Agent hooks):在文件保存等事件上触发的自动化,用于运行检查或文档等后台任务——这是自动强制执行验证步骤的地方。

MCP 服务器:Kiro CLI 可管理 Model Context Protocol 服务器,这是引入外部设计上下文和工具的可移植方式,可跨智能体使用,而不仅限于 Kiro。

这些都是可移植的、多智能体通用的能力——正是 OpenDesign 旨在编排、而不是每个项目重新造一遍的那类东西。
设计对比:Kiro 与 Codex、Claude Code、Cursor、Gemini CLI
设计工作没有唯一的赢家——每个智能体各有不同的强项,经验丰富的团队会把它们叠起来用。一个公道的总结:

Kiro CLI —— 规格驱动工作流——编码之前先有需求、设计文档和任务清单;引导文件和钩子让构建保持品牌一致——结构化、可审查的构建,意图和范围在实现前就已锁定

Codex —— 借助前端技能实现出色的视觉打磨;沙箱化的异步构建——委派式异步构建和可移植的 AGENTS.md 规则

Claude Code —— 具体的设计决策(十六进制色值、间距、字体排印)和感知代码库的 UX——前端推理和大上下文重构

Cursor —— 带实时预览和行内编辑的可视化“构建即所见”循环——在 IDE 内紧密迭代并观察的 UI 工作

Gemini CLI —— 强大的多模态图像理解和非常大的上下文;开源且有免费额度——大量依赖截图的工作,以及把整套设计系统装进上下文

社区里反复出现的结论是:品味来自人类:如果没有技能、参考和约束,它们全都会默认产出通用审美。这才是真正要解决的问题——而且这是设计工具层面的问题,不是模型层面的问题。

智能体 — 设计强项 — 最适合
常见陷阱以及如何避免“AI 味”外观
对 AI 生成设计最常见的抱怨是它看起来千篇一律——柔和的渐变、悬浮面板、过大的圆角、夸张的阴影,以及那种“一看就是 AI 做的”的 Inter 字体配紫色调。其他被反映的问题还包括移动端布局崩坏,以及指令泄漏到 UI 文案里。这些都不是 Kiro CLI 独有的;任何智能体在没有经过精心策划的设计上下文时都会这样——规格能让构建不跑偏,但它不提供品味。

添加一项美学技能:一项经过精选的设计技能会迫使智能体认准一个真实的方向,而不是默认外观。

在真实浏览器中验证:在各个断点渲染并自查——如果能的话把它接成钩子——这样布局就不会在移动端悄悄崩掉。

提供 token 和参考:真实的设计 token 和参考截图是影响产出质量最大的单一杠杆。

把规则写进引导文件:把“不要 hero 卡片、最多两种字体、品牌优先的层级”这类规则放在智能体每次运行都会读到的地方。

注意,每一条缓解措施都关乎给智能体一个经过精心策划的设计上下文。而每个项目手动维护这套上下文,正是 OpenDesign 所消除的苦活。
在 OpenDesign 内使用 Kiro CLI 进行设计
OpenDesign 正是上面这套工作流一直在呼唤的开源设计层。它把 Kiro CLI 当作一等适配器,并将其包裹在经过精选的技能与设计系统库、结构化的渲染流水线和本地桌面 UI 之中——于是让 Kiro 表现出色的那套设计上下文从第一次运行起就位,而不必每次手工拼装。OpenDesign 是 local-first 的,这让两者的配对变得简单:你的文件和你的登录凭据都留在你自己的机器上。

使用你的 AWS Builder ID 或其他方式登录——凭据留在你的机器上,绝不会经由我们代理。

选择一个设计系统和一项技能,然后以一致的品味生成演示稿、原型和落地页。

每个产物和 DESIGN.md 文件都存放在你自己的仓库里,而不是托管云上。

同一个 Kiro CLI 智能体,同一种登录方式——外加围绕它的、真实、可移植、开源的设计工作流。OpenDesign 是 local-first 且采用 Apache-2.0,所以你的工作成果和凭据都不会离开你的机器。

安装 OpenDesign,并选择 Kiro CLI 作为你的智能体。
OpenDesign 与 Amazon 或 AWS 有关联吗?
没有。OpenDesign 是独立的;Kiro 是 Amazon 的商标。