一、课程导学与项目概览：前端设计规范的重要性、工具能解决什么问题、整体架构预览
1.1 为什么前端需要设计规范？
说实话，我刚入行那几年，对设计规范这事挺不屑的。
总觉得「代码能跑就行，管它间距是8px还是10px？」。直到有一次，我接手了一个遗留项目——好家伙，一个按钮在三个页面里用了三种圆角，字体大小从12px到16px随机分布，颜色更是五彩斑斓。改一个弹窗样式，我得翻遍20个组件文件。
那周我加了三天班。嗯，从那以后，我再也不敢轻视规范了。
设计规范到底解决什么问题？ 说白了，就三件事：
- 一致性——用户在不同页面看到同样的按钮、同样的间距、同样的交互反馈
- 效率——设计师和开发不用反复沟通「这个字号是多少」，直接查规范就行
- 可维护性——换主题、改样式，改一个变量全站生效，不用满世界找硬编码
你想想看，一个团队五个人，每人写一套自己的风格，最后产品长什么样？我见过最夸张的——同一个项目里，有人用#1890ff，有人用#1A90FF，肉眼看着差不多，但就是不一样。这种问题，人工review根本防不住。
1.2 这个工具能帮你做什么？
我们这门课要做的，就是写一个前端设计规范检查工具。
它不是什么高大上的商业产品，而是一个能跑在CI/CD里、能集成到编辑器中的实用工具。它的核心能力就三条：
- 自动扫描——检查项目中所有CSS/SCSS/Less文件，找出不符合规范的地方
- 规则可配——你可以自定义颜色、间距、字体、圆角等规则
- 报告输出——生成可视化的检查报告，告诉团队哪里有问题
我个人习惯：把规范检查工具集成到pre-commit钩子里。每次提交代码前自动跑一遍，有问题直接拦截。这样规范问题根本流不到代码仓库里。
我曾经在一个20人的前端团队里推行过类似的工具。刚开始大家觉得「多此一举」，但用了一个月后，设计走查的返工率降低了60%以上。为什么？因为很多低级错误在开发阶段就被工具抓住了。
1.3 整体架构预览
这个工具的整体架构，我画了一张图，你先有个印象：
从图上你能看到，整个工具分四层：
- 输入层——读取你的样式文件和规范配置
- 核心处理层——解析文件、执行规则、比对差异
- 输出层——生成各种格式的报告
- 集成层——怎么把它嵌入到你的工作流里
注意：这个架构图看起来简单，但每个模块都有不少坑。比如文件解析器，你要处理CSS的注释、变量、嵌套规则；规则引擎要支持自定义规则和优先级；差异比对器要能忽略一些合理的例外情况。
这些细节，我们会在后面的章节逐一展开。
1.4 课程的整体安排
这门课一共30章，我把它分成了几个阶段：
| 阶段 | 章节 | 核心内容 |
|---|---|---|
| 基础篇 | 1-5章 | 项目搭建、文件解析、规则引擎设计 |
| 核心篇 | 6-15章 | 颜色、间距、字体、圆角等具体规则实现 |
| 进阶篇 | 16-22章 | 报告生成、性能优化、插件机制 |
| 实战篇 | 23-30章 | CI/CD集成、编辑器插件、真实项目落地 |
我个人建议你按顺序学，尤其是前15章，那是整个工具的骨架。后面的章节可以根据需要跳着看。
1.5 你需要准备什么？
技术栈方面，你需要：
- Node.js 16+（我们会在第2章搭建项目）
- 了解基本的CSS语法和选择器
- 会一点TypeScript更好（不过我会在代码里加注释）
避坑指南：我曾经用纯JavaScript写过一版，后来发现类型检查太痛苦了。所以这门课我统一用TypeScript，你跟着写就行，不用怕。
好了，第一章就到这里。你大概已经明白我们要做什么了——一个能自动检查前端设计规范的工具。接下来，我们就要动手搭建项目了。