【AI编程】【Kiro】----Kiro入门到精通保姆级教程(五)---- 【实战】实战与最佳实践
完成本系列学习后,你已掌握:--------✅ 安装和配置 Kiro--------✅ Vibe 模式快速开发--------✅ Spec 模式规划复杂功能-------- ✅ Steering 让 AI 理解项目--------✅ Hooks 实现自动化-------- ✅ MCP 扩展能力-------- ✅ 真实项目应用。
通过三个实战案例和最佳实践总结,帮助你在真实项目中高效使用 Kiro。
适用版本:Kiro 0.8.140+ (2026年1月) | GA 发布:2025年11月 | 官方文档:kiro.dev/docs
案例 1:从零开发 Todo 应用(Spec 模式)
项目要求
纯 HTML + CSS + JavaScript
添加、删除、标记完成
localStorage 持久化
界面美观
Step 1:创建项目并配置 Steering
mkdir kiro-todo-demo && cd kiro-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 空格缩进
- 使用单引号
- 使用 arrow function
Q: 查看 AI 理解的上下文?
对话中输入:
当前上下文中包含了哪些文件和 Steering?
Q: 重置对话上下文?
点击聊天面板右上角的 New Chat 按钮。
总结
完成本系列学习后,你已掌握:
--------✅ 安装和配置 Kiro
--------✅ Vibe 模式快速开发
--------✅ Spec 模式规划复杂功能
-------- ✅ Steering 让 AI 理解项目
--------✅ Hooks 实现自动化
-------- ✅ MCP 扩展能力
-------- ✅ 真实项目应用
继续学习
更多推荐


所有评论(0)