web-prototype-taste-soft

网页原型 — 柔和高端风

适用于要求具有“Apple 风格”“Linear 级别”“高端消费品”“沉静的 SaaS”或“15 万美元代理商级”完成度的设计简报。整体美学柔和、厚重，并极致讲究层叠架构。

来源

提炼自 Leonxlnx/taste-skill — skills/soft-skill/SKILL.md（“Vanguard UI Architect”），其中包含触感微美学、双层边框架构和动效编排规则。完整实现的模板请参阅此目录中的 example.html。

硬性规则

• **画布：**银灰色或暖奶油色（#F2F2F0 或 #FDFBF7）。不要用纯白色。
• **字体搭配：**标题使用粗体 Geist / Plus Jakarta Sans / Cabinet Grotesk，正文使用同一字体系列，元信息使用 Geist Mono 等宽字体。
• 标题：clamp(48px, 7vw, 96px)、letter-spacing: -0.035em、line-height: 0.96。使用粗体（700+）。
• **圆角超椭圆：**主要界面采用 border-radius: 28px–40px（rounded-[2rem] 至 rounded-[2.5rem]）。
• **必须使用双层边框：**每张重要卡片都要采用外层容器（p-1.5、极细边框、柔和外阴影），内部包含一个自带背景色的内层主体，并使用同心且更小的圆角（例如，外层为 2rem，内层为 calc(2rem - 0.375rem)）。
• **CTA = 按钮中嵌套按钮：**主要 CTA 使用完整胶囊形按钮（rounded-full px-6 py-3）；末端箭头置于独立的圆形容器中，贴齐右侧。
• **环境纵深：**主视觉区后方放置一个缓慢漂移的径向网格色块，opacity ≤ 0.18、pointer-events: none、固定定位。
• 眉题标签置于各区块标题上方：胶囊形、大写等宽字体、letter-spacing: 0.2em、text-[10px]。

禁用项

• 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(0.32, 0.72, 0, 1) 或弹簧物理效果。
• h-screen（改用 min-h-[100dvh]）。
• 对 width / height / top / left 添加动画。只能使用 transform 和 opacity。
• 纯黑色 #000。改用 Zinc-950 / Off-Black。

必需组件

• 带 backdrop-blur-2xl 的浮动胶囊导航栏。
• 非对称主视觉区：超大粗体标题、眉题标签、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) → translateY(0) blur(0) opacity(1)。仅使用 IntersectionObserver。
• 跑马灯：在重复轨道上应用 transform: translateX(-50%)，以 30s linear 无限播放。
• 主视觉区网格色块：24s+ 关键帧漂移，仅改变 opacity 或 transform。

上线前检查

• 浮动胶囊导航，带 backdrop-blur + 极细环形边框
• 至少一张卡片采用双层边框（外层壳体 + 内层主体、同心圆角）
• 主要 CTA 使用嵌套按钮式末端图标
• 区块内边距 ≥ py-24
• 不使用禁用字体；标题字重 ≥ 700
• 主视觉区使用 min-h-[100dvh]，绝不使用 100vh
• 所有过渡均使用自定义 cubic-bezier 或弹簧效果；不使用 linear / ease-in-out
• 移动端：宽度低于 768px 时布局折叠为单列，并移除所有旋转和重叠