feat: 初始化画个标仓库 - AI驱动设计系统(BYOK模式) - 224源/371504图标+25海报源+130技能

This commit is contained in:
sgp
2026-10-03 21:44:18 +08:00
commit 9e222877ea
497 changed files with 43611 additions and 0 deletions
+288
View File
@@ -0,0 +1,288 @@
# 画个标 · 项目规则(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。
```