tencentblueking 生成项目设计规范 Skill
产物定义
目标是一套可脱离原项目独立运行的设计规范 skill：
<项目名>-frontend-design/
├── SKILL.md 场景路由 + 页面骨架判定 + 设计令牌 + 铁律 + 自检清单
├── layout.md 框架层级结构与固定尺寸、页面类型、扩展点、滚动条
├── <场景>.md 按项目实际页面原型划分，一个原型一个文件
└── assets/ 可选：独立可运行的页面骨架 + 自包含字体/图标资源
判断产物是否合格，只有一个标准：开一个新页面时不需要人为翻找和比对现有页面。
三条铁律
- 所有数值必须回源码取。禁止凭截图估算、禁止凭经验发明。取不到就标注为待确认，不要填一个看起来合理的值。
- 产物中不出现任何项目内部标识。文件路径、组件名、CSS class、hook 名、样式变量名、代码统计数字，全部剔除。skill 会在其他项目、其他技术栈下被读取。
- 骨架资源必须用真实产品截图 1:1 校验。没有截图就向用户索要，不要自行想象布局。
执行流程
按阶段推进，每阶段完成后按「验证」列自查再进入下一阶段。
| 阶段 | 动作 | 验证 |
|---|---|---|
| 1 | 探查源码，定位五类信息源 | 五类都已找到，或明确记录缺失项 |
| 2 | 提取真实数值，归纳收敛规律 | 每个数值都能指回一处源码 |
| 3 | 归纳页面骨架与交互流程 | 每个现有页面都能归入某一骨架，无遗漏 |
| 4 | 去项目化转译并写文档 | 全文检索无项目标识残留 |
| 5 | 生成骨架资源（若项目有全局框架） | 浏览器截图与真实截图逐项一致 |
| 6 | 终检 | 走完本文件末尾的自检清单 |
阶段 1–2 的具体手法见 extract.md。阶段 3–4 的转译规则与文档范式见 write.md。阶段 5 的骨架生成与校验见 skeleton.md。
文档写法范式
参照下面这种「结构 + 具体数值」的写法，它是整套规范的骨架句式：
body 100vh / min-width 1366px / overflow hidden
└─ 应用根节点
├─ 公告栏（可选） 40px（无公告时为 0）
└─ 导航框架 height = 100vh - 公告栏高度
├─ 顶栏 52px 背景 #0e1525
└─ 导航主体
├─ 侧栏 折叠 60px / 展开 260px 背景 #182132
└─ 内容容器
├─ 面包屑栏 52px padding 0 14px 背景 #fff 标题 16px/#313238
└─ 内容区 padding 20px 24px 0 overflow auto
要点：ASCII 树表达层级，每层直接写死尺寸与色值，附上推导结论（如「框架固定吃掉 104px」）。判定类内容用表格，决策类内容用决策树，避免散文。
常见失误
以下都是实际踩过的，逐条规避：
- 写代码统计（「全站 1342 个按钮，primary 占 44%」）。统计对新建页面无指导价值，改写成规范表述（「主色只给页面唯一主操作」）。
- 保留组件名当锚点（「用
SmartAction包裹」）。换成形态描述（「底部固定操作区」）。 - 凭截图猜数值。截图只能确认「有什么、什么位置」，尺寸色值一律回源码。
- 只看项目自己的样式文件。组件库的基础尺寸在其编译产物里，项目样式往往只是覆盖层，漏看会导致数值失真。
- 拿低清截图辨认文案。低清图会误读菜单项，须裁剪放大或索要清晰图。
- 为「将来可能用到」加抽象层。规范只描述项目已成立的事实。
自检清单
产物提交前逐条核对：
- SKILL.md 有场景路由表，能一眼定位到该读哪个文件
- 页面骨架判定表覆盖项目所有现有页面类型
- 设计令牌收敛成有限集合（间距/字号/色板/尺寸档位），并写明禁止中间值
- 每个场景文件都是「结构 + 具体数值」，无散文堆砌
- 全文无文件路径、组件名、class 名、hook 名、样式变量名
- 无代码统计数字、无时效性表述
- 交互流程写清了分支（成功/失败/异常各走什么）
- 骨架资源自包含，脱离原项目仍能正确渲染
- 骨架资源已与真实截图逐项比对
- 产物页面单文件交付规则已写入铁律与自检清单
- SKILL.md 正文 500 行以内，引用均为一级