← 返回设计系统

AI Future School · Principles

四条原则

这四条决定了后面每一个 token 和每一个组件为什么长成那样。有分歧时按这个顺序裁决。

01

AI 嵌在工作对象里

建议长在正文旁、批注贴着原句、任务收在面板底。没有独立聊天框,因为老师的注意力应该留在教案上。

代价:对话组件(J 类)仍然要建全规格,因为总有开放式追问确实以对话为最优解。但它默认贴边停靠、不做浮窗、不进主流程。

02

密度优先于留白

正文 14px、控件 36px、表格行 52px。教师一屏要看完一个班,圆角从原型的 26px 收到 8–12px。

代价:这套系统在演示稿里不如大留白的方案好看。但它服务的是每天连开六小时的人,不是截图。

03

语义色与品牌色分离

品牌色只表达「品牌与选中」,成功 / 警告 / 危险 / 信息各有独立色阶,绝不用品牌色表达状态。

实例:华云档下品牌色是红 #E50012,与「危险」天然撞脸。所以 --err 特意压深到 #9b1c22,与品牌红拉开约 18% 明度——否则用户分不清「这是重点」还是「这是出错了」。

04

组件只认语义 token

组件层零字面色值,只引 --fg--bd--bg-surface 这类别名。换配色方案与切深浅只改 token 层。

验证:加整套华云配色时,components.css 一行没动。这条守不住,配色方案就会退化成到处改硬编码。