技能介绍

很多「好看一点」的页面仍停留在 Inter + Lucide + shadow-md 的组合：对称三栏、顶栏贴边 sticky、线性 ease-in-out 切换。模型还会反复产出同一套布局，看起来像换皮模板，而不是 agency 级落地页。

该技能把 persona 固定为 Principal UI/UX Architect & Motion Choreographer，目标不是「做个网站」，而是带触觉深度、电影感空间节奏与微交互的界面。核心机制包括：

Absolute Zero 反模式清单：禁用 Inter/Roboto 等字体、粗线 Lucide/FontAwesome、灰边与重阴影、Bootstrap 式对称栅格、无插值的瞬时状态切换。
Creative Variance Engine：写代码前先选一组 Vibe（如 Ethereal Glass、Editorial Luxury、Soft Structuralism）与 Layout（Asymmetrical Bento、Z-Axis Cascade、Editorial Split），避免连续两次相同美学。
组件与动效协议：主卡片用 Double-Bezel（外壳 ring + 内层 inset 高光）；CTA 用 pill + Button-in-Button 尾箭；导航为浮动玻璃 pill，汉堡线 morph 成 X，菜单项 stagger 入场；滚动区用 transform/opacity 的 fade-up，而非 window.scroll。
执行顺序：静默选 archetype → 铺背景与 py-24 级留白 → 按 Doppelrand 搭 DOM → 注入 cubic-bezier 动效 → 输出 React/Tailwind/HTML。

依赖 Tailwind 类名与常见前端栈假设；字体需自行提供 Geist、Clash Display 等，技能只规定「不用什么」。
backdrop-blur 仅限 fixed/sticky 层；噪声/grain 用 fixed 伪元素，避免滚动态 GPU 掉帧。
移动端 <768px 必须单列、min-h-[100dvh]，并取消 Z 轴重叠与旋转，否则触控与 Safari 视口会出问题。交付前需对照 SKILL 内 Pre-Output Checklist 逐项自检。

截图预览

接 SaaS 或 AI 产品官网时，要在 React + Tailwind 中产出浮动玻璃 pill 导航、汉堡 morph 成 X 与菜单项 stagger 入场，而非贴顶 sticky 模板。
客户反馈落地页「像 Bootstrap 对称三栏」，需按技能选定 Asymmetrical Bento 或 Editorial Split，并重做 py-24 级留白与标题字阶。
连续交付多个营销页时，希望每次先 roll Vibe（Ethereal Glass / Editorial Luxury 等）与 Layout archetype，避免两次输出同一套美学。
iOS Safari 首屏跳动或移动端触控冲突时，需按规则在 768px 以下改为单列、去掉 Z 轴重叠旋转，并改用 min-h-[100dvh]。

用 Tailwind 向客户交付营销落地页的独立前端，诉求是生成代码默认遵守禁 Inter/Lucide/灰阴影清单，并带自定义 cubic-bezier 动效，减少「去模板味」返工。
设计工程师在定好视觉调性后要把页面落成 React 组件，需要模型按 Double-Bezel、Button-in-Button 尾箭等 DOM 约定直接出结构。
小型工作室接 agency 级品牌站，希望在多轮生成里强制 Variance Engine，避免各页面仅换色却共用同一布局骨架。
负责性能与体验的前端在审 AI 产出时，要对照技能 checklist：blur 仅限 fixed/sticky、动画仅用 transform/opacity、禁止 scroll 监听做 reveal。