关于 设计系统模板
设计系统模板生成器帮助你快速搭建完整的设计系统CSS变量体系。包含颜色、字号、间距、圆角、阴影五大模块,一键生成可下载的CSS文件,方便集成到任何项目。
设计系统组成
- 颜色令牌:主色、辅色、语义色、灰阶系列
- 字号令牌:从微字号到大标题的完整层级
- 间距令牌:4/8/12/16/24/32/48/64 等级
- 圆角令牌:sm/md/lg/xl/full 五档
- 阴影令牌:sm/md/lg/xl 四档
使用方法
- 选择主色、辅色和基准字号/间距。
- 预览效果。
- 点击「复制 CSS 变量」获取CSS代码。
- 或点击「下载 design-system.css」获取文件。
设计令牌优势
- 全局一致性:所有组件使用相同变量。
- 主题切换:只需更改变量值即可切换主题。
- 维护简单:修改一处全局生效。
- 团队协作:设计与开发共享定义。