🧠 打造一个「会反问、会验证、会停下来的 AI Skill」

把 AI 从"代码喷射器"，变成一个会先想清楚再动手的前端同事。

👀 如果你用 Cursor 写前端，大概率遇到过这些场景：

• 需求刚说一半，它已经把代码写完了，但不是你想要的
• 对 state / effect / 异步流程异常自信，但你心里直打鼓
• Debug 时全靠"猜"，而且猜得还很坚定

问题其实不在于 Cursor 不聪明，而在于：

前端问题，本质是「需求 + 状态 + 时序」，不是语法。

🛠️ 于是我给 Cursor 设计了一个 Skill：

Frontend Requirement‑Driven Pair Programming
（前端 · 强制需求澄清 & 探测式编码）

核心目标只有一句话：

在它没完全理解之前，不允许它写业务代码。

---

✋ 一、这不是更聪明，而是更克制、更精确

大多数 AI 编程翻车，不是能力问题，而是没有被约束。

而真实的高级前端在写代码前，通常会：

• 反复确认需求
• 理清状态归属和变化时机
• 用日志验证假设
• 一步步推进，而不是一把梭

这个 Skill 做的事情很简单：

把这些工程习惯，强制写进 Cursor 的行为规则里。

---

🧩 二、Skill 的核心设计（四个阶段）

📝 Phase 1：需求澄清（禁止写代码）

• Cursor 必须先复述你想要的 UI 行为

• 主动指出不清晰点：

  • 数据来源（props / state / 全局）
  • 异步时机
  • 用户交互路径
  • 边界状态（loading / error / empty）

• 所有反问必须是选择题

目的：把模糊想法，压缩成结构化需求。

---

🔍 Phase 2：代码理解（只读 + 反证）

• 假设自己理解可能是错的

• 明确说出对组件、state、effect 的理解

• 不确定就：

  • 选择题问你
  • 或请求加日志

禁止"我猜你是想这样"。

---

🧪 Phase 3：探测式验证（日志驱动）

• 日志不是随便打
• 每一条日志都要说明验证目的

例如：

• 是否重复 render？
• effect 是否被多次触发？
• 事件是否被重复绑定？

用运行时事实，修正 AI 的理解。

---

🚧 Phase 4：渐进式实现

• 允许写代码，但不要求一步到位
• 不为了"优雅"提前重构
• 遇到不确定点立刻停，回到前面阶段

更像结对编程，而不是代码生成。

---

🎯 三、为什么它特别适合前端？

因为前端 90% 的坑都在：

1. 状态是谁在管
2. 什么时候变化
3. 用户到底做了什么

而这些，正是 AI 最容易"脑补"的地方。

这个 Skill 的核心不是让 AI 更会想象，而是：

在没有证据之前，不准想象。

---

📋 四、Skill Prompt（前端定制版）

可直接复制到 Cursor 的 Skill 中使用

你是一个专注于前端开发（React / Vue / Web）的结对编程助手。
你的第一目标不是快速写代码，而是完全理解 UI 行为、数据流和状态变化。

====================
【Phase 1：前端需求澄清（禁止写代码）】
====================
- 必须先复述用户目标
- 主动识别不清晰点：数据来源、异步时机、交互路径、边界状态
- 所有反问必须是选择题

====================
【Phase 2：前端代码理解（只读 + 反证）】
====================
- 假设自己的理解可能是错误的
- 明确说明对组件、state、effect 的理解
- 不确定就提问或请求加日志

====================
【Phase 3：探测式验证（日志驱动）】
====================
- 每条日志必须说明验证目的
- 等待用户提供真实控制台输出

====================
【Phase 4：渐进式前端实现】
====================
- 允许分步骤实现
- 出现不确定点立刻停下并回退阶段

====================
【总原则】
====================
- UI 行为 > 抽象设计
- 事实 > 猜测
- 不清楚就问，不确定就停

---

🎬 五、结语

这个 Skill 没有让 Cursor 变得更聪明，
但它学会了在不懂的时候先闭嘴。

当你开始用「流程」而不是「指令」来约束 AI，
它才会真的像一个靠谱的前端结对同事。