「帮我做个好看的网站」这种话，编程助手也能做出东西，但多半不是你想要的：它会自己猜内容、猜风格，还可能引入一堆你用不上的框架。任务说得越具体，返工越少。
一个好的任务描述
至少写清楚四件事：
| 部分 | 要回答的问题 | 例子 |
|---|---|---|
| 目标 | 这个网页给谁看、要达到什么目的 | 给朋友看的个人主页，让人知道我是谁、怎么联系我 |
| 页面内容 | 有哪几块、每块放什么 | 顶部姓名和一句介绍；三张作品卡片；底部邮箱 |
| 风格 | 颜色、字体、整体感觉 | 白底、深灰文字、一个蓝色强调色，简洁，手机上也好看 |
| 技术约束 | 用什么、不用什么 | 单个 index.html，不用框架，不调用任何需要 Key 的接口 |
技术约束最容易被忽略，却最重要。对初学者来说，「单个 index.html，CSS 和 JS 都写在里面，不用框架」意味着：不用装依赖，双击就能在浏览器里打开，最后发布也最简单。
网页里不要放 Key
浏览器能看到网页里的全部代码。任何需要 Key 的接口都不能直接从网页调用，任务描述里要明确写上这一条。
动手：把模糊需求改写清楚
下面把一句模糊的需求改写成给编程助手的任务描述。换成你自己的想法再运行：
▶ 动手试试
系统提示词（这次请求一起发送，点开查看）
你是帮初学者使用编程助手的老师。把用户的模糊需求改写成一份给编程助手的清晰任务描述，包含：目标、页面内容（分块列出）、风格、技术约束。技术约束固定包含：单个 index.html，CSS 和 JS 写在同一个文件里，不用框架，不调用任何需要 Key 的接口。最后加一句：先给出计划，等我确认后再写代码。
登录后运行登录 HiveGPT 后每天有免费运行次数
目标：为一家社区小咖啡店做一个介绍页，让路过或朋友转发看到的人知道店在哪、卖什么、几点开门。
页面内容：
1. 顶部：店名、一句话介绍（例如「街角的一杯手冲」）。
2. 菜单：分「咖啡」「茶饮」「甜点」三组，每项写名称和价格，先用示例数据。
3. 营业信息：地址、营业时间、联系电话（用占位文字）。
4. 底部：一句欢迎语。
风格：暖色调，米白底、深棕文字，圆角卡片，字体清晰；手机上单列显示，电脑上菜单两列。
技术约束：单个 index.html，CSS 和 JS 写在同一个文件里，不用框架，不调用任何需要 Key 的接口。
请先给出计划（页面结构和大致样式），等我确认后再写代码。用 AGENTS.md 定下项目规则
Codex CLI 会读取项目里的 AGENTS.md 文件，把它当成这个项目的长期规则。每次都要重复的要求，写进去一次就够了。在项目文件夹里建一个 AGENTS.md：
markdown
# 项目规则
- 这是一个静态网站，只有一个 index.html，不用任何框架和构建工具。
- 页面里不能出现 API Key，也不能调用需要 Key 的接口。
- 界面文字用中文，手机和电脑上都要正常显示。
- 每次改动前先说明打算改哪里；不要删除我没提到的内容。先计划，再动手
在项目文件夹里启动 codex，把任务描述贴进去。注意最后那句「先给出计划」：
- 看计划：它打算做哪几块、怎么排版。不对的地方现在改，成本最低。
- 确认后再写：回复「计划可以，开始写」，或者指出要调整的地方。
- 看改动：它修改文件时会显示改了什么（diff），审批模式下会先问你。看一眼是不是只改了该改的地方。
- 在浏览器里打开：双击
index.html，看效果，再用浏览器把窗口拉窄，模拟手机屏幕。
用 git 保存每一步
每做出一个能正常显示的版本，就提交一次。改坏了随时可以回到上一个好的版本：
bash
git init # 第一次做
git add .
git commit -m "首页初版：标题、菜单、营业信息"可以直接让编程助手帮你执行这几条命令，但提交说明最好自己看一眼。
小结
- 任务描述写清目标、页面内容、风格和技术约束；初学者用「单个 index.html，不用框架」。
- 长期规则写进 AGENTS.md，比如「页面里不能出现 Key」。
- 节奏是：先计划，确认后再写，检查改动，浏览器里看效果，能用就 git commit。
下一课：调试和改需求——页面不对、报错了，怎么让编程助手高效地修。