尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

【AI编程】【Kiro】----Kiro入门到精通保姆级教程(五)---- 【实战】实战与最佳实践

【AI编程】【Kiro】----Kiro入门到精通保姆级教程(五)---- 【实战】实战与最佳实践 文章目录案例 1从零开发 Todo 应用Spec 模式项目要求Step 1创建项目并配置 SteeringStep 2启动 SpecStep 3审核三阶段文档案例 2为现有项目添加功能Spec 模式场景审核要点执行结果案例 3调试复杂 BugVibe 模式场景Step 1描述问题Step 2获取分析Step 3应用修复并测试Step 4追加测试最佳实践模式选择速查项目配置时间线逐步完善高效协作公式常见问题FAQQ: 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创建项目并配置 Steeringmkdirkiro-todo-democdkiro-todo-demokiro.创建.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调试复杂 BugVibe 模式场景用户反馈「登录后偶尔跳转失败」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自动化→ 质量保障常见问题FAQQ: Spec 生成的文档不满意在确认前直接反馈需求3的验收标准不够详细请补充异常情况处理Q: Vibe 模式代码有问题多轮对话修正当 list 为空时会报错请处理这种情况Q: 如何让 AI 理解老项目创建完善的 Steering 文件 使用 #Codebase 让 AI 扫描 对话中提供具体文件引用Q: 生成的代码风格不统一在 Steering 中明确规范# rules.md- 使用2空格缩进 - 使用单引号 - 使用 arrowfunctionQ: 查看 AI 理解的上下文对话中输入当前上下文中包含了哪些文件和 SteeringQ: 重置对话上下文点击聊天面板右上角的 New Chat 按钮。总结完成本系列学习后你已掌握--------✅ 安装和配置 Kiro--------✅ Vibe 模式快速开发--------✅ Spec 模式规划复杂功能-------- ✅ Steering 让 AI 理解项目--------✅ Hooks 实现自动化-------- ✅ MCP 扩展能力-------- ✅ 真实项目应用继续学习kiro官方文档MCP 协议规范EARS 需求编写指南
返回列表