taste-skill

Taste Skill

当你需要鲜明的前端设计主张，而非稳妥的默认方案时，使用此 Skill。

目标不是“看起来还不错”，而是打造有明确意图、质感高级、难以与通用大模型输出混淆的前端界面。

1. 当前基准配置

• DESIGN_VARIANCE: 8 1 = 对称而沉静，10 = 不对称且实验性强
• MOTION_INTENSITY: 6 1 = 几乎静止，10 = 电影感十足且响应灵敏
• VISUAL_DENSITY: 4 1 = 疏朗如画廊，10 = 密集如驾驶舱

将这些值视为可调整的刻度，而非固定常量。

• 不要要求用户编辑此文件。
• 根据需求调整这些刻度。用户想要更沉静的效果时，就调低；想要更大胆的效果时，就调高。
• 使用这些刻度来指导布局、动画、间距和卡片的使用。

2. 必需的工作模型

编写代码前，先明确以下三点：

1. 视觉主张 用一句话描述氛围、质感和活力。
2. 布局主张 页面如何令人印象深刻：不对称、裁切、留白、层叠动效、分屏主视觉、便当盒式节奏等。
3. 交互主张 设计两到三种能实质改变界面感受的动效。

然后编写实际代码，不要止步于设计评论。

• 不要留下“TODO: 在此添加动画”一类的占位内容。
• 对于应当交付的组件，不要输出虚假的代码片段。
• 需求明确后，不要再请求用户批准显而易见的设计决策。

3. 架构和依赖规则

除非用户明确要求其他方案，否则优先使用 React 或 Next.js。

依赖验证

导入任何第三方包之前：

• 检查 package.json
• 如果缺少该包，先准确说明安装命令，再使用它
• 绝不要假设项目已安装 framer-motion、lucide-react、zustand 或任何字体包

React 和 Next.js 规则

• 在 Next.js 中，默认采用服务端安全的结构。
• 不要在服务端组件中存放全局状态。
• 如果需要动效或高度交互的行为，将其隔离在专门的客户端组件中。
• 如果一个叶子组件就能独立管理动画逻辑，就不要将其散布到整个组件树中。

样式规则

• 除非项目显然使用其他方案，否则大多数样式使用 Tailwind。
• 编写对配置敏感的代码前，确认项目使用的是 Tailwind v3 还是 v4。
• 不要在 v3 项目中使用 v4 的写法。

图标规则

• 项目支持时，优先使用 @phosphor-icons/react 或 @radix-ui/react-icons。
• 页面中的图标描边粗细应保持一致。

严格禁令

• 代码、标记、UI 文案或替代文本中均不得使用表情符号。
• 对移动端敏感的布局中，主视觉不得使用 h-screen。请使用 min-h-[100dvh]。
• 使用网格能更清晰地解决布局时，不要用百分比计算搭配 flexbox。

4. 设计工程准则

大模型容易偏向熟悉且过度使用的 UI 模式。请主动纠正这种倾向。

字体排版

• 默认标题风格：大、紧凑、果断。
• 需求指向高级或创意风格时，避免使用 Inter、Arial、Roboto 等通用字体栈和原始系统默认字体。
• 优先选择有特色但克制的展示字体，例如 Geist、Outfit、Cabinet Grotesk 或 Satoshi。
• 仪表盘和软件 UI 禁止使用衬线展示字体。
• 将有力的展示字体与更低调的辅助字体或等宽字体搭配。

色彩

• 采用克制的中性色基调，搭配一种主强调色。
• 控制强调色的饱和度。
• 避免默认的 AI 紫蓝色光效风格。
• 不要随意混用暖灰和冷灰色系。

布局

如果 DESIGN_VARIANCE > 4：

• 不要默认将整个主视觉居中
• 首屏避免采用“标题 + 两个按钮 + 卡片网格”的布局
• 优先选择分屏、错位内容、不对称留白、锚定媒体或破格网格构图

表面与卡片

• 卡片不是默认选择。
• 仅当层级或交互需要通过立体感来传达时，才使用卡片。
• 对于信息密集型仪表盘，优先使用分隔线、边框节奏和留白，而不是无休止地堆砌卡片。
• 如果移除卡片后含义仍然完整，就移除它。

表单与状态

每个重要界面都需要覆盖完整的交互状态：

• 加载状态
• 空状态
• 错误状态
• 成功状态
• 有触感的激活状态

对于表单：

• 标签置于输入框上方
• 辅助文本可选，但很有用
• 错误文本置于输入框下方
• 垂直间距保持一致

5. 动效系统

动效应营造存在感和层次感，而非制造噪音。

如果 MOTION_INTENSITY <= 3：

• 将动效限制在入场、悬停和轻微的交互提示变化

如果 MOTION_INTENSITY > 5：

• 添加持续的微交互
• 让元素依次错开显现
• 使用基于弹簧的动效
• 让至少一种交互具有真实的物理响应感

推荐的动效模式

• 错开入场
• 布局过渡
• 响应悬停状态的按钮
• 与滚动联动的景深变化
• 面向活跃界面的文字或闪烁循环效果
• 悬浮或呼吸式状态细节

磁吸交互规则

如果实现对光标做出响应的磁吸效果：

• 不要使用 React useState 来逐帧更新光标位置
• 优先使用动效值或其他适用于渲染循环的安全原语

动效质量标准

• 不要默认使用线性动效
• 不要无故使用没有目的的无限循环动画
• 不要使用只起装饰作用、不改善节奏、焦点或交互提示的动画

6. 材质与视觉纹理

当设计需要玻璃质感或半透明图层时：

• 不要只使用原始的 backdrop-blur
• 添加微妙的内边框
• 添加克制的内侧高光或内嵌阴影

有意识地营造氛围：

• 渐变网格
• 噪点叠层
• 柔和的晕影
• 多层透明效果
• 克制的阴影

但要注意：

• 将颗粒和噪点放在固定叠层上，而非滚动容器中
• 不要让每个区块都变成特殊效果

7. 性能守则

性能糟糕的高级 UI，依然是糟糕的 UI。

• 为 transform 和 opacity 添加动画，而不是 top、left、width 或 height。
• 避免在大型滚动界面上使用开销高的效果。
• 避免滥用 z-index。
• 必要时，对持续运动的独立区域使用记忆化。
• 如果在特殊场景中使用 GSAP 或 Three.js，请将其隔离。不要随意在同一组件树中混用开销较大的动效系统。

8. 模式库

选择少量更出色的创意，而不是堆砌许多平庸的创意。

优秀的首屏模式

• 分栏式主视觉：文本固定，搭配一个主导性的媒体区域
• 不对称的 Bento 区块，采用不同权重的模块
• 编辑风格的落地页：超大字体，辅助文案精简
• 产品 UI：结构清晰平和，几乎没有装饰性元素，并以单一醒目色彩作为强调

优秀的动效创意

• 粘性堆叠
• 响应悬停方向的填充效果
• 与最终几何形状一致的闪烁骨架屏
• 打字机或命令输入循环
• 具有明确叙事目的的封面流或水平流
• 悬浮工具栏或共享元素过渡

默认应避免的模式

• 居中式 SaaS 主视觉，搭配悬浮的仪表盘模型
• 每个主视觉下方都放置统计栏
• 用 Logo 云凑数
• 白底紫色渐变
• 每个区块都用卡片网格解决
• 随意混搭风格迥异的字体

9. 交付标准

使用此技能时，最终实现应为用户提供：

• 真正可用的代码
• 清晰的视觉主旨
• 一致的动效语言
• 能适应桌面端和移动端的响应式表现
• 如果缺少依赖包，应明确说明需要添加的依赖

不要：

• 只讲述审美体系，而不将其应用到设计中
• 退回通用组件库的默认样式
• 以“主要创意已经完成”为由，留下未完成的区块

10. 上线前检查清单

在最终定稿前，请对照以下清单检查结果：

• 首屏是否有一个清晰的视觉焦点？
• 字体排版是否经过精心选择，而非直接采用默认设置？
• 强调色的使用是否克制？
• 去掉所有阴影后，界面是否依然显得精心设计？
• 是否确有必要才使用卡片，而非仅仅因为它们容易实现？
• 动效是否足够醒目，同时又有所克制？
• 是否在适用时覆盖了加载、空内容、错误和活动状态？
• 是否妥善处理了移动端稳定性，尤其是视口高度和溢出问题？
• 是否在导入外部依赖前进行了验证？
• 输出看起来是否像精心设计的界面，而非拼凑起来的组件？