用途:这是一套面向 AI 智能体的设计约束技能,用于构建 Weights Biases 风格的界面。适用于浅色模式界面、Weights Biases 风格设计系统,以及使用 Inter 字体与 4px 网格的 UI 实现。
主要能力与规则:颜色上要求页面背景使用 #FFFFFF(surface-base),限制调色板数量,文本对比度至少 4.5:1。排版限定字体族,标题用 text-balance、正文用 text-pretty,数字数据用 tabular-nums,不擅自修改字距。间距必须使用 4px 网格,不使用任意值。边框使用 1px 细边框,圆角取自设计尺度。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素尊重 safe-area-inset,方形元素用 size-*。
交互与状态:焦点使用 2px 强调色 #5E6AD2 轮廓与 2px outline-offset,不移除焦点指示;主按钮悬停背景提亮 10%,次级按钮与列表项使用 surface-raised;禁用态用 opacity: 0.5 与 cursor: not-allowed。破坏性操作使用 AlertDialog,加载用结构骨架,错误就近显示,不阻止粘贴,图标按钮加 aria-label。
动画与性能:非明确要求不加动画,只动画 transform 与 opacity,入场用 ease-out,交互反馈不超过 200ms,尊重 prefers-reduced-motion;不动画大面积 blur/backdrop-filter,不在动画外使用 will-change,不用 useEffect 表达可用渲染逻辑表达的内容。
限制:资料未提供安装命令、代码示例、收费与平台信息,暂未提供。