V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
mrfeixiang
V2EX  ›  分享创造

从苏州小学去年布置的 AI 做日历的作业到 AI 编程新境界: Kiro IDE 的 Spec Coding 实战记

  •  
  •   mrfeixiang · 1 天前 · 676 次点击

    缘起:一个看似简单的要求

    去年,我的干女儿突然找到我,说:"爸爸,我需要用 AI 制作一个 2025 年的日历,每一页都要有花。"听起来很简单对吧?但作为一个程序员,我立刻意识到这是一个绝佳的机会来探索 AI 编程的新玩法。

    既然要做,就做得彻底一点。我决定不仅仅是完成她的作业,而是要创造一个真正有价值的多语言学习日历网站,同时验证一下 Kiro IDE 的 Spec Coding 功能到底有多强大。

    什么是 Spec Coding ?超越传统的 Vibe Coding

    大多数人用 AI 编程都是"vibe coding"——想到什么就让 AI 写什么,没有系统性的规划。但 Kiro IDE 提供了一种全新的方法:Spec Coding

    Spec Coding 的三个阶段:

    1. 需求分析( Requirements ):用 EARS 模式写出严格的需求文档
    2. 设计文档( Design ):详细的架构设计和正确性属性定义
    3. 任务分解( Tasks ):可执行的编程任务清单

    这种方法让 AI 不再是随意发挥,而是按照工程化的流程来开发软件。

    项目演进:从简单日历到多语言学习平台

    最初的想法

    • 2026 年日历(改成 2026 年,因为 2025 年已经过去了)
    • 每个月配一朵花
    • 简单好看就行

    最终的成果

    • 🌸 多语言支持:葡萄牙语花名 + 英语 + 中文
    • 🎯 语言学习功能:每日英语名言、中文文化知识
    • 🏮 中国节日:2026 年完整的中国传统节日信息
    • 📱 响应式设计:手机、平板、电脑完美适配
    • 无障碍支持:键盘导航、屏幕阅读器支持
    • 🧪 30+测试用例:确保代码质量

    Kiro IDE 的 Spec Coding 实战

    第一步:需求文档( Requirements.md

    Kiro 帮我用 EARS 模式写出了严格的需求:

    ### Requirement 1: Calendar Display
    **User Story:** As a user, I want to view a complete 2026 calendar, so that I can see dates and plan my activities.
    
    #### Acceptance Criteria
    1. THE Calendar_System SHALL display all 12 months of 2026
    2. WHEN a user navigates between months, THE Calendar_System SHALL show the correct dates for each month
    3. THE Calendar_System SHALL highlight the current date when viewing the current month
    

    每一条需求都有明确的验收标准,这样 AI 就知道要实现什么功能。

    第二步:设计文档( Design.md

    Kiro 不仅设计了架构,还定义了正确性属性

    **Property 1: Calendar Month Generation**
    *For any* month in 2026, the calendar system should generate a valid month grid with the correct number of days and proper date sequencing
    **Validates: Requirements 1.1, 1.2**
    
    **Property 5: Unique Monthly Flowers**
    *For any* two different months, they should display different Portuguese flowers, ensuring all 12 months have unique flower assignments
    **Validates: Requirements 2.1**
    

    这些属性后来变成了自动化测试,确保代码的正确性。

    第三步:任务分解( Tasks.md

    Kiro 把整个项目分解成了可执行的小任务:

    - [ ] 1. Set up project structure and core calendar engine
    - [ ] 1.1 Write property test for calendar month generation
    - [ ] 2. Implement date display and highlighting features
    - [ ] 2.1 Write property test for current date highlighting
    

    每个任务都有明确的验收标准和测试要求。

    技术亮点:不只是写代码,更是工程化思维

    1. 属性驱动测试( Property-Based Testing )

    传统的单元测试只测试几个例子,但 Kiro 帮我实现了属性驱动测试:

    // 测试所有月份都有唯一的花
    Property: Unique Monthly Flowers
    *For any* two different months, they should display different Portuguese flowers
    

    这种测试会生成大量随机输入来验证属性,比传统测试更可靠。

    2. 多语言花卉数据

    每个月的花都有三种语言的名称:

    月份 葡萄牙语 英语 中文
    1 月 Camélia Camellia 山茶花
    2 月 Flor de Amendoeira Almond Blossom 杏花
    6 月 Alfazema Lavender 薰衣草

    3. 中国文化元素

    不仅有花,还加入了 2026 年的中国节日:

    • 春节:2 月 17-25 日(火马年)
    • 清明节:4 月 5-6 日
    • 端午节:6 月 19 日
    • 中秋节:9 月 25 日
    • 国庆节:10 月 1-7 日

    开发过程:AI 协作的新体验

    传统 AI 编程 vs Spec Coding

    传统方式:

    • "帮我写个日历"
    • AI 随便写一个
    • 发现问题再修改
    • 反复调试

    Spec Coding 方式:

    • 先写需求文档
    • 再写设计文档
    • 分解成小任务
    • 逐个实现和测试
    • 每一步都有验收标准

    实际效果对比

    使用 Spec Coding 后:

    • 代码质量更高:有完整的测试覆盖
    • 功能更完整:不会遗漏重要功能
    • 维护性更好:有清晰的文档和架构
    • 可扩展性强:模块化设计便于添加新功能

    成果展示:超出预期的学习平台

    在线体验

    🌐 网站地址https://mrfeixiang.github.io/2026/

    核心功能

    • 📅 完整 2026 年日历:精确的日期计算和导航
    • 🌸 12 朵葡萄牙花卉:每月一朵,三语对照
    • 📚 英语学习:每日名言、词汇解释、语法提示
    • 🈳 中文学习:汉字显示、拼音标注、文化知识
    • 🏮 节日信息:中国传统节日和文化解释

    技术指标

    • 性能优化:日历生成<50ms
    • 📱 响应式设计:支持所有设备
    • 无障碍支持:WCAG 2.1 AA 标准
    • 🧪 测试覆盖:30+自动化测试

    反思:AI 编程的未来方向

    Spec Coding 的优势

    1. 系统性思维:不再是想到哪写到哪,而是有完整的规划
    2. 质量保证:每个功能都有对应的测试
    3. 文档驱动:代码和文档同步,便于维护
    4. 可复现性:其他人可以按照 spec 继续开发

    对 AI 编程的启示

    传统的"vibe coding"适合快速原型,但要做出高质量的软件,还是需要工程化的方法。Kiro IDE 的 Spec Coding 提供了一个很好的框架:

    • 需求先行:明确要做什么
    • 设计驱动:规划怎么做
    • 测试保证:确保做对了

    结语:从作业到作品的升华

    原本只是帮干女儿完成一个简单的作业,最终却创造了一个功能完整的多语言学习平台。这个过程让我深刻体会到了 Spec Coding 的威力。

    Kiro IDE 不仅仅是一个 AI 编程工具,更是一个思维方式的转变。它教会我们用工程化的方法来思考问题,用系统性的方式来解决问题。

    如果你也想尝试这种新的 AI 编程方式,我强烈推荐试试 Kiro IDE 的 Spec 功能。相信你会和我一样,发现 AI 编程的新境界。


    项目链接

    技术栈:HTML5 + CSS3 + Vanilla JavaScript + Kiro IDE Spec Coding

    用 AI 编程,但不止于 AI 编程。用工程思维,创造真正的价值。

    目前尚无回复
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   3190 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 12:00 · PVG 20:00 · LAX 04:00 · JFK 07:00
    ♥ Do have faith in what you're doing.