高端视觉设计

它解决的具体问题

让大模型直接写 UI，最常见的问题不是「功能不对」，而是「看起来便宜」：默认塞进 Inter / Roboto / Arial，图标清一色粗描边 Lucide 或 Material，卡片挂一条 1px solid 灰边加 shadow-md，顶部再来一条贴边的 sticky 导航，内容区是对称三列栅格。动效同样如此——linear 或 ease-in-out 一过，廉价感立刻出来。这套技能的价值不在于多给一个组件库，而是把这些默认项显式列为禁用清单，让模型在落笔之前先过一遍反模式检查。

技能如何工作

先设人格与目标。 角色是 Vanguard_UI_Architect，目标是产出代理商水准的数字体验，强调触觉深度、电影感空间节奏与微交互。同时有一条 Variance Mandate：不允许连续两次生成相同布局，必须动态组合不同的 premium 原型。

绝对零指令。 第二部分把禁用项写成硬规则，分字体、图标、边框与阴影、布局、动效五类，命中任意一项即判定失败。

创意方差引擎。 写代码前先「掷骰子」选一组原型：氛围纹理三选一（Ethereal Glass / Editorial Luxury / Soft Structuralism），布局三选一（Asymmetrical Bento / Z-Axis Cascade / Editorial Split）。每种布局都附带移动端坍缩规则，低于 768px 一律回到单列 w-full px-4。

组件与动效规范。 卡片走 Double-Bezel 双层嵌套，外层壳加内层核，圆角用 calc(2rem-0.375rem) 算同心曲线；按钮用 Button-in-Button 结构，箭头必须藏在独立圆形容器里，不能裸放在文字旁边。动效全部使用自定义 cubic-bezier，滚动入场依赖 IntersectionObserver 或 Framer Motion 的 whileInView，明确禁止 window.addEventListener('scroll')。

性能护栏。 只动画 transform 和 opacity；backdrop-blur 只允许出现在 fixed/sticky 元素上；噪点叠加层必须是 position: fixed 且 pointer-events-none；z-index 不写 z-[9999] 这类任意值，只保留给导航、弹层、遮罩等系统层。

执行与自检。 收尾是五步执行协议加一份 10 项清单，交付前逐条核对，其中一条标准是「读起来像高端代理商作品，而不是换了字体的模板」。

适用边界与注意点

它是一份提示词层面的规范，不是可运行的组件库，也不附带任何字体或图标文件。SKILL.md 里的 Geist、Clash Display、PP Editorial New、Plus Jakarta Sans 都被默认「假定可用」，实际项目需要你自己确认授权与加载方式，否则禁用清单会把常用字体全部挡掉之后无米下锅。被禁的 Lucide 等图标同理，得换成 Phosphor Light 之类的替代资源。

另外，所有视觉取舍都被收拢到一套固定审美：暖色编辑风、OLED 黑玻璃、柔和结构主义三选一，且要求极端留白（py-24 起步）。如果你做的是信息密度高的数据后台或表单密集的管理系统，这套呼吸感会直接和可用性打架。移动端规则只在 768px 以下生效，平板区间的表现需要自己验证。清单里的高端代理商标准是主观判断，不是可测量指标，最终效果仍然取决于宿主模型本身的能力。