写给小公司前端的 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 展示组件。
- 迭代：先上线基础版，用着用着再完善。
遵守这份规范，你的界面不会再像“野蛮生长”，产品经理会夸你专业，用户体验也会提升。小公司不求完美，求一致——从今天开始，复制这份规范，改改颜色就用起来吧！😂
有具体组件想细化，或者你们公司已有的痛点，欢迎分享，我帮你定制～
