Apple 网页设计 是做什么的？
一种为 Web 应用打造原生 iPhone 或 Apple.com 产品页面感觉的设计语言。它在一个已上线的饮食计划应用中构建、在真机 iPhone 上测试并逐屏完善（其单个 index.html 即为参考实现）。所有内容均为纯 CSS 和原生 JavaScript，无框架或库依赖，可轻松嵌入任何项目。
目标是打造一个安静的产品，从头到尾：浅灰色页面、白色磁贴、一个蓝色强调色、大而自信的字体，每次点击都能触发原位动画。没有元素跳跃，不会重新渲染整个屏幕，键入的文本和滚动位置永不丢失。
如何使用此技能
- 新 UI： 首先将
references/tokens.css粘贴到页面中。然后根据references/components.md中的组件配方构建屏幕。如果 UI 会根据状态重新渲染，则添加assets/morph.js和references/motion.md中的动效层。 - 现有 UI： 保留项目的结构和数据。将颜色、字体和形状替换为令牌，然后逐一转换组件。不要为了改样式而重写逻辑。
- 毛玻璃： 仅当用户想要 Liquid Glass / iOS 26 玻璃效果（标签栏、浮动按钮、提示、表单按钮）时，才阅读
references/liquid-glass.md。 - 深色展示屏（启动屏、“模式”屏如派对或专注屏）：
references/keynote.md。 - 完成前： 运行
references/checklist.md——在 390×844 分辨率下分别截取浅色和深色模式的截图。 - 如果应用会出售（App Store 或商业用途）：先阅读
references/commercial.md。一些最像苹果的细节恰恰是苹果反对的。
只阅读你需要的参考文档；每份文档都是独立的。
核心规则（为何重要）
颜色：一种强调色，克制使用。 页面 #f5f5f7，磁贴 #fff，墨色 #1d1d1f，次要色 #6e6e73，操作蓝 #0071e3（深色模式：#000 / #1d1d1f / #f5f5f7 / #86868b / #2997ff）。蓝色表示“此处可操作”，因此仅用于主按钮、链接、选中的标签和进度条——绝不用于装饰。状态色（--ok 绿色，--warn 琥珀色，--bad 红色）仅用于传达含义。额外色调（水青色、步数橙色）仅当它们用于始终如一地标记某类数据时才可使用。品牌渐变（如果有）仅属于一个特殊屏幕。
深色模式跟随手机。 每种颜色都是在 prefers-color-scheme: dark 下重新定义的 CSS 变量。深色模式使用纯黑页面配合 #1d1d1f 磁贴，阴影关闭（--shadow:none），因为阴影在黑色背景上看起来像污渍。
用字体做层级，而不是用盒子。 系统字体堆栈（-apple-system, BlinkMacSystemFont, system-ui, sans-serif，在 Apple 设备上提供 SF 字体），正文字号 17 px，大字号使用紧凑的负字间距：
- 页面标题 40–48 px 粗体，
-0.035em，以句号结尾：“Recipes.”—— Apple.com 的标题语调。 - 双色区块标题，24 px 粗体：前半部分墨色，后半部分灰色：“Pirkiniai. Trūksta 15 produktų.”。两部分都以句号结尾。
- 大数字纤薄（字重 200–300）且巨大（38–72 px），使用
font-variant-numeric: tabular-nums使数字在变化时不抖动。较小的统计数字（规格行）使用字重 600。 - 说明文字 13–14 px 灰色。不要低于 12 px。
形状：无边框磁贴、药丸、充裕的间距。 圆角 8 / 14 / 22 / 28 px；磁贴无边框，带非常柔和的阴影（0 4px 18px rgba(0,0,0,.06)）。磁贴内部的行由从文本开始（而非从边缘开始）的细线分隔（iOS 内嵌分隔线）。按钮为药丸形（border-radius: 999px）：主按钮实心蓝配白字，次要按钮灰色填充配蓝字，破坏性按钮灰色填充配红字。照片在磁贴内边缘对齐。
布局：单列，手机优先。 max-width: 720px 居中，16 px 侧边距，每个固定边缘的安全区内边距（env(safe-area-inset-*)），底部 110 px 内边距使内容不被标签栏遮挡。触摸目标 ≥ 44 px。
动效：所有元素原地运动。 使用 DOM 变形而非 innerHTML 重新渲染，使节点得以保留；新行渐显，移除的行以渐隐的幽灵形式离开，移动的行平滑滑动（FLIP），变化的数字滚动，药丸滑动，弹簧向上弹起，按钮按压（缩放至 0.96，弹簧曲线）。两种曲线几乎涵盖所有情况：--spring: cubic-bezier(.3,1.4,.5,1)（按压、小弹跳）和 --ease: cubic-bezier(.2,.8,.2,1)（淡入淡出、条状移动）；iOS 自身的曲线 cubic-bezier(.32,.72,0,1)（无过冲）用于弹出面板和大范围移动。所有这些动画在 prefers-reduced-motion: reduce 下关闭——务必检查，不要假设。
文案：简短、人性化、苹果腔调。 标题带句号，按钮用动词（“Pagaminau”，“Pridėti”），数字根据语言区域格式化（toLocaleString(lang)；立陶宛语在千位使用空格，小数点使用逗号），不用感叹号，界面元素中不使用表情符号（表情符号可作为内容图标使用，例如 🍸 表示饮料条目）。错误文本应说明下一步该做什么。
已做决策（无需重新争论）
以下来自构建参考应用时的真实反馈：
- 主要蓝色操作按钮保持实心蓝色，即使在玻璃 UI 内部——已尝试并否决了有色玻璃蓝按钮。
- Liquid Glass 默认开启，但用户可切换，带强度滑块；内容卡片保持不透明以确保文字可读。玻璃效果仅用于浮动界面元素。
- 使用食谱/产品照片作为图片；不使用插画或库存图片风格的装饰。
- 有疑问时，采用 iOS 26 的行为：标签栏以胶囊形式浮动，向下滚动时收起为一个小按钮；手指触摸时玻璃效果膨胀（放大）而非下沉。
- 每个标签页记住自己的滚动位置；点击活动标签页滚动到顶部。
- 提示 (Toast) 可向上滑动关闭，并且每次破坏性或数据更改操作都带有“Atšaukti / 撤消”操作。
文件
references/tokens.css—— 完整的令牌块（浅色 + 深色、圆角、阴影、曲线）。直接粘贴。references/components.md—— 每个组件的可复制粘贴 HTML + CSS，包含行为说明。references/motion.md—— 动画辅助工具、变形钩子、FLIP、数字滚动、标签切换、弹出面板、滑动和长按手势、触觉反馈、减少动效。references/liquid-glass.md—— iOS 26 玻璃材质、Chromium 折射透镜、可收起的标签栏。references/keynote.md—— 用于一个特殊屏幕的黑色“Keynote”样式。references/checklist.md—— 审阅清单和截图脚本。references/commercial.md—— 在以此风格出售应用前需要更改的内容。assets/morph.js—— 70 行的 DOM 变形（带关键行的、聚焦和输入安全的、回退到 innerHTML）。