antd 设计规范实施 + 设计文档跟随版本进行升级

[Jiang-Xuan]

目前没有设计稿跟随版本进行升级, 为了提升网站的设计规范以及提升自己的设计技能, 设计稿将跟随代码的版本进行升级:

• 设计工具: sketch
• 设计规范: antd
• 前端 React 组件库: antd
• antd 没有提供 Spacing 系统, 采用 github 的设计框架 primer 中的 Spacing 系统 组件的色彩系统采用 antd, util 类名的色彩采用 primer 的

[Jiang-Xuan]

sketch 使用规范

css 盒子 和 sketch 组

css 中的每一个盒子都是 sketch 中的一个组, sketch 图形 box-bounary 和 box-inner 尽量在可能能时候锁定🔒

1. 内部图形 box-bounary 指定盒子的外边界
   
2. 内部图形 box-inner 指定盒子的内边界, 内边界图形和外边界图形之间的空间为 css 中的 padding padding 需要用 sketch measure 工具 标出
   

[Jiang-Xuan]

设计这一块使用了两种框架, 这两种框架的色彩风格不一致:

• antd 3.23.1 版本
• primer 11.0.0 版本

Note: 为什么使用这两种框架, 是因为 primer 提供了大量的工具类名, 比 antd 使用起来更为方便, 但是也造成了一个系统使用两种色彩方案, 色彩方案不统一的弊端

antd

https://ant.design/docs/spec/colors

primer

https://primer.style/css/support/color-system