# High End Visual Design

> 适用于设计高端代理级界面，具有高级字体、空间节奏、柔和深度和流畅微交互。

- Skill: `kscz0000/high-end-visual-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/high-end-visual-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/high-end-visual-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/high-end-visual-design

---

# 智能体技能：首席 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 实线灰色边框。生硬的深色投影（`shadow-md`、`rgba(0,0,0,0.3)`）。
- **禁用布局：** 边到边粘在顶部的导航栏。对称、无聊的 3 列 Bootstrap 风格网格，没有巨大的留白间隙。
- **禁用动效：** 标准 `linear` 或 `ease-in-out` 过渡。无插值的瞬间状态变化。

## 3. 创意变化引擎
编写代码前，静默"掷骰子"并根据提示上下文从以下原型中选择一种组合，确保输出独特定制但始终高级：

### A. 氛围与纹理原型（选 1）
1. **空灵玻璃（SaaS / AI / 科技）：** 最深的 OLED 黑（`#050505`），背景中的径向网格渐变（如微妙的发光紫/翠绿球体）。Vantablack 卡片配合重度 `backdrop-blur-2xl` 和纯白/10 发丝线。宽几何 Grotesk 排版。
2. **编辑奢华（生活方式 / 房地产 / 代理）：** 温暖的奶油色（`#FDFBF7`）、柔和的鼠尾草绿或深浓缩咖啡色调。高对比度可变衬线字体用于巨大标题。微妙的 CSS 噪点/胶片颗粒覆盖（`opacity-[0.03]`）营造物理纸张感。
3. **柔和结构主义（消费 / 健康 / 作品集）：** 银灰色或纯白背景。巨大粗体 Grotesk 排版。轻盈、漂浮的组件配合难以置信的柔和、高度漫射的环境阴影。

### B. 布局原型（选 1）
1. **非对称便当盒：** 类似砌体的 CSS 网格，卡片大小各异（如 `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 / 嵌套架构）
切勿将高级卡片、图像或容器平放在背景上。它们必须看起来像物理、机械加工的硬件（如玻璃板放在铝制托盘中），使用嵌套外壳。
- **外壳：** 包装 `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)]`）形成同心曲线。

### 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. 动效编排（流体动力学）
切勿使用默认过渡。所有动效必须模拟真实世界的质量和弹簧物理。使用自定义 cubic-bezier（如 `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. **[静默思考]** 掷变化引擎（第 3 节）。根据提示上下文选择你的氛围和布局原型，确保独特输出。
2. **[搭建]** 建立背景纹理、宏观留白尺度和巨大排版尺寸。
3. **[架构]** 严格使用"双嵌套"（Doppelrand）技术构建所有主要卡片、输入和功能网格的 DOM。使用夸张的超椭圆圆角（`rounded-[2rem]`）。
4. **[编排]** 注入自定义 `cubic-bezier` 过渡、交错导航显示和按钮中按钮悬停物理。
5. **[输出]** 交付完美、像素级精确的 React/Tailwind/HTML 代码。不要包含基础、通用的回退。

## 8. 输出前检查清单
在交付前根据此矩阵评估你的代码。这是最后一道过滤器。
- [ ] 不存在第 2 节中的禁用字体、图标、边框、阴影、布局或动效模式
- [ ] 有意识地选择并应用了第 3 节的氛围原型和布局原型
- [ ] 所有主要卡片和容器使用双嵌套嵌套架构（外壳 + 内核）
- [ ] CTA 按钮在适用处使用按钮中按钮尾随图标模式
- [ ] 部分内边距至少 `py-24` — 布局大量呼吸
- [ ] 所有过渡使用自定义 cubic-bezier 曲线 — 无 `linear` 或 `ease-in-out`
- [ ] 存在滚动入场动画 — 无元素静态出现
- [ ] 布局在 `768px` 以下优雅折叠为单列，使用 `w-full` 和 `px-4`
- [ ] 所有动画仅使用 `transform` 和 `opacity` — 无触发布局的属性
- [ ] `backdrop-blur` 仅应用于固定/粘性元素，从不应用于滚动内容
- [ ] 整体印象呈现"15 万美元代理级构建"，而非"配好字体的模板"