优质着陆页
一个着陆页只有在通过三项检查后才算完成：与参考图或需求说明匹配、在320到1920的每个宽度下都保持完整、且没有任何元素是偶然出现的。大多数工作都集中在第三项上。
先确定模式
参考模式 — 用户提供了截图、PDF、URL或要求“复刻这个”。准确性是目标，“差不多”就是失败。在编写任何CSS之前，先用数值衡量参考数据。加载 reference-replication。
简要模式 — 用户描述了业务、受众或一种感觉，没有图片。构图由你选择；内部规则和组件库设定了质量底线。
如果两者都存在，参考模式优先覆盖其范围，简要模式填补空缺。如果两者都不明确，请询问——为错误模式构建的着陆页是徒劳的。
只询问能改变构建的内容
不要追问。只有四件事会实际改变输出：
- 技术栈 — HTML / React / Next / Astro。从
templates/<stack>/脚手架搭建。 - 品牌基础 — 名称，以及调色板或“从参考图中提取”。
- 地区 — 影响货币、日期格式、英式与美式拼写。询问一次，保持一致性。
- 组件 — 仅当参考图或明显的页面类型无法推断出它们时才询问。
其他所有内容都有合理的默认值。使用默认值并说明你的假设。
构建顺序
顺序错误的构建会导致返工，因为英雄区的高度限制了首屏以上所有内容，而设计令牌限制了每个组件。
- 令牌 — 背景、文字、线条、强调色、圆角、缓动曲线、一套流畅的字体比例体系。
references/design-system.md。 - 英雄区 — 每次构建中修改最频繁的元素。
100svh，使用vh单位调整节奏。references/house-rules.md。 - 组件，按参考图顺序排列。
references/sections.md。 任何需要照片的插槽：立即获取图片，不要保留灰色占位框 —../stock-imagery/SKILL.md。 - 页脚，然后执行下面的完成序列。
- 验证。 不可省略 — 见下文。
陷阱
在编写网格、跑马灯、SVG图标或全出血图片代码之前，请阅读 references/traps.md。其中有六个无声故障：有效的 CSS，无错误，但布局在其他地方出错。第一次遇到这些问题会花费数小时，而有了参考文档只需几分钟。
验证是构建的一部分
尚未在实际宽度下截图检查的着陆页不算完成。运行捆绑的验证工具：
scripts/verify.sh <url> --sweep # 扫描 320→1920 宽度 + 英雄区适配
scripts/verify.sh <url> --shot 390x844 # 单个视口
它可以处理 macOS 500px 窗口限制（该限制会静默伪造所有移动端截图）。详细信息和手动回退方案：references/verification.md。
三项检查必须通过：
- 无水平溢出 在 320 到 1920 的任何宽度下。
- 英雄区适配一屏 在 390×844、414×896 和 1600×900 下，或有意识地增长。
- 减少动效 仍能渲染每个组件 — 没有元素停留在动画中途。
完成序列
每次实际构建都需执行。这是“完成”的定义，而非锦上添花：
lenis-smooth-scrollpremium-mobile-menusocial-share-faviconsbuild-credit- 关于页面本身的
README.md— 其组件、令牌、断点、部署步骤 — 而非关于生成它的工具 .gitignore；提交信息不包含AI共同作者行，除非被要求- 部署注意事项（GitHub Pages 在路径以
_开头时需要.nojekyll）
这里“优质”的真正含义
它不是渐变和毛玻璃效果。它是：流畅缩放而非在断点处跳跃的字体；仅作用于 transform 和 opacity 的动效；根据所在坐标轴测量的间距；无死区；以及经过设计而非从桌面版继承而来的移动端布局。以上每一点都是可检查的，正因如此它们才是标准。
参考文档
| 文件 | 何时阅读 |
|---|---|
references/house-rules.md | 始终 — 每次构建都会重复出现的修正项 |
references/traps.md | 在编写网格、跑马灯、SVG图标、全出血图片之前 |
references/design-system.md | 设置令牌和字体比例体系时 |
references/sections.md | 构建英雄区、跑马灯、手风琴、卡片导轨、页脚时 |
references/verification.md | 验证时，或截图看起来异常时 |
../reference-replication/SKILL.md | 提供了参考图片或URL时 |
../stock-imagery/SKILL.md | 页面需要摄影图片但未提供时 |