用途:在构建受 Discord 审美启发的界面时,为 AI 智能体提供带有明确取舍的约束规则,适用于浅色模式界面、Discord 风格设计系统,以及采用 Inter 字体与 4px 网格的 UI。
主要能力:提供颜色、语义令牌、字体、间距、边框、布局、组件与交互状态的规范。颜色要求主表面使用浅色背景,页面背景(surface-base)与强调色(accent)均为 #4548ED,调色板不超过 9 种颜色,文本对比度至少 4.5:1。语义令牌包含 surface-base #4548ED、surface-raised #FEFEFE、text-primary #C8D0F9、text-2 #494A4B、text-tertiary #36383C、border-default #4848E2、accent #4548ED。字体必须使用 Inter,主标题 52px/700,正文 20px/400,字重仅限 regular、medium、bold,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums。间距必须使用 4px 网格,默认元素间隙 5px。边框圆角取自 9px 尺度,边框宽度统一 1px。布局以 1920px 视口为基准,全屏高度用 h-dvh 而非 h-screen,并遵循 safe-area-inset。交互上焦点用 2px 强调色轮廓与 2px offset,禁用态 opacity 0.5,图标按钮加 aria-label,破坏性操作使用 AlertDialog。
使用方式与限制:资料未提供安装命令或具体调用步骤,暂未提供。动画非明确要求不得添加,仅动画 transform 与 opacity,入场用 ease-out,交互反馈不超过 200ms,需尊重 prefers-reduced-motion。不得对大面积 blur 或 backdrop-filter 加动画,不在非活跃动画上使用 will-change,不用 useEffect 表达可用渲染逻辑实现的内容。