“你这个颜色在我屏幕上不是这个色啊。”
“这张图太大了，加载要三秒，能不能压一下？”
“这个尺寸在手机上显示不全，能不能改个比例？”
“为什么我设计稿上明明很好看，到了线上就变味了？”
如果你是一个UI设计师，上面这些话你一定不陌生。如果你是一个前端开发，上面这些话你一定说过无数次。
这些日常拉扯不仅消耗时间，更消耗信任。每次打开设计稿和验收页面之间的差距，都像在拆一个盲盒——你永远不知道下一个不一致会出现在哪里。问题的根源，往往不是谁做错了，而是没有一套大家都认、都懂、都照着做的设计规范。
今天这篇文章，我想站在前端的角度，跟UI设计师们聊聊：设计规范为什么重要，以及它到底该怎么写。
一、那些让你我互相“甩锅”的矛盾，都指向同一个答案
先来盘点一下那些每天都在发生的、让设计和开发互相抓狂的矛盾场景。
矛盾一：配色——为什么我的屏幕和别人的屏幕不一样？
设计师在MacBook上调了一个高级的品牌色，截图发给客户确认，客户在手机上看着颜色偏暗。开发按照设计稿标注的色值（比如#4F7CFF）写进代码，但在不同设备上看起来就是不一样。设计师说“颜色不对”，开发说“我写的就是你给的那个色值”。
问题出在哪？不同显示设备的色域、亮度和色彩校准程度不同。设计师的显示器可能是DCI-P3广色域，普通用户的显示器是sRGB标准色域，同样的色值在两个屏幕上看起来就是不一样。更别提手机、平板、笔记本、大屏显示器之间天差地别的显示效果了。
没有统一的色彩管理规范，这个问题永远无解。设计规范要做的，就是明确色值的唯一标准——确定主色、辅色、功能色（成功、警告、错误）的固定色值，并在文档中注明“请以规范中的色值为准，不同屏幕显示差异属于正常现象”。同时，给前端提供一份完整的色彩变量表（CSS Variables），确保代码层面的一致性。TDesign色彩系统中，每个功能色扩展10级色阶，保证色彩变化均匀。你也可以借鉴这种思路，提前定义好色彩梯度。
矛盾二：图片——为什么不能按最大清晰度来？
设计师交付了一张高清大图，3840像素宽，10MB大小，印刷级画质。开发一看就头大——这么大的图放网站上，加载时间至少三秒起步。设计师不理解：“我辛辛苦苦做的图，你凭什么给我压缩？”
图片通常占页面总传输量的40%以上。页面加载延迟超过三秒，超过40%的用户会选择离开。首屏大图建议控制在200KB以内，列表缩略图控制在30KB-80KB。这不是开发“舍不得用好图”，而是性能和视觉必须找到平衡点。
设计规范要做的，是明确图片的尺寸标准和格式要求。比如：Banner图建议宽度1920px、文件大小不超过200KB；产品图建议宽度1200px、不超过150KB；图标统一使用SVG格式；所有图片优先输出WebP格式。这样设计师在出图时就有明确标准，不用等开发来“讨价还价”。可以约定“设计稿中的图片仅用于视觉示意，上线图片需经过压缩优化处理”，双方各司其职。
矛盾三：比例——为什么同样的图不能用在所有地方？
设计稿上，一张产品图在PC端显示完美。但到了手机上，同样的图被裁剪得面目全非。设计师说“我设计的就是这样的比例”，开发说“手机屏幕就这么大，不裁怎么办”。
响应式设计的核心就是让网页在不同尺寸的设备上都有良好的显示效果。但设计师往往只在一种屏幕尺寸下验证设计，忽略了其他尺寸的适配情况。
设计规范需要明确不同断点下的图片适配策略：PC端（≥1200px）用什么比例、平板端（768-1199px）怎么调整、手机端（<768px）如何展示。同时约定图片的安全区域——哪些部分是绝对不能裁掉的，哪些部分是可以牺牲的。这样开发在适配时就有据可依，不用反复猜设计师的意图。
矛盾四：清晰度——为什么不能按最高分辨率输出？
设计师导出一张300DPI的图片，觉得“越清晰越好”。开发看了一眼说“这张图放网页上跟72DPI看起来没区别，但文件大了十倍”。设计师觉得开发在敷衍，开发觉得设计师不懂技术。
网页显示的物理分辨率受屏幕限制。一张300DPI的印刷级图片放到网页上，肉眼根本看不出和72DPI的区别，但文件大小差了四五倍。设计规范要明确不同用途图片的输出分辨率：网页展示统一按72DPI导出，尺寸按实际显示尺寸的2倍（适配Retina屏）即可。设计师不需要为网页准备印刷级素材，这是浪费双方的时间。
二、没有设计规范，到底有多痛？
上面这些矛盾，每一条单独看都是小事。但日积月累，就成了团队协作的痛点。
对设计师来说：每一页都在重新决定字体、颜色、按钮和模块样式。重复劳动多，改稿没完没了，前端还原度永远达不到预期。
对前端来说：每次都要猜设计师的意图，反复确认色值、尺寸、间距。没有统一规范，同一个按钮在A页面圆角4px，在B页面圆角6px，在C页面又变成了8px。代码越写越乱，维护成本越来越高。
对项目来说：沟通成本飙升，验收周期拉长，上线时间一拖再拖。最可怕的是——没有规范，产品就没有一致性。用户今天在首页看到的按钮是蓝色的，明天在详情页看到的同款按钮变成了紫色。品牌形象被稀释，用户体验被打碎。
统一的设计规范可以确保产品内所有界面元素在视觉、交互、文案上具有统一性，降低用户学习成本，提升品牌识别度。同时，设计师可以快速复用组件，开发者可以减少重复编码。这不是“束缚创意”，而是“让创意有处安放”。
三、设计规范到底该怎么写？
说了这么多为什么重要，接下来聊聊怎么写。
一份好的网站设计规范，不需要像一本天书那么厚，但必须覆盖以下核心内容：
1. 色彩系统
明确主色、辅色、中性色、功能色（成功/警告/错误/信息）的色值。建议同时提供HEX、RGB、CSS Variable三种格式。注明色彩的使用场景——什么情况下用主色、什么情况下用辅色、什么情况下用功能色。可以参考有赞Zan Design System基于HSB色彩模型搭建色板体系的思路。
2. 字体系统
明确全站使用的字体族（中文用什么、英文用什么、fallback字体是什么）。定义字号层级——从最小的辅助文字到最大的标题，每一级对应一个固定的字号和行高。至少定义6-8个字号层级。同时明确字重（粗细）的使用规范。
3. 间距系统
这是很多设计规范最容易忽略的部分。定义一套固定的间距数值（比如4px的倍数：4、8、12、16、24、32、48、64），所有页面元素的内外边距都从这套数值里取。这样开发可以直接复用间距变量，不用每个页面重新量。
4. 图片规范
明确不同位置图片的尺寸标准、文件大小上限、输出格式（优先WebP/AVIF）和输出分辨率（72DPI）。同时明确图片的适配策略——哪些图片需要响应式处理、哪些场景使用srcset按需加载。
5. 组件库
这是设计规范中最核心、最实用的部分。把页面中反复出现的元素——按钮、输入框、下拉菜单、标签、卡片、弹窗等——做成标准化的组件。每个组件明确其各种状态（默认、悬停、点击、禁用、加载中）的样式。这样设计和开发都直接调用组件，而不是每次重新设计、重新写代码。
6. 响应式断点
明确网站在不同屏幕尺寸下的布局变化规则。定义几个关键断点（比如手机<768px、平板768-1199px、PC≥1200px），明确每个断点下布局如何调整、元素如何缩放、导航如何变化。
7. 命名规范
约定CSS类名的命名规则（比如BEM命名法），以及设计稿中图层的命名规范。这能极大减少设计和开发之间的沟通成本。
四、设计规范不是写完了就完了
最后说一点容易被忽略的事：设计规范是活的，不是死的。
规范写完不是塞进文件夹吃灰，而是要持续维护和更新。随着产品迭代，新的设计模式会出现，旧的规范可能需要调整。建议每季度review一次规范文档，及时更新过时的内容。
同时，规范要有强制力。设计评审时以规范为准绳，不符合规范的直接打回。开发验收时以规范为标尺，不一致的要求修改。只有大家都认真执行，规范才能真正发挥作用。
原子网络深耕网站建设行业多年，服务过大量企业官网制作和品牌网站建设项目，始终坚持“规范先行”的理念。无论是企业官网建设还是品牌站设计，一套清晰的设计规范都是项目成功的基石。
写给设计师的最后一句话
我知道你们讨厌被束缚。规范不是锁链，是梯子。它让你不用每次都从零开始思考“这个按钮该用什么颜色”“这个间距该用多大”——把这些重复决策交给规范，把创造力留给真正需要创新的地方。
规范不是限制你发挥，是让所有人都在同一张乐谱上演奏。