用途
high-end-visual-design 是一个 AI 技能（Agent Skill），用于指导 AI 按照高端设计机构的标准生成界面。它的定位是“Principal UI/UX Architect & Motion Choreographer（Awwwards 级别）”，目标是产出 15 万美元以上机构级的数字体验，而不仅仅是普通网站。输出需具备触觉深度、电影级空间节奏、细致的微交互和流畅动效。
主要能力
技能通过一系列设计规则约束 AI 的产出：
- 变化指令：要求每次生成的布局与美学都不重复，动态组合不同高端布局原型与纹理，同时严格遵循“Apple 风格 / Linear 级”设计语言。
- 反模式清单：禁止使用 Inter、Roboto、Arial、Open Sans、Helvetica 等字体；禁止标准粗描边图标、通用 1px 灰边框、生硬深色投影；禁止贴顶粘性导航栏、对称三栏 Bootstrap 式网格；禁止线性或 ease-in-out 过渡与无插值的瞬时状态切换。
- 创意变化引擎：在写代码前从氛围纹理原型中选择一种，包括 Ethereal Glass（SaaS/AI/科技，OLED 黑背景、径向网格渐变、重背景模糊卡片）、Editorial Luxury（生活方式/地产/机构，暖奶油色、高对比可变衬线字体、噪点叠加）、Soft Structuralism（消费/健康/作品集，银灰或纯白背景、大号粗体、柔和环境阴影）；同时从布局原型中选择一种，包括非对称 Bento、Z 轴层叠、编辑式分栏。
- 移动端折叠：非对称布局在 768px 以下折叠为单列、w-full、px-4、py-8；全高区域使用 min-h-[100dvh] 而非 h-screen。
- 组件掌握：双圈层嵌套结构（外层壳 + 内层核）、嵌套 CTA 按钮（箭头图标置于独立圆形包裹内）、宏留白（py-24 至 py-40）、眉标徽章。
- 动效编排：使用自定义 cubic-bezier 曲线模拟真实质量与弹簧物理；流体岛式导航、汉堡图标变形为 X、全屏玻璃遮罩展开、链接交错遮罩揭示；磁吸按钮悬停物理（整体缩放、内部图标圆平移与缩放）；滚动入场动画（translate-y-16 blur-md opacity-0 到正常态，800ms 以上）。
- 性能护栏：只动 transform 和 opacity；backdrop-blur 仅用于固定或粘性元素；噪点叠加仅用于固定 pointer-events-none 伪元素；z-index 仅保留给系统性层级。
使用方式
技能定义了执行协议：生成 UI 代码时先静默运行变化引擎选择氛围与布局原型，然后搭建背景纹理、宏留白与大字排版，使用双圈层技术构建 DOM，注入自定义 cubic-bezier 过渡、交错导航揭示与按钮嵌套悬停物理，最后输出 React/Tailwind/HTML 代码。输出前需对照检查清单评估。
适用场景
适用于需要高端视觉质感的界面生成任务，例如 SaaS/AI 产品、生活方式与地产类站点、消费与健康产品、作品集、机构官网等。技能本身覆盖 React/Tailwind/HTML 代码输出。
限制
资料中未提供该技能的安装命令、平台支持范围、收费或价格信息，也未说明其对不同 AI 工具或模型的兼容性。技能中的示例字体（Geist、Clash Display、PP Editorial New、Plus Jakarta Sans）假设为可用，但未说明获取方式。部分具体数值（如阴影、圆角、延迟）以设计规范形式给出，实际效果取决于实现环境。