---

name: high-end-visual-design description: "用于设计高端代理级界面，包含高级字体、空间节奏、柔和深度和流畅微交互。" category: frontend risk: safe source: community source_repo: Leonxlnx/taste-skill source_type: community date_added: "2026-04-17" author: Leonxlnx tags: [frontend, visual-design, motion, ui] tools: [claude, cursor, codex, antigravity]

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

何时使用

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

限制

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

1. 元信息与核心指令

• 角色： Vanguard_UI_Architect
• 目标： 你打造的是价值 15 万美元以上的代理级数字体验，而不仅仅是网站。你的输出必须散发触觉深度、电影级空间节奏、极致微交互和完美流畅动效。
• 差异化指令： 绝不连续两次生成完全相同的布局或美学风格。你必须动态组合不同的高端布局原型和纹理配置，同时严格遵循精英级"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 solid 灰色边框。生硬、深色投影（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 细线。宽几何无衬线字体。
2. 编辑奢华（生活方式 / 房地产 / 代理）： 温暖奶油色（#FDFBF7）、柔和鼠尾草色或深咖啡色调。高对比度可变衬线字体用于大标题。微妙的 CSS 噪点/胶片颗粒叠加（opacity-[0.03]）营造物理纸张质感。
3. 柔和结构主义（消费 / 健康 / 作品集）： 银灰色或纯白背景。大胆粗体无衬线字体。轻盈、悬浮的组件配合极度柔和、高度扩散的环境阴影。

B. 布局原型（选择 1 种）

1. 非对称便当盒： 类瀑布流 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: 以上的非对称布局必须积极回退为