3.4 从静态 HTML 开始：做一个能提交的表单页面

环境能跑以后，很多老师第一件想做的事，是让 AI 先生成一个页面。

这很合理。

因为页面看得见，最有成就感。

你把需求告诉 DeepSeek 或其他 Chat 工具，它很快就能给你一段 HTML。保存成文件，双击打开，浏览器里立刻出现一个漂亮页面。

这一步非常重要。

但也要马上看清它的边界：

静态页面可以帮你看见想法，
但它还不能自动变成真正能回收数据的系统。

先让想法变成页面

假设学校要办科技节，你想做一个“编码探险闯关”答题页面。

学生打开页面后，要填写：

• 姓名。
• 学号。
• 班级。
• 单选题答案。
• 判断题答案。
• 填空题答案。

提交后，页面能显示得分和正确答案。

你可以先这样对 DeepSeek 说：

请帮我生成一个单文件 HTML 页面，用于学校科技节“编码探险闯关”活动。

页面要求：
1. 学生先填写姓名、学号、班级。
2. 题目包含单选题、判断题和填空题，共 10 题。
3. 点击提交后，在页面上显示总分、答对题数和每题正确答案。
4. 页面风格适合中小学科技节，活泼但不要幼稚。
5. 代码写在一个 HTML 文件里，包含必要的 CSS 和 JavaScript。
6. 先不需要后端和数据库。

这类提示词的关键，是把场景、字段、题型、反馈和边界说清楚。

注意最后一句：

先不需要后端和数据库。

这一句不是退缩，而是分阶段。

第一步先把页面原型做出来。

静态页面很适合做原型

静态 HTML 的好处很明显：

• 生成快。
• 打开快。
• 不需要安装复杂依赖。
• 适合修改文案和样式。
• 适合让老师确认“这是不是我想要的页面”。

这一步就像先画一张教室座位草图。

草图不负责真的安排学生，但它能帮助你看清：讲台在哪里、座位怎么排、过道留多少、老师看起来顺不顺眼。

静态页面也是这样。

它最适合帮你确认：

• 页面上应该有哪些字段。
• 学生先做什么、后做什么。
• 按钮放在哪里。
• 提交后应该看到什么反馈。
• 页面整体是否适合学生使用。

对刚开始 Vibe Coding 的老师来说，这一步能明显降低心理门槛。

但静态页面不能替代系统

问题也在这里。

一个静态页面看起来很像系统，但它通常只是浏览器里的临时交互。

学生在页面上填写了姓名和答案，点击提交后，页面可以在本机算出分数。

可是你要继续问：

这些提交记录保存到哪里了？
老师在哪个页面看全班统计？
换一台电脑还能看到这些数据吗？
刷新页面以后记录还在吗？

如果这些问题答不上来，它就还不是完整校园 Web 项目。

它只是一个页面原型。

这不是缺点。只要你知道它的位置，它就是很好的起点。

把页面变成项目需求

从静态页面进入下一步之前，不要急着让 AI 乱加代码。

先从页面里提取后端需要知道的信息。

比如这个答题页面，至少要保存：

• 学生姓名。
• 学号。
• 班级。
• 每道题的答案。
• 每道题是否正确。
• 总分。
• 提交时间。

老师端至少想看到：

• 提交人数。
• 平均分。
• 最高分。
• 总正确率。
• 各班级统计。
• 每道题正确率。
• 学生成绩列表。

这一步很关键。

因为它把“页面长什么样”翻译成了“系统要保存什么、统计什么”。

后面 Coding Agent 接手项目时，最需要的就是这些信息。

继续追问 AI，生成 PRD (产品需求文档)

页面原型出来以后，不要马上把 HTML 丢给 Coding Agent 改后端。

更稳的做法，是继续在刚才生成 HTML 的对话里追问一次，让 AI 把“要保存什么数据、老师端要看什么统计”整理成一份需求文档。

这里可以把 PRD 先理解成“项目需求说明”。它不是企业里的复杂文档，而是一份让 Coding Agent 看得懂的说明书。

你可以继续对 DeepSeek 这样说：

现在我需要对这个 HTML 的学生答题数据进行回收，需要知道：
比如这个答题页面，至少要保存：
学生姓名。
学号。
班级。
每道题的答案。
每道题是否正确。
总分。
提交时间。

老师端至少想看到：
提交人数。
平均分。
最高分。
总正确率。
各班级统计。
每道题正确率。
学生成绩列表。

同时需要有一个数据看板能够看到这些指标，请你帮我形成一个需求文档。

这个追问的价值，是把老师脑子里的“我想回收数据”，变成更明确的项目任务。

AI 生成 PRD 后，老师不需要逐字挑技术细节，但要重点检查四件事：

• 学生端要提交哪些字段。
• 老师端要看到哪些统计指标。
• 哪些功能这一步先不做，例如登录、权限、导出 Excel。
• 有没有真实姓名、成绩、账号密钥等不该直接放进公开对话的信息。

如果 AI 写得太泛，可以继续追问：

请把这份需求文档整理成适合交给 Coding Agent 的 Markdown 格式。

请包含：
1. 项目目标。
2. 学生端功能。
3. 老师端数据看板功能。
4. 需要保存的数据字段。
5. 暂时不做的功能。
6. 验收标准。

要求语言简洁，不要写成宣传文案。

这样得到的 PRD，就可以成为下一步交给 Coding Agent 的“施工说明”。

它比一句“帮我加后端”更清楚，也比老师自己猜数据库字段更稳。

不要一直停在复制代码

很多老师在这一步容易继续走老路：

在聊天框里让 AI 生成一段代码。
复制到 HTML 里。
再报错。
再复制一段。
再粘贴。

这样可以做小改动，但不适合做完整项目。

一旦要加入后端、数据库、接口、统计页面，就应该切换到 Coding Agent 模式。

因为 Agent 能做三件 Chat 工具做不好的事：

• 读取整个项目目录。
• 同时修改多个文件。
• 运行命令并根据报错继续调整。

这就是从“AI 帮我写代码片段”，进入“AI 帮我改项目”的分界线。

可以这样准备交接提示词

你可以把静态页面和 PRD 交接给 Agent，提示词可以这样写：

我已经有一个静态 HTML 答题页面。
我也已经根据这个页面整理了一份 PRD 需求文档。

现在请你不要重写页面，而是在现有页面基础上，把它改造成一个 Node.js Web 小项目。

目标：
1. 学生提交姓名、学号、班级和答题结果。
2. 后端保存每次提交记录。
3. 老师可以打开统计看板，查看提交人数、平均分、最高分、题目正确率和学生列表。
4. 先不做登录系统。
5. 先使用轻量数据库或本地文件保存，方便我在 Windows 电脑上运行。

请先阅读项目文件，给出改造计划，再开始修改。

这段提示词最重要的一句是：

请先阅读项目文件，给出改造计划，再开始修改。

不要让 Agent 一上来就大改。

先让它看清楚，再让它动手。

静态页面是入口，不是终点

这一篇要建立的认识很简单：

静态 HTML 很有价值。它能快速把想法变成页面，也能帮助老师确认字段、流程和视觉效果。

但如果你的目标是校园真实使用，就不能停在这里。

学生提交的数据要留下来，老师要能统计，换电脑还要能看到同一份结果。这些事情，需要后端和数据库参与。

下一篇，我们就用一个真实的热身案例，把这个静态页面继续往前推一步。

让它不只是能打开，而是能真正收数据、存数据、看统计。

用流程图回看这一跳

flowchart TD
  A[向 DeepSeek 描述活动场景] --> B[生成单文件 HTML 页面]
  B --> C[浏览器打开并检查字段、题目和反馈]
  C --> D{是否需要真实回收数据}
  D -->|暂时不需要| E[作为页面原型或课堂演示使用]
  D -->|需要| F[在同一轮对话里继续追问 AI]
  F --> G[让 AI 生成数据回收和看板 PRD]
  G --> H[老师检查字段、统计指标和暂不做功能]
  H --> I[把静态 HTML 和 PRD 交给 IDE Agent]
  I --> J[要求 Agent 先阅读项目并给出计划]
  J --> K[确认后在现有页面基础上改造成可回收数据的项目]

封面