🎃 FixIt AI — 我如何在一周内使用 Kiro 构建完整的 AI 维修助理

Source: Dev.to

👻 灵感 — 当一个简单想法遇到真实需求

我并不是因为“酷”才构建 FixIt AI，而是因为我需要它——我身边的人也需要它。

在我所在的地方，许多设备问题（笔记本卡顿、屏幕闪烁、电池耗电快）其实并不需要技术人员。但知识鸿沟导致人们每次都要付费。作为一名 17 岁、热衷于解决真实问题的开发者，我想打造一个工具，使其能够：

• 为用户提供即时诊断
• 减少不必要的维修费用
• 帮助青年和学生避免“技术紧急情况”
• 使用 AI 让硬件更易获取

Kiroween 给了我创意角度：一个有趣、诡异的幽灵助手，能够“驱散”你的设备问题。FixIt AI 就此诞生。

🛠️ FixIt AI 的功能

FixIt AI 会分析以下症状：

• “我的笔记本过热”
• “我的手机无法充电”
• “我的微波炉冒火花”

随后生成：

• 结构化诊断
• 严重程度评级
• 预估费用
• 是否需要技术人员
• 初级、中级和高级维修步骤
• 安全警告
• 设备寿命说明
• 成功概率
• 诡异的文字描述
• 处理时的发光幽灵动画

技术栈

• 前端： Netlify（HTML、CSS、JS）
• 后端： Render 上的 Node.js + Express
• AI 逻辑： Kiro 辅助的诊断引擎

⚙️ 我如何使用 Kiro 构建 FixIt AI

🟣 1. Vibe Coding — 我的主要工作流

我以对话的方式构建 FixIt AI，像使用配对编程的队友一样使用 Kiro。Kiro 帮我：

• 重写复杂的前端函数（例如 showResult()）
• 设计多层级维修指令结构
• 编写诡异主题的 UI 文本和动画概念
• 调试部署错误和 Express 路由问题
• 构建诊断引擎逻辑
• 优化 JSON 响应
• 改进提示词以获得更好的推理

🟣 2. 规范驱动开发

在编写引擎之前，我先定义了：

• 必需的 JSON 结构
• 预期字段（严重程度、概率、步骤）
• 多层输出
• UI 期望
• 错误处理行为

我把这个规范交给 Kiro，它生成了一致的逻辑，加快了开发速度并避免了输出冲突。

🟣 3. 引导（Steering）

我使用了如下引导提示：

• “完全重写，使其更专业。”
• “改进输出，使其更诡异但仍可读。”
• “让它更适合法官审阅。”
• “简化；现在重新结构化；现在增强它。”

每一轮都让 Kiro 更贴合我的需求。

🟣 4. 快速原型与调试

Kiro 帮我解决了：

• CORS 错误
• Render 的 Node 版本失败
• Express 依赖路径错误
• 前后端连接不匹配
• CSS 动画位置问题

🟣 5. 创意 + 用户体验

Kiro 还塑造了：

• 幽灵加载动画
• 发光 UI
• 诡异的诊断响应
• 问题到解决方案的叙事
• 架构图
• 日常计划

FixIt AI 最终的外观比我在黑客马拉松期间预期完成的要更为精致。

🚀 我的收获

• 如何将 AI 推理与传统后端逻辑结合
• 如何构造复杂的 JSON 输出
• 如何部署全栈应用（Netlify + Render）
• 如何在时间压力下设计令人愉悦的 UX
• 如何与 AI 助手协作工作
• 规范驱动方法的强大威力
• Kiro 相比单独编码能大幅加速开发

😅 我遇到的挑战

• 在 Render 上调试 Express
• 设计既诡异又可用的主题
• 让输出结构化而非随机
• 多次重写结果 UI
• 时间压力——我只有一天时间完成所有工作

Kiro 帮我突破了每一个阻碍。

🎯 最后感想

FixIt AI 不仅是一个万圣节主题的应用。它解决了真实问题——每天都有真实的人受到影响。Kiroween 教会我，即使资源有限，单个开发者只要配合合适的 AI 工具，也能打造出有用、美观且有影响力的产品。

这仅仅是个开始。我计划将 FixIt AI 扩展得更大——让每个拥有设备的人都能获得负担得起的诊断服务。

🔗 体验它

• 前端：
• 后端：
• 代码：