用途:为 AI 智能体提供 Spotify 美学的界面设计约束,适用于深色模式界面、Spotify 风格设计系统以及使用 Inter 字体和 4px 网格的 UI 实现。
主要能力:给出颜色、语义令牌、排版、间距、边框、布局、组件与交互状态的强制或建议规则。颜色方面要求主表面使用深色背景(亮度 < 20),页面背景 #171717,主操作与聚焦状态使用 #010002,文字对比度至少 4.5:1。语义令牌包含 surface-base、surface-raised、surface-overlay、text-primary、text-secondary、text-tertiary、border-default、accent。排版要求以 Inter 为主字体,主标题 41px/500,正文 13px/400,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,不修改字距。间距基于 4px 网格,默认元素间距 5px,禁止任意值。圆角来自 10px、15px、17px、18px、22px、24px 刻度,默认 15px,胶囊元素用 22px 以上。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素尊重 safe-area-inset,正方形元素用 size-*。交互方面:聚焦用 2px accent 描边与 2px 偏移,禁用不透明度 0.5 与 cursor:not-allowed,破坏性操作使用 AlertDialog,加载用结构化骨架屏,图标按钮需 aria-label,禁止阻止粘贴。动画仅限 transform 与 opacity,入场用 ease-out,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。性能上禁止动画大面积 blur() 或 backdrop-filter,禁止在动画外使用 will-change,禁止用 useEffect 表达渲染逻辑。
使用方式:作为参考规则应用于 AI 智能体生成 Spotify 风格界面时。该技能可与对应 DESIGN.md 配合,后者提供视觉氛围与额外颜色令牌,本技能提供 MUST/SHOULD/NEVER 强制规则;漂移扫描器读取两者以动态提取令牌。
适用场景:构建深色模式界面、Spotify 灵感设计系统、需要严格设计一致性的 AI 辅助前端开发。
限制:规则基于检测数据(如当前检测到 14 种颜色、4 种字重),部分为建议性 SHOULD;具体安装命令、收费与平台支持暂未提供。