289 lines
34 KiB
Markdown
289 lines
34 KiB
Markdown
# 画个标 · 项目规则（Trae Rules）
|
||
|
||
> 本文档 = 项目完整说明 + 操作规范，覆盖四套工作区（LOGO / 头像 / 海报 / 动态表情）、两套资源库、三套技能库与全量质检流程。素材或技能变更后按「版本号联动」与「验证流程」执行。
|
||
|
||
## 一、整体架构（四工作区 · 三资源体系）
|
||
|
||
纯前端静态应用（HTML/CSS/原生 JS，零依赖，无构建流程），直接静态服务器托管；智能设计为 **AI 驱动**（DeepSeek API）：AI 输出设计决策 JSON，系统负责渲染与导出，**禁止**以模板随机组合作为主流程；AI 失败自动降级为内置引擎，保证页面不空白。
|
||
|
||
### 1. 工作区与页面清单
|
||
> 各库规模数字为最近快照，构建素材/技能后以 `js/data/manifest/BASELINE.md`（脚本自动生成）为准，无需手动维护本表数字。
|
||
|
||
| 工作区 | 入口 | 资源库 | 技能库 |
|
||
|---|---|---|---|
|
||
| LOGO 设计 | index.html | 共享图标库（icon-sources.js，222 源 / 370,268 图标） | 共享技能（54 个） |
|
||
| 头像设计 | avatar.html | 复用共享图标库（**无独立素材源**，avatarGen.js 扩充素材池） | 共享技能（54 个，自动停用字体类） |
|
||
| 海报设计 | poster.html | 海报素材库（poster-sources.js，24 源 / 1581 素材） | 共享技能（54）+ 海报技能（64） |
|
||
| 动态表情 | emoji.html | 复用共享图标库（底图 = 头像/类头像图形，emojiGen.js 动画化） | 表情技能（sticker-skills，12 个，motion/emotion） |
|
||
|
||
配套页面：素材库 materials.html（行式列表预览 LOGO/头像/海报素材，搜索 + 「查看更多」展开）；素材中心 sources.html（图标）/ poster-sources.html（海报）；技能中心 skills.html（共享）/ poster-skills.html（海报）；表情技能在 emoji.html 预览弹窗自动全跑（追加即生效）；审计页 audit-pixels.html（图标像素）/ audit-posters.html（海报像素）/ audit-emojis.html（表情逐帧）/ audit-render.html（通用渲染，已挂表情审计）。工作区通过 `window.HGB_WORKSPACE`（logo/avatar/poster/emoji）切换隔离。
|
||
|
||
### 5. 可读出口（manifest，供外部项目/AI 直接读取）
|
||
- 纯前端懒加载 + 单行大索引（builtin-icons.js 等）对「外部读取」不友好（单行 2.4MB 一读就撞截断）。因此构建脚本输出**机器可读 JSON manifest** 作为对外出口，位置 `js/data/manifest/`：`icons.json`（build-icons.js 生成）/ `posters.json`（build-posters.js 生成）/ `skills.json`（`node scripts/build-skill-manifest.js` 生成，shared + poster + sticker 三技能库元数据，含 step/kind/workspaces）+ `README.md`（AI 读取指南：目录结构 / id 规范 / 数据文件位置 / 字段说明）
|
||
- **读取约定**：外部项目或 AI 复用本库时，先读 `js/data/manifest/README.md` → 对应 manifest（有哪些源/数量/协议/数据文件路径）→ 按 manifest 的 `file` 字段定向读 `js/data/sources/{id}.js`（`window['HGB_Source_{id}'] = {icons:[...]}`）或 `js/data/posters/{id}.js`，勿直接读单行大索引
|
||
- **前端页面同源**：sources.html / poster-sources.html 优先 fetch manifest（带 `?v=`），fetch 失败自动回退内置配置（window.HGB_IconSources / HGB_PosterSources）；skills 页面直接读技能 API（HGB_Skills，与 manifest 同源）
|
||
|
||
### 2. LOGO 图标资源库（js/data/icon-sources.js，222 源 / 370,268 图标）
|
||
- **type 三分类**：`icon` 单色 163 / `emoji` 多色 27 / `brand` 品牌 32（每个源、每个图标必带 type）
|
||
- **拉取方式**：`format: 'iconify'` 199 个（@iconify-json 集合，`scaleMode: 'body'` 坐标归一化到 24）/ `dir-files` 12（npm 目录枚举）/ `gh-files` 6（GitHub 直拉）/ sprite 3 / nodes 1 / remix-files 1
|
||
- **产物**：js/data/builtin-icons.js（轻量索引，`const HGB_BuiltinIcons` 为全局词法绑定、**非 window 属性**，须 typeof 探测）+ js/data/sources/{id}.js 按源懒加载（统一 `window['HGB_Source_{id}'] =` 赋值，**id 含连字符必须方括号**）+ js/data/sources/dicebear-{style}.js（29 风格头像，`window['HGB_Dicebear_xxx']`）
|
||
- 图标 ID 规范：内置库「源:名称」（lucide:graduation-cap）；行业图标裸 id
|
||
- 品牌名回退顺序：设计面板品牌名 → 顶栏项目名 → 行业默认名
|
||
|
||
### 3. 头像资源体系（复用图标库，无独立素材源）
|
||
- avatarGen.js 的 generateAvatars：先按风格 + 布局白名单（AVATAR_LAYOUTS，仅纯图形 Mark + avatarOnly 布局 fullbleed/concentric/centroid）生成基础方案，再按行业图标 id 拆分英文词根从共享图标库模糊匹配扩充素材池
|
||
- 头像 vs LOGO 差异：布局白名单互斥（头像排除 monogram/ribbon 文字布局；LOGO 全局布局池排除 avatarOnly）
|
||
- 导出走 exporter.js exportAvatarPngs：微信 300 / QQ 640 / 抖音 400 / YouTube 800 / App 1024 / Favicon 64 + 自定义 + 圆形裁切 circleCropCanvas
|
||
|
||
### 4. 海报素材资源库（js/data/poster-sources.js，24 源 / 1581 素材）
|
||
- **type 8 分类**：palette 5 / font 12 / bg 3 / decoration 4（illustration / template / mockup / photo 暂无合规静态源，继续观测）
|
||
- **拉取方式**：`format: 'gh-files'` 11（GitHub 直拉）/ `format: 'dir-files'` 13（npm 目录枚举：字体 woff2 / 配色 JSON）
|
||
- **产物**：js/data/poster-builtin.js（轻量索引，window.HGB_PosterBuiltin，每源含 count）+ js/data/posters/{id}.js（`window['HGB_PosterSource_{id}'] = {items:[...]}`）+ js/data/posters/{id}/files/（位图/字体二进制按 file 引用直读）
|
||
- palette 数据形态：.json 内联为 item.data（数组或扁平对象均可，冒烟 `typeof it.data === 'object'`）；font 分类固定 `cat='font'`（避免名称误命中场景词表）
|
||
- 素材 id = 「源:相对路径」；**海报技能 8 类**：layout/color/typography/grid/hierarchy/print/creative/ai（各 8 个）
|
||
|
||
### 6. 动态表情模块（emoji.html，复用图标库，无独立素材源）
|
||
- **核心交互**：`generateEmojiSet`（行业/图标 → 一张静态底图）→ `expandAnimations`（**同图 × 全部动画类型** = 一组表情包）；AI 编排决策插入首位变体；AI 失败自动降级内置池
|
||
- **动画引擎 HGB_Motion**：`ANIMS` 注册表（11 种：bounce/pulse/wiggle/float/spin/fade/twirl/heartbeat/shake/breath/hopspin）；`apply(el,t,p)` 帧函数返回 {tx,ty,rot,s,opacity} + `elementT` 元素级分层错峰 + `normalize` 补参；**预览 rAF 与导出逐帧采样共用同一套 apply**（预览 = 导出）
|
||
- **表情技能库 HGB_StickerSkills**（js/sticker-skills/，12 个，分类 motion/emotion）：预览弹窗自动全跑 motion 类技能（追加即生效）
|
||
- **导出**：GIF89a 手写编码器（零依赖，LCT 255 色 + LZW）+ WebM + PNG；尺寸 240/320/512
|
||
- **AI 编排 HGB_EmojiAI**：`suggest` → 结构化决策 JSON（布局/风格/动画参数）→ `validate` 白名单修正，非法参数回退默认值；无 HGB_AI/无 Key/异常静默降级
|
||
|
||
## 二、设计体系（技能库）
|
||
|
||
### 1. 共享技能库（js/skills/，54 个，7 类）
|
||
- 架构：js/skills/core.js（HGB_Skills 注册表核心 + utils + 5 步流程 API）+ 7 分类文件（layout/color/typography/icon/ai/presentation/export），index.html 按 core→layout→color→typography→icon→ai→presentation→export 顺序加载；skills.html 动态渲染 `HGB_Skills.all()`，追加即自动生效
|
||
- 分布：layout 10 / color 9 / typography 8 / icon 8 / export 8 / ai 6 / presentation 5
|
||
- **流程组织**（core.js DESIGN_STEPS，用户视角的「设计流水线」）：① 品牌洞察 5 → ② 方案生成 11 → ③ 方案评审 26 → ④ 迭代优化 1 → ⑤ 交付导出 11；`kind` 分布 check 28 / gen 17 / deliver 9；auditPlan 按 REVIEW_RUNNERS 适配器跑 26 项评审
|
||
- 头像模式自动停用字体类（typography 分类 + slogan-gen）并重渲染技能区
|
||
|
||
### 2. 海报技能库（js/poster-skills/，64 个，8 类 × 8）
|
||
- 架构：core.js（HGB_PosterSkills 注册表，workspaces 统一 ['poster']）+ skills.js（全部技能定义）；通用技能复用 HGB_Skills，海报专属技能收本库
|
||
- 分类与分布：layout/color/typography/grid/hierarchy/print/creative/ai 各 8 个
|
||
- 技能标准字段：`id / name / category / emoji / scene / summary / params / source / run / test`（run 纯函数；test 自跑供技能中心「测试运行」）
|
||
|
||
### 3. 表情技能库（js/sticker-skills/，12 个，分类 motion/emotion）
|
||
- 架构：core.js（HGB_StickerSkills 注册表，DEFAULT_WORKSPACES 统一 ['emoji']）+ skills.js（全部技能定义，纯函数）
|
||
- 分类与分布：motion 11 / emotion 1（节奏/物理/循环/克制/情绪传达/风格匹配/体积/平台/分层协调/幅度/缓动 + 情绪-动画映射）
|
||
- 生效路径：注册即自动进 manifest（build-skill-manifest.js 已并入）+ emoji.html 预览弹窗自动全跑 motion 类技能 + audit-emojis.html 审计
|
||
|
||
## 三、素材与技能拓展流程
|
||
|
||
> 任何素材/技能构建完成后，运行 `node scripts/build-baseline.js` 自动更新 `js/data/manifest/BASELINE.md`（基线快照），指令一~四即读最新基线。
|
||
|
||
### 新增图标源（LOGO 库 → icon-sources.js）
|
||
1. 末尾追加源配置对象，**必须**带：唯一 `id`、`name`（英文）、`nameCn`（中文）、`desc`（中文一句话风格）、`type`（icon/emoji/brand）、`license` + `licenseNote`（中文）、`home`、`github`、`added`、`coordText`、`variants`
|
||
2. 拉取方式：
|
||
- Iconify 集合：`npm: '@iconify-json/<id>'`、`format: 'iconify'`、`scaleMode: 'body'`（坐标各异自动归一化到 24）
|
||
- npm 目录枚举：`format: 'dir-files'`、`dirs: [...]`、可选 `weightSuffix`（子集后缀）/ `skipNameRe`（跳过命名不合规）/ `wrapOpen/wrapClose`（坐标系非 0 起点 `<g transform>` 包装）
|
||
- GitHub 直拉：`format: 'gh-files'`、`gh: 'owner/repo'`、`ghBranch`、`dirs: [...]`；品牌 Logo viewBox 各异用 `scaleMode: 'wrap'`（逐图标 viewBox 归一化）
|
||
3. 新源入库前必须确认「viewBox 坐标系 + 子集命名」四件套（scale / weightSuffix / skipNameRe / wrap），并抽查含连字符 id 数据文件可 eval
|
||
4. 许可证过滤：排除 `BY-SA / BY-NC / BY-ND / GPL / -NC-`；接受 MIT / Apache-2.0 / ISC / CC BY 4.0 / OFL 等
|
||
5. 运行 `node scripts/build-icons.js`（构建 + 增量缓存 + 批次下载质量校验）→ bump 版本号
|
||
|
||
### 新增海报源（海报库 → poster-sources.js）
|
||
1. 末尾追加源配置对象（结构同 icon-sources 追加 `workspaces: ['poster']`，type 8 分类之一）
|
||
2. 拉取方式：gh-files（GitHub 直拉）或 dir-files（npm 目录枚举，ext 过滤 .svg/.json/.woff2 等）；`.json` 自动内联 data，font 固定 cat='font'
|
||
3. 许可证过滤同上；超大源用 `maxItems` 限量、`exclude` 正则（匹配完整路径）剔除近重复变体
|
||
4. 运行 `node scripts/build-posters.js` → bump 版本号
|
||
5. 常见排除项：运行时生成器（无静态 SVG，如 svgwave/inkjet）、主题色存于扩展仓库（dracula/rose-pine）、jsDelivr 未索引（mrmrs/patterns）、重复源（与既有源同字体/同集合）
|
||
|
||
### 新增设计技能
|
||
1. 共享技能：编辑 `js/skills/{分类}.js`，在 `HGB_Skills.register([...])` 数组末尾追加技能对象；分类 7 类（见上）
|
||
2. 海报技能：编辑 `js/poster-skills/skills.js`，追加到 register 数组末尾；分类 8 类（见上）
|
||
3. 表情技能：编辑 `js/sticker-skills/skills.js`，追加到 register 数组末尾；分类 motion/emotion（见上）
|
||
4. 字段与约束：标准 10 字段；`run(args)` 纯函数返回结果；`test()` 必须能自跑；若用工具需自行 `const U = HGB_Skills.utils;`
|
||
5. 追加即自动生效，无需改页面（技能中心动态渲染；表情技能自动进 manifest + emoji.html 预览弹窗自动全跑）
|
||
|
||
## 四、版本号联动（缓存 busting）
|
||
|
||
素材/技能变更后，同步 bump 版本号（格式 `YYYYMMDD` + 后缀），否则浏览器强缓存旧文件导致「改了没生效/整页崩溃」：
|
||
- **LOGO 线**：`js/core/iconlib.js` 的 `VERSION`（控制懒加载 sources/{id}.js?v=）+ `js/core/dicebear.js` 的 `VERSION`（dicebear 文件变更时）+ index.html/sources.html/skills.html 中 `builtin-icons.js?v=` 与相关 `?v=`
|
||
- **海报线**：`js/core/posterlib.js` 的 `VERSION` + poster.html/poster-sources.html/poster-skills.html/audit-posters.html 中 `poster-builtin.js?v=` 与相关 `?v=`
|
||
- **表情线**：`js/core/motion.js` / `emojiGen.js` / `emojiAi.js` / `gifEncoder.js` / `js/sticker-skills/*.js` 变更 → emoji.html / audit-emojis.html 中相关 `?v=` 同步（无集中 VERSION，逐文件带参）
|
||
- 验证时强制刷新（Ctrl+F5）或带查询参数（如 `?x=N` 递增绕过磁盘缓存）
|
||
|
||
## 五、验证流程
|
||
|
||
### 1. 构建端批次质量校验（两构建脚本均自动执行）
|
||
- **数量完整性**：对比官方索引数与最终内置数，通过率 = 内置/官方，**< 80% 判异常**（下载损坏/文件缺失/过滤过度），构建结束输出「🔍 批次下载质量校验」汇总报告并列出异常源
|
||
- **分辨率校验**：统计原始数据非法 viewBox（≤0 / 非有限 / 超 1e5），构建兜底归一化
|
||
- **格式校验**：剔除空 body / 无几何 / 悬空引用（url(#id) 无定义），剔除数与通过率一并报告
|
||
- **内容级像素校验**（构建端自动化，仅本次实际下载源）：bodyBBox 仿射矩阵计算内容 bbox，检测「内容不在视口内」与「面积过小」两类渲染空白风险；疑似空白占比 ≥ 5% 判异常；须配合浏览器像素审计最终确认
|
||
- **海报特有**：sha256 字节 + 格式魔数 + 分辨率参数 + SVG 内容校验；palette/font 内联与分类抽查
|
||
|
||
### 2. 浏览器像素级质量测试（每批次下载完成后）
|
||
- 图标：audit-pixels.html（支持 `?only=源1,源2&max=N` 定向），canvas 渲染逐图标检测非透明像素，空白图标 = 渲染故障须归零
|
||
- 海报：audit-posters.html（font/transform 源跳过像素渲染，走构建端校验），空白 0 / 失败 0 为通过
|
||
- 表情：audit-emojis.html（逐帧渲染：每帧非透明像素 > 0 无空白帧 + 帧间确有变化 + GIF 头校验），空白 0 / 静态 0 为通过；audit-render.html 已 iframe 挂表情审计
|
||
- 浏览器访问 http://localhost:55501 强制刷新，确认素材/技能中心无 JS 报错
|
||
|
||
### 3. Node 无头验证
|
||
- `node --check js/skills/*.js`、`node --check js/poster-skills/skills.js` 与 `node --check js/sticker-skills/skills.js`（语法校验）
|
||
- Node `vm` 冒烟测试：拼接 core + 数据文件 + 技能文件，逐个跑 `HGB_Skills.test(id)` / `HGB_PosterSkills.test(id)` / `HGB_StickerSkills.test(id)` 确认 0 失败；技能总数/分类白名单/每类下限断言；素材三方对账（配置 ↔ 索引 ↔ 按源数据文件）+ 全库 id 无重复
|
||
- 表情专项冒烟：`node scripts/emoji-smoke.js`（motion 帧函数/确定性、gifEncoder LZW、emojiGen 产物、emojiAi 降级、sticker-skills test 0 失败）
|
||
- 注意：Node 无头环境缺浏览器全局（HGB_AI/HGB_Industries/document 等）属环境分级容错，不计失败；顶层 `const HGB_*` 不挂 sandbox，需方括号取 window['...'] 或拼接进同一 vm 作用域
|
||
|
||
## 六、安全提醒
|
||
- **不内置任何 API Key**：`js/core/ai.js` 的 `DEFAULT_KEY` 恒为空串；使用者在「🤖 AI 设置」填写自己的 DeepSeek Key，仅存本机 localStorage、仅发给 api.deepseek.com（BYOK 模式，站点侧读不到）
|
||
- 源码 / 仓库 / 部署产物中不得出现任何 Key；推 Gitea 或上线前先 `grep -rn "sk-" .` 自查
|
||
|
||
## 七、教训
|
||
- 浏览器强缓存旧 JS：验证修改时必须强制刷新（Ctrl+F5）或带查询参数访问
|
||
- 构建脚本解析 sprite 时只剥离已知库前缀（lucide-/feather-/tabler-），避免误截断图标名
|
||
- 用户核心诉求是「AI 智能化设计」，不是模板组合或传统拖拽编辑
|
||
- SVG path 缩放禁止 toFixed() 固定小数位（0 → 0.00 非法语法），必须去尾零；弧命令 flags（0/1）不得缩放
|
||
- 新增源后检查「id 含连字符」数据文件（`window['HGB_Source_xxx']` 方括号）能否 eval；来源按钮中文名靠索引 nameCn 自动生效，无需维护 SOURCE_CN
|
||
- 新增技能必须提供 run/test；技能类 API 改动必须给 js/skills/*.js 加 ?v= 版本参数
|
||
- 海报重复源教训：同一字体/集合先查既有源（如 Playfair Display = fontsource-playfair），避免重复收录
|
||
|
||
## 八、AI 指令库（可复用 Prompt，直接复制发给 AI 执行）
|
||
|
||
> 用途：持续扩充系统能力。五条指令各司其职、可独立下发：**指令一~三** 对应三条采集管线（图标源 / 海报源 / 设计技能，技能含共享/海报/表情三库），互相独立、各自完整闭环（探测→构建→版本联动→验证→收口更新基线），**可分开跑、分开收口**；**指令四** 在新增技能/素材后自查设计流水线优化空间（含表情动画/编排管线）；**指令五发给「外部项目」的 AI 使用**（调取本库能力，只读）。共性铁律：**价值门槛**（拒同质堆量）+ **去重/协议合规**（防污染）+ **构建质量校验**（≥80% 通过率）+ **版本联动**（防缓存失效）+ **双端验证**（Node 无头 + 浏览器像素）。所有指令的基线一律读 `js/data/manifest/BASELINE.md`（构建后 `node scripts/build-baseline.js` 自动更新），指令文本本身无需维护任何数字。
|
||
|
||
### 指令一：新增图标源（LOGO/头像共享图标库）
|
||
|
||
```text
|
||
你是「画个标」项目的素材采集工程师，任务是为共享图标库新增 1 个合规、高质量、不重复的图标源，并完成构建、版本联动与质检闭环。
|
||
|
||
【先读基线（构建自动生成，勿手算）】读 js/data/manifest/BASELINE.md ① 图标库节：当前源数/分类/总数。权威清单 js/data/icon-sources.js（末尾追加源配置）。构建 scripts/build-icons.js（@cfg hash 增量缓存）。去重以 icon-sources.js 现有 id 为准。产物约定：builtin-icons.js 索引（const HGB_BuiltinIcons 非 window 属性）+ js/data/sources/{id}.js（统一 window['HGB_Source_{id}'] 方括号赋值，id 含连字符必须方括号）+ dicebear-{style}.js。
|
||
|
||
【硬性门槛，任一不过即放弃】
|
||
1. 价值门槛：新源须带来新覆盖（新主题/新风格/新品牌），与既有源同质重复的排除；先 Grep 查 id 是否已收录。
|
||
2. 协议合规：排除 BY-SA/BY-NC/BY-ND/GPL/商业自定义条款；接受 MIT/Apache-2.0/ISC/CC BY 4.0/OFL/CC0/Unlicense/BSD/MPL。
|
||
3. 可拉取性：jsDelivr 对 >50MB 大仓库 403（cncf/artwork 等）；scoped npm 包 unpkg 元数据 302 需跟随；raw.githubusercontent 证书问题用 rejectUnauthorized:false 探测，下载走 jsDelivr CDN。
|
||
|
||
【执行步骤】
|
||
1. 探测：优先 Iconify collections.json 未收录集合；其次 npm 目录（unpkg `目录/?meta` 枚举 + 单文件 head 取样）；再次 GitHub（data.jsdelivr.com 枚举文件树）。国产 UI 框架优先 npm 包（semi-icons 成功，arco/vant/nutui 无 SVG 弃）。
|
||
2. 确定「viewBox 坐标系 + 子集命名」四件套：scale（非 24 坐标数值比例，如 512→24）；weightSuffix（子集是否自带后缀，Phosphor fill 文件自带 -fill 需剥除）；skipNameRe（正则滤命名不合规如纯数字）；wrapOpen/wrapClose（坐标系非 0 起点用 <g transform> 包装，勿改 path 坐标）。品牌 Logo 逐图标 viewBox 各异用 format:'gh-files' + scaleMode:'wrap'。
|
||
3. 配置：在 icon-sources.js 末尾追加对象，必带 id(唯一)/type/name/nameCn/desc(中文)/style/license/licenseNote(中文)/home/github/npm/format/urls/dirs/scale/weightSuffix/skipNameRe/wrapOpen/wrapClose/coordText/variants/added；海报也用才加 workspaces:['poster']。图标级 type 由构建脚本注入，无需手写。
|
||
4. 构建：node scripts/build-icons.js，确认批次质量校验通过率 ≥80%、无「内容不在视口/面积过小」空白风险源。
|
||
5. 版本联动：bump js/core/iconlib.js VERSION（如 20260823b）→ index.html/sources.html/skills.html 全部 ?v= 同步；dicebear 文件变更才 bump dicebear.js VERSION。
|
||
6. 验证：Node eval 数据文件（含连字符 id 方括号、无 .00 残留、索引三方对账）；浏览器 http://localhost:55501 强制刷新，audit-pixels.html?only=新源 像素审计空白 0；sources.html 来源按钮中文名自动生效（索引 nameCn）。
|
||
7. 收口：node scripts/build-baseline.js 更新基线，确认新增源在 BASELINE.md ① 图标库节就位（源数/总数/type 分布变化），本轮独立收口完成；如需留痕可 git 提交本次改动。
|
||
|
||
【坑位提醒】禁止 toFixed() 缩放 path（0→0.00 非法语法，用去尾零）；弧命令 flags 不得缩放；id 重复录入会导致构建覆盖数据混淆（carbon 教训）；licence 存疑源（如 prime 商业协议）标记备查不收录。
|
||
```
|
||
|
||
### 指令二：新增海报源（海报素材库）
|
||
|
||
```text
|
||
你是「画个标」项目的海报素材采集工程师，任务是为海报素材库新增 1 个合规、高质量、不重复的海报素材源（palette/font/bg/decoration 优先，illustration/template/mockup/photo 暂无合规静态源需继续观测）。
|
||
|
||
【先读基线（构建自动生成，勿手算）】读 js/data/manifest/BASELINE.md ② 海报素材库节：当前源数/分类/总数。权威清单 js/data/poster-sources.js（末尾追加源配置，type 8 分类）。构建 scripts/build-posters.js（BUILD_REV='2'）。去重以 poster-sources.js 现有 id 为准。产物约定：poster-builtin.js（window.HGB_PosterBuiltin，每源 count）+ js/data/posters/{id}.js（window['HGB_PosterSource_{id}']）+ {id}/files/ 位图/字体二进制直读。
|
||
|
||
【硬性门槛，任一不过即放弃】
|
||
1. 价值门槛：与既有源同字体/同集合/同配色重复的排除（先查：Playfair Display 与 fontsource-playfair 重复教训）；主题色存于扩展仓库（dracula/rose-pine）、jsDelivr 未索引（mrmrs/patterns）、运行时生成器（svgwave/inkjet，无静态 SVG 违反静态素材铁律）一律排除。
|
||
2. 协议合规：同图标源（排除 BY-SA/BY-NC/BY-ND/GPL）。
|
||
3. 可拉取性：jsDelivr 超 50MB 拒绝索引（403）不可用（fxemoji/noto-emoji/Montserrat 教训）；仓库仅 .glyphs/UFO 源文件无成品字体不可用。
|
||
|
||
【执行步骤】
|
||
1. 探测：gh-files 走 data.jsdelivr.com 枚举文件树 + cdn.jsdelivr.net/gh/ 下载；dir-files 走 npm 目录枚举（ext 过滤 .svg/.json/.woff2 等）。
|
||
2. 分类：确定 type 8 分类之一；palette 数据 .json 内联为 item.data（数组/扁平对象均可）；font 固定 cat='font' 避免名称误命中场景词表。
|
||
3. 配置：poster-sources.js 末尾追加，必带 id(唯一)/type/name/nameCn/desc(中文)/license/licenseNote(中文)/home/github/format/gh+ghBranch+dirs 或 npm+dirs+ext/scaleMode/coordText/variants/added/workspaces:['poster']；超大源用 maxItems 限量、exclude 正则（匹配完整路径）剔除近重复变体。
|
||
4. 构建：node scripts/build-posters.js，确认 sha256/格式魔数/分辨率/数量 ≥80% 全部通过。
|
||
5. 版本联动：bump js/core/posterlib.js VERSION → poster.html/poster-sources.html/poster-skills.html/audit-posters.html 全部 ?v= 同步。
|
||
6. 验证：Node 审计（内联与分类抽查）+ 浏览器强制刷新 audit-posters.html（font/transform 源跳过像素渲染，空白 0/失败 0）+ poster-sources.html console 零报错。
|
||
7. 收口：node scripts/build-baseline.js 更新基线，确认新增源在 BASELINE.md ② 海报素材库节就位（源数/总数/分类变化），本轮独立收口完成；如需留痕可 git 提交本次改动。
|
||
|
||
【坑位提醒】先 Grep 查重复源再录入；exclude 正则锚定完整路径（twemoji 国旗段教训）；探测排除项记录在源文件注释备查，避免重复踩坑。
|
||
```
|
||
|
||
### 指令三：新增设计技能（共享 + 海报 + 表情）
|
||
|
||
```text
|
||
你是「画个标」项目的技能研发工程师，任务是新增设计技能。技能是系统的「智能能力」，新增必须解决真实设计问题、可自测、自动生效。
|
||
|
||
【先读基线（构建自动生成，勿手算）】读 js/data/manifest/BASELINE.md ③ 技能库节：共享/海报/表情技能数、分类分布、四区覆盖（头像向最少则本批优先补头像；表情向看表情技能分类分布）。去重：Grep 技能 id，共享/海报/表情三库不得互相重复。
|
||
|
||
【硬性门槛，任一不过即重写】
|
||
1. 标准 10 字段：id/name/category/emoji/scene/summary/params/source/run/test；可选 workspaces（不标=四区通用，typography 类不含头像）。
|
||
2. 四区覆盖：每批至少 1 个头像向技能（workspaces 含 'avatar' 或 scene 明确头像场景）与至少 1 个表情向技能（category ∈ motion/emotion 或 scene 明确表情/动画场景）；头像纯图形无文字（typography/slogan-gen 自动停用）；表情技能纯函数勿依赖浏览器全局。
|
||
3. run 纯函数返回 {ok/tip/...}，无浏览器全局依赖；test 必须能自跑断言。
|
||
4. 共享技能补 core.js 的 SKILL_STEPS（未映射默认步骤 2）；海报技能 workspaces 统一 ['poster']；表情技能 workspaces 统一 ['emoji']（sticker-skills core.js DEFAULT_WORKSPACES）。
|
||
|
||
【执行与验证】
|
||
1. 注册：共享技能追加到 js/skills/{分类}.js 的 register 数组末尾；海报技能追加到 js/poster-skills/skills.js register 末尾；表情技能追加到 js/sticker-skills/skills.js register 末尾。
|
||
2. 冒烟：node --check 各文件；vm 拼接 core+数据依赖逐个跑 test 0 失败；表情技能跑 node scripts/emoji-smoke.js；断言分类白名单与四区均衡（头像 ≥ LOGO 60%）。
|
||
3. 版本联动：bump 改动技能文件 ?v=（core 改动必须 bump）→ 相关页面同步（表情线见「四、版本号联动」）。
|
||
4. 浏览器验证：强制刷新，技能中心有新卡、🔬测试通过、console 零报错；avatar.html 无 typography 泄漏；emoji.html 预览弹窗自动全跑新增表情技能。
|
||
5. 收口：node scripts/build-skill-manifest.js 更新 skills.json（含 sticker 分支）→ node scripts/build-baseline.js 更新基线，确认技能数在 BASELINE.md ③ 技能库节就位（三库总数/分类分布/覆盖变化），本轮独立收口完成；如需留痕可 git 提交本次改动。
|
||
|
||
【坑位提醒】用 HGB_Skills.utils 自行声明 U；忘了 ?v= 会被缓存整页崩；头像技能勿依赖文字；只服务部分工作区的共享技能必须显式标 workspaces；表情技能 test 须自跑（audit-emojis.html 会全量断言）。
|
||
```
|
||
|
||
### 指令四：设计流程优化（新增技能/素材后，自查流水线优化空间）
|
||
|
||
> 场景：新增技能/素材后、或收到用户对设计体验的反馈时，检查设计流水线是否有优化空间（如新技能可吸收进生成前置、评审规则可注入生成阶段等）。与指令一~三配合：采集是「加零件」，本条是「调装配线」。
|
||
|
||
```text
|
||
你是「画个标」项目的流程优化工程师，任务是检查设计流水线（DESIGN_STEPS 五步 + SKILL_STEPS 映射 + auditPlan 评审 + AI prompt 编排 + 表情动画/编排管线）是否有可落地的优化空间，并实施、验证、回归。
|
||
|
||
【先读基线】读 js/data/manifest/BASELINE.md ③ 技能库节 + 读 js/skills/core.js（DESIGN_STEPS / SKILL_STEPS / REVIEW_RUNNERS / workspacesOf）、js/poster-skills/core.js 与 js/core/motion.js + emojiGen.js + emojiAi.js（表情 ANIMS 注册表 / expandAnimations / AI 编排），了解当前流水线组织。
|
||
|
||
【找优化空间（从这些入口自查）】
|
||
1. 新技能吸收：最近新增的 gen/check 技能，是否只挂在「评审」步骤而未进入「方案生成」前置？若技能能在生成阶段前置约束（先审后生成），应调整 AI prompt 编排或 SKILL_STEPS。表情锚点：motion.js 新动画类型注册进 ANIMS 即被 expandAnimations 自动展开（生成前置，无需再接线）。
|
||
2. 评审闭环：auditPlan 跑的评审项与「迭代优化」步骤是否闭环——评审发现的失败高频项是否有对应优化（生成侧规避 or 评审侧新增检查）？表情锚点：emoji.html renderStickerAudit 自动全跑 motion 类技能（追加即生效）；emojiAi 动画决策已注入生成前置。
|
||
3. 用户反馈：评审分数低/风格雷同/速度慢等反馈，是否有流程层根因（prompt 编排、步骤顺序、降级路径）？表情锚点：AI 编排降级率 / 表情技能检查通过率 / GIF 导出体积与耗时。
|
||
4. 工作区过滤：头像自动停用字体类等 workspacesOf/forWorkspace 规则是否随新技能正确收编。表情锚点：HGB_StickerSkills.workspacesOf 统一 ['emoji']，勿让表情技能漏进其他工作区。
|
||
5. 版本与验证：新增技能/素材是否都走「版本联动 + 冒烟 + 浏览器验证」闭环。表情锚点：emoji-smoke.js + audit-emojis.html + 浏览器实测。
|
||
|
||
【硬性门槛，任一不过即不改】
|
||
1. 不破坏架构铁律：AI 输出结构化设计决策 JSON + 系统负责渲染/导出；AI 失败自动降级内置引擎；禁止改为模板随机组合。
|
||
2. 可验证：任何流程改动必须通过 Node vm 冒烟（HGB_Skills.test / HGB_PosterSkills.test / HGB_StickerSkills.test 0 失败）+ 浏览器真实走一遍设计流程（index/avatar/poster/emoji 四工作区各一）。
|
||
3. 兼容：不改坏既有技能注册 API（run/test 签名、utils、REVIEW_RUNNERS 适配器归一化）与动画 API（HGB_Motion.apply/elementT 签名，预览=导出一致）。
|
||
4. 变更即 bump：改动 core.js/分类文件/动画文件/ai prompt 相关文件 → 对应 ?v= 全部同步（表情线逐文件带参），否则浏览器缓存旧文件整页崩。
|
||
|
||
【执行步骤】
|
||
1. 分析并写出一句话结论：优化点是什么、解决什么问题、怎么验证。
|
||
2. 改动 js/skills/core.js（SKILL_STEPS/DESIGN_STEPS/REVIEW_RUNNERS/prompt 编排）、js/poster-skills/ 或 js/core/motion.js + emojiGen.js + emojiAi.js；纯 prompt 优化则改 ai 相关文件。
|
||
3. 冒烟：node --check 改动文件；vm 拼接 core+依赖逐个跑 test 0 失败；断言流程步骤计数/分类白名单不变或按预期变化。
|
||
4. 版本联动：bump 改动文件 ?v= → 相关页面同步。
|
||
5. 浏览器验证：四工作区各真实生成一次，确认流程走通、评审项计数正确、console 零报错。
|
||
|
||
【坑位提醒】「先审后生成」类优化只动 prompt 编排不动技能本体；流程步骤变化会改变技能中心区块计数，验证时核对；表情动画优化必须保持预览与导出逐帧采样用同一套 apply（预览 = 导出）；优化失败回滚只 revert 本次改动文件（技能注册表与素材互不牵连，风险隔离）。
|
||
```
|
||
|
||
### 指令五：跨项目调取本库能力（发给外部项目 AI 使用）
|
||
|
||
> 当别的项目要「调取画个标的能力」时，把下面整段发给那个项目的 AI。只读复用，禁止修改画个标代码。入口永远走 manifest（先读 README → manifest → 按 file 定向读数据文件），此即解决「读不准」的既定路径。
|
||
|
||
```text
|
||
你是外部项目 AI，需要调取「画个标」设计系统的素材库与技能库能力（只读复用，禁止修改画个标代码）。
|
||
|
||
【定位方式（二选一，自行判断可用性）】
|
||
- 本地路径：d:\SGP_KF\DrawLogo\（本机 git 仓库，直接读文件）
|
||
- HTTP 部署：{baseUrl}/js/data/manifest/...（如 http://localhost:55501）
|
||
|
||
【读取步骤（顺序固定，勿跳步）】
|
||
1. 先读 js/data/manifest/README.md —— 目录结构 / id 规范 / 字段说明 / 数据形态
|
||
2. 再读目标 manifest（纯 JSON，分行可读，含每个源的协议/数量/数据文件路径；数量一律以 manifest 实际值为准，勿依赖记忆数字）：
|
||
- icons.json —— 共享图标库（type: icon 单色 / emoji 多色 / brand 品牌；dicebear 字段含头像风格）
|
||
- posters.json —— 海报素材库（type: palette/font/bg/decoration…）
|
||
- skills.json —— 技能库（shared + poster + sticker；含 step 流水线步骤 / kind 性质 / workspaces 工作区）
|
||
3. 按 manifest 里 source 的 file 字段定向读数据文件（勿猜路径）：
|
||
- js/data/sources/{id}.js → window['HGB_Source_{id}'] = { icons: [{ id, name, categoryCn, svg, type }] }
|
||
- js/data/posters/{id}.js → window['HGB_PosterSource_{id}'] = { items: [...] }
|
||
- 二进制（字体/位图）→ js/data/posters/{id}/files/ 按 file 引用直读
|
||
|
||
【数据使用规则】
|
||
- 图标 svg 是归一化到 24 viewBox 的 body 片段：单色 icon 渲染套 <svg viewBox="0 0 24 24" fill="currentColor">；emoji/brand 多色保留原样
|
||
- 图标 id 规范：内置库「源:名称」（lucide:graduation-cap）；行业图标裸 id
|
||
- 技能：元数据（scene/summary/params/source）可直接当设计知识/评审规则；run/test 是函数实现，如需执行须加载 js/skills/*.js（含数据依赖）后调用 HGB_Skills.run(id, args)
|
||
- 协议合规：BY-SA/BY-NC/BY-ND/GPL 源不可商用；引用素材须标注来源与协议
|
||
- 图标筛选质量规则：按 name 匹配用「词边界 + 意象白名单」而非子串（否则混入 door-open/baguette 等噪音）；排除 -off/-alert/-error/-forbidden 等负面变体；做 LOGO/品牌用途时避开品牌标志图形（instagram/mickey 等专有图形，有商标风险）
|
||
|
||
【反模式（禁止）】
|
||
- 勿读单行大索引 builtin-icons.js / poster-builtin.js（单行 2.4MB，读不动）——manifest 已含全部所需元信息
|
||
- 勿 eval 数据文件（它是 window 赋值，需作为 JS 加载后取 window['HGB_Source_xxx'] 或正则提取对象）
|
||
- 勿猜文件名——一切以 manifest 的 file 字段为准
|
||
- 勿整读大文件：sources/{id}.js 单个几百 KB~数 MB，超过 ~200KB 应用脚本/正则采样提取目标图标（如 Node vm 加载后按 id 取），勿用 Read 整读进上下文
|
||
- 勿在画个标仓库里写代码/加素材；产出（设计稿/脚本）放外部项目或临时目录（如 _design-test/），不写进画个标源码树（扩库请回画个标项目，按其「AI 指令库 指令一~三」执行闭环）
|
||
|
||
【能力边界】
|
||
- 能：参考素材风格/配色、复用技能设计方法与评审规则、按协议引用图标/字体
|
||
- 不能：调用 DeepSeek AI 设计接口（Key 内置于画个标前端，外部不可复用）；不能跨项目执行画个标渲染/导出管线（纯前端，需在其页面内运行）
|
||
|
||
【最小示例】从 icons.json 找 nameCn 含「学校」的源 → 读其 file 指向的数据文件 → 在 icons 里用 name 词边界匹配 education/grad/graduation（或按 categoryCn 过滤）→ 取 graduation-cap 的 svg → 包 <svg viewBox="0 0 24 24"> 渲染。注意：图标级 name/categoryCn 在数据文件里，不在 manifest。
|
||
```
|