tencentblueking/blueking-dbm/create-project-designer

生成项目设计规范 Skill

产物定义

目标是一套可脱离原项目独立运行的设计规范 skill：

<项目名>-frontend-design/
├── SKILL.md              场景路由 + 页面骨架判定 + 设计令牌 + 铁律 + 自检清单
├── layout.md             框架层级结构与固定尺寸、页面类型、扩展点、滚动条
├── <场景>.md             按项目实际页面原型划分，一个原型一个文件
└── assets/               可选：独立可运行的页面骨架 + 自包含字体/图标资源

判断产物是否合格，只有一个标准：开一个新页面时不需要人为翻找和比对现有页面。

三条铁律

1. 所有数值必须回源码取。禁止凭截图估算、禁止凭经验发明。取不到就标注为待确认，不要填一个看起来合理的值。
2. 产物中不出现任何项目内部标识。文件路径、组件名、CSS

class、hook 名、样式变量名、代码统计数字，全部剔除。skill 会在其他项目、其他技术栈下被读取。

1. 骨架资源必须用真实产品截图 1:1 校验。没有截图就向用户索要，不要自行想象布局。

执行流程

按阶段推进，每阶段完成后按「验证」列自查再进入下一阶段。

阶段 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 行以内，引用均为一级