令牌、组件、文档与治理,系统覆盖 design-system 路线图。
登录后追踪本课程进度 —登录
设计系统是什么
DS vs 组件库、Atomic Design。
视觉审计
从现有产品做 audit。
设计令牌
Color/Spacing/Typography tokens。
布局与栅格
Grid、断点与响应式。
核心组件
Button/Form/Card/Icon。
复合组件
Modal/Tabs/Toast/Dropdown。
写作与原则
Tone of voice 与 a11y。
模式与指南
Pattern 文档与空状态。
工具链
Figma 库与 Storybook。
治理与贡献
SemVer、PR 与测试门禁。
运营与社区
Roadmap 与 adoption 指标。
综合练习
Mini DS:tokens + 3 组件。