用途:为一个 SaaS 或 AI 产品创建或重设计落地页,核心思路是先展示产品机制,再谈宽泛主张,让界面成为证据而非装饰。
主要能力与使用方式:
- 先确立叙事:一句话说明用户摩擦点;在首屏放入真实、确定性或明确标注为样例的工作流;以输入、处理、草稿、编辑、审批、发布等状态解释机制;围绕用户结果与受众组织功能;把定价限制与异议放在一条连续决策路径中。替换来源品牌、输出、客户、指标、价格、截图与声明,不得伪造生成速度或输出质量。
- 构建视觉系统:白到浅蓝表面、近黑文字、浅灰网格线、单一冷色信号色;高 x-height 无衬线体搭配紧凑等宽标签;12 列产品网格、12–16px 圆角、细边框、诚实的界面截图;产品面板比周围营销文案更密集;黑色主操作,信号色仅用于激活态、进度、选中与焦点;避免装饰性 AI 粒子、持续漂浮与模糊发光球。
- 页面结构:头部保持产品路由紧凑、试用或演示主操作明显;首屏价值主张配一个演示完整结果的产品阶段;摩擦证明用前后对比、时间拆分或具体工作流约束;功能模块用小图标与聚焦文案;工作流解释状态变化与人工控制,而非一键魔法承诺;受众选项卡保留在 DOM 中并支持深链;证明使用已验证案例、客户证据或明确标注的样例;定价对齐可比限制、用量单位与脚注;FAQ 从对比表深链模糊条款;页脚处理信任、文档与法律路径。
- 提示到输出流程:将输入、处理、草稿、编辑、审批、发布建模为显式状态;无真实应用状态时标注“Sample workflow”;支持编辑、提交、取消、重试、复制、版本历史、加载、配额、审核、网络与错误状态;提供确定性重放与文本记录;为减少动态效果禁用自动打字与大幅状态动画;JavaScript 或动画不可用时工作流仍可理解。
- 定价与 FAQ:使用语义化对比表或列表并对齐共有功能;用平实语言说明用量单位、限制、超额与计费周期;保留周期、方案选择、CTA 加载、禁用、错误与恢复状态;模糊条款链接到深链 FAQ 答案;浏览器后退可恢复先前对比视图。
- 动效默认:控件反馈 160–220ms,界面状态变化 420–700ms;卡片错开 45–70ms,一次只动画一个交接;云或背景漂移缓慢、可选、离屏暂停;避免伪造打字速度、永久漂浮卡片与装饰性生成循环;减少动态效果下立即渲染稳定界面状态。
- 验证:测试键盘编辑、提交、取消、重试、复制与对比控件;覆盖配额、审核、网络、空、加载与错误状态;确认所有输出为真实、确定性样例或明确标注的演示;验证焦点、对比度、200% 缩放、移动端换行、历史与减少动态效果;移除虚构客户、结果、安全声明、可用性或性能指标。
限制:应避免无法解释自身状态变化的营销模型、伪造仪表盘、伪造打字、未标注样例输出、与核心工作流无关的功能网格、隐藏定价限制或脱节 FAQ、通用 AI 粒子与持续动效。资料未提供具体安装命令、代码示例或平台与收费信息。