# Create Project Designer

> 为一个前端项目生成专属的 `<项目>-frontend-design` 设计规范 skill：从源码反向提炼设计令牌 （间距、字号、色板、尺寸档位）、归纳页面骨架与交互流程，产出可脱离项目独立运行的规范文档与页面骨架资源。 当用户要求生成/新建前端设计规范 skill、沉淀项目排版交互规范、 或提出「给这个项目做一个 xxx-frontend-design」时使用。

- Skill: `tencentblueking/create-project-designer` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add tencentblueking/create-project-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tencentblueking/create-project-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tencentblueking (https://skillmd.com/u/tencentblueking)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tencentblueking/create-project-designer

---


# 生成项目设计规范 Skill

## 产物定义

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

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

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

## 三条铁律

1. **所有数值必须回源码取**。禁止凭截图估算、禁止凭经验发明。取不到就标注为待确认，不要填一个看起来合理的值。
2. **产物中不出现任何项目内部标识**。文件路径、组件名、CSS
   class、hook 名、样式变量名、代码统计数字，全部剔除。skill 会在其他项目、其他技术栈下被读取。
3. **骨架资源必须用真实产品截图 1:1 校验**。没有截图就向用户索要，不要自行想象布局。

## 执行流程

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

| 阶段 | 动作                             | 验证                                 |
| ---- | -------------------------------- | ------------------------------------ |
| 1    | 探查源码，定位五类信息源         | 五类都已找到，或明确记录缺失项       |
| 2    | 提取真实数值，归纳收敛规律       | 每个数值都能指回一处源码             |
| 3    | 归纳页面骨架与交互流程           | 每个现有页面都能归入某一骨架，无遗漏 |
| 4    | 去项目化转译并写文档             | 全文检索无项目标识残留               |
| 5    | 生成骨架资源（若项目有全局框架） | 浏览器截图与真实截图逐项一致         |
| 6    | 终检                             | 走完本文件末尾的自检清单             |

阶段 1–2 的具体手法见 [extract.md](extract.md)。阶段 3–4 的转译规则与文档范式见
[write.md](write.md)。阶段 5 的骨架生成与校验见 [skeleton.md](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 行以内，引用均为一级