07 · 跑通你的第一个产物
前面六篇讲的是原理。这一篇是一次完整操作，二十分钟，最后你手上会有一个能在浏览器里打开、能导出、能继续改的东西。
做一个落地页。理由：单文件、能一眼看出好坏、不依赖任何素材。
开始之前
第 1 步 · 挑类型和设计系统
新建一个，类型选「Prototype」。
设计系统这一步别跳。从库里挑一个跟你想要的气质接近的。做开发者工具就找网格化、克制那一类；做面向大众的产品就找高对比、有表情那一类。
第 2 步 · 写提示词
不要写「做一个好看的落地页」。写清楚三件事：卖什么、给谁、要人做什么。
text
做一个落地页，产品是一个给小团队用的会议纪要工具。
受众：5 到 20 人的团队里那个负责组织会议的人。他们现在的做法是
会后自己整理，或者干脆不整理。
页面要让他们相信：这件事可以自动做完，而且录音不会外泄。
页面结构：
1. 首屏 —— 一句话价值主张 + 一个主行动按钮
2. 三个核心能力，各一句话
3. 一段说明数据怎么处理（本地、不上传、可删除）
4. 三档价格
5. 常见问题 4 条
6. 页尾行动区
主行动是「免费试用 14 天」。语气克制，不要发布会那种腔调。这段提示词的关键不在长度，在于每一句都在回答一个它猜不出来的问题。
第 3 步 · 填需求表单
它会弹一张问卷。按 05 里说的填：受众写状态不写身份，语气用参照物，有没有真数据说清楚。
价格那一块，如果你还没定，就在表单里写「价格是示意，请标注」。它会照做，不会编三个看起来很真的数字。
第 4 步 · 生成，看左边
生成过程中左边那栏值得看完第一次。你能看到它读了哪些上下文、加载了哪几条 Craft 规则、写了哪些文件。第二次之后就不用盯了，但第一次看一遍，你会对「它到底理解了什么」有个准。
第 5 步 · 先验收，再改
出来之后别急着说「再好看一点」。按这个清单过一遍：
- [ ] 首屏那句话，一个不了解产品的人能不能看懂
- [ ] 主行动按钮是不是唯一的、显眼的
- [ ] 三个核心能力有没有说人话，还是三个名词
- [ ] 价格那块的数字是真的，还是标了示意
- [ ] 手机宽度下有没有横向滚动
- [ ] 按钮有没有 hover 和 disabled 状态
- [ ] 有没有紫蓝渐变、通用图标、编出来的「10,000+ 用户」
最后一条是 AI 味的常见成分。有的话直接指出来让它删。
第 6 步 · 改
三种改法，按成本从低到高：
- 「Edit」 — 改一个词、调一档字号，直接在预览里改。
- 「Comment」/「Mark」 — 问题挂在某个元素或某块区域上，圈出来说。
- 重新跟 Agent 说话 — 方向性的问题才值得这么改。
方向性问题的说法示例：
text
第 3 段（数据处理那一段）现在读起来像法务条款，但它其实是这一页
最重要的卖点。请把它提到三个核心能力前面，重写成一句人话加三个
具体做法，并且给它跟首屏同一级的视觉分量。第 7 步 · 导出
导出选项按你的用途：
| 用途 | 导出成 |
|---|---|
| 自己看、发给同事 | HTML（素材内联，单文件） |
| 交给工程接着写 | 直接用仓库里的源文件 |
| 存档、走审批 |
产物本来就在你的项目目录里，git 能管，能 diff，能回滚。
跑完之后
你已经走完一遍完整循环了。接下来两条路：
第一次做出来的东西不会太好
这是正常的。官方教程里那句话值得记住：第一版是工作草稿，不是成品。真正拉开差距的是后面的对照和精修，不是第一次的提示词写得多漂亮。