文章目录
- 案例 1:从零开发 Todo 应用(Spec 模式)
- 项目要求
- Step 1:创建项目并配置 Steering
- Step 2:启动 Spec
- Step 3:审核三阶段文档
- 案例 2:为现有项目添加功能(Spec 模式)
- 场景
- 审核要点
- 执行结果
- 案例 3:调试复杂 Bug(Vibe 模式)
- 场景
- Step 1:描述问题
- Step 2:获取分析
- Step 3:应用修复并测试
- Step 4:追加测试
- 最佳实践
- 模式选择速查
- 项目配置时间线
- 逐步完善:
- 高效协作公式
- 常见问题FAQ
- Q: Spec 生成的文档不满意?
- Q: Vibe 模式代码有问题?
- Q: 如何让 AI 理解老项目?
- Q: 生成的代码风格不统一?
- Q: 查看 AI 理解的上下文?
- Q: 重置对话上下文?
- 总结
- 继续学习
通过三个实战案例和最佳实践总结,帮助你在真实项目中高效使用 Kiro。
适用版本:Kiro 0.8.140+ (2026年1月) | GA 发布:2025年11月 | 官方文档:kiro.dev/docs
案例 1:从零开发 Todo 应用(Spec 模式)
项目要求
纯 HTML + CSS + JavaScript 添加、删除、标记完成 localStorage 持久化 界面美观Step 1:创建项目并配置 Steering
mkdirkiro-todo-demo&&cdkiro-todo-demo&&kiro.创建.kiro/steering/product.md:
# Todo 应用## 技术栈- HTML5 + CSS3 + ES6+## 设计要求- 简约现代风格 - 支持暗色主题Step 2:启动 Spec
帮我创建一个 Spec,开发 Todo 应用Step 3:审核三阶段文档
requirements.md 审核要点:
用户故事是否完整
验收标准是否可测试
design.md 审核要点:
数据模型是否合理
文件结构是否清晰
tasks.md 执行后验收:
✅ 能添加任务 ✅ 能标记完成 ✅ 能删除任务 ✅ 刷新后数据还在案例 2:为现有项目添加功能(Spec 模式)
场景
Vue 项目需要添加"用户头像上传"功能
使用Spec
帮我创建一个 Spec,开发用户头像上传功能 要求:1. 在个人中心添加上传入口2. 支持裁剪3. 上传到阿里云 OSS审核要点
| 文档 | 关注点 |
|---|---|
| requirements.md | 大小限制、错误处理 |
| design.md | 组件拆分、OSS 配置、是否复用 UI 库 |
执行结果
Spec 自动完成:
--------创建 AvatarUpload.vue
--------集成裁剪库(cropperjs)
--------封装 OSS 上传
--------在个人中心引入组件
案例 3:调试复杂 Bug(Vibe 模式)
场景
用户反馈:「登录后偶尔跳转失败」
Step 1:描述问题
#File src/router/guards.ts#File src/stores/auth.ts用户登录后偶尔跳转失败,停留在登录页。 控制台无报错,请分析原因。Step 2:获取分析
AI 可能指出:
---------路由守卫异步竞争问题
---------isLoggedIn 状态更新时机问题
Step 3:应用修复并测试
请应用修复方案,并告诉我如何验证Step 4:追加测试
请添加单元测试覆盖这个竞争场景最佳实践
模式选择速查
| 场景 | 模式 | 原因 |
|---|---|---|
| 新功能(>2小时) | Spec | 需要规划和文档 |
| Bug 修复 | Vibe | 快速定位解决 |
| 代码重构 | Vibe | 即时反馈 |
| 新项目搭建 | Spec | 需要完整设计 |
| 小功能调整 | Spec | 不值得完整规划 |
| 项目配置时间线 | Vibe | 需要规划和文档 |
项目配置时间线
Day 1(必须):
.kiro/steering/ ├── product.md# 产品概述└── tech.md# 技术栈逐步完善:
.kiro/steering/ ├── rules.md# 代码规范├── testing.md# 测试规范└── api.md# API 设计规范高效协作公式
Steering(背景) ↓ Spec(规划)→ 共享文档 ↓ Vibe(调整)→ 快速迭代 ↓ Hooks(自动化)→ 质量保障常见问题FAQ
Q: Spec 生成的文档不满意?
在确认前直接反馈:
需求3的验收标准不够详细,请补充异常情况处理Q: Vibe 模式代码有问题?
多轮对话修正:
当 list 为空时会报错,请处理这种情况Q: 如何让 AI 理解老项目?
创建完善的 Steering 文件 使用 #Codebase 让 AI 扫描 对话中提供具体文件引用Q: 生成的代码风格不统一?
在 Steering 中明确规范:
# rules.md- 使用2空格缩进 - 使用单引号 - 使用 arrowfunctionQ: 查看 AI 理解的上下文?
对话中输入:
当前上下文中包含了哪些文件和 Steering?Q: 重置对话上下文?
点击聊天面板右上角的 New Chat 按钮。
总结
完成本系列学习后,你已掌握:
--------✅ 安装和配置 Kiro
--------✅ Vibe 模式快速开发
--------✅ Spec 模式规划复杂功能
-------- ✅ Steering 让 AI 理解项目
--------✅ Hooks 实现自动化
-------- ✅ MCP 扩展能力
-------- ✅ 真实项目应用
继续学习
kiro官方文档
MCP 协议规范
EARS 需求编写指南