我使用 kiro IDE 构建了一个 Kiro 扩展来可视化 boring specs Days

Source: Dev.to

灵感的火花

想象一下：一个普通的星期二。我在使用 Kiro IDE 管理项目规格。我第百次打开 tasks.md，心里想…

“这些 markdown 文件太无聊了。如果它们… 恐怖？” 🎃

这一个想法，加上 Kiro AI 的强大能力，催生了 SpecterFlow——一个 Kiro 扩展，将枯燥的规格文件转化为带有电动特斯拉线圈、动画光标和霓虹发光界面的互动、恐怖主题可视化体验。

80 % 的代码在仅 3 天内由 AI 编写！

SpecterFlow 是什么？

SpecterFlow 是一个 Kiro 扩展，为 .kiro/specs/ markdown 文件提供三种主题视图：

🪦 墓园视图（tasks.md）

你的看板变成墓园，拥有：

• 墓碑形状的卡片，带石质纹理
• 每张卡片上都有电动特斯拉线圈火花
• 完成任务时出现幽灵庆祝动画
• 拖动卡片时出现幽灵粘液轨迹
• 列名：新坟墓 → 复活中 → 安息

📜 魔法书视图（requirements.md）

你的需求变成古老的咒语书，拥有：

• 羊皮纸纹理和神秘符文
• 波浪文字动画（6 种不同风格）
• 分屏视图：用户故事 ↔ 验收标准
• 发光数字徽章，带脉冲效果
• Crimson Text 字体，营造古籍氛围

🔮 灵媒板视图（design.md）

你的设计文档变成通灵板，拥有：

• 神秘的导航侧边栏
• 发光的水晶表情符号
• 树形视图中的电枝
• 带霓虹按钮的平滑滚动

AI 驱动的开发旅程

第 1 天 – 规格驱动开发

我使用 Kiro 的规格驱动工作流并提问：

“我想构建一个 Kiro 扩展，以恐怖主题可视化 .kiro/specs 文件。”

Kiro 回应并创建了：

• requirements.md – 完整的 EARS 模式和验收标准
• design.md – 架构、组件和正确性属性
• tasks.md – 30 条详细实现任务

随后 Kiro 生成了初始代码：

• 扩展激活逻辑
• 自定义编辑器提供者
• 文件系统扫描器
• Markdown 解析器（事件驱动架构）
• 基础 Webview 结构

第 1 天 Kiro 编写的代码行数：约 800 行

第 2 天 – 氛围编码魔法

切换到“氛围编码”模式，我描述需求：

我： “让它变得恐怖，加入电动特斯拉线圈效果！”
Kiro： 生成 500 行 CSS，包含特斯拉线圈火花动画、闪电 SVG、等离子球、电粒子和电压弧。

我： “添加波浪文字动画！”
Kiro： 创建完整的动画系统（波浪、故障波浪、漂浮波浪、霓虹波浪、彩虹波浪、液体波浪）。

我： “自定义光标并带粒子轨迹！”
Kiro： 编写优化的 JavaScript，实现发光光标、粒子轨迹、点击爆炸、GPU 加速渲染，并限制在 60 fps。

第 2 天 Kiro 编写的代码行数：约 2,500 行

第 3 天 – 打磨与性能

专注于优化和细节打磨：

我： “光标卡顿，优化一下！”
Kiro： 通过限流轨迹创建、减少粒子数量、使用 will-change 进行 GPU 加速、改用 transform 替代 left/top、使用被动事件监听和事件委托进行重构。

我： “字体不好看，换更好的！”
Kiro： 分析选项并创建智能字体层级（标题用 October Twilight，UI 用 Jura，魔法书用 Crimson Text，代码用 Share Tech Mono）。

第 3 天 Kiro 编写的代码行数：约 900 行

数据统计

• 3,500+ 行 CSS（动画、特效、布局）
• 1,200+ 行 JavaScript（解析器、组件、交互）
• 17+ 种粒子特效（火花、轨迹、爆炸等）
• 6 种亮眼霓虹色（精心挑选的调色板）
• 5 种字体（智能选取）
• 8 个代理钩子（自动化工作流）
• 9 个 MCP 服务器（扩展能力）
• 完整文档（指南、README、注释）

总计：约 5,000 行可直接投产的代码，耗时 3 天！

秘密武器：Kiro 是怎么做到的

1. 规格驱动开发

Kiro 在结构化开发方面表现出色。先创建完整规格后，它拥有清晰的路线图：

## Requirement 1: Graveyard Kanban Board

**User Story:** As a developer, I want to see my tasks as tombstones...

### Acceptance Criteria
1. WHEN a user opens `tasks.md` THEN the system SHALL display a kanban board
2. WHEN a task is dragged THEN the system SHALL show an ectoplasm trail
3. WHEN a task is completed THEN the system SHALL trigger ghost celebration

这种明确性让 Kiro 生成的代码完全匹配需求。

2. 氛围编码

针对创意特性，我使用了氛围编码：

Me: "Make it feel like a haunted computer terminal from the 80s"
Kiro: *generates Share Tech Mono font, CRT effects, scanlines*

Me: "Add electric sparks like a Tesla coil"
Kiro: *creates complete particle system with physics*

Kiro 理解氛围并转化为代码。

3. 代理钩子

钩子用于自动化工作流：

{
  "name": "Compile on Save",
  "trigger": { "type": "onFileSave", "filePattern": "**/*.ts" },
  "action": { "type": "executeCommand", "command": "npm run compile" }
}

每次保存 TypeScript 文件时，Kiro 自动编译。

4. 指导文档

指导文档规范 Kiro 的编码风格：

# JavaScript Patterns
- Use classes instead of @typedef
- Prefer ternary over if‑else for assignments
- Use object lookups instead of switch statements
- Keep functions concise (single responsibility)

这确保了一致且高质量的代码。

5. MCP 服务器

启用 MCP 服务器以获得扩展能力：

• vscode‑extension – 搜索 Kiro 扩展 API
• npm – 查找并建议包
• fetch – 从网络获取文档
• typescript – 实时类型检查

这些为 Kiro 提供了超出基础知识的超级能力。

最令人惊叹的代码生成

电动特斯拉线圈特效简直令人惊叹。我说：

“Add electric sparks like a Tesla coil”

Kiro 生成了以下 CSS：

@keyframes teslaCoil {
  0%, 100% {
    opacity: 0;
    transform: scale(0.8) translateY(0);
  }
  10% {
    opacity: 1;
    transform: scale(1) translateY(-5px);
  }
  20% {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }
  /* ... continues with perfect timing ... */
}

.electric-spark {
  position: absolute;
  width: 2px;
  height: 20px;
  background: linear-gradient(180deg, #00ffff 0%, #0080ff 50%, transparent 100%);
  box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #0080ff;
  animation: teslaCoil 1.5s ease-in-out infinite;
}

Kiro 还生成了 JavaScript，用于生成火花、管理生命周期并进行性能优化——全部来源于一句话指令。

性能：意外的胜利

当我提到光标卡顿时，Kiro：

• 找出瓶颈（粒子过多）
• 实施限流（每 50 ms 一次）
• 减少粒子数量并使用 will-change 进行 GPU 加速
• 改用基于 transform 的移动代替 left/top
• 添加被动事件监听和事件委托

最终实现了流畅的 60 fps 体验，毫无卡顿。