用途:在构建 Slack 风格(浅色模式、Inter 字体、4px 网格)界面时,为 AI 智能体提供一套有明确取舍的约束规范,用于设计系统实现与界面生成。
主要能力与内容:
- 颜色:主表面用浅色背景,页面背景 MUST 用 #FFFFFF(surface-base),主要操作与焦点态 MUST 用 #481652(accent),文字对比度至少 4.5:1。提供语义令牌 surface-base、surface-raised、surface-overlay、text-primary、text-secondary、text-tertiary、border-default、accent 及对应 HEX/RGB 与用途。
- 排版:MUST 以 Inter 为主字体;主标题 61px/700,正文 22px/500;标题用 text-balance、正文用 text-pretty;数值数据宜用 tabular-nums;除明确要求外不改字距。列出若干文本样式与字号参考。
- 间距与边框:间距 MUST 用 4px 网格,建议取 1/2/4/5/6/7/9/10px,元素默认间隔 2px;圆角取自 1/3/4/8/9/16px,默认 4px,边框宽度限 1px、2px。
- 布局:以 1920px 为基准视口;固定元素需考虑 safe-area-inset;全屏高度用 h-dvh 而非 h-screen。
- 交互与动效:焦点 MUST 用 2px accent 描边并带 2px offset,不得移除焦点提示;破坏性操作 MUST 用 AlertDialog;加载用结构骨架;禁用态 opacity 0.5 且 cursor not-allowed;图标按钮 MUST 加 aria-label;动画仅在明确要求时添加,只用 transform/opacity 等合成属性,入场用 ease-out,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。
使用方式:将本规范作为 AI 智能体生成 Slack 风格界面的参考指南,按其 MUST/SHOULD/NEVER 条目约束输出。资料未提供安装命令或代码示例。
限制:规范中的颜色数量、字号统计等为资料所述检测值;未说明具体平台、收费或价格信息。