让 AI 写代码时，很多返工并不是模型能力不足，而是任务只有一个方向，没有明确目标、范围、输入输出和验收标准。
例如下面三句话都不能直接作为开发任务：
text
帮我做一个管理系统。
写一个好看的登录页。
把这个功能优化一下。本文使用纯 HTML、CSS 和 JavaScript 实现一个 AI 需求澄清器。用户回答 7 个问题后，工具会生成一份可以直接交给编程智能体的结构化任务书。
一、需求澄清的 7 个字段
工具没有让用户填写一大段"万能提示词"，而是把需求拆成 7 个可以单独检查的字段：
- 要解决谁的什么问题；
- 最终必须得到什么结果；
- 首版必须有哪些功能；
- 哪些内容明确不做；
- 输入和输出分别是什么；
- 有哪些技术和业务限制；
- 怎样才算完成。
其中第4项"明确不做"和第7项"验收标准"最容易被忽略，也最能减少范围失控和反复返工。
二、数据结构
每个字段包含表单ID和输出标题：
javascript
const fields = [
{ id: 'goal', title: '目标与用户' },
{ id: 'outcome', title: '预期结果' },
{ id: 'mustHave', title: '首版核心功能' },
{ id: 'outOfScope', title: '明确不做' },
{ id: 'io', title: '输入与输出' },
{ id: 'constraints', title: '限制条件' },
{ id: 'acceptance', title: '验收标准' }
];这种数据结构的好处是：新增问题时只需要添加一个表单字段和一条配置，不需要重写整个生成流程。
三、实时计算澄清进度
只要文本框非空，就计为已完成一项：
javascript
function valueOf(id) {
return document.querySelector(`#${id}`).value.trim();
}
function updateProgress() {
const completed = fields.filter(field => valueOf(field.id)).length;
elements.progressText.textContent = `${completed} / ${fields.length}`;
elements.progressValue.style.width = `${completed / fields.length * 100}%`;
elements.status.textContent = completed === 7
? '可以交付 AI'
: `还差 ${7 - completed} 项`;
return completed;
}这里没有使用复杂状态管理。页面规模较小，原生DOM事件已经足够，也避免为一个单页工具增加构建步骤。
四、生成结构化任务书
未填写的字段不会被静默删除，而是明确显示为"待补充"：
javascript
function buildBrief() {
const completed = updateProgress();
const projectName = elements.projectName.value.trim() || '未命名项目';
const sections = fields.map(field => {
const value = valueOf(field.id) || '【待补充】';
return `## ${field.title}\n${value}`;
}).join('\n\n');
elements.brief.textContent = `# 开发任务：${projectName}
项目类型：${elements.projectType.value}
澄清完成度：${completed}/7
${sections}
## 执行要求
1. 先复述对任务的理解，并指出仍有歧义的地方。
2. 在修改代码前给出最小实现方案和涉及的文件。
3. 优先完成可运行的最小版本，不添加范围外功能。
4. 完成后逐条对照验收标准验证，并报告未完成项与风险。`;
}
相比直接拼接成一段自然语言，Markdown结构更容易被人阅读，也方便编程智能体区分目标、约束和验收条件。
五、为什么一定要写"明确不做"？
如果任务只列功能、不列边界，AI会根据常见项目模式自行补全需求。
例如"做一个报价器"可能被扩展成账号系统、历史记录、云端数据库、在线支付和管理后台。每项功能单独看都合理，组合起来却可能完全偏离首版目标。
因此任务书必须同时包含：
text
首版必须做：参数输入、实时计算、结果展示、复制文本。
首版明确不做：登录、云端存储、支付、多人协作、模型API。范围不是越大越完整，而是越能验证核心价值越好。
六、验收标准必须可测试
下面的描述无法稳定验收：
text
页面好看一些。
交互流畅一点。
代码质量高一点。更合适的写法是：
text
修改任意参数后结果立即更新。
复制按钮输出完整任务书。
宽度小于820px时切换单列布局。
表单内容不发送到服务器。
控制台没有JavaScript错误。验收标准既是给开发者的，也是给AI自检的。
七、复制和隐私处理
当 7 项全部完成后，用户可以复制任务书：
javascript
elements.copy.addEventListener('click', async () => {
if (updateProgress() < 7) {
showToast('建议先补全 7 个问题');
return;
}
try {
await navigator.clipboard.writeText(elements.brief.textContent);
showToast('任务书已复制');
} catch {
showToast('复制失败，请手动选择文本');
}
});项目没有后端、没有埋点，也不使用本地存储。所有内容只存在于当前页面，避免把尚未公开的业务需求上传到服务器。
八、响应式设计
桌面端使用双栏布局：左侧填写问题，右侧实时查看任务书；移动端切换为单栏：
css
@media (max-width: 820px) {
.intro,
.workspace {
grid-template-columns: 1fr;
}
.output-panel {
position: static;
}
}
九、运行方式
项目只有一个文件：
text
ai-requirement-clarifier.html完整源码下载：
下载并解压后，双击 ai-requirement-clarifier.html 即可运行，不需要安装 Node.js、数据库或模型 API。
标签：JavaScript、前端、AI编程、需求分析、人工智能