用途:这是一套面向 AI 智能体的、带有明确约束的 UI 设计规范,用于构建 Superhuman 风格的界面。当需要制作浅色模式界面、创建 Superhuman 风格设计系统,或使用 Inter 字体与 4px 网格实现 UI 时参考。
主要能力:提供颜色、语义令牌、排版、间距、边框、布局、组件与交互等方面的规则。颜色要求主表面使用浅色背景,页面背景(surface-base)用 #C9B7FD,主操作与聚焦态(accent)用 #BCBAFC,文字对比度至少 4.5:1。语义令牌包括 surface-raised #4B5196、surface-overlay #351027、text-primary #B8B1D7、text-secondary #BDC6DF、text-tertiary #B398A9、border-default #4D5498。排版要求以 Inter 为主字体,主标题 56px/extra_bold,正文 25px/400,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,未经要求不得修改字距。间距必须使用 4px 网格,默认元素间距 3px。圆角取自 3px、4px、7px、8px、10px、15px、21px、22px、23px,默认 10px,胶囊元素用 21px 以上。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset。交互上聚焦用 2px accent 描边加 2px offset,禁用态 opacity 0.5 且 cursor: not-allowed,破坏性操作使用 AlertDialog,图标按钮需 aria-label,加载用骨架屏。动画仅在明确要求时添加,只动 transform 与 opacity,入场用 ease-out,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。
使用方式与限制:资料未提供安装命令或具体调用步骤,暂未提供。该技能为约束性指南,需结合具体实现使用;不得使用任意间距或圆角值,不得移除聚焦指示,不得用 useEffect 表达可渲染逻辑。