High end visual design

高端视觉界面设计

何时使用

• 用户想要高端代理商、Awwwards 级、Apple/Linear 风、奢华或极致打磨的视觉设计。
• 构建落地页、作品集、SaaS 界面、消费级产品页或 App 表层，需要 premium 纵深感与流体动效。
• 设计必须避开通用字体、生硬阴影、静态布局、默认顶栏与平庸的 Bootstrap 三栏网格。

不该用的边界：

• 本技能只聚焦视觉设计，不替代品牌策略、转化研究、无障碍验证或上线 QA。
• premium 字体、图标集、图片、动效库必须在目标项目中已存在或刻意引入后，生成代码才可用。
• 受限仪表盘、受监管产品、低性能/弱网环境，别强加奢华动效与重视觉处理。
• 任务范围不清或缺成功标准时先停下确认，不要凭空发挥。

步骤

按以下固定顺序生成 UI 代码：

1. 【静默决策】掷"变体引擎"：依 prompt 上下文各选 1 个氛围原型 + 1 个布局原型（见指令），保证产出独特又始终高端。绝不连续两次输出同一布局/美学。
2. 【搭骨架】先定背景质感、宏观留白尺度、巨型字号。
3. 【架构】所有主卡片/输入框/特性网格一律用"双层包边（Doppelrand）"：外壳 + 内核，用夸张 squircle 圆角（rounded-[2rem]）。
4. 【编舞】注入自定义 cubic-bezier 过渡、错峰导航揭示、按钮中按钮 hover 物理。
5. 【输出】交付像素级 React/Tailwind/HTML，不夹带平庸 fallback。
6. 【出库前自检】逐项核对清单（见注意事项）后再交付。

指令

绝对禁区（ABSOLUTE ZERO 反模式）——命中任意一条即判失败

• 禁用字体：Inter、Roboto、Arial、Open Sans、Helvetica。改用 premium 字体如 Geist、Clash Display、PP Editorial New、Plus Jakarta Sans。
• 禁用图标：标准粗描边 Lucide、FontAwesome、Material Icons。只用极细精准线条（Phosphor Light、Remix Line）。
• 禁用描边/阴影：通用 1px 灰实线边框；生硬深色投影（shadow-md、rgba(0,0,0,0.3)）。
• 禁用布局：贴顶 sticky 满宽导航；对称无聊的 Bootstrap 三栏网格、留白不足。
• 禁用动效：标准 linear / ease-in-out；无插值的瞬时状态切换。

变体引擎 A · 氛围与质感原型（选 1）

1. 空灵玻璃（SaaS/AI/科技）：最深 OLED 黑 #050505，背景径向网格渐变（微弱发光的紫/翠光球），Vantablack 卡片配重 backdrop-blur-2xl 与 white/10 发丝线；宽体几何 Grotesk 字体。
2. 编辑式奢华（生活方式/地产/代理商）：暖米白 #FDFBF7、柔哑鼠尾草绿或深浓缩咖啡色；巨型高对比可变衬线标题；微弱 CSS 噪点/胶片颗粒叠层（opacity-[0.03]）营造纸质实感。
3. 柔性结构主义（消费/健康/作品集）：银灰或纯白背景；超大粗体 Grotesk 字体；通透漂浮组件 + 极柔、高度扩散的环境投影。

变体引擎 B · 布局原型（选 1）

1. 非对称 Bento：砌体式 CSS Grid，卡片尺寸不一（如 col-span-8 row-span-2 旁接堆叠的 col-span-4）。移动塌缩：回退单列 grid-cols-1，大纵向间距 gap-6，所有 col-span 重置为 col-span-1。
2. Z 轴层叠：元素如实体卡片堆叠、轻微重叠、景深不一，部分加 -2deg/3deg 旋转打破数字网格。移动塌缩：768px 以下移除所有旋转与负 margin 重叠，标准间距纵向堆叠（重叠会造成触控冲突）。
3. 编辑式分屏：左半 w-1/2 巨型字排，右侧可横滚的交互图片胶囊/错峰卡片。移动塌缩：转全宽纵向堆叠 w-full，字排在上、交互内容在下，必要时保留横滚。

通用移动覆写：md: 以上的任何非对称布局，768px 以下必须激进回退到 w-full、px-4、py-8。全高区块绝不用 h-screen，一律 min-h-[100dvh] 防 iOS Safari 视口跳动。

触觉级微美学

• 双层包边（Doppelrand）：卡片/图片/容器绝不平铺在背景上，要像机加工硬件。外壳 = 包裹 div，微背景（bg-black/5 或 bg-white/5）+ 发丝外边框（ring-1 ring-black/5 或 border border-white/10）+ 内边距（p-1.5/p-2）+ 大外圆角（rounded-[2rem]）。内核 = 真正内容容器，自有背景色、内高光 shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]，并用数学换算的更小圆角 rounded-[calc(2rem-0.375rem)] 做同心曲线。
• 岛屿按钮 / 按钮中按钮：主按钮为全圆胶囊 rounded-full + 大内边距 px-6 py-3。尾随箭头（↗）绝不裸贴文字旁，须嵌进独立圆形包裹 w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center，紧贴按钮右内边距。
• 空间节奏：宏观留白翻倍，区块用 py-24~py-40；大标题前置微型 eyebrow 标签 rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium。

动效编舞（流体动力学）

• 全程自定义缓动模拟真实质量与弹簧物理：transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]。
• 流体岛导航 + 汉堡变形：闭合态为脱离顶部的浮动玻璃胶囊（mt-6 mx-auto w-max rounded-full）；点击时汉堡两/三线流畅旋转平移成完美 'X'（rotate-45 + -rotate-45 绝对定位），不是凭空消失；菜单展开为满屏重玻璃覆盖层（backdrop-blur-3xl bg-black/80）；内部链接错峰遮罩揭示（translate-y-12 opacity-0 → translate-y-0 opacity-100，逐项 delay-100/150/200）。
• 磁吸按钮 hover：用 group；按下 active:scale-[0.98] 模拟物理按压；内层图标圆斜向位移 group-hover:translate-x-1 group-hover:-translate-y-[1px] 并 scale-105，制造内部动能张力。
• 滚动插值入场：元素绝不静态出现，进入视口时执行柔和沉重的上浮（translate-y-16 blur-md opacity-0 → translate-y-0 blur-0 opacity-100，800ms+）。JS 滚动揭示用 IntersectionObserver 或 Framer Motion whileInView，绝不用 window.addEventListener('scroll')（持续 reflow，拖垮移动性能）。

性能护栏

• GPU 安全动画：绝不动画 top/left/width/height，只动 transform 与 opacity；will-change: transform 仅用于正在动画的元素，慎用。
• 模糊约束：backdrop-blur 只加在 fixed/sticky 元素（导航、覆盖层），绝不加在滚动容器或大内容区（持续 GPU 重绘）。
• 颗粒/噪点叠层：只挂在 fixed 且 pointer-events-none 的伪元素（position: fixed; inset: 0; z-index: 50），绝不挂滚动容器。
• Z-Index 纪律：不用随意的 z-50/z-[9999]，仅为系统层（sticky 导航、模态、覆盖层、tooltip）保留。

示例

双层包边卡片（外壳 + 内核同心圆角）：

<div class="bg-white/5 ring-1 ring-black/5 p-1.5 rounded-[2rem]">
  <div class="bg-[#0a0a0a] rounded-[calc(2rem-0.375rem)]
              shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] p-8">
    <!-- 内容 -->
  </div>
</div>

岛屿按钮 + 按钮中按钮尾随图标：

<button class="group inline-flex items-center gap-3 rounded-full px-6 py-3
               transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]
               active:scale-[0.98]">
  <span>开始使用</span>
  <span class="w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center
               transition-transform duration-500
               group-hover:translate-x-1 group-hover:-translate-y-[1px] group-hover:scale-105">↗</span>
</button>

滚动入场（Framer Motion whileInView，只动 transform/opacity）：

<motion.div
  initial={{ y: 64, filter: "blur(8px)", opacity: 0 }}
  whileInView={{ y: 0, filter: "blur(0px)", opacity: 1 }}
  viewport={{ once: true, margin: "-10%" }}
  transition={{ duration: 0.8, ease: [0.32, 0.72, 0, 1] }}
/>

注意事项

出库前清单（最后一道过滤，逐项核对）：

• 无禁区字体/图标/边框/阴影/布局/动效（见指令禁区）。
• 自觉选用并应用了一个氛围原型 + 一个布局原型。
• 主卡片/容器均用双层包边（外壳 + 内核）。
• 适用处 CTA 用按钮中按钮尾随图标。
• 区块内边距至少 py-24，布局充分呼吸。
• 全部过渡用自定义 cubic-bezier，无 linear/ease-in-out。
• 存在滚动入场动画，无元素静态出现。
• 768px 以下优雅塌缩为单列 w-full + px-4。
• 所有动画只用 transform/opacity，无触发布局的属性。
• backdrop-blur 仅加在 fixed/sticky，不加滚动内容。
• 对 prefers-reduced-motion: reduce 用户提供降级（关停动效）。
• 整体观感是"$150k 代理商级构建"，而非"换了好字体的模板"。

补充：别把产出当作目标环境验证、无障碍/性能实测或专家评审的替代——交付前在真机/弱网实测。

互见

• related：glassmorphism-ui-design —— 玻璃拟态/空间纵深质感，与本技能氛围原型互补。
• related：design-spells-microinteractions —— 收尾打磨的微交互模式库。
• related：apple-hig-advisor —— Apple 风设计语言的人机界面规范依据。
• related：ux-ui-principles-audit —— 用通用 UX/UI 原则审计高端视觉成稿。
• combines_with：ui-design-system-builder —— 把变体原型沉淀为可复用设计系统。
• combines_with：theme-factory —— 批量生成氛围主题/配色 token。
• combines_with：animejs-web-animation —— 补充复杂时间线动效编排。

---

采编自 sickn33/antigravity-awesome-skills（MIT）。