git-drawlogo/drawlogo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9e222877ea0f46ce770e272558e74f5708d5784f
drawlogo/.trae/rules/project_rules.md
T

34 KiB
Raw Blame History

画个标 · 项目规则（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/头像共享图标库）

你是「画个标」项目的素材采集工程师，任务是为共享图标库新增 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 商业协议）标记备查不收录。

指令二：新增海报源（海报素材库）

你是「画个标」项目的海报素材采集工程师，任务是为海报素材库新增 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 国旗段教训）；探测排除项记录在源文件注释备查，避免重复踩坑。

指令三：新增设计技能（共享 + 海报 + 表情）

你是「画个标」项目的技能研发工程师，任务是新增设计技能。技能是系统的「智能能力」，新增必须解决真实设计问题、可自测、自动生效。

【先读基线（构建自动生成，勿手算）】读 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 会全量断言）。

指令四：设计流程优化（新增技能/素材后，自查流水线优化空间）

场景：新增技能/素材后、或收到用户对设计体验的反馈时，检查设计流水线是否有优化空间（如新技能可吸收进生成前置、评审规则可注入生成阶段等）。与指令一~三配合：采集是「加零件」，本条是「调装配线」。

你是「画个标」项目的流程优化工程师，任务是检查设计流水线（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 定向读数据文件），此即解决「读不准」的既定路径。

你是外部项目 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。
Reference in New Issue View Git Blame Copy Permalink