Kiro、Spec 与 Skills：老友的实战聊聊

嗨，兄弟们，今天咱们来摆烂聊聊 Kiro。

说白了就是把需求文档和技Neng库这俩玩意儿拧进一起。

哈哈，别装正经，我跟你说这玩意儿真Neng把“写代码”变成“Zuo菜”。

先给你抛个比方：你手里有一本菜谱，厨房里备好刀具、锅子、调料。

要是缺了锅子，你那菜谱再好也是白搭。

所以啊，咱们先得弄清楚两者到底是怎么配合的。

Spec，顾名思义，就是需求规范。

它像一张地图，标明了目标、边界、验收标准。

比如我们要搞一个字母拼写游戏，那就得在 specs/letter-spelling-game/requirements.md 里写清楚：

# 需求文档
## 简介
课堂拼写游戏是一个教育类互动应用…
## 术语表
- 游戏系统
- 题目
…

写完以后你手里就有了一份干净的“施工图”。

不过别忘了这张图只Neng指路，真正动工还得靠 Skills。

Skills 就是实现 Spec 的具体技巧、脚本或插件。

Kiro 把它们放在 .kiro/skills/ 或者 .claude/skills/ 目录下。

比如我们想让 AI 自动生成 React 组件，那就有一个 react-component-generator.md Skill：

# React Component Generator
## 用法
kiro skill generate react-component --name MyButton
## 实现步骤
1. 创建文件夹 src/components/MyButton
2. 写入基础模板代码
…

这玩意儿相当于“一键厨具”，点一下就Neng把材料搬到锅里。

下面咱们用字母拼写游戏来演示一下完整链路。

# 项目目标
实现一个Ke以随机出题、验证答案、计分的小游戏。
# 验收标准
- 随机选词并打乱顺序。
- 提交答案后即时反馈。
- 响应式布局兼容 PC 与移动端。
…

# API Service Generator
## 功Neng
为游戏生成后端接口，包括获取单词库和提交成绩。
## 步骤
1. kiro skill generate api-service --name wordBank
2. 自动生成 /api/word-bank 接口代码。
…

# React Component Generator
## 示例调用
kiro skill generate component --name QuestionPanel
## 输出结构
src/components/QuestionPanel/
   - index.tsx
   - styles.module.css
…

kan到没？先有 Spec，后面对应的 Skills 按需拉出来。

先打开终端，敲：

# 初始化项目结构
open-spec init
# 生成接口服务
kiro skill generate api-service --name wordBank
# 生成 UI 组件
kiro skill generate component --name GameBoard
# 检查代码质量
kiro skill run code-review

然后打开 VSCode，一眼kan到 auto‑generated 的文件夹结构：

.
├── src/
│   ├── components/
│   │   ├── GameBoard/
│   │   │   ├── index.tsx
│   │   │   └── styles.module.css
│   └── services/
│       └── wordBank.ts
└── specs/
    └── letter-spelling-game/
        └── requirements.md

接下来你只需要把业务逻辑填进去——比如在 services/wordBank.ts 里写个 fetchWordList 方法。

Kiro 自带的 code‑review Skill Neng帮你抓住常见错误：

重复代码？自动提示删除冗余。

性Neng坑？给出优化建议，比如使用 memoization 防止不必要的渲染。

Linter 警告？直接在编辑器里弹窗提醒。

而且，这套流程真的像流水线一样——每一次迭代dou只改动局部 Skill，而 Spec 基本保持不变。这样团队协作geng顺畅，毕竟大家dou围着同一张图纸干活儿。

说到 SEO，我得扯一下“为什么百度不收录”。其实原因大多是：

缺少有效的 meta 信息：标题、描述没有明确关键词。

Sitemap 未提交：Baidu Spider 找不到页面入口。

PJAX 或 SPA 渲染问题：A‑JAX 加载内容不被爬虫识别。

Crawl 错误：/robots.txt 禁止抓取导致全站被屏蔽。

解决办法也hen直接：

Add meta charset 和 viewport，让页面结构geng友好。

Create sitemap.xml 并在百度站长平台提交。

If you use SPA, add server‑side rendering or pre‑rendering.

Simplify robots.txt, allow /.

Ehh，不对不对，其实Zui关键的是保证 Spec 中明确列出 SEO 要点，然后用对应的 Skill 自动生成对应的 meta 标签和 sitemap。这样每次迭代dou不会忘记这块儿，省事儿又省心！哈哈哈，你懂的～

Pain Point: Spec 写得太抽象，导致 Skills 不知道该怎么实现。 解决办法：在需求文档中加入「示例」和「边界条件」字段，比如「单词长度必须在 3~10 字符之间」。

Pain Point: Skills geng新后忘记同步到 Spec。 解决办法：每次运行 Kiro skill sync --to spec, 自动把变geng记录回 specs 文件夹。

Pain Point: 团队成员对 Skill 的使用方式不统一。 解决办法：建立「Skill 手册」章节，在 docs/skills-guide.md 中统一约定命名规范和调用方式。

Pain Point: CI/CD 流程没有集成 Kiro 检查。 解决办法：在 .github/workflows 中加入一步 Kiro skill run code-review && Kiro skill run test-suite, 保证每次 PR dou经过自动审查。

Ai 编程时代，一味追求“一键完成”会失去思考空间；但Ru果你像我一样，把规范当成底层支撑，把技巧当成弹性工具，那真的是又快又稳呀！

Said it straight—Spec 给你方向，Skills 给你动力，两者配合才是真正的生产力炸弹。

Coding 再也不是“苦逼敲键盘”，而是像Zuo饭一样，有配方、有调料，还有那点随性撒盐的小乐趣。