华云设计系统

AI Future School · Design System v1.0

沉静的密集界面

Token 架构取自 Figma 社区热度断层第一的 Untitled UI v2.0,后台版式取自 DashStack 与 ByeWind Dashboard,色相与气质承自云杉纸感基底。AI 组件不采纳主流的 chatbox 形态——它们嵌进工作对象本身。

01

色彩

Color

中性色不是纯灰——整条色阶都带一点色偏,和纸感底色同源:云杉偏绿,华云偏暖红。品牌色 500 为主色,云杉 Moss

中性 Neutral--n-0 → --n-950
品牌 Brand · 云杉--b-50 → --b-900
语义 Semantic--ok --warn --err --info
02

字体

Typography

界面 DM Sans + 苹方;数据与代码 IBM Plex Mono(等宽数字);教学正文思源宋体——只在文档画布里出现,因为教案是读物不是界面。

三种字族的分工
界面 · DM Sans
第 3 课时 · 单元整体设计
数据 · IBM Plex Mono
86.4% ↑ 12.8
教学正文 · 思源宋体
春江潮水连海平
03

间距 · 圆角 · 阴影

Spacing · Radius · Elevation

4px 基准栅格。圆角比原型收紧一档,密集数据需要更硬的边界。阴影带品牌色相的偏移,不用纯黑。

间距--s-1 → --s-12
圆角--r-xs → --r-2xl
阴影--sh-xs → --sh-xl
A

布局骨架

Layout & Shell

侧边栏 260px、顶栏 60px、内容区 24px 内边距——取自 DashStack 与 ByeWind 的收敛值。下面是可交互的活体骨架。

今天有 4 节课

8:00 起,第一节是八(3)班语文《春江花月夜》

B

导航

Navigation
B-01 导航项 五态.nav-item
B-03 标签页 · B-04 分段控制器.tabs .segmented
B-05 步骤条 · B-06 分页 · A-06 面包屑.steps .pagination .breadcrumb
选班级
2定范围
3发布
B-07 下拉菜单 · B-11 树形导航.menu .tree
  • ▾ 八年级语文
    • ▾ 第三单元
      • ▤ 春江花月夜.docx
      • ▦ 学情表.xlsx
    • ▸ 第四单元
C

数据展示

Data Display
C-02 指标卡.stat-card .delta
C-03 数据表格.tbl
学生得分 状态提交时间
C-17/18/19 徽标 · 标签 · 状态胶囊.badge .tag .pill
已批改建议精批未提交 已发回草稿 古诗文×重点 31
C-16 头像 · C-14 进度 · C-07 时间线.avatar .progress .timeline
+9
批改进度 24/31
  • 作业已发布

    昨天 16:20 · 31 人可见

  • 收齐 28 份

    今天 08:05

  • 批改中

    AI 已预批 24 份,待你复核

C-20 文字提示 · C-21 气泡卡片 · C-22 折叠面板.tip .popover .accordion
AI 依据近三次作业推断
得分构成

立意 8 · 结构 7 · 语言 9 · 书写 6,四维加权后 76 分。

评分标准
四个维度各 10 分,按 3:2:3:2 加权。
AI 预批规则
仅对结构与语言给建议,立意与书写始终留给教师。
D

表单与输入

Forms & Input

这是原来的最大窟窿——18 个组件里 16 个原型没有。控件统一 36px 高、8px 圆角、聚焦时 4px 品牌色光环。

D-01/02/03 输入 · 多行 · 下拉(含错误态与禁用).input .textarea .select
发布后学生可见
截止时间不能早于当前
D-05/06/07/08 勾选 · 单选 · 开关 · 滑块.check .switch .slider
D-12/14/17/18 上传 · 标签输入 · 筛选栏 · 批量操作条.dropzone .tag-input .filter-bar .bulk-bar
意象分析× 炼字×
拖入学生作文,或点击选择

支持 .docx .pdf 图片,单份不超过 20MB

已选 6 份
E

动作与反馈

Actions & Feedback
E-01 按钮 五变体 × 三尺寸 × 状态.btn
E-09 通栏提示 四语义.alert
已发回 31 份

学生端会在 1 分钟内收到通知。

!
3 份作业 AI 判定为需精批

结构分歧较大,建议你亲自看一遍再发回。

导出失败

成绩单模板被占用。关闭模板文件后重试。

i
本学期第 12 周

期中卷面分析将在下周一自动生成。

E-06 模态框 · E-08 轻提示 · E-10/11 加载 · E-12 空状态.modal .toast .spinner .skel .empty
已保存到「八年级语文 / 第三单元」
正在生成学习单…

这个单元还没有教案

可以从资源库挑一份改,或者让 AI 依据课标和上一单元的学情起一稿。

F

身份与设置

Identity & Settings
F-01 个人菜单 · F-02 用户卡片 · F-05 权限标识.menu .card .pill

周砚

八(3)班 · 学号 21

语文 A-古诗文薄弱
教师备课组长 仅本班可见全校可见
G

AI 原生

AI-native

Figma 上这一类的热门件全是 chatbox,与产品哲学冲突,所以整类自定义。共同约定:AI 产出一律带依据,一律给采纳 / 略过两个出口,一律紧贴它要改的那个对象。

G-02 就地建议.ai-suggest
第 3 段的活动设计只有一档难度。建议拆成三层:全班齐读意象 → 小组辨析「江月」复现 → 学有余力者比较张若虚与李白的月。
依据:本班上次古诗文作业 9 人低于 70 分,4 人满分
G-07 修改对比 · G-05 引用来源.diff .cite
本课时目标是让学生了解能指出并解释《春江花月夜》中至少三处「月」的意象及其情感指向课标 7-9 年级 · 阅读 4
3 处改动 · 已核对 1/3
G-03 输入合成器 · G-09 智能体状态 · G-10 划选工具条.composer .ai-status .sel-toolbar
教案 · 春江花月夜 ⌘↵ 执行
正在读第 3 段
G-08 后台任务.task-row

后台任务

不用等,做完了在这里收

2 进行中
批改八(3)班作文 24/31
生成《春江花月夜》学习单
期中卷面分析已生成
12 分钟前 · 含 4 张图表
G-11 就地改写 · G-07 行内 diff.diff ins/del不跳走、不开对话,直接在原文上改

导入环节用 5 分钟齐读全诗,请学生标出所有出现「月」的句子请学生用铅笔圈出全部 15 处「月」,并在旁标注它此刻是「实景」还是「心境」,为后面的意象辨析做准备。

AI 建议 · 依据「课时目标含意象辨析」
G-12 并排对比.diff-split改动大到行内看不清时才升级到分栏
原文

本课时目标是让学生理解《春江花月夜》的意境。

AI 修改

本课时目标是让学生能指出并解释诗中至少三处「月」的意象及其情感指向

G-14 版本历史 · G-15 评论线程 · G-16 协同在场.versions .thread .presence

版本历史

当前
采纳了 3 条 AI 建议
10:24
林老师
改写导入环节
09:51
初稿
从模板创建
昨天
周主任

第二段的时间是不是紧了点?

林老师

我压到 12 分钟,讨论改成同桌两两说。

2 人在看

同桌两两说,每人 90 秒

H

工作对象与画布

Work Object & Canvas
H-01 文档画布 · H-02 内容块 · H-05 批注.canvas-doc .block mark

春江花月夜 · 第 3 课时教学设计

本课时目标是让学生能指出并解释诗中至少三处「月」的意象及其情感指向。

导入环节用 5 分钟齐读全诗,请学生标出所有出现「月」的句子,为后面的意象辨析做准备。

H-06 评分量表.rubric

周砚 · 读后感

AI 预批,待复核

76
I

表面与质感

Surface & Texture

决定界面素不素的一层。四种叠法都垫在内容之下,永不参与信息表达——它们只负责让大片底色不再是一块塑料。参数写死在 token 里,不许目测。

I-01 品牌水印.surface-mark > .mark符号放大到容器高的 1.4–2.2 倍,裁切在角上

八(3)班 · 学情概览

水印用品牌字,opacity .055(浅)/ .085(深)。文字层 z-index 抬到 1,永远压得住。

改到 .09 就过了

同一个组件,只调两个变量。超过 .08 水印开始和正文抢注意力——这是上限,不是建议值。

I-02 纹样 · I-03 氛围渐变 · I-04 光晕 · I-05 颗粒.surface-pattern .surface-ambient .surface-glow .surface-grain
纹样底纹48px 单元 · 墨色 · opacity .10
氛围渐变焦点在容器外 · 品牌色 8% + 墨 6%
光晕blur 36px · 从下沿升起
颗粒(放大到 .42 才看得见)实际用 --tex-grain:浅色 .03 / 深色 .05

上面四块是刻意做大的:渐变的正确用法是焦点落在容器外面,你只该看见衰减、看不见那个「球」。所以块越小越看不出来——这也正是它对的表现。

叠起来才是完整答案水印 + 氛围 + 颗粒,三层同时开

Composed Surface

这块底不是纯色了

和上面任何单层比一下:水印给品牌、渐变给空气、颗粒消塑料感。三层加起来 CSS 不到 30 行,且全部走 token——换配色方案时自动跟着变。

I-06 毛玻璃 · I-10 渐变描边.surface-glass .surface-gradborder
毛玻璃浮层

blur 16px · saturate 1.4,带 @supports 兜底

渐变描边

强调靠边不靠填充,密集界面里更安静

J

对话

Chat & Conversation

我们的产品哲学是把 AI 嵌进工作对象,不堆 Chatbox。但规格不能缺——总有对话确实是最优解的场合(开放式追问、跨对象的检索)。所以它建全,但默认贴边停靠,不做浮窗、不抢主区。

J-01 对话容器 · J-02 消息气泡 · J-04 消息操作 · J-06 打字指示.chat .msg .typing
八(3)班这次作文,哪些人是「结构」这一项掉下来的?
有 7 人结构分低于 7 分,其中 4 人是同一个问题:中间段落缺过渡句。要我按这个共性生成一份针对性的讲评提纲吗?
2.1s · 引用 21 份作业
J-05 起手提示 · J-05 对话输入区.prompt-chips .composer
J-08 工具调用卡 · J-09 思维过程.toolcall .reasoningAI 做了什么必须可查,这是「沉静」的前提
query_submissions已完成 · 340ms
class: 八(3) · assignment: 读后感 · filter: rubric.structure < 7
→ 7 rows
推理过程(3 步) 先按结构分筛出低分段,再看这 7 份的批注共性,最后确认 4 份都命中「缺过渡句」。
K

交互与状态

Interaction & States

这一类没有「长相」,但少了它,前面 140 多个组件会各做各的。状态矩阵和动效 token 是 P0:它们是让系统保持一致的东西。

K-06 状态总览[data-state]每个交互件都要交齐这六态
default
hover
focus
pressed
loading
disabled
K-04 快捷键kbd
命令面板 K 采纳 下一份 J 撤销 Z
K-07 动效规范--dur-fast --dur --dur-slow --ease
dur-fast
120ms · 悬停、按下
dur
200ms · 展开、切换
dur-slow
320ms · 抽屉、模态
K-01 拖拽排序.dragrow .droptarget
导入环节 · 5 分钟
意象辨析 · 15 分钟
小组讨论 · 12 分钟
L

教学专用

Teaching-specific

通用后台没有、但普教一定会用到的一族。它们复用前面所有的 token 与原子件,不另起炉灶。

L-01 题目卡 · L-02 作答与判分.qcard .opt
单选第 3 题 全班正确率 62%

「江畔何人初见月,江月何年初照人」一句,主要表达的是:

A对故乡的思念
B对宇宙与人生的哲思正确
C对时光流逝的惋惜38% 选此
D对离别的伤感
L-04 媒体播放器 · L-05 语音录制.player .wave
课堂实录 · 第 3 课时
12:04
31:40
00:24

合成页面

Composed Screens

系统立不立得住,看的是把组件拼成真页面之后还成不成立。下面两屏全部由上面的组件搭成,没有一行专用样式。

屏一 · 教师「今日」

今天有 4 节课

周三 · 第 12 周 · 8:00 起

八(3)班有 9 人在古诗文上连续两次低于 70。今天第一节正好讲《春江花月夜》,要不要把导入换成分层齐读?
依据:第 10、11 周作业成绩

今日课程

  • 08:00 八(3)班 语文

    春江花月夜 · 第 3 课时

  • 10:15 八(4)班 语文

    同上 · 教案已复用

  • 14:00 备课组会

    第四单元集体备课

待你处理

3 项需精批
八(3)班读后感24/31
八(4)班默写31/31
屏二 · 作文批改(AI 嵌在正文旁,不是聊天框)
建议精批

读《春江花月夜》,我最先注意到的是月亮一直在变。它从海上升起,照过江流、花林、白沙,最后落进海雾里。

张若虚写月,其实是在写时间。人生代代无穷已,江月年年只相似——人是会换的,月不换。这两句让我想了很久。

第 2 段已经摸到「永恒与短暂」这层了,但没往下走。可以提示他补一句:那月亮到底是在安慰人,还是在提醒人。
依据:全班仅 3 人写到哲理层

评分

76