很多企业的设计系统沦为“组件堆砌”，落地时设计师不按规范用，开发重复造轮子 —— 我们基于 “原子化设计” 理念，构建了一套 “可落地、可复用、可迭代” 的设计系统，能实现设计与开发的高效协同，同时保证多终端视觉统一。
设计系统的核心是“从原子到页面的层级构建”。最底层的 “原子层” 是基础视觉元素，我们会定义：
· 色彩系统：主色（1 个）、辅助色（3-5 个）、中性色（6-8 个灰度），每个颜色提供 HEX/RGB/CSS 变量三种格式，例如主色--color-primary: #1E88E5，确保设计与开发色值统一；
· 字体系统：选定1-2 种跨平台兼容字体（如思源黑体、苹方），定义 4-5 级字号（12px/14px/16px/18px/24px），明确正文、标题、辅助文本的字重与行高，例如正文 14px / 行高 1.5，标题 18px / 字重 700；
· 间距系统：以8px 为基准，衍生 8px/16px/24px/32px/48px 五级间距，所有模块间距、内边距均为 8 的倍数，避免视觉混乱。
“分子层” 是基础组件，我们按功能类型划分为按钮、表单、弹窗、图标等 12 大类，每个组件包含 3-5 种变体。例如按钮组件，定义默认、主次、危险、文本 4 种样式，统一圆角 8px、内边距 16px×8px，hover 状态为颜色加深 10%+ 轻微缩放（1.05 倍），同时明确组件的交互逻辑（如点击反馈时长 0.2 秒）。组件开发时，我们会在 Figma 中搭建组件库，设置变体与约束规则，设计师只能修改文本、图片等可变内容，无法随意调整尺寸或颜色；开发端则将组件转成 Vue/React 组件，通过 npm 包管理，直接引入项目使用。
“有机体层” 与 “模板层” 实现功能模块化。有机体是组件的组合，例如 “搜索栏 = 输入框 + 按钮 + 下拉菜单”，定义组件间的间距与对齐规则；模板层是页面框架，如列表页、详情页、表单页，明确模块排布（如列表页 “左图右文”）、响应式规则（如详情页移动端单列）。我们还会输出《设计系统手册》，详细说明每个元素、组件的用法，例如 “主色仅用于按钮、标题，不可用于背景”“表单错误提示需搭配红色图标 + 文本”。
落地保障需建立“协同机制”。我们会定期组织设计与开发同步会，更新设计系统版本；用 Figma 插件（如 Design Tokens）自动将设计变量同步为 CSS 变量，避免手动转换错误；开发端通过 ESLint 插件校验组件使用规范，若使用未定义的颜色或组件，会实时报错。这套方法能让设计系统真正落地，而非停留在文档层面。若你需要搭建企业专属设计系统，可来官网（http://www.01zenith.com/）获取建设指南，我们还能提供定制化服务。
