BUILD QUALITY
96
目标
100
UI 细节完成度
间距 / 对齐 / 视觉层级
完成度0%
把练习写成“作品”——细节拉满，质感拉满。
这页是一个纯前端静态界面示例：玻璃拟态层叠、栅格布局、响应式断点、动效尊重系统设置（prefers-reduced-motion）、主题切换，以及一点点“像真的”仪表盘节奏。
可读性优先
层次感爆炸
仍然是练习
日期
----
专注
78%
PERFORMANCE
1.2s
建议
≤1.5s
首屏观感
布局稳定 & 字体清晰
稳定性0%
AESTHETIC
A+
风格
Glass
视觉一致性
按钮 / 卡片 / 徽章
一致性0%
RECENT ACTIVITY
像真的一样：活动流
刷新
实时
组件：玻璃卡片
完成圆角、边框、背景叠层
布局：12 栅格
Span 规则 + 断点适配
交互：主题切换
暗色 / 亮色一键切换
NEXT
下一步：把它变成你的
难度
Medium
把卡片数据改成你自己的
比如：学习时长 / 练习次数 / 今日任务
把右侧活动流换成真实日志
练习记录 / bug 记录 / 复盘记录
把“图表占位”换成 SVG 图表
依旧纯前端，不用库也能很酷
NOTES
你可以从这里继续练 CSS
提示
改一处，看全局
练选择器
给 `.card`、`.badge`、`.nav a.active` 加不同状态样式
练布局
改 `grid-template-columns`、改断点，观察布局变化
练动效
调整 `shine` 动画、加 hover 过渡，但记得尊重 reduce-motion