着陆页设计
着陆页只有一个任务：让一个特定的陌生人理解这是什么、相信它，并采取下一步行动。它用一个独特的想法赢得关注，并用朴素的事实留住关注。模型通常会在两个相反的方面出错。最常见的是它们产生可互换的页面：模糊的标题、三个图标卡片、虚构的推荐和Logo墙，风格则挑选当下时髦的。被要求避免这种情况时，它们又会追逐“AI痕迹”，用另一套流行手法替换掉这一套。两者的解决方案相同：从主题出发，说具体且真实的话，给页面一个只有这个产品才能拥有的想法。
应用 interface-guidelines 的排序原则（每个人都能使用 > 它说出真相 > 它表意明确 > 答案优先 > 错误是可恢复的 > 它保持稳定 > 可能性是可见的 > 惯例 > 润色）。如果该技能已安装，请先阅读其 SKILL.md。
简报
在任何布局之前，用20行以内回答以下问题。如果用户不在，则陈述假设并继续。
- 谁来了？从哪里来？已经知道什么？ 广告点击、问题搜索、朋友链接、投资者。他们已有的知识决定了首屏需要解释多少内容。
- 唯一的下一步操作及其对用户的代价：邮箱、信用卡、电话、下载。页面上的其他所有内容都是次要的。
- 主张：用一句话说明这是什么、为谁服务、以及为他们带来了什么改变。如果你写不出来，说明页面还没准备好开始设计。
- 手头的证明：真实客户、有授权的引述、带来源和日期的数字、演示、免费层级。列出已有内容。缺失的证明是一个需要标记的缺口，而不是需要填补的空白。
- 价格：公开的、起售价、代表案例，或者确实未知。
- 品牌状态：
brand-identity的输出是否存在（令牌、Logo、字体、语气）？如果不存在，先运行它，或者从一个临时的方向出发并说明情况。 - 主题本身的素材：产品、用户及其世界实际的样子（参见“艺术指导”部分）。
- AI读者：AI助手会对比这个产品、引用其价格，或帮人注册吗？假设会。
- 约束条件：技术栈、CMS、性能预算、语言、法律（受监管的声明、定价法规、同意）。
艺术指导
这个系列并不规定一种外观。大胆、奇特、安静和奢华都是允许的。要求的是外观必须来自于关于这个主题的决定，并且它不能破坏基础功能（可读、快速、可操作）。在写代码之前先以书面形式完成此步骤；references/art-direction.md 包含了方法和实例。
- 收集主题的素材 [J]。从产品及其世界中列出10到20个具体的名词：它处理的对象、用户用它制作的东西、地点、人工制品、声音、纹理、该领域自身的视觉语言（潮汐表、食谱卡、电路走线、运输标签）。通用词（“速度”、“创新”、“无缝”）不算。
- 找到概念 [J]。用一句话将这些素材转化为页面创意：“页面就是产品自己的输出”、“一本野外指南”、“一个用于部署的出发牌”。应用替换测试：如果竞争对手可以原封不动地使用这个概念，就重写它。
- 选择一个令人难忘的标志性元素 [J]。用一个元素来承载概念，并获得大胆使用的预算：真实产品的大尺寸特写、可运行的演示、来自品牌的排版手笔、你可以拿在手里的物件、只有这家公司才能拍出的照片。其他所有元素都服务于阅读。如果一个页面有五个标志性元素，那就一个都没有。
- 构图 [J]。决定每个屏幕的阅读路径：眼睛首先落在哪里，其次，再次，以及用什么样的尺寸和对比度来实现这一点。设定网格，然后有意识地打破一次。将手机版构图作为独立的布局来设计，而不是桌面版的缩小版。
- 提出两到三个方向，每个用几行描述（概念、标志性元素、品牌令牌的使用方式、风险），选择一个，并说明理由。方向应基于创意不同，而不仅仅是调色板。
品牌边界。 颜色、字体、Logo、语气和令牌来自 brand-identity（它的 tokens.css 或 tokens.json）。艺术指导决定页面如何使用它们：缩放、裁剪、密度、节奏、图像、动态效果。不要为单个页面添加新的品牌颜色、重新绘制Logo或更换字体。如果页面需要品牌缺少的东西（插图风格、摄影方向），将其标记为品牌缺口，并向品牌所有者提出建议。
品味不是证据。 移除渐变、眉毛或特定字体并不会让页面变得更好：味觉技能自身的盲测在16轮简要回合中只赢了4轮（尽管零检测器失败），而其模型评委一直偏爱充满模板元素的更丰富的页面 [E, 仅模型评委]。因此，通过替换测试和读者的任务来评判方向，而不是通过禁止设备列表。
规则
信息传达
- 首屏用陌生人都能理解的语言说明这是什么、为谁服务以及下一步操作 [E]。访客在最初的10到20秒内决定是否离开（Liu, White, Dumais 2010，via NN/g），而首屏内容大约获得57%的观看时间（NN/g 2018，n=120）。一个巧妙的句子可以引领，但一个直白的描述性句子必须紧挨着它。
h1是主张，而不是品牌名称或问候语 [S]。它是屏幕阅读器和AI代理阅读页面的大纲根节点（WCAG 2.4.6）。- 具体胜过宣传 [E]。简洁、可扫描、客观的文案在可用性上比宣传性文案好124%（Nielsen 1997，n=51；数据古老，但方向保持不变）。说“从你的工时表中发送发票”，而不是“超级赋能你的工作流程”。
- 每个部分做一个主张并展示其证据；删除没有主张的部分 [J]。在设计页面之前，先将其写成一个主张列表（这个想法借鉴自taste-skill）。
- 展示产品本身 [J]：真实的屏幕截图、真实的输出、真实的照片。对“生产力”的抽象描绘说明不了任何问题，而虚构的UI则歪曲了产品。
- 用户会滚动，所以避免虚假的页面底端 [P]。在首屏下方，注意力会下降但不会消失（NN/g 2018）。一个看起来完整的全出血英雄区会隐藏其后的所有内容。
证据与诚实
- 仅限真实证据 [S]。伪造或AI生成的评论和推荐在美国是非法的（FTC 16 CFR Part 465, 2024），背书必须反映真实体验（FTC背书指南，16 CFR Part 255）。Logo仅在获得许可且确实是真实客户的情况下使用。
- 当证据缺失时，标记出来 [J]。使用可见的占位符，例如
{{quote: customer, name, role}}，并在交接文档中列出它们。切勿编写令人信服的虚假内容来填补空白。 - 数字附带来源和日期 [J]。“12,000个团队”需要附上“截至2026年3月”。一个无人能核实的数字充其量只是装饰。
- 不要制造紧迫感 [E]。虚假的倒计时和虚假的稀缺性是大规模发现的欺骗性模式之一（Mathur等人，2019），同时它们也会误导AI代理：六个网络代理平均有41%的时间落入暗黑模式（Ersoy等人，2025，预印本）。
定价
- 显示价格 [P]。缺少价格会驱使买家转向竞争对手（Nielsen 2002）。当价格确实因情况而异时，显示代表案例及其价格（Nielsen 2006）。
- 价格是文本：金额、货币、周期以及包含的内容，绝不仅仅放在图片内 [J]。方案比较使用真正的
<table>，并用文字说明功能。 - 说明买家将支付的总金额，包括强制性费用 [S]。美国法律要求在活动门票和短期住宿方面有此规定（FTC关于不公平或欺骗性费用的规则，2025）；在其他地方，这是诚实的做法。欧盟的折扣声明必须显示前30天内的最低价格（指令98/6/EC，第6a条）。
- 计费切换开关显示状态和默认项 [J]。如果默认显示年度价格，请在数字旁边注明“每年计费”。
下一步操作
- 一个主要操作，在决策点重复出现，标签说明操作结果 [J]：“开始14天免费试用，无需信用卡”、“加入候补名单”。次要操作看起来是次要的。
- 候补名单和注册表单只要求最低限度的信息，并说明后续操作 [J]：他们得到什么、何时以及你多久发一次邮件。同意框默认为未选中。较长的流程交给
form-design。 - 成功是一个状态，而不是一个提示 [J]。提交后，用发生的事件和预期内容替换表单。
速度和健壮性
- 在75分位数上满足谷歌的核心网页指标：LCP 2.5 秒，INP 200 毫秒，CLS 0.1 [S]。这些目标部分是由可实现性设定的，而不是人类感知的阈值。谷歌委托的一项研究发现，更快的移动页面与更高的零售转化率相关（Deloitte 2020）[E，相关性]。
- Hero区通常是LCP元素 [S]：一个带有
width、height和fetchpriority="high"的真实<img>，永远不要懒加载，永远不要作为依赖于脚本的文本背后的CSS背景（web.dev）。 - 内容在无JavaScript和无动画的情况下可见 [J]。滚动显示从可见状态开始，仅当支持时才进行动画；在减少运动模式下，没有任何内容是隐藏的。否则AI代理和屏幕截图会得到空白。
- 无自动播放的轮播图 [P]。测试显示，旋转的Hero区向用户隐藏了优惠信息（Nielsen 2013），超过5秒的动画需要暂停控制（WCAG 2.2.2）。
AI读者
- AI助手会引用的信息是页面上的文本：这是什么、价格、方案限制、平台、试用条款、联系方式 [J]。AI代理正是通过这些信息来对比产品的。
- 结构化数据和元标签与可见页面镜像，不添加额外内容 [S]：
title、元描述、Open Graph 和 JSON-LD（Organization、SoftwareApplication或Product），使用与页面显示相同的价格和名称。测试表明，后加上的标记对AI代理没有帮助（Affora，在interface-guidelines中）。 - 页面上没有针对AI代理的文本，无论是隐藏的还是可见的 [J]。这会被解读为提示注入，隐藏文本是垃圾邮件信号。
构建顺序
- 简报，然后是主张和证据列表，包含用于缺口的占位符。
- 艺术指导：主题素材、概念、一个标志性元素、两到三个方向提议、选择。
- 文本线框图：按顺序排列的章节，每个章节包含其主张、证据和操作。
- 带有真实文案的语义HTML：一个
h1、地标、概括论点的标题、定价表、带有标签的表单。 - 来自
brand-identity的品牌令牌，然后是布局和标志性元素。 - 状态：表单验证、成功、失败、售罄或关闭的候补名单、无JS、减少运动。
- 在性能预算内的图片、字体和脚本。
- 验证，最多修复两次，然后交接。
验证
node <interface-guidelines>/scripts/audit.mjs <dist|url> --out audit-output，然后查看所有三种宽度下的每张截图，如果深浅色主题都存在，则都查看。- 首屏测试：只向某人（或一个没有上下文的新AI代理）展示首屏截图，询问这是什么、为谁服务以及下一步做什么。错误的答案意味着信息传达失败，无论看起来多好。
- 替换测试：将产品名称替换为竞争对手的名称。如果页面仍然有效，则说明概念和文案是通用的。
- AI代理测试：仅从无障碍快照中，读取每个方案的价格和限制，并完成注册。与JSON-LD进行对比。
- 速度：在限速的移动配置文件上运行Lighthouse或PageSpeed Insights；如果页面已上线，则使用现场数据（CrUX）。
- 健壮性：在禁用JavaScript和使用
prefers-reduced-motion: reduce的情况下加载页面。任何重要内容都不能缺失。 - 证据审计：每个引述、Logo、数字和评级都必须追溯到来源，或者显示为已标记的占位符。
陷阱
- 虚构的推荐、非客户公司的Logo墙、编造的用户数量或评分。
- 一个可以放在任何产品上的标题（“构建工作的未来”），而真正的解释在三个屏幕之后。
- 追求或禁止“AI痕迹”，而不是根据主题做决定。一份新的时尚替代品清单就是下一个“痕迹”。
- 装饰配额：到处都是动画、每个部分都有一张图片、每个部分都为了不同而采用不同布局。
- Hero区文案或CTA在滚动动画触发前隐藏；直到那时才满足对比度要求的低透明度“揭示”文本。
- 价格仅出现在图片中，或者“联系我们”没有指示价格范围。
- 为单个页面重新定义品牌颜色或重绘Logo，而不是使用
brand-identity令牌。 - 一个默默地显示年度分摊到每月数字的定价切换开关。
- 隐藏在页面中对AI助手的指令。
参考
| 文件 | 何时阅读 |
|---|---|
references/art-direction.md | 总是，在选择外观之前阅读：方法、实例、构图、使用品牌令牌、评判方向 |
references/structure-and-copy.md | 编写页面时阅读：按页面类型分类的章节模式、标题、证据、定价页面、候补名单、表单 |
references/performance-and-agents.md | 构建和发布时阅读：核心网页指标、图片、字体、动画、元数据、结构化数据、无JS |
references/sources.md | 在引用数字之前，或者当有人问为什么存在某条规则时阅读 |