以 skill 自身的术语
这个 skill 教编程 Agent 生成价值 15 万美元以上的代理级视觉设计，通过定义精确的字体选择、空间节奏、阴影技巧、卡片结构和流畅的动效模式来实现。它禁止使用泛用默认项（Inter、Roboto、粗描边图标、生硬阴影、标准缓动），并强制使用高级替代方案，如 Geist 或 Clash Display、超细线图标和自定义 cubic-bezier 过渡。
每个输出都必须将一种独特的 Vibe Archetype（Ethereal Glass、Editorial Luxury 或 Soft Structuralism）与一种 Layout Archetype（Asymmetrical Bento、Z-Axis Cascade 或 Editorial Split）结合，以避免重复。组件使用嵌套的 Double-Bezel 外壳、Button-in-Button 尾随图标、大面积留白（py-24 到 py-40）以及滚动插值的进入动画。所有动效仅通过 transform 和 opacity 模拟真实物理效果，并对移动端设有严格的性能保护措施。
它产出什么
- 完美无瑕、像素级精确的 React/Tailwind/HTML 代码，使用 Double-Bezel 组件结构、自定义 cubic-bezier 动效和移动端响应式折叠，实现所选的 Vibe 和 Layout Archetype
工作方式
- 01启动 Variance Engine
在编写代码之前，Agent 会根据提示的上下文，从预定义的高端组合中默默选择一个 Vibe Archetype 和一个 Layout Archetype，以确保输出的独特性和针对性。
- 02搭建背景与排版
确定所选纹理（带径向渐变的 OLED 黑、带噪点叠层的暖奶油色，或带柔和阴影的银灰色），并设置超大字号排版以及夸张的宏观留白。
- 03构建嵌套组件结构
使用 Double-Bezel 技术构建所有主要卡片、输入框和网格：外层外壳带细线边框和内边距，内部核心拥有自己的背景，并采用经过数学计算的更小圆角。
- 04编排流畅动效
为所有状态变化注入自定义 cubic-bezier 过渡效果，采用带 translate-y 和透明度变化的错落式导航呈现，以及带对角平移和缩放的磁吸式按钮悬停物理效果。
- 05应用滚动插值
元素以柔和的淡入上浮动画（translate-y-16 blur-md opacity-0 在 800ms 以上完成过渡）进入视口，使用 IntersectionObserver 或 Framer Motion 的 whileInView，绝不使用 window 滚动监听器。
- 06依照输出前检查清单进行验证
在交付前，依照 11 项矩阵评估代码，确保没有被禁止的模式、原型选择正确、Double-Bezel 架构无误、缓动函数为自定义、移动端可折叠，并且动画对 GPU 是安全的。