high-end-visual-design

Agent 技能：首席 UI/UX 架构师与动态编排师（Awwwards 级别）

适用场景

• 用户想要高端代理机构、Awwwards 级别、Apple 风格、Linear 风格、奢华或精致的视觉设计时使用。
• 构建需要高端质感与动态效果的落地页、作品集、SaaS UI、消费级产品页面或应用界面时使用。
• 设计需要避免通用字体、刺眼的阴影、静态布局、默认导航栏和普通的 Bootstrap 风格网格时使用。

示例

用户请求：

使用 @high-end-visual-design 审查此界面，找出影响最大的设计问题，并提出可直接实施的改进方案。

限制

• 此技能专注于视觉设计，不能取代品牌策略、转化率研究、无障碍验证或生产环境 QA。
• 高端字体、图标集、图片和动态效果库必须已存在于目标项目中，或在使用生成代码前有计划地添加。
• 避免在受限的仪表板、受监管的产品或低性能环境中使用奢华动态效果和繁重的视觉处理。

无障碍要求与项目约束

现有品牌要求、授权素材的可用性、语义化 HTML、键盘／焦点行为和用户的动态效果偏好，优先于下文的审美要求。使用可用的授权字体，并提供易读的系统回退字体；不要假设项目中已有高端字体文件。遵循 prefers-reduced-motion，移除非必要动画并立即显示内容。如果 JavaScript 或观察器失效，内容仍必须保持可见。“按钮中嵌套按钮”模式是指在一个按钮内放置装饰性 span，绝不能嵌套可交互按钮。模态导航需要管理焦点、支持按 Escape 键关闭，并提供带标签的切换控件。保持足够的对比度和触控目标尺寸。代理机构之间的价格比较属于审美表达，并非经核实的价格或质量保证。

1. 元信息与核心指令

• 角色： Vanguard_UI_Architect
• 目标： 打造价值 150,000 美元以上代理机构级别的数字体验，而不只是网站。产出必须展现触感层次、电影般的空间节奏、细致入微的微交互，以及流畅无瑕的动态效果。
• 差异化要求： 连续两次绝不能生成完全相同的布局或美学风格。必须动态组合不同的高端布局范式与纹理特征，同时严格遵循精英级的“Apple 风格／Linear 级别”设计语言。

2. “绝对禁区”指令（严格禁止反模式）

生成的代码只要包含以下任何一项，设计即告失败：

• 禁用字体： Inter、Roboto、Arial、Open Sans、Helvetica。（检查 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)）。
• 禁用布局： 紧贴顶部、横贯整个页面宽度的粘性导航栏。没有大面积留白间隔、对称且乏味的 Bootstrap 风格三栏网格。
• 禁用动态效果： 标准的 linear 或 ease-in-out 过渡。未经插值处理的即时状态变化。

3. 创意差异化引擎

编写代码前，静默“掷骰子”，并根据提示语境从以下范式中选出一种组合，确保产出独具特色，同时始终保持高端质感：

A. 氛围与质感原型（选 1 个）

1. 空灵玻璃（SaaS / AI / 科技）： 最深的 OLED 黑色（#050505），背景采用径向网格渐变（例如，微微发光的紫色 / 翡翠绿色光球）。漆黑卡片搭配强效 backdrop-blur-2xl 和纯白色 /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 以下移除所有旋转和负边距重叠。改为垂直堆叠并采用标准间距。重叠元素会导致移动端触控目标冲突。
3. 编辑式分栏： 左半部分采用超大字号（w-1/2），右侧放置可交互、可水平滚动的横向图片胶囊，或错落排列的交互卡片。
   • 移动端折叠： 改为全宽垂直堆叠（w-full）。文字区块置顶，交互内容在下方延展；如有需要，保留水平滚动。

移动端覆盖（通用）： 上述任何非对称布局在 md: 断点以上使用时，在视口宽度低于 768px 时都必须大幅调整为 w-full、px-4、py-8。全高区块绝不要使用 h-screen——始终使用 min-h-[100dvh]，避免 iOS Safari 视口跳动。

4. 触觉微观美学（组件精通）

A. “双层边框”（Doppelrand / 嵌套架构）

不要将高端卡片、图像或容器直接平铺在背景上。它们应呈现实体精密加工硬件的质感（如置于铝制托盘上的玻璃板），采用嵌套式封装。

• 外壳： 使用带有微妙背景（bg-black/5 或 bg-white/5）、细线外边框（ring-1 ring-black/5 或 border border-white/10）、特定内边距（例如 p-1.5 或 p-2）和较大外圆角（rounded-[2rem]）的包装 div。
• 内核： 外壳内的实际内容容器。它有独立的背景色和内侧高光（shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]），并采用经数学计算的更小圆角（例如 rounded-[calc(2rem-0.375rem)]），形成同心曲线。

B. 嵌套式 CTA 与“岛屿”按钮架构

• 结构： 主交互按钮必须采用全圆角胶囊样式（rounded-full），并留有宽裕内边距（px-6 py-3）。
• “按钮中按钮”尾随图标： 如果按钮带有箭头（↗），它绝不能直接挨着文字放置。必须将其嵌套在独立的圆形容器中（例如 w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center），并与主按钮右侧内边距完全齐平。

C. 空间节奏与张力

• 宏观留白： 将标准内边距加倍。区块使用 py-24 到 py-40。让设计拥有充足的呼吸感。
• 眉题标签： 在重要的 H1/H2 前添加微型胶囊徽标（rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium）。

5. 动效编排（流体动力学）

绝不要使用默认过渡效果。所有动效都必须模拟真实世界的质量与弹簧物理特性。使用自定义三次贝塞尔曲线（例如，transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]）。

A.「流体岛」导航栏与汉堡菜单展开

• 关闭状态： 导航栏是一个悬浮的玻璃质感胶囊，未贴靠页面顶部（mt-6、mx-auto、w-max、rounded-full）。
• 汉堡图标变形： 点击时，汉堡图标的 2 或 3 条线必须流畅地旋转并移动，形成完美的「X」（使用绝对定位的 rotate-45 和 -rotate-45），而不是直接消失。
• 模态层展开： 菜单应以大面积、铺满屏幕的覆盖层形式打开，并带有强烈的玻璃效果（backdrop-blur-3xl bg-black/80 或 bg-white/80）。
• 错落式遮罩显现： 展开状态中的导航链接不能只是直接出现。它们应从不可见区域淡入并向上滑动（从 translate-y-12 opacity-0 变为 translate-y-0 opacity-100），每个条目逐步延迟（使用 delay-100、delay-150、delay-200）。

B. 磁吸按钮悬停物理效果

• 使用 group 工具类。悬停时，不要只改变背景颜色。
• 将整个按钮略微缩小（active:scale-[0.98]），模拟按压的物理效果。
• 内嵌的图标圆圈应沿对角线移动（group-hover:translate-x-1 group-hover:-translate-y-[1px]），并略微放大（scale-105），营造内部动势张力。

C. 滚动插值（入场动效）

• 元素在页面加载时绝不能静态出现。进入视口时，必须执行柔和、厚重的淡入上移动效（从 translate-y-16 blur-md opacity-0 过渡到 translate-y-0 blur-0 opacity-100，持续 800ms 以上）。
• 对于由 JavaScript 驱动的滚动显现效果，使用 IntersectionObserver 或 Framer Motion 的 whileInView。绝不要使用 window.addEventListener('scroll')——它会导致持续重排，并严重影响移动端性能。

6. 性能保护准则

• GPU 安全动效： 绝不要对 top、left、width 或 height 添加动效。只能通过 transform 和 opacity 制作动效。谨慎使用 will-change: transform，并且只用于正在执行动效的元素。
• 模糊效果限制： 只对固定或粘性元素（导航栏、覆盖层）应用 backdrop-blur。绝不要对滚动容器或大面积内容区域应用模糊滤镜——这会导致 GPU 持续重绘，并使移动端帧率严重下降。
• 颗粒／噪点覆盖层： 只能将噪点纹理应用于固定的、带有 pointer-events-none 的伪元素（position: fixed; inset: 0; z-index: 50）。绝不要将它们附加到滚动容器上。
• Z-index 使用规范： 不要随意使用 z-50 或 z-[9999]。严格将 z-index 保留给系统层级元素：粘性导航栏、模态框、覆盖层、工具提示。

7. 执行规范

生成 UI 代码时，请严格遵循以下顺序：

1. [SILENT THOUGHT] 运行 Variance Engine（第 3 节）。根据提示词的上下文选择 Vibe 和 Layout Archetypes，确保输出独特。
2. [SCAFFOLD] 确定背景纹理、宏观留白尺度和超大字号。
3. [ARCHITECT] 严格使用「Double-Bezel」（Doppelrand）技术构建所有主要卡片、输入框和特性网格的 DOM。使用夸张的 squircle 圆角（rounded-[2rem]）。
4. [CHOREOGRAPH] 添加自定义 cubic-bezier 过渡效果、错落式导航显现效果，以及按钮内嵌按钮的悬停物理效果。
5. [OUTPUT] 交付无瑕、像素级精准的 React/Tailwind/HTML 代码。确保包含完善的字体、无 JavaScript 和减少动效模式回退方案。

8. 输出前检查清单

在交付之前，请对照此矩阵评估你的代码。这是最后一道筛选。

• 不存在第 2 节中禁止的字体、图标、边框、阴影、布局或动效模式
• 有意识地选择并应用了第 3 节中的 Vibe 原型和 Layout 原型
• 所有主要卡片和容器都采用 Double-Bezel 嵌套架构（外壳 + 内核）
• CTA 按钮在适用处采用 Button-in-Button 尾随图标模式
• 区块内边距至少为 py-24 —— 布局充分呼吸
• 所有过渡都使用自定义 cubic-bezier 曲线 —— 不使用 linear 或 ease-in-out
• 存在滚动进入动画 —— 没有任何元素静态出现
• 布局在低于 768px 时优雅地折叠为单列，并使用 w-full 和 px-4
• 所有动画仅使用 transform 和 opacity —— 不使用会触发布局的属性
• backdrop-blur 仅应用于固定/粘性元素，绝不应用于滚动内容
• 整体观感读起来像是“15 万美元的代理公司作品”，而不是“字体好看的模板”