用途：面向要求“Apple 质感”“Linear 级”“高端消费级”“沉稳 SaaS”或“15 万美元代理级成品”的网页原型设计任务，提供一套柔和、厚重、强调嵌套结构的美学规范。
主要能力：规定画布底色（银灰或暖奶油 #F2F2F0 / #FDFBF7，不可纯白）；字体搭配（标题用 Geist / Plus Jakarta Sans / Cabinet Grotesk 重字重，正文同族，元信息用 Geist Mono）；标题尺寸 clamp(48px, 7vw, 96px)、字距 -0.035em、行高 0.96、字重 700+；主要表面使用 28px–40px 的 squircle 圆角；重要卡片必须用双边框结构（外层 p-1.5、细线边框、柔和外阴影，内层独立背景与同心更小圆角，如外 2rem、内 calc(2rem - 0.375rem)）；主 CTA 为完整胶囊按钮，尾部箭头放在独立圆形包裹中；Hero 后方一个缓慢漂移的径向网格光斑，透明度 ≤ 0.18、pointer-events: none、固定定位；每个分区标题上方加胶囊形 eyebrow 标签（大写等宽、字距 0.2em、text-[10px]）。
必选组件：带 backdrop-blur-2xl 的浮动胶囊导航栏；非对称 Hero（重字重巨标题、eyebrow、max-w-[52ch] 正文、两个 CTA）；使用双边框模式的 Bento 网格，至少一张宽卡与一张高卡；带 z 轴层叠或分图模块的特性行；客户 Logo 慢速无限跑马灯（-100% / 20s，悬停暂停）；深色反色表面收尾带；等宽元信息页脚配细线。
动效规则：所有过渡至少 transition: transform 700ms cubic-bezier(0.32,0.72,0,1)；CTA 悬停时外胶囊在 :active 缩放 0.98，内部尾部图标圆平移 (+1px, -1px) 并 scale(1.05)；滚动入场从 translateY(16px) blur(8px) opacity(0) 到归零，仅使用 IntersectionObserver；跑马灯对复制轨道做 translateX(-50%) 30s linear infinite；Hero 网格光斑 24s+ 关键帧漂移，仅动透明度或变换。
限制：禁用 Inter、Roboto、Helvetica、Open Sans；禁用通用 1px 灰色实线边框（改用 border-black/5 或 ring-1 ring-black/5）；禁用 shadow-md、shadow-lg 等硬投影，仅允许大范围低透明度柔和阴影（如 0 20px 40px -15px rgba(0,0,0,0.05)）；禁止贴顶满宽粘性导航（改用浮动玻璃胶囊 mt-6 mx-auto w-max rounded-full）；禁用 linear 或 ease-in-out 过渡（改用指定 cubic-bezier 或弹性物理）；禁用 h-screen（改用 min-h-[100dvh]）；禁止动画 width/height/top/left，只动 transform 与 opacity；禁用纯黑 #000（改用 Zinc-950 / Off-Black）；768px 以下需折叠为单列并移除所有旋转与重叠。
使用前检查清单涵盖：浮动胶囊导航含 backdrop-blur 与细线环、至少一张双边框同心圆角卡片、主 CTA 使用按钮内嵌按钮尾部图标、分区内边距 ≥ py-24、无禁用字体且标题字重 ≥ 700、Hero 用 min-h-[100dvh]、过渡使用自定义 cubic-bezier 或弹性、移动端单列折叠。完整实现模板见该目录中的 example.html。