先读
让它检查现有目录、框架、约束与未提交改动，不凭空假设。
开工检查
| 需要 | 为什么 | 没有时的备用路线 |
|---|---|---|
| 电脑与浏览器 | 运行和亲手验收页面 | 两人一组，共用一台电脑 |
| 编码 Agent | 把自然语言规格翻成文件 | 讲师现场投屏，学员负责判断与验收 |
| 空文件夹 | 看清 AI 实际创建了什么 | 下载起步包后复制一份再做 |
| APP-SPEC | 锁定唯一动作与不做项 | 先完成本课模板，未确认不得编码 |
MODULE 04 · 把话变成产品
用自然语言，做出第一个真正能用的应用
不从“学编程”开始，从一个清楚的用户动作开始。
这节课结束时
你会从一个空文件夹开始，与 Codex、Claude Code 一类编码 Agent 协作，亲手做出一个可打开、可填写、可保存的工作委托书生成器。
PREFLIGHT · 开工前只备四样
第一版不需要服务器、数据库、API Key，也不要求你先学会编程。
你需要一台电脑、现代浏览器、一个能读取本地文件的编码 Agent，以及一个新建的空文件夹。课堂以纯 HTML、CSS、JavaScript 为默认路线，避免框架和依赖先把零基础学员挡住。
AGENT GATE · 先证明工具真的站对位置
零基础的第一道工程关，不是写代码，是让编码 Agent 看见正确文件夹。
编码 Agent 可以运行在桌面应用、编辑器或终端里，界面与安装方式会更新，所以课程不背按钮。无论用哪一种，开工前都必须拿到下面五条证据；缺一条就停在这里，不继续施工。
编码 Agent 开工闸
| 闸门 | 你要看到的证据 | 失败时怎么做 |
|---|---|---|
| 已从官方渠道安装并登录 | 工具能正常回应，但尚未获得项目权限 | 回到官方安装说明或课堂预备机，不把密钥发进聊天 |
| 打开目标项目文件夹 | 路径最后一段与项目名一致 | 重新选择文件夹，不允许它在桌面或主目录乱写 |
| 只读检查 | Agent 准确报告当前路径与三个 Markdown 文件名 | 路径或文件名不对，禁止创建文件 |
| 最小写入范围 | 它承诺只在当前项目内创建 index.html | 范围说不清，先要求列拟写文件与最坏影响 |
| 本地预览 | 浏览器能打开 127.0.0.1 地址或单个本地 HTML | 保存完整报错，换最轻路径，不盲装依赖 |
PROMPT可复制，但先按你的现场改
先不要创建、修改、删除或安装任何东西。请只报告：你当前所在的完整目录、这个目录里的文件名、你目前拥有的读写权限，以及如果下一步开工准备创建哪些文件。任何一项无法确认就停下。
FIRST PRINCIPLE · 先定义产品
“帮我做个网站”不是需求；“谁完成什么动作”才是。
第一版应用只有一个目标：用户回答六个问题，页面把答案整理成一份可复制的任务合同，并保存在当前浏览器。先不接模型、不注册、不付费。
第一版验收标准
| 用户动作 | 页面反应 | 通过标准 |
|---|---|---|
| 填写六个字段 | 实时组成任务合同 | 字段不丢、不串位 |
| 刷新页面 | 恢复上次草稿 | 本地保存真实生效 |
| 点击复制 | 写入剪贴板 | 出现明确成功提示 |
| 手机打开 | 单列可读可填 | 无横向溢出与文字遮挡 |
BLANK FOLDER → RUNNING APP · 从零走一遍
你要做的是自己的应用，不是试玩本站已经做好的组件。
本站的在线生成器只是参考实现。正式作业从空文件夹开始，模型必须先读 APP-SPEC，再创建文件、启动预览、接受你的点击测试与退回。
完整实作链
| 轮次 | 你给编码 Agent 什么 | 必须看到的证据 |
|---|---|---|
| 1. 建规格 | 用户、唯一动作、六项输入、输出、不做项、四条验收 | APP-SPEC.md 可被同伴复述 |
| 2. 只读不改 | 要求读取文件夹与规格并复述风险 | 它先报告空目录、范围与疑问 |
| 3. 做一个闭环 | 只创建 index.html，不加框架、账号、数据库或模型 API | 页面能在浏览器打开 |
| 4. 运行与观察 | 要求启动 127.0.0.1 本地预览并报告地址 | 真实 URL、终端无致命错误 |
| 5. 人工验收 | 填写、刷新、复制，并以 390px 宽度检查 | 四项逐条通过或留下失败 |
| 6. 单点修复 | 一次只退回一个承重问题，锁住已通过项 | 修复前后证据与复测结果 |
| 7. 留版本 | 初始化 Git、检查状态、暂存已验收文件并提交 | 可读的 commit 与干净工作区 |
BOUNDARY · 自然语言能做什么
你可以不手写代码，但不能把判断也外包。
自然语言足以描述业务、页面行为、视觉感受、错误现象和验收标准；专业知识用来辨认模型做出的技术选择是否安全、可维护、可上线。
自然语言与专业知识的分界
| 可以直接用自然语言表达 | 必须逐步学会判断 |
|---|---|
| 用户是谁、要完成什么 | 文件结构与运行环境 |
| 页面需要哪些字段和状态 | 依赖、版本与构建错误 |
| 哪里太挤、太慢、看不懂 | 数据保存在哪里、会不会泄露 |
| 怎样才算通过验收 | API 权限、密钥、费用和限流 |
| 给出截图和报错原文 | Git 版本、部署、日志与回滚 |
COLLABORATION LOOP · 与编码 Agent 怎样说
不要一句“全部做完”。让它先读、再说、再改、再证明。
高质量协作不是更长的 Prompt，而是把证据放进每一轮。
再复述
要求它用自己的话复述用户动作、边界和验收标准。
小步改
一次完成一个闭环，避免十个页面同时开工。
现场验
运行应用、点击路径、看移动端、检查控制台和保存行为。
留下版本
解释改了什么、为什么，测试通过后再提交。
PROMPT可复制，但先按你的现场改
先不要改文件。请先读取项目结构和现有约束，用 8 行以内复述：目标用户、唯一核心动作、数据保存位置、明确不做的功能、四条验收标准、最可能失败的三处。若信息不足，先问我；我确认后再实施第一步。
COPYABLE ROUNDS · 不把一次合作塞进一句话
读、述、做、跑、验、修，每一轮都留下一个可检查结果。
下面不是万能 Prompt，而是一条协作顺序。文件、运行地址和点击结果比“我已经完成”更可信。
PROMPT可复制，但先按你的现场改
第 1 轮｜只读：读取 APP-SPEC.md 和当前目录，不改文件；复述唯一用户动作、不做项、验收标准与三处风险。 第 2 轮｜实现：确认后只创建一个 index.html，使用原生 HTML/CSS/JavaScript；实现六字段输入、实时整理、本地保存与复制，不增加其他功能。 第 3 轮｜运行：使用当前机器已有的安全方式，在 127.0.0.1 启动本地预览；报告准确地址、启动命令和终端错误。 第 4 轮｜验收：不要只读代码。按“填写→刷新→恢复→复制→390px”逐项实测，列证据和未通过项。 第 5 轮｜修复：一次只修【具体失败】，锁住已通过行为；复测并说明修改文件。不要顺手重构。 第 6 轮｜留版：展示 git status；只暂存本次已验收文件；提交前列出将进入快照的文件与测试证据，等我确认。
V0 → V1 · 先做壳，再加脑
第一版不接 AI，反而更容易把产品做对。
先证明用户动作与数据流成立，再让模型参与缺口检查。这样出了问题，能判断是产品逻辑错、数据错，还是模型输出错。
V0
纯表单：输入、整理、保存、复制。
V1
增加“检查缺口”：把任务合同发给模型，只返回缺失问题。
V2
增加 Skill：按固定规则检查事实、边界与验收。
暂不做
自动替用户决定、自动发布、自动付款或“一键完成所有工作”。
REFERENCE V0 · 随课参考实现
工作委托书生成器
它不替你写成品，只演示六项输入怎样变成任务合同。正式作业仍要从空文件夹做出你自己的版本。
实时生成的任务合同刷新后仍保留在当前浏览器
任务目标：【待补充】 使用对象：【待补充】 依据材料：【待补充】 边界限制：【待补充】 判断标准：【待补充】 输出形式：【待补充】 执行前先检查以上信息是否存在会直接改变结果的缺口。若有，最多问我 5 个关键问题；不要替我补业务事实。等我确认后再起稿。
六项未填全时不会复制半成品；补齐后再交给模型。
这个 V0 只负责整理与复制，不在网页里调用模型；缺口检查发生在你把任务合同粘贴给模型之后。
做出并验收你的第一版应用
新建一个空文件夹，写一页 APP-SPEC：用户、唯一动作、输入、输出、不做什么、验收标准。
让编码 Agent 先读目录与规格并复述，不允许直接开工。
只创建一个 index.html，完成输入、整理、保存与复制。
启动本地预览，逐条实测填写、刷新恢复、复制和 390px 宽度。
保留一次真实失败与修复前后证据；通过后再初始化 Git 并提交。
过关标准
一个没听过你口头解释的人，能从你的文件夹启动应用，并在 3 分钟内完成填写、刷新恢复和复制。