用途:为 AI 智能体提供构建 Liveblocks 风格界面的约束规则,适用于深色模式界面、Liveblocks 风格设计系统,以及采用 Inter 字体和 4px 网格的 UI 实现。
主要能力:定义颜色、语义令牌、排版、间距、边框、布局、组件和交互的 MUST/SHOULD/NEVER 规则。颜色方面要求主表面使用低亮度深色背景,页面背景为 #000000,文本对比度至少 4.5:1,并建议精简调色板。语义令牌包括 surface-base #000000、surface-raised #E5E5E5、surface-overlay #FEFEFE、text-primary #818181、text-secondary #5B595A、text-tertiary #B5B5B5、border-default #EAEAEA。排版要求以 Inter 为主字体,主标题 54px/700,正文 19px/400,字重限 medium、regular、bold,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,不随意改字距。间距采用 4px 网格,常用 1–8px,默认间隙 5px。边框半径限 3px、5px、19px,默认 3px,边框宽 1px。布局以 1920px 为基准视口,全高用 h-dvh 而非 h-screen,固定元素须考虑 safe-area-inset,方形元素用 size-*。交互上,聚焦用 2px 轮廓与 2px 偏移,禁用态 opacity 0.5 与 cursor: not-allowed,破坏性操作使用 AlertDialog,图标按钮须有 aria-label。动画仅在明确要求时添加,只动 transform 与 opacity,入场用 ease-out,交互反馈不超过 200ms,遵循 prefers-reduced-motion。
使用方式:作为 SKILL.md 约束文件,与对应的 DESIGN.md 配对使用;漂移扫描器动态读取两份文件提取令牌,无硬编码值。
限制:资料未提供安装命令或具体接入步骤;部分令牌色值(如 text-primary 深灰用作正文)与可访问性对比度要求之间的适用细节暂未说明。