我在 7 天内使用 Kiro 的 Spec-Driven AI Development 构建了 Yahoo Pipes 2.0

Source: Dev.to

Yahoo Pipes 问题

如果你在技术圈有一定年纪，你一定会怀念 Yahoo Pipes。它提供了：

• 数据工作流的可视化编程
• 零代码
• 获取 RSS 源、过滤、合并、转换
• 输出到任意目标

Yahoo 在 2015 年关闭了它。开发者社区为之哀悼。虽然有 Zapier、IFTTT、n8n 等替代品，但没有一个能够兼具强大与简洁的完美平衡。

我构建的：GhostPipes

核心特性

🎯 基于机器学习的推荐

“管道界的 Netflix。” 粘贴 URL、上传 CSV，或直接拖入文本——Ghost Pipes 会分析：

• 输入类型（文件/URL/文本）
• MIME 类型和结构
• 你的使用历史
• 管道成功率

它为每个管道打分 0‑100，并推荐前 5 名，且会从每次执行中学习。

🎨 工业级可视化编辑器

这不是普通的节点编辑器，而是逼真的管道：

Bad:  Node1 -----> Node2
Good: Node1 ═══╗
              ║
          Node2

特性：

• 10 px 粗的 SVG 管道
• 90° 弯角配平滑的三次贝塞尔曲线
• 碰撞规避（管道会绕开节点）
• 弯头处的装饰性接头补丁
• 使用 requestAnimationFrame 实现 60 fps 拖拽

⚡ 35+ 节点类型

涵盖输入、处理和输出的节点，包括：

• HTTP 请求（定时或一次性）
• Webhook（生成唯一 URL）
• 文件操作（CSV、JSON、HTML 解析）
• AI 处理（摘要、翻译、抽取）
• 逻辑（循环、条件、开关）
• 目标（下载、API POST、邮件）

🔗 实时 Webhook

为每个管道生成唯一 URL。当外部服务触发时：

1. 后端验证 token
2. 检查负载大小
3. 执行管道

实现细节（摘录）：

If  kiro build backend
- [Kiro reads specs + steering]
- [Generates 15 files, 3,500 lines]
- [Tests pass on first run]

• 时间：5 天实现
• 质量：立即可投入生产
• 可维护性：完整文档，遵循我的编码风格

Kiro 魔法的真实案例

案例 1：SVG 管道挑战

问题：“我不懂 SVG。要实现逼真的管道要花几周时间。”

解决方案：

• 描述 “工业管道，10 px 粗，90° 弯角，平滑拐角”
• 上传参考图片

Kiro 生成了完整的 PathCalculator 类：

export class PathCalculator {
  calculateOrthogonalPath(start, end, obstacles) {
    // 120 lines of collision detection, waypoint generation,
    // Bezier curve insertion
  }

  generateSVGPath(waypoints) {
    // Converts to SVG with smooth corners
  }
}

结果：完美运行，省下了 200 多行我本来要写的代码。

案例 2：35+ Om.js Web 组件

问题：AI 在 React 上训练，对自定义框架生成的代码一团糟。

解决方案：在 /steering/om-js-framework.md 中记录 Om.js（响应式代理系统、html 模板字面量、@click 事件绑定、无 Shadow DOM）。

Kiro 输出（FilterNode 组件）：

import { react, html } from '/lib/om.compact.js';

export class FilterNode extends HTMLElement {
  state = react({
    mode: 'permit',
    rules: []
  });

  render() {
    return html`
      
         this.state.mode}>
          Permit
          Block
        
        ${this.state.rules.map(rule => this.renderRule(rule))}
      
    `;
  }
}

第一次就符合 Om.js 语法。随后又生成了 34 个节点，全部无误。

案例 3：通过 MCP 集成 AWS

背景：前端开发者，对 AWS 已久未使用。

问题：Aurora PostgreSQL 迁移失败，数据库似乎不存在。

Kiro + AWS MCP：

Me: "Here’s my Terraform config. Migrations fail. Database 'ghostpipes' doesn't exist."
Kiro: "RDS instance created, but database not initialized. Run:
CREATE DATABASE ghostpipes;

Also, your connection string is missing the DB name. Add: ?database=ghostpipes"

5 分钟内解决。

Agent Hooks 秘密武器

Kiro 的 Hook 持续监控代码质量。

.kiro/hooks/pre-commit.js

// Check for leaked API keys
if (detectAPIKeys(changedFiles)) {
  fail("API key detected in commit!");
}

// Check manifest.json permissions
if (hasNewPermissions(manifest)) {
  warn("New permission added: " + newPerms);
}

.kiro/hooks/on-build.js

// Remove console.logs in production
stripDebugCode(distFiles);

// Check bundle size
if (extensionSize > 5 * 1024 * 1024) { // 5 MB
  fail("Extension too large: " + extensionSize);
}

这些 Hook 在开发期间捕获了 12 条问题：

• 2 条硬编码的测试 API key
• 1 条意外的 “ 权限
• 8 条残留的 console.log
• 1 条因错误库导致的包体积激增

数据对比

我的收获

1. 规格文档值得投入

花 2 天写规格看似慢，但 Kiro 生成的整洁代码省下了 2 周的重构时间。

• 错误做法：先写代码，后写文档（如果有的话）
• 正确做法：先写规格，再写代码

2. Steering 文档 = 1 % 工作量，99 % 收益

一次性定义好代码风格和框架偏好，Kiro 就能直接产出符合你生态的代码。