项目记录：用WorkBuddy给Bootstrap组件页做一份团队速查表
起因
组里几个人做后台页面，反复问同样的问题：某个类名怎么写、弹窗要引哪个脚本、表格的响应式容器叫什么。每次都去翻官方组件示例，一翻就是十几分钟。于是想做一份只覆盖我们真正常用组件的内部速查表，而不是把官方文档再抄一遍。
素材来自 Bootstrap 组件实验室，它的好处是每个示例都能直接交互、代码块可一键复制，拿来当源材料很干净。
做法
我把任务拆成四步，全程在 WorkBuddy 里完成：
- 列清单：先让 AI 根据我们过去三个月的页面，归纳出高频组件，最后收敛到 9 个（按钮、表单、卡片、模态框、表格、导航、分页、警告框、折叠面板）。
- 抽结构：把组件实验室里对应示例的代码片段贴进去，要求只保留最小可运行结构，去掉演示用的填充内容和修饰类。
- 统一模板：每个组件固定四个字段——用途一句话、最小代码片段、常见踩坑、对应示例链接。字段统一之后，后面查起来才有“速查”的意义。
- 生成与校验：输出成一份静态 Markdown 页，再让 AI 逐个检查代码块里的类名是否和示例一致。
第三步里的“常见踩坑”最有价值。比如模态框，我们踩过两次的坑是脚本加载顺序和嵌套层级，这两条被写在代码块正下方，比任何说明文档都管用。
过程中的两个判断
一是拒绝“大而全”。 一开始 AI 给的版本覆盖了二十多个组件，看起来很完整，实际上没人会看。明确要求“只保留近三个月实际用过的”之后，篇幅砍掉一半，使用率反而上来了。这提醒我：给 AI 的任务里，排除条件往往比包含条件更重要。
二是链接一定要留。 速查表会过时，所以每个条目都保留了组件实验室的原始示例地址。速查表负责“快”，原链接负责“准”，两者分工清楚。想系统补基础时，也可以顺着 前端 Wiki 的 CSS 框架章节 往下读，不用在速查表里硬塞教程内容。
结果
速查表上线后，同类提问基本消失，新人做第一个页面时也能自己跑通。更意外的收获是维护成本很低：因为字段固定，新增一个组件就是填四行，交给 AI 按模板生成初稿、人工核一遍代码即可。
复盘
这类小工具的价值不在于技术难度，而在于把反复发生的沟通固化成一份可查的东西。AI 在这里最合适的角色是“按既定结构做抽取和格式化”，不是替团队决定该写什么。先把结构想清楚，再让工具批量填充，顺序反了就会得到一份漂亮但没人用的文档。
如果你也在做类似的内部资料，建议从 HTML 入门教程站的静态化思路 里借一点：页面纯静态、加载快、不依赖后端，速查表这种低频更新、高频读取的内容正合适。