用途:为 AI 代理提供构建 Intercom 风格界面的约束规则,适用于浅色模式界面、Intercom 灵感设计系统,以及使用 Inter 字体与 4px 网格的 UI 实现。
主要能力:定义语义化颜色令牌,如 surface-base(#FEFEFE)、accent(#4F3FE6)、success(#278019)等,并要求文本对比度至少 4.5:1。排版上要求主字体为 Inter,主标题 46px extra_bold,正文 14px/400,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,除非明确要求否则不改字距。间距强制使用 4px 网格,默认元素间隙 5px;边框圆角从 3px 至 19px 的既定尺度取值,默认 6px,边框宽度限 1px/2px/3px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需遵循 safe-area-inset,方形元素用 size-*。交互上要求焦点使用 2px 描边与 2px offset 且不得移除焦点指示,禁用态用 opacity: 0.5 和 cursor: not-allowed,破坏性操作使用 AlertDialog,错误就近显示,图标按钮加 aria-label。动画仅在明确要求时添加,仅动画 transform 与 opacity,入场用 ease-out,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。性能上禁止动画大范围 blur/backdrop-filter,will-change 仅在动画进行中使用,能用渲染逻辑表达时不使用 useEffect。
使用方式:将本 SKILL.md 的 MUST/SHOULD/NEVER 规则作为约束依据;配套的 DESIGN.md 提供视觉氛围与额外颜色令牌,漂移扫描器读取两者以动态提取令牌。
限制:资料未说明具体安装命令、收费方式或运行环境要求,暂未提供。