很多建站UI显得拥挤或者松散，是因为栅格没有设置好。主流的是12列栅格，但是列宽和槽宽要根据屏幕尺寸来动态计算。以1440px设计稿为例，内容区一般设置为1200px，左右各留120px的安全边距。栅格不仅是用来对齐的工具，也是响应式断点的依据。
色彩和字体：形成品牌视觉印象
主色不能超过两种，辅助色用来表示不同的状态。中性色阶很重要，从纯白到纯黑至少要有9种灰度层次，用于文字、边框和背景之间的细微区别。字体规范要明确标题、正文以及辅助文字的字号、行高。中文推荐系统默认字体栈，不强制加载大体积的字体文件来影响加载速度。
组件库建设：一次设计，多处使用
按钮、表单、弹窗、卡片等高频使用的元素都应该进行组件化。在Figma中使用变体功能把不同状态（默认、悬停、禁用）合成为一个组件。组件命名按照“类别/状态/尺寸”的方式进行，例如“Button/Primary/Large”。开发的时候可以直接对照着名称来写class，减少沟通上的损耗。
交付开发：标注、切图避坑要点
交付不是把PDF扔给谁就算完了。使用蓝湖或者Figma Dev Mode来做标注，但是要人工检查一些重要的数值：间距是不是8的倍数、字号对不对、阴影参数能不能用代码来实现。切图优先用SVG，位图提供2x和3x。命名采用英文小写字母加连字符的形式，例如“icon-arrow-right@2x.png”。
UI交付的质量直接影响着开发的还原程度。规范不是一种限制，而是一种使团队成员之间能够使用相同语言进行沟通的方式。下一期将会讨论开发、测试以及上线的过程，也就是如何把设计稿转换成可以实际使用的网站。