在与 AI 交互时最常见的痛点是：需求描述不完整导致返工频繁。下面将用清晰的结构方便你避免这些陷阱。

一、为什么“帮我写代码”往往不够清晰

一句话看似明确。却隐藏了大量未说明的信息：

• 使用的技术栈
• 页面需要哪些输入框
• 登录方式
• 字段是否必填、是否需要显示/隐藏密码
• 成功/失败后的跳转或提示
• 是否需要调用真实接口或保存状态

如果缺少上述细节，AI 必须自行做出假设，结果往往与实际需求相差甚远。

至于痛点一，技术栈未说明导致实现方式多样化

一样的功能。在浏览器、Node.js、Python 或移动端实现方式截然不同；如果 AI 随意选择，就会产生不必要的重构。

痛点二这方面。功能范围不清导致返工累积

如“调整页面”可能代表着性能提高、样式美化或适配问题，缺乏边界会让 AI 大幅修改现有代码。

二、需求描述的四大要素

A. 背景

目的：

• 告诉 AI 当前环境与目标类型。
• 只需提供完成任务必需的信息，避免过度冗余。

常见痛点的观点是，把整个项目粘进去导致 AI 无法聚焦关键细节。

至于示例背景信息。

我正在学习 JavaScript，使用 Node.js。当前只有变量和函数，其实，想通过小练习理解文件读取。

已有项目背景示例：

这是一个 Vue+JavaScript 待办事项项目。
src/components/TodoList.vue 已展示列表，只需添加删除功能。不希望引入第三方库，

B. 目标

主要要点：

• 具体实现内容
• "做什么" + "不做什么"
验收条件清晰可测量。按理说，

从痛点三来看。目标抽象导致 AI 范围失控。按理说，

再看明确目标示例。

请调整待办列表移动端显示。只调整 CSS，不改 JS。屏幕宽度<600px 时无横向滚动；文字自动换行；删除按钮保持右侧。

C. 限制

• - 技术限制：仅原生 JavaScript，无第三方库；兼容 Node.js.
• - 修改范围限制：仅修改 LoginForm.vue，不改路由或数据库结构.
• - 功能范围限制：本次仅增加功能。不涉及编辑或删除.
• - 输出格式限制：先解释思路，再拆分为 index.html、style.css 与 app.js 并说明运行方法.
• - 安全与数据限制：不要在日志中打印敏感信息；按理说，不要使用真实使用者数据或硬编码密钥.
• - 不确定规则请标注待确认，以免 AI 自行决定错误实现.

再看痛点四，缺乏限制让 AI 随意决定实现细节，引发后续修正成本高.

D. 输出格式

• - 对初学者友好：先解释思路，再给完整代码并附运行步骤.
• - 学习代码场景：逐行注释关键语句并给可改动练习.
• - 功能生成场景：先复述需求，再给实现思路与代码，最终列出测试步骤.
• - 错误排查场景：先解释错误含义，接下来按概率列出原因及排查顺序，不直接猜结论.
• - 修改已有代码场景：先说明修改范围，确保只影响相关部分，并提醒可能受影响功能.

E. 综合实例——从零到一的待办事项列表需求拆解

# 背景

I’m learning native HTML/CSS/JS and can create a page with button events. I want a small project to practice arrays and DOM manipulation.

# 目标

Create a simple todo list where users can type an item。click “Add”,and see it in a list with a delete button next to each entry.

# 限制

No third‑party libs. No database. Empty input is disallowed. Only add/delete – no edit. Keep all logic in plain JS.

# 输出格式

.
.​​
.
.
.
.
.​​
.​​
.​​
.​​
.​​
.​​
​.​​
​.​​
​.​​
​.​​
​.​​
​.​​
​.​​
​.​​
​.​​
​
​.​​
​
​
​
​
​
​​…​​​，​​​…​​​，​​​…​.​​​