设计系统模板

一键生成包含颜色、字号、间距、圆角、阴影的完整设计系统CSS变量模板,可下载。

关于 设计系统模板

设计系统模板生成器帮助你快速搭建完整的设计系统CSS变量体系。包含颜色、字号、间距、圆角、阴影五大模块,一键生成可下载的CSS文件,方便集成到任何项目。

设计系统组成

  • 颜色令牌:主色、辅色、语义色、灰阶系列
  • 字号令牌:从微字号到大标题的完整层级
  • 间距令牌:4/8/12/16/24/32/48/64 等级
  • 圆角令牌:sm/md/lg/xl/full 五档
  • 阴影令牌:sm/md/lg/xl 四档

使用方法

  1. 选择主色、辅色和基准字号/间距。
  2. 预览效果。
  3. 点击「复制 CSS 变量」获取CSS代码。
  4. 或点击「下载 design-system.css」获取文件。

设计令牌优势

  • 全局一致性:所有组件使用相同变量。
  • 主题切换:只需更改变量值即可切换主题。
  • 维护简单:修改一处全局生效。
  • 团队协作:设计与开发共享定义。