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

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

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

学习

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

更多

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

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
设计系统入门/课时/设计令牌
RawBlame
课时目录12 节

设计系统入门

  1. 01设计系统是什么
  2. 02视觉审计
  3. 03设计令牌
  4. 04布局与栅格
  5. 05核心组件
  6. 06复合组件
  7. 07写作与原则
  8. 08模式与指南
  9. 09工具链
  10. 10治理与贡献
  11. 11运营与社区
  12. 12综合练习

设计令牌

Color/Spacing/Typography tokens。

35 分钟

设计令牌

Token 是设计与代码的单一事实来源:color、spacing、typography。 与 ux-design-essentials 互补,聚焦可复用组件库与治理。

学习目标

  • Defining tokens
  • Functional colors
  • Dark mode
  • Naming conventions

核心概念

本课对齐 /roadmaps/design-system 对应节点。建议与站内现有课程对照:BI 看 bi-analyst-essentials,体验看 ux-design-essentials,产品看 product-manager-essentials。

示例

--color-primary: #2563eb;
--space-md: 16px;
--font-body: 14px/1.5

练习

  • 在路线图页面定位本课覆盖的节点
  • 完成一个最小可演示示例或文档
  • 写 2 条与 CodeRoadMap 产品的对照笔记

小结

设计令牌(dsys-tokens)完成后进入下一课,或在路线图中标记已掌握节点。

加载本节练习…
← 上一课视觉审计下一课 →布局与栅格