CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
返回首页
语言2 周

设计系统入门

令牌、组件、文档与治理,系统覆盖 design-system 路线图。

登录后追踪本课程进度 —登录

从第 1 课开始

全部课时

12 节
  1. 01

    设计系统是什么

    DS vs 组件库、Atomic Design。

  2. 02

    视觉审计

    从现有产品做 audit。

  3. 03

    设计令牌

    Color/Spacing/Typography tokens。

  4. 04

    布局与栅格

    Grid、断点与响应式。

  5. 05

    核心组件

    Button/Form/Card/Icon。

  6. 06

    复合组件

    Modal/Tabs/Toast/Dropdown。

  7. 07

    写作与原则

    Tone of voice 与 a11y。

  8. 08

    模式与指南

    Pattern 文档与空状态。

  9. 09

    工具链

    Figma 库与 Storybook。

  10. 10

    治理与贡献

    SemVer、PR 与测试门禁。

  11. 11

    运营与社区

    Roadmap 与 adoption 指标。

  12. 12

    综合练习

    Mini DS:tokens + 3 组件。