为啥小公司也要搞 UI 规范？

你可能想：“我们人少，项目小，搞啥规范？有那时间不如多写两个接口。”

但问题是：

• • 新人来了，三天都在问：“这个按钮用哪个颜色？”
• • 改个主题色，要手动改30个文件。
• • 设计稿和实现总对不上。

UI 规范不是为了高大上，是为了少踩坑。

它不复杂，也不花时间。
关键是：简单、能落地、大家愿意用。

案例

1. 先搞三原色和两种字号

别一上来就整几十个颜色变量。
我们先定了三个核心颜色：

:root {
  --color-primary: #1890ff;    /* 主色，按钮、链接 */
  --color-success: #52c41a;    /* 成功，比如“已支付” */
  --color-danger: #f5222d;     /* 错误，比如“删除” */
}

然后字号，就两个：

• • --font-size-large: 16px; （标题、按钮文字）
• • --font-size-normal: 14px; （正文）

够用吗？够。
以前满屏13、14、15、16混着来，现在一眼就能看明白。

效果：
新人来了，问颜色？“用 --color-primary。”
问字号？“大标题用 large，其他用 normal。”
5分钟上手。

2. 间距，就认一个单位

以前各种 margin: 10px、padding: 15px……乱得像毛线团。

我们定了一个设计单位：8px。

所有间距，必须是 8 的倍数：

• • 小间距：8px
• • 中间距：16px
• • 大间距：24px 或 32px

比如：

.card {
  padding: 16px;
  margin-bottom: 24px;
}

设计师也配合，改了 Sketch 的网格，对齐 8px。

效果：
页面突然整齐了。
组件之间不再挤成一团，也不松松垮垮。

3. 按钮，只准有三种

我们砍掉了所有花里胡哨的按钮。

只留三种：

1. 1. 主按钮：蓝色，用在关键操作（如“提交订单”）
2. 2. 次按钮：白色带边框，用在“取消”“返回”
3. 3. 危险按钮：红色，只用于删除、停用

样式统一写在 Button.css 里，谁也不准自己瞎写。

案例：
之前有个页面，三个按钮全是蓝色实心，用户根本分不清哪个是确认。

现在，主操作是蓝的，取消是白的，删除是红的。
清晰，不纠结。

4. 建了个UI 小抄文档

别搞几百页的规范文档。
我们建了个 Markdown 文件，叫 UI-cheatsheet.md，就放仓库里。

内容长这样：

# UI 小抄（前端用）

## 颜色
- 主色：var(--color-primary)
- 成功：var(--color-success)
- 危险：var(--color-danger)

## 字号
- 大：16px
- 正常：14px

## 间距
- 小：8px
- 中：16px
- 大：24px

## 按钮
- 主按钮：蓝色实心
- 次按钮：白色边框
- 危险按钮：红色边框

新人来了，看这个，10分钟搞定。

小公司搞规范，核心是：

• • 简单到能记住
• • 落地到不扯皮
• • 持续用，别扔掉

最后

UI 规范不是给老板看的PPT。

它是帮你少加班、少背锅、少改bug的工具。

你花两天定个小规范，后面省下的时间，够你多喝三杯奶茶。

阅读原文：原文链接