用途:为 AI 智能体提供一套有明确约束的 Front 风格界面构建规范,适用于浅色模式界面、Front 风格设计系统,以及使用 Inter 字体与 4px 网格的 UI 实现。
主要能力: 颜色:主表面用浅色背景,页面背景(surface-base)必须为 #FFFFFF,主操作与聚焦态(accent)必须为 #C8CC51,文字对比度至少 4.5:1。给出的语义令牌包括 surface-base #FFFFFF、surface-raised #240733、surface-overlay #503AF3、text-primary #978BF0、text-secondary #D1D1D1、text-tertiary #8F8F8F、border-default #DDD4F5、accent #C8CC51、warning #B49F65。 排版:主字体必须为 Inter,建议单一字体族;主标题必须 58px/700,正文必须 26px/700;标题用 text-balance,正文用 text-pretty,数字用 tabular-nums,不得随意改动字距。 间距与边框:必须使用 4px 网格,默认元素间距 2px;边框圆角取自 1px、2px、3px、5px、6px、18px、20px,默认 3px,胶囊元素用 20px 以上;边框宽度限 1px、2px、5px。 布局:以 1920px 为基准视口;全屏高度用 h-dvh 而非 h-screen;固定元素遵守 safe-area-inset;方形元素用 size-*。 交互与动画:聚焦必须用 accent 色 2px 外框加 2px offset,不得移除聚焦指示;禁用态用 opacity 0.5 与 cursor: not-allowed;破坏性操作使用 AlertDialog;仅动画 transform 与 opacity,入场用 ease-out,反馈不超过 200ms,尊重 prefers-reduced-motion;无明确要求不加动画。 性能:不在活动动画外使用 will-change,避免对大面积 blur 或 backdrop-filter 做动画,不用 useEffect 表达可用渲染逻辑完成的内容。
使用方式与限制:资料未提供具体安装命令或代码调用方式,暂未提供。