你是否也有这样的烦恼：突然有个灵感，打开笔记软件要等三秒，还要选文件夹、打标题……灵感早跑了？

今天我们不聊虚的，直接实战。利用 GitHub 最新开源的 Spec Kit 工具，配合 Claude（或 Cursor），零手写代码构建一个**“极简懒人笔记” (LazyMemo)**。

我们的目标是：打开即记，自动保存，极简主义。

---

🛠️ 准备工作

确保你已经安装了 Spec Kit（如果还没装，参考上一篇教程）：

uv tool install specify-cli --from git+https://github.com/github/spec-kit.git

---

🚀 第一步：初始化项目

在终端输入以下命令。这次我们给项目起名叫 lazy-memo：

# 初始化项目，指定使用 claude 作为 AI 助手
specify init lazy-memo --ai claude
cd lazy-memo

此时，启动你的 claude 命令行工具（或者在 IDE 里打开 Cursor Agent）。

---

📜 第二步：确立“极简宪法” (/speckit.constitution)

这是最关键的一步。很多 AI 写出来的代码臃肿不堪，就是因为没有原则。我们要告诉它：Simple is King。

输入指令：

/speckit.constitution 本项目的核心原则是“极简主义”和“速度”。1. UI 必须极其干净，没有多余的菜单。2. 优先保证加载速度，不做复杂的动画。3. 代码结构要扁平化。4. 任何功能如果增加用户点击次数，一律砍掉。

💡 效果：Spec Kit 会生成一份宪法文件。之后 AI 只要想加什么花里胡哨的功能，都会被这条宪法“驳回”。

---

🗣️ 第三步：描述你的“懒人需求” (/speckit.specify)

这里我们要把“懒”发挥到极致。不要写技术术语，只写你想要什么体验。

输入指令：

`/speckit.specify 开发一个单页应用 LazyMemo。

1. 核心界面就是一个巨大的输入框。

2. 用户输入内容后，按下回车（或点击保存），内容直接变成一张卡片沉底显示。

3. 不需要标题，不需要分类，只有内容和时间。

4. 每条笔记卡片上有一个“复制”按钮和一个“删除”按钮。

5. 支持 Markdown 简单渲染。

6. 所有数据必须自动保存在浏览器的 LocalStorage 中，刷新不丢失。`

💡 效果：AI 会根据这些描述生成详细的 Spec 文档。注意，我们强调了 LocalStorage，这样就不需要配置后端数据库，大大降低了演示门槛。

---

🏗️ 第四步：技术选型与规划 (/speckit.plan)

作为 CSDN 的老手，我们选一个轻量级且流行的技术栈：Vue 3 + Tailwind CSS。

输入指令：

/speckit.plan 使用 Vue 3 (Script Setup 模式) + Vite 进行开发。样式使用 Tailwind CSS。不要使用任何复杂的 UI 组件库（如 ElementUI），直接手写简单的 CSS 或使用 Tailwind 类名，以保持轻量。数据存储层封装一个简单的 LocalStorage helper。

💡 效果：Spec Kit 会生成 plan.md，规划出组件结构（比如 InputArea.vue, NoteList.vue）和数据结构。

---

✅ 第五步：任务拆解 (/speckit.tasks)

让 AI 自己把大象装进冰箱分几步。

输入指令：

/speckit.tasks

💡 效果：你会看到类似下面的任务列表（tasks.md）：

1. [ ] 初始化 Vite + Vue3 + Tailwind 环境

2. [ ] 创建 Storage 工具类 (CRUD 操作)

3. [ ] 实现顶部大输入框组件 (InputArea)

4. [ ] 实现笔记列表展示组件 (NoteList)

5. [ ] 集成 Markdown 渲染

6. [ ] 最终整合与测试

---

⚡ 第六步：一键实现 (/speckit.implement)

深吸一口气，见证 AI 替你打工的时刻。

输入指令：

/speckit.implement

接下来会发生什么？

1. 环境搭建：AI 会自动运行 npm create vite@latest，npm install tailwindcss 等命令。

2. 代码编写：它会根据 tasks.md 的顺序，一个文件接一个文件地写。

3. 自我修正：如果 npm run dev 启动报错，它会读取错误日志并尝试修复。

等待几分钟后，终端会提示完成。

npm run dev

打开浏览器，你应该能看到一个极其干净的笔记应用。输入一段文字，回车，它就存下来了。刷新页面，它还在。

---

🔧 进阶：我想加个功能怎么办？

用了几天，你发现太懒了，连字都不想打，想加个“语音输入”按钮？

在 Spec Kit 模式下，不要直接去改代码文件！

1. 更新需求：

   /speckit.specify 增加一个新特性：在输入框旁边加一个麦克风图标。点击开始录音，利用浏览器原生 Web Speech API 识别语音并填入输入框。

2. 更新任务：

   /speckit.tasks

   (AI 会检测到 Spec 变了，自动在任务列表中追加新的任务)

3. 执行实现：

   /speckit.implement

---

📝 总结

通过这个 LazyMemo 的例子，我们看到了 Spec Kit 与传统“聊天式编程”的区别：

模式	流程	结果
Vibe Coding (普通聊天)	"帮我写个笔记应用" -> 代码	代码结构混乱，容易遗忘需求，难以维护
Spec-Driven (Spec Kit)	原则 -> 规格 -> 计划 -> 任务 -> 代码	结构清晰，文档齐全，可迭代，不仅是代码更是工程

CSDN 的朋友们，别再做 CRUD Boy 了，拿起 Spec Kit，去当那个指挥 AI 的架构师吧！ 😎

---

喜欢这篇文章吗？欢迎点赞收藏，在评论区留下你用 Spec Kit 做出的创意应用！