用纯 HTML/JS 做一个 AI 需求澄清器：把模糊想法转换成可执行任务书

让 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

下载并解压后，双击 ai-requirement-clarifier.html 即可运行，不需要安装 Node.js、数据库或模型 API。

标签：JavaScript、前端、AI编程、需求分析、人工智能