software

构建 NecroOS：带 Kiro AI 的恐怖主题 Windows 95 模拟器

发布: (2025年12月3日 GMT+8 11:25)
8 min read
原文: Dev.to

Source: Dev.to

功能特性

  • 使用 react95 组件库实现的真实复古 UI
  • 多个应用：记事本、扫雷、投资组合管理器、终端，以及一些…更暗黑的惊喜
  • 通过 haunt level（闹鬼等级）系统实现渐进式恐怖机制
  • 视觉效果：CRT 显示器模拟、故障（glitch）效果以及屏幕扭曲
  • 音频氛围：环境音效和随交互而增强的效果
  • 损坏的 Clippy：大家最喜欢的助手，但出现了非常不对劲的情况

技术栈

  • React 19
  • TypeScript（严格模式）
  • Zustand 用于状态管理
  • Vite 提供极速开发体验

使用 Kiro 定义项目

我第一次与 Kiro 的交互为整个项目定下了基调。与其直接跳进代码，我先使用 Kiro 的 spec system（规格系统）来形式化需求和设计。这成为了改变游戏规则的关键。

规格文档

规格文档列出了：

  • 每个功能的验收标准
  • 必须保持的正确性属性
  • 被拆分成可管理块的实现任务

Kiro 帮助迭代这些规格，捕获了我未曾考虑的边缘情况。例如，在设计窗口管理系统时，Kiro 建议了如下属性：

  • “窗口永远不应覆盖任务栏”
  • “最小化的窗口应恢复到之前的位置”

这些细节如果忽略，后期会导致 bug。

使用 Fast‑Check 的基于属性的测试

Kiro 最令人印象深刻的能力之一是它对 fast‑check 基于属性的测试的理解。与其编写数十个单独的测试用例，Kiro 帮助定义了始终应成立的属性。

import * as fc from 'fast-check';

fc.assert(
  fc.property(
    fc.array(windowArbitrary, { minLength: 1, maxLength: 10 }),
    (windows) => {
      // Property: focused window should always have highest z-index
      const focusedWindow = windows.find(w => w.isFocused);
      if (focusedWindow) {
        expect(focusedWindow.zIndex).toBeGreaterThanOrEqual(
          Math.max(...windows.map(w => w.zIndex))
        );
      }
    }
  ),
  { numRuns: 100 }
);

Kiro 为几乎每个组件生成了类似的属性测试，捕获了传统单元测试会遗漏的边缘情况。故障系统、音频管理以及闹鬼等级编排都受益于此方法。

Steering 文档

早期，我发现了 Kiro 的 steering system——用于为整个项目提供上下文和约定的 markdown 文件。我创建了三份 steering 文档：

  • tech.md：定义技术栈、常用命令以及 TypeScript 配置
  • structure.md：概述目录结构、命名约定和导入模式
  • product.md：描述核心概念和关键功能

有了这些，Kiro 能持续生成符合项目约定的代码，而无需重复提示。

与 Kiro 的开发节奏

  1. 用自然语言定义功能
  2. Kiro 生成带有正确 TypeScript 类型、错误处理和测试的实现代码
  3. 使用 Kiro 的诊断工具审查并完善
  4. 继续下一个功能

闹鬼编排器

针对 闹鬼编排器——一个管理渐进式恐怖效果的复杂服务，Kiro 生成了：

  • 带有完整 TypeScript 接口的核心服务类
  • 覆盖所有方法的单元测试
  • 状态转换的基于属性的测试
  • 错误边界集成
  • 性能优化

所有这些在一次迭代中完成，省去了数小时的手动编码和测试。

故障系统

故障系统需要：

  • 根据闹鬼等级对窗口应用视觉扭曲
  • 与音频效果协同
  • 处理性能约束
  • 在各浏览器间提供流畅动画

Kiro 生成了以下组件：

import React, { useMemo } from 'react';
import { useStore } from '@/store';

export const GlitchableWindow: React.FC = ({
  children,
  windowId,
  intensity = 0,
}) => {
  const glitchLevel = useStore(state => state.glitchLevel);
  const effectiveIntensity = Math.min(intensity + glitchLevel * 0.1, 1);

  // Proper memoization for performance
  const glitchStyle = useMemo(() => ({
    filter: `hue-rotate(${effectiveIntensity * 180}deg) 
             contrast(${1 + effectiveIntensity * 0.5})`,
    animation: effectiveIntensity > 0.5
      ? `glitch ${2 - effectiveIntensity}s infinite`
      : 'none',
  }), [effectiveIntensity]);

  return (
    <div style={glitchStyle}>
      {children}
    </div>
  );
};

属性测试验证了强度值始终保持在范围内，并且即使有多个故障窗口，性能仍保持流畅。

音频 Bug 修复

当音频在某些浏览器中无法播放时，我使用 Kiro 的上下文系统共享错误。Kiro 立即：

  • 将问题定位为自动播放策略限制
  • 生成了带有用户交互检测的稳健音频服务
  • 添加了回退机制
  • 创建了全面的错误处理和测试

该修复已具备生产级质量，而非临时 hack。

两周后的成果

  • 15+ 个 React 组件，每个都有单元测试和基于属性的测试
  • 95%+ 的代码覆盖率
  • Zero TypeScript 严格模式错误
  • 完备的错误处理与优雅降级
  • 为流畅 60 fps 动画做出的性能优化
  • 跨浏览器兼容并提供适当回退

代码库可维护、文档齐全，且始终遵循统一模式。这不仅是一次黑客马拉松项目——它是生产质量的代码。

经验教训

  • 结构化开发：规格系统让复杂项目保持有序
  • 基于属性的测试：捕获传统测试遗漏的边缘情况
  • 一致性：Steering 规则确保项目代码统一
  • 上下文感知：Kiro 理解整个项目，而非单个文件
  • 最佳实践：生成的代码遵循现代模式和约定
  • 创意方向：Kiro 实现，你定义愿景

实用技巧

  1. 先写规格 – 在需求和设计文档上投入时间
  2. 提前创建 steering 规则 – 让 Kiro 了解你的偏好
  3. 拥抱基于属性的测试 – 让 Kiro 生成完整的测试套件
  4. 广泛使用上下文 – 共享错误、文件结构和相关代码
  5. 在对话中迭代 – Kiro 会从你的反馈中学习

结论

使用 Kiro 构建 NecroOS 完全改变了我的开发流程。我在远低于单独开发所需时间的情况下交付了一个复杂、经过充分测试的应用，且代码质量毫不妥协。AI 辅助与人类创造力的结合非常强大——Kiro 处理繁琐的实现细节，而我专注于体验和架构。

如果你对 AI 辅助开发持怀疑态度，我能理解。我也曾如此。但 Kiro 并不是要取代开发者——它是在放大我们的能力。对于独自面对宏大项目的开发者来说，这种放大就是“也许有一天”与“今天已交付”之间的差距。

敢于尝试 NecroOS 吗：
Live Demo
GitHub Repository

Back to Blog

相关文章

阅读更多 »