01 · 一句话做一个落地页

速览

产出	单文件 HTML 落地页
用时	15 到 30 分钟
类型	「Prototype」
难点	不在生成，在于你能不能说清楚卖什么给谁

场景

要给一个产品、一个功能、一次活动做一个能看的页面。可能是拿去验证想法，可能是给客户看方案，也可能就是内部要一个说明页。

提示词

做一个落地页。

产品：[一句话说清楚它是什么]
受众：[谁会用它，他们现在怎么解决这个问题]
这一页要让他们相信：[一句话]
主行动：[你要他们点什么]

页面结构：
1. 首屏 —— 价值主张 + 单一主行动
2. [第二段的内容]
3. [第三段的内容]
4. [……]
5. 页尾行动区

语气：[用一个参照物，比如「像一份内部备忘录」]

约束：
- 所有数字如果没有真实来源，写占位符并标注，不要编
- 不要渐变背景，用设计系统里的实色
- 图标必须对应具体功能，没有对应的就用文字
- 按钮要有 hover、focus、disabled 三个状态
- 手机宽度下不能有横向滚动

为什么这么写

「他们现在怎么解决这个问题」比「他们是谁」重要。 这句话决定了首屏该怎么写——如果他们现在有一个凑合的办法，你要说的是「有更好的」；如果他们现在完全没办法，你要说的是「这件事可以做了」。两种写法完全不同。

「这一页要让他们相信」只能有一句。 写三句的话，页面会变成三个并列的板块，观众记不住任何一个。

下面那五条约束是通用的。 它们对应的是 AI 生成页面最常见的五个毛病。写一次就行，后面每次都能复用。

验收清单

• [ ] 首屏那句话，一个不了解产品的人能不能看懂
• [ ] 主行动是不是唯一的、显眼的
• [ ] 每一段是不是在推进说服，还是在罗列功能
• [ ] 所有数字有来源，或者标了示意
• [ ] 按钮三个状态都在
• [ ] 手机宽度下没有横向滚动
• [ ] 对比度过 WCAG AA
• [ ] 没有紫蓝渐变、通用图标、编出来的用户数

变体

做多语言版

在当前页面基础上做一个英文版，不要直译。

英文版要按英文读者的习惯重写：句子更短，行动号召更直接，
不要保留中文那种铺垫式的开头。

两个版本共用同一套设计系统和布局。

做 A/B 两个方向

用同样的内容做第二个版本，首屏换一个角度：
现在这版是从「省时间」切入，第二版从「不会出错」切入。

其余结构不变，方便对比。

从已有页面改

这是我们现在的落地页 HTML。请诊断它有哪些问题，按严重程度排序，
然后按你的诊断改一版。

诊断要给出具体证据，不要泛泛说「视觉层次不清」。

常见问题

生成出来太长，滚不到底。

在提示词里限定屏数：「整页控制在 5 屏以内，桌面 1440 宽度下」。不限定的话它倾向于把每个段落都做得很饱满。

三个功能被排成三张卡片，但其中一个明显更重要。

明确说出来：「第二个能力是核心差异点，给它比另外两个更大的视觉分量，不要三栏等分」。

文案很空。

这通常不是生成的问题，是你给的输入里就没有具体的东西。补上真实的细节——一个具体的使用场景、一个真实的数字、一句用户原话——文案会立刻变实。

要接到我们现有的设计系统上。

先做 案例 04，抽出 DESIGN.md，之后所有页面自动继承。

相关

• 快速上手 · 第一个产物 — 更详细的分步版本
• 案例 04 · 抽品牌系统
• 进阶 · 反 AI 味