Apple Web
构建产品营销页面，风格如同 apple.com：安静、自信、以字型为主导，动效服务于产品。本技能中的每一个值均取自真实的 apple.com 产品页面（2026 年 11 月），记录在 reference/measured-tokens.md 中。
这是一个样式系统，而非克隆。切勿复制 Apple 的文案、产品名称、标识、摄影图片、图标或字体文件。请为用户的产品编写原创内容。
文件
| 路径 | 用途 |
|---|---|
library/apple-web.css | 令牌、字型类、布局、组件。请优先链接它。 |
library/apple-web.js | 滚动揭示、粘性导航状态、滚动擦洗、画廊、数字递增。无依赖。 |
demo/index.html | 包含所有组件的完整工作页面。可复制作为起始点。 |
reference/measured-tokens.md | 原始测量值：字型阶、颜色、圆角、缓动、断点。 |
reference/page-anatomy.md | Apple 产品页面的章节排列顺序，逐节说明。 |
reference/anti-slop.md | 使页面看起来像是 AI 生成的特点，以及 Apple 风格的修复方法。 |
工作流程
- 将
library/复制到项目中。在<head>中链接apple-web.css，并使用defer引入apple-web.js。 - 从
demo/index.html开始。保持reference/page-anatomy.md中的章节顺序。 - 先编写文案。标题为 2–5 个单词，并带句号（例如“快。真的很快。”）。正文为灰色，其中有一处白色高亮短语。
- 每个章节选择一个主题：
theme-dark（黑色）、theme-light（#f5f5f7）或theme-white。长段落中交替使用，同一主题连续使用不超过三个章节。 - 在宣布完成之前，请运行下面的检查清单。
使其具有 Apple 风格的规则
字型
- 单一字体家族。Apple 设备上使用系统 SF Pro，其他设备上使用 Inter（CSS 中的字体栈已处理）。不使用第二显示字体，不带衬线强调。
- 每个标题字体重量 600。正文 400。从不使用 700–900，也不使用 300。
- 字距随字号变化：正文（17px→-0.022em）和主视觉（64px+→-0.009em）为负值；19–32px 则略微为正。使用字型类；切勿在所有地方设置统一的
letter-spacing。 - 营销章节的标题短小且居中；在媒体旁边的图文组合中则左对齐。
- 深色章节中的正文颜色为
#86868b；使用<strong>强调短语（渲染为#f5f5f7，相同字重）。正文不使用粗体。
色彩
- 灰度页面。使用一种强调色：链接/操作的蓝色
#0071e3（深色章节中链接使用#2997ff）。色彩来自产品图片，而非 UI。 - UI 或文字上无渐变、无发光、无彩色阴影。
布局
- 内容宽度：文本 980px，媒体行 1260px，视口最大 1440px。断点：1068px / 734px。
- 章节内边距：桌面端顶部 120px，底部 120–176px。宽敞，绝不拥挤。
- 圆角图块：大图块圆角 28px，小卡片圆角 18px。按钮为胶囊形（圆角 980px）。
动效
- UI 状态缓动
cubic-bezier(0.4, 0, 0.6, 1)；持续时间：悬停 100ms，透明度 240ms，颜色/导航 320ms，滚动揭示可达 1s。 - 揭示效果为透明度 + 30–40px 的上移，每个元素在进入视口约 15% 时触发一次。同级元素错开 80–120ms 触发。
- 产品时刻使用滚动擦洗（进度与滚动位置绑定），而非自动播放。
- 图块悬停：对内部的媒体元素进行微小的 1.02 倍缩放，从不改变卡片阴影。
prefers-reduced-motion：所有动效变为即时淡入。库已处理此情况。
导航
- 全局导航 44px，然后是 52px 的粘性本地导航，左侧为产品名称，右侧为链接 + 小型蓝色“购买”胶囊按钮。粘性固定后变为半透明（
blur(20px) saturate(180%)）。
检查清单（拒绝 AI 生成的低质量内容）
- 无表情符号、无圆形图标功能网格、无“✨”、无紫色/青色渐变。
- 标题是陈述语句，而非疑问句或“解锁 / 提升 / 无缝 / 革新”。
- 统计中的每个数字都带有单位，如果是声明则带有脚注标记。
- 每个章节最多一种号召性用语风格（蓝色胶囊按钮或带
›的蓝色文字链接），切勿同时使用两种大按钮。 - 媒体内容占据主导；文本绝不置于浮动在杂乱渐变之上的卡片中。
- 每个文本元素通过 class 设置字距；无浏览器默认粗体。
- 页面底部有脚注章节，使用 12px 大小的
#86868b颜色。 - 已在 1440、1068、734 和 375px 宽度下，以及启用减少动效模式下进行检查。
完整列表及修复方法请参见 reference/anti-slop.md。