写给小公司前端的 UI 规范

写给小公司前端的 UI 规范：简单实用，从零搭建一致性界面

小公司前端团队通常人少事多，没专职设计师，也没精力搞复杂的设计系统。但UI 不一致是最大痛点：按钮五花八门、颜色乱用、间距随意，看起来像拼凑的。制定一份轻量级 UI 规范能让产品看起来专业、开发效率翻倍、后期维护不崩。

这份规范专为小公司设计：简单、可落地、不依赖重型工具。用 Figma/Notion/Word 记录就行，重点是“大家遵守”。目标：全团队（前后端、产品）一看就懂，一用就上手。

1.颜色系统（Color Palette）：别超过 8 个主色

• 主色（Primary）：品牌色，按钮、链接用（1-2个）。
• 辅助色（Secondary）：强调、标签用（2-3个）。
• 中性色（Neutral）：文字、背景、边框（黑/白/灰 4-5 级）。
• 功能色：成功绿、警告黄、错误红。
• 建议：用 Coolors 或 Adobe Color 生成调色板，导出 HEX 值。
• 在 CSS 中用变量定义：

  :root{--primary:#007bff;--success:#28a745;--gray-100:#f8f9fa;--text:#333333;}

2.排版系统（Typography）：统一字体和层级

• 字体：系统字体优先（sans-serif），如 -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto。
• 层级（别超过 6 级）：
  • H1: 32px bold（页面标题）
  • H2: 24px bold
  • H3: 20px bold
  • 正文: 16px
  • 小文字: 14px
  • 辅助文字: 12px
• 行高：1.5-1.8倍字体大小；字距：正常。
• 规范写死在 CSS 中，避免随意 font-size。

3.间距与网格（Spacing & Grid）：用 8px 倍数系统

• 基础单位：8px（小公司最简单：4px 太细，16px 太粗）。
• 所有 padding/margin 用 8 的倍数：8px、16px、24px、32px、48px。
• 网格：12 列网格，容器最大宽 1200px，左右留白。
• 组件内间距统一：按钮内边距 12px 24px，卡片内 24px。
• 工具：Tailwind CSS 或自己写 .m-8 { margin: 8px } 等类。

4.常用组件规范：只定义核心 10 个

• 按钮：Primary / Secondary / Text 三种状态（normal/hover/disabled）。
• 输入框：统一高度 40px，边框 1px #ddd，focus 时蓝边。
• 卡片：阴影 0 4px 12px rgba(0,0,0,0.1)，圆角 8px。
• 表格：斑马纹、hover 高亮。
• 弹窗/下拉/标签 等。
• 建议：用现成 UI 库（如 Ant Design / Element Plus / Naive UI）二次封装，只改颜色和圆角。

5.响应式规则：移动优先

• 断点：xs(<768px) / sm(≥768px) / md(≥992px) / lg(≥1200px)。
• 移动端：单列布局、按钮大一点（最小 48px 高）。
• 用 media query 或 Tailwind 实现。

实施建议（小公司最重要）

• 文档位置：放 Notion 或 GitLab Wiki，一页搞定。
• 执行方式：代码审查时检查是否符合规范；新页面必须参考。
• 工具推荐：Figma 画组件（免费够用） + Storybook 展示组件。
• 迭代：先上线基础版，用着用着再完善。

遵守这份规范，你的界面不会再像“野蛮生长”，产品经理会夸你专业，用户体验也会提升。小公司不求完美，求一致——从今天开始，复制这份规范，改改颜色就用起来吧！😂

有具体组件想细化，或者你们公司已有的痛点，欢迎分享，我帮你定制～