skill-forge-hub 1.1.0 → 1.2.0

package/one-pager/SKILL.md

@@ -1,17 +1,18 @@
 ---
 name: one-pager
-description: 把一个主题/一句话想法变成一页纸 HTML 海报（大标题 + 金句 + 要点块 + 页脚，纵向一屏排版、适合分享/打印/截图），并可用 ?shot 参数截出 PNG 图片。当用户请求一页纸、一张海报、one-pager、做张海报、一页介绍、金句海报时使用。
+description: 把一个主题/一句话想法变成一页纸 HTML 海报（大标题 + 金句 + 要点块 + 页脚，纵向一屏排版、适合分享/打印/截图），内置 32 套布局模板（现代主义/编辑出版/数据商务/艺术流派/国风雅韵/先锋实验/场景专用七组流派分类，含瑞士/包豪斯/蒙德里安/波普/欧普/新艺术/水墨/红金宫廷/青绿山水/酸性/故障/蒸汽波/赛博等设计史与先锋版式）× 25 套配色主题（含莫兰迪/北欧/装饰艺术/波普/经典蓝/酸性荧光/赛博霓虹等业内专业配色）随点随切，并可用 ?shot 参数截出 PNG 图片；用户说「专业设计/带我设计」时走七步专业设计引导（需求诊断→信息架构→版式→配色→字体→焦点→QA）并附设计说明。当用户请求一页纸、一张海报、one-pager、做张海报、一页介绍、金句海报时使用。
 allowed-tools: Bash, Read, Write
 disable-model-invocation: false
 ---
 
 # 一页纸海报（one-pager）
 
-一句话主题进 → 一屏海报出：内容提炼 → HTML 海报（纵向一屏、打印友好）→ 可选 PNG 截图。
+一句话主题进 → 一屏海报出：内容提炼 → HTML 海报（32 套布局 × 25 套主题可切换、纵向一屏、打印友好）→ 可选 PNG 截图。
 
 ## 生成流程
 
-0. **读用户配置**（THEME/DIR/OPEN_HTML/SHOT/ASPECT）→ 先 Read 同目录 `user-config.md`
+0. **读用户配置**（TEMPLATE/THEME/TPL_DIR/DIR/OPEN_HTML/SHOT/ASPECT）→ 先 Read 同目录 `user-config.md`
+0.5 **Pro 模式**（用户说「专业设计 / 带我设计 / 从零设计 / 从头到尾设计海报 / 走专业流程」时走七步引导，取代第 1 步的默认提炼草稿流程）→ 读 `resources/design-process.md`：需求诊断 Brief → 信息架构 Hierarchy → 版式决策 Layout（32 套按七组流派推荐）→ 配色方案 Color（25 套按行业×情绪推荐）→ 字体情绪 Type → 视觉焦点 Focal → 交付检查 QA；第 1 步必问（AskUserQuestion），第 2-6 步每步给推荐 + 理由、用户可确认/改选/说「你定」，七步结论确定后一次性生成海报并附四段式设计说明（设计定位/版式依据/配色依据/字体与细节）
 1. **内容提炼**（主题句 → 标题/金句/要点块，问清再动）→ 读 `resources/content.md`
 2. **生成 HTML**（先 Read reference.html 骨架替换数据）→ 读 `resources/generate.md` 与 `resources/html-rules.md` 两份
 2.5 **交付前自检**（硬门禁不可跳过）：HTML 文件写好后——
@@ -22,19 +23,28 @@ disable-model-invocation: false
 
 ## ⚙️ 配置与自定义
 
-**执行本 skill 前必须先 Read 同目录 `user-config.md`**：默认配置（THEME/DIR/OPEN_HTML/SHOT/ASPECT）都在该文件中，以它为准。升级技能时 user-config.md 不会被覆盖，你的修改永久保留；官方更新配置时另存 `user-config.md.upstream` 对照文件，可按需手动合并新配置点。
+**执行本 skill 前必须先 Read 同目录 `user-config.md`**：默认配置（TEMPLATE/THEME/TPL_DIR/DIR/OPEN_HTML/SHOT/ASPECT）都在该文件中，以它为准。升级技能时 user-config.md 不会被覆盖，你的修改永久保留；官方更新配置时另存 `user-config.upstream.md` 对照文件，可按需手动合并新配置点。
 
-- **THEME**：海报主题，tech 深蓝科技（默认）/ biz 浅色商务 / mono IDEA 黑亮 / light IDEA 白亮 / warm 温暖渐变；生成时写 `<html data-theme="THEME值">` 定默认，页面右下角换肤坞随点随换（localStorage 记忆，键按页内嵌唯一 ID 隔离、多份产物互不串台、改名/移动目录记忆不丢；生成时头部写 `<meta name="poster-id" content="<UUID>">`，每次 crypto.randomUUID() 生成标准 UUID v4（8-4-4-4-12 十六进制，禁止手写变体、禁止沿用占位与旧值）；落盘写文件前顺扫落盘目录下本技能命名的 html，读各文件 id meta 查重，撞号重掷至不重复）
+- **TEMPLATE**：海报布局模板，classic 经典舞台（默认，徽章+渐变巨字+三列要点卡）/ minimal 极简留白（瑞士平面，衬线巨字+编号竖排要点）/ magazine 杂志社论（刊头通栏线+左文右栏+首字下沉金句）/ hero 巨幕大字（电影海报式巨型关键词+底部要点横条）/ timeline 时间叙事（中央竖线+要点左右交替卡片）/ grid 卡片栅格（2×2 大圆角卡片+描边编号角标）/ dashboard 数据仪表（KPI 环形图+要点进度条）/ brutalist 新粗野（撞色块+4px 粗框+硬阴影）/ swiss 瑞士国际（红黑极简+网格对齐）/ bauhaus 包豪斯（圆方三角几何+三原色）/ mondrian 蒙德里安（黑粗线网格+红黄蓝色块）/ editorial 编辑刊（刊头双线+首字下沉+双栏）/ typo 大字报（巨型标题撑满+要点三列）/ memphis 孟菲斯（波点+撞色徽章+卡片微斜）/ exhibit 展览（展签卡片+硬影微斜）/ window 视窗（不对称 2:1 网格开窗）；newspaper 报纸新闻（报头双线+通栏标题+首字下沉+双栏）/ popart 波普艺术（网点底纹+描边大字+硬影卡片）/ opart 欧普艺术（放射纹+同心框视觉震荡）/ artnouveau 新艺术（拱形框+卷草饰线+慕夏气质）/ acid 酸性设计（液态金属 blob+斜切徽章）/ glitch 故障艺术（RGB 错位影+阶梯裁切）/ vaporwave 蒸汽波（落日渐变+透视地平线）/ cyber 赛博霓虹（切角框+霓虹辉光）/ academic 学术会议（横幅+三栏摘要+图表位）/ recruit 招聘（岗位巨字+标签+投递按钮）/ invitation 邀请函（烫金双线框）/ notice 通知公告（红头大字+正文缩进）/ inkwash 水墨（宣纸底+墨色远山+朱印落款）/ palace 红金宫廷（朱红底+回纹金边+衬线金字）/ landscape 青绿山水（层叠山峦+留白题跋）/ watermark 水印公文（斜置大字水印+居中正文）；生成时写 `<html data-template="TEMPLATE值">` 定默认，页面顶部模板坞三十二标签按七组流派分组随点随换（现代主义/编辑出版/数据商务/艺术流派/国风雅韵/先锋实验/场景专用）、与二十五主题正交组合出 800 种版式（localStorage 记忆，键按页内嵌唯一 ID 隔离、多份产物互不串台、改名/移动目录记忆不丢；生成时头部写 `<meta name="poster-id" content="<UUID>">`，每次 crypto.randomUUID() 生成标准 UUID v4（8-4-4-4-12 十六进制，禁止手写变体、禁止沿用占位与旧值）；落盘写文件前顺扫落盘目录下本技能命名的 html，读各文件 id meta 查重，撞号重掷至不重复）
+- **THEME**：海报主题，tech 深蓝科技（默认）/ biz 浅色商务 / mono IDEA 黑亮 / light IDEA 白亮 / warm 温暖渐变 / ink 水墨国风 / jade 翡翠绿 / rose 玫瑰金 / midnight 午夜金 / violet 霓虹紫 / swiss 瑞士红黑 / bauhaus 包豪斯三原色 / memphis 孟菲斯撞色 / morandi 莫兰迪 / nordic 北欧 / artdeco 装饰艺术 / noir 黑白电影 / classicblue 经典蓝 / pop 波普 / retro 复古胶片 / coral 珊瑚橙 / acid 酸性荧光 / cyber 赛博霓虹 / cream 奶油纸 / academic 学术蓝；生成时写 `<html data-theme="THEME值">` 定默认，页面右下角主题坞二十五色点 5×5 随点随换，把手常显「主题 · 当前主题名」、hover 色点浮签显示主题名（记忆与隔离机制同 TEMPLATE）
+- **TPL_DIR**：用户模板库目录，auto = 与海报库根目录平级的 `user-templates/`（DIR: auto 时 = 当前工作目录 `user-templates/`；DIR 写绝对路径如 `~/MyWork/posters` 时 = `~/MyWork/user-templates/`），所有海报产物共用这一处模板库，也可写绝对路径自定义；目录内的 *.html 模板文件生成海报时自动内嵌（格式见 `resources/user-template-example.html` 三段式注释约定），模板坞出现「我的模板」分组可随点随切；目录在技能目录之外，升级技能不覆盖
+- **DIR**：海报库根目录，auto = 当前工作目录 `posters/`（也可写绝对路径）；每张海报一个 slug 子目录——`<DIR>/<主题slug>/` 内 `poster.html` + `poster.md`（内容底稿）+ `poster.png`（SHOT 截图）三件套成组，互不混杂、整目录即一版海报，复制分享/清理删除都以目录为单位
 
 ## 配置版本机制（升级保护）
 
-本 skill 当前配置版本为 `1`（对应 user-config.md 中的 `CONFIG_VERSION`）。执行时若发现 user-config.md 的 CONFIG_VERSION 与本节声明不一致：
+本 skill 当前配置版本为 `4`（对应 user-config.md 中的 `CONFIG_VERSION`）。执行时若发现 user-config.md 的 CONFIG_VERSION 与本节声明不一致：
 
-1. 先将旧 user-config.md 备份为 `user-config.md.bak-<时间戳>`（同目录，绝不删除旧值）
+1. 先将旧 user-config.md 备份为 `user-config.bak-<时间戳>.md`（同目录，绝不删除旧值）
 2. 按本节「配置升级规则」迁移字段：新增字段补默认值、改名字段按映射改写、删除字段的值保留在备份中并在对话提示用户手动确认
 3. 更新 CONFIG_VERSION 为当前版本
 4. 对话中明确告知用户「检测到配置版本从 X 升级到 Y，旧配置已备份至 <路径>」
 
+迁移规则（v1 → v2）：新增 `TEMPLATE` 字段，默认 `classic`，其余字段不变。
+
+迁移规则（v2 → v3）：新增 `TPL_DIR` 字段，默认 `auto`，其余字段不变。
+
+迁移规则（v3 → v4）：TPL_DIR 的 auto 落点从 `~/.skillforge/user-templates` 改为与海报库根目录平级的 `user-templates/`；执行时若发现旧位置（~/.skillforge/user-templates）存在模板文件而新平级位置为空，自动把旧模板移入新位置并在对话中告知；用户已写绝对路径的不动。
+
 升级本 skill 时，配置结构如有变化必须同步更新本节的当前版本号与迁移说明；禁止在未声明版本变更的情况下静默修改配置语义。
 ## 文档同步自检纪律（维护者必读）
 
@@ -52,13 +62,15 @@ disable-model-invocation: false
 
 ## 产物升级（回炉）
 
-生成 HTML 时头部写版本戳 `<meta name="sf-template" content="one-pager@2">`（模板升级时递增 @N 并同步 reference.html 与本文档）。用户说「升级旧海报/回炉」时：扫落盘目录读版本戳筛旧版（无版本戳或缺少 `<meta name="poster-id">` 稳定 ID 的产物视为 v0 最旧版，一并进清单）→ 列清单（文件/旧版本）→ AskUserQuestion 选全部或部分 → 逐份升级：浅升级（仅 CSS/JS 变化）对旧页替换 `<style>` 块与交互脚本、正文原样保留；深升级（DOM 结构变化）从同目录 md 底稿按当前 reference.html 重建，先备份旧版 `.bak-时间戳`，重建必须沿用原页 poster-id meta 值（换 ID = 主题记忆失联）→ 报告三段式：✅ 已升级清单 / ⚠️ 手改保留说明 / 🟡 失败项原因。模板改动分级：业务改动、数据格式改动、页面改动任一发生即模板升级，版本戳 +1 并同步 reference.html 与本文档；纯措辞润色不 bump。每次生成 HTML 时顺扫落盘目录读版本戳：发现旧版产物主动告知用户「说『把我旧海报都升级成新样式』即可一键升级」。
+生成 HTML 时头部写版本戳 `<meta name="sf-template" content="one-pager@10">`（模板升级时递增 @N 并同步 reference.html 与本文档）。用户说「升级旧海报/回炉」时：顺扫海报库根目录（DIR 值）下两种形态——新子目录形态 `<slug>/poster.html` 与旧平铺形态 `poster-*.html`，读版本戳筛旧版（无版本戳或缺少 `<meta name="poster-id">` 稳定 ID 的产物视为 v0 最旧版，一并进清单）→ 列清单（文件/旧版本）→ AskUserQuestion 选全部或部分 → 逐份升级：浅升级（仅 CSS/JS 变化）对旧页替换 `<style>` 块与交互脚本、正文原样保留；深升级（DOM 结构变化）从同目录 md 底稿按当前 reference.html 重建，先备份旧版 `.bak-时间戳`，重建必须沿用原页 poster-id meta 值（换 ID = 模板/主题记忆失联）→ 报告三段式：✅ 已升级清单 / ⚠️ 手改保留说明 / 🟡 失败项原因。模板改动分级：业务改动、数据格式改动、页面改动任一发生即模板升级，版本戳 +1 并同步 reference.html 与本文档；纯措辞润色不 bump。每次生成 HTML 时顺扫落盘目录读版本戳：发现旧版产物主动告知用户「说『把我旧海报都升级成新样式』即可一键升级」。
 
 ## 规则速览
 
 - 一屏原则：海报纵向一屏展示（内容自适应缩放不滚动出第二屏）；要点块 3-5 条，每条 15-30 字，禁止长篇大论
 - 内容问清再动：主题句不够明确时先与用户确认标题/要点口径，不猜
+- 设计专属清爽底：无噪点/网格/星点/扫描线氛围层，背景只有纯色→细腻线性渐变（--bg 12% → --bg2 135%），设计感全靠版式与配色本身
 - 零侵权：系统字体栈、禁止 CDN/外链资源，页面离线双击可开；页脚署名固定 GENERATED BY AI TEAM
+- 三十二模板 × 二十五主题 = 800 种版式正交组合；模板管布局骨架、主题管配色变量，生成时按 TEMPLATE/THEME 配置定默认，用户可页面顶部模板坞（七组流派分组）与右下角主题坞随手切换，两坞默认折叠成胶囊把手不遮正文，点开选完自动收起
 - 落盘完成后对话必须报告落盘位置：完整路径清单（html + 可选 png），并注明 html 是否已在浏览器打开
 
 ---

package/one-pager/resources/design-process.md

@@ -0,0 +1,117 @@
+# 专业设计模式（Pro 七步引导）
+
+> 当用户说「专业设计 / 带我设计 / 从零设计 / 从头到尾设计海报 / 帮我设计一张海报 / 走专业流程」时启用。
+> 目标：像资深海报设计师一样，陪用户走完「需求诊断 → 设计决策 → 成品交付」全流程，每步给出专业依据，最终附设计说明。
+
+## 七步流程
+
+### 第 1 步 · 需求诊断（Brief）
+
+用 AskUserQuestion 一次问清四个维度（用户也可直接说「你定」，则按括号内默认走）：
+
+| 维度 | 选项示例 | 默认 |
+|:---|:---|:---|
+| 用途 | 活动宣传 / 品牌发布 / 内部通知 / 课程讲座 / 招聘 / 邀请 | 活动宣传 |
+| 受众 | 职场人 / 学生 / 客户 / 公众 / 专业人群 | 公众 |
+| 投放场景 | 朋友圈/群分享 / 打印张贴 / 大屏投影 / 网页头图 | 朋友圈分享 |
+| 尺寸比例 | 3:4 竖版（社交海报）/ 1:1 方版 / 16:9 横版（投影） | 3:4 |
+
+产出：一句话设计定位（如「面向职场人的 AI 主题活动宣传海报，社交传播，竖版」）。
+
+### 第 2 步 · 信息架构（Hierarchy）
+
+把内容按视觉重量排四级，一级只许一个：
+
+1. **主标题**（第一视觉，最大字号/最重字重/最前位置）
+2. **副标或金句**（第二视觉，承接标题、补足情绪）
+3. **要点块**（第三视觉，3-5 条事实信息）
+4. **页脚**（第四视觉，日期/地点/署名小字）
+
+产出：层级表（哪级放什么内容、各占画面多少视觉重量）。
+
+### 第 3 步 · 版式决策（Layout）
+
+从 28 套模板中按需求场景推荐 2-3 套并说明理由，用户选定或说「你定」：
+
+| 需求场景 | 推荐组 | 代表模板 |
+|:---|:---|:---|
+| 品牌/极简/高级感 | 现代主义 | classic / minimal / swiss / window |
+| 长文案/多要点 | 编辑出版 | magazine / editorial / typo / newspaper |
+| 数据/报告/会议 | 数据商务 | dashboard / grid / timeline / hero |
+| 艺术/展览/创意 | 艺术流派 | bauhaus / mondrian / memphis / exhibit / popart / opart / artnouveau |
+| 潮牌/青年/夜店/科技 | 先锋实验 | brutalist / acid / glitch / vaporwave / cyber |
+| 通知/招聘/邀请/学术 | 场景专用 | academic / recruit / invitation / notice |
+
+产出：选定模板 + 一句话版式依据（为什么这个骨架适配这个场景）。
+
+### 第 4 步 · 配色方案（Color）
+
+从 25 套主题中按「行业 × 情绪」推荐 2-3 套并说明理由：
+
+| 情绪/行业 | 推荐主题 |
+|:---|:---|
+| 科技/理性/未来 | tech / cyber / violet |
+| 商务/可信/正式 | biz / light / classicblue / academic |
+| 高端/奢华/质感 | midnight / artdeco / noir / cream |
+| 活力/年轻/促销 | pop / coral / retro / memphis |
+| 文艺/自然/温和 | morandi / nordic / jade / warm |
+| 国风/传统/节庆 | ink / rose |
+| 大胆/潮流/先锋 | acid / cyber / memphis / bauhaus |
+
+产出：选定主题 + 一句话配色依据（色相心理/行业惯例/对比度考量）。
+
+### 第 5 步 · 字体情绪（Type）
+
+系统字体栈内选型（零外链纪律不变），只调情绪不引入字体文件：
+
+| 情绪 | 字族方向 | 用法 |
+|:---|:---|:---|
+| 权威/经典/文艺 | 衬线（宋体/Georgia） | 标题用衬线加情绪，正文无衬线保可读 |
+| 现代/极简/科技 | 无衬线（黑体/Helvetica） | 全页无衬线，靠字重（700/900）分层级 |
+| 数据/代码/先锋 | 等宽（等宽字体栈） | 数字/标签/页脚用等宽制造机械感 |
+
+产出：标题/正文/页脚三段字族与字重分配方案（以 CSS 描述，实际由所选模板 + 主题令牌落地）。
+
+### 第 6 步 · 视觉焦点（Focal）
+
+确定画面唯一焦点与视觉动线：
+
+- **焦点**：主标题或一个图形元素，用「大小差 + 色彩差 + 位置」三招锁定（焦点元素占画面 1/3 以上视觉重量，色相与背景拉开对比）
+- **动线**：竖版走 Z 型（左上→右上→中下），横版走 F 型（左对齐扫读）
+- **留白**：焦点四周留呼吸区，密度区（要点块）远离焦点，形成节奏对比
+
+产出：一句话焦点描述（「视觉焦点锁定主标题，Z 型动线收束于底部要点」）。
+
+### 第 7 步 · 交付检查（QA）
+
+生成前对照清单自查，全部通过才落盘：
+
+- 一屏原则：纵向一屏不滚出第二屏
+- 层级分明：四级信息一眼可辨，焦点唯一
+- 对齐统一：同一轴线上的元素左右对齐，无随机偏移
+- 留白充分：页面四边留白 ≥ 内容的呼吸感，不顶边
+- 对比达标：正文与背景对比度足够（浅底深字/深底浅字）
+- 颜色克制：主色 + 辅色 + 中性色三色体系，无花哨堆色
+- 零侵权：系统字体栈、无外链资源、页脚署名 GENERATED BY AI TEAM
+
+## 设计说明（Design Rationale）输出规则
+
+海报生成后，对话中附四段式设计说明（每段 1-2 句，专业口吻）：
+
+1. **设计定位**：这张海报是谁给谁看、在什么场景、达成什么目标
+2. **版式依据**：为什么选这套模板（对应七步第 3 步的决策）
+3. **配色依据**：为什么选这套主题（对应七步第 4 步的决策）
+4. **字体与细节**：字族/字重/焦点/动线的关键设计点
+
+示例：
+
+> **设计定位**：面向职场人的 AI 主题活动宣传海报，社交传播、竖版。
+> **版式依据**：选用「经典舞台」，徽章 + 巨字 + 三列卡片结构主次分明，信息密度适中，适配社交分享的远观识别。
+> **配色依据**：选用「深蓝科技」，蓝 = 科技信任色，渐变标题增强画面纵深，与「AI」主题语义同频。
+> **字体与细节**：标题以 900 字重锁定视觉焦点，Z 型动线收束于底部要点，四周留白保证呼吸感。
+
+## 交互节奏
+
+- 第 1 步必须问（需求不明做不出专业决策）；第 2-6 步每步给推荐 + 理由，用户可确认、改选或说「你定」
+- 用户中途改主意（如「颜色换文艺一点」）→ 回到对应步骤重推，其他步骤结论保留
+- 全程不生成中间 HTML，七步结论确定后一次性生成最终海报 + 设计说明

package/one-pager/resources/generate.md

@@ -1,16 +1,28 @@
 # 生成 HTML（阶段 2）
 
-先 Read `resources/reference.html` 全文，以其为骨架模板逐处替换数据：
+## 用户模板内嵌（TPL_DIR 非空时，先于三处替换）
 
-1. **meta**：`sf-template` 版本戳保持当前模板版本；`poster-id` 换成新 UUID（crypto.randomUUID() 标准 v4，落盘前顺扫落盘目录下本技能命名的 html 读 id meta 查重，撞号重掷）
-2. **标题/金句/要点块/页脚注**：替换 `<h1>`、`.quote`、`.points` 内 li、`.footnote` 内容（要点块 3-5 条逐条 li）
-3. **`<title>`** 与海报标题一致
-4. 其余（CSS/JS/结构）一律不许动；样式参数解释与禁止项见 `resources/html-rules.md`
+读 user-config.md 的 `TPL_DIR`（auto = 与海报库根目录平级的 `user-templates/`：DIR: auto 时 = 当前工作目录 `user-templates/`，DIR 为绝对路径时 = 其父目录下的 `user-templates/`；也可写绝对路径）。若目录存在且有 *.html 文件，按 `resources/user-template-example.html` 三段式约定逐份解析，内嵌进 reference.html 副本四处：
+
+1. **TPL_CSS 块**（原样）：插到 CSS 内嵌点注释（`/* ▼ 用户模板 CSS 内嵌点`）**之前**
+2. **TPL_FN 块**（原样）：插到 FN 内嵌点注释（`/* ▼ 用户模板渲染函数内嵌点`）**之后**
+3. **模板坞**：在按钮内嵌点注释（`<!-- ▼ 用户模板按钮内嵌点`）**之后**插分组标 `<span class="tp-sep">我的模板</span>`（多份模板只插一次）+ 每份一个 `<button class="tp-btn" data-tpl="{name}" title="{label}">{label}</button>`
+4. **TPLS 数组**：数组末尾（`'notice'` 之后）追加 `,'{name}'`
+
+约束：name 必须唯一且不与官方 28 个（classic/minimal/swiss/window/magazine/editorial/typo/newspaper/dashboard/grid/timeline/hero/bauhaus/mondrian/memphis/exhibit/popart/opart/artnouveau/brutalist/acid/glitch/vaporwave/cyber/academic/recruit/invitation/notice）重名；缺区块/重名的文件跳过并在对话中提醒用户。TPL_DIR 不存在或无 html 文件则跳过本步。
+
+先 Read `resources/reference.html` 全文，以其为骨架模板，**只替换三处**，其余（CSS/JS/结构）一律不许动：
+
+1. **`<meta name="poster-id">`**：换成新 UUID（crypto.randomUUID() 标准 v4，落盘前顺扫落盘目录下本技能命名的 html 读 id meta 查重，撞号重掷）
+2. **`<title>`**：与海报标题一致
+3. **`<script>` 内 DATA 对象**：只改 `tag`（角标徽章文案，默认 "ONE PAGER"）/ `title`（标题）/ `quote`（金句）/ `points` 数组（要点块 3-5 条逐条 `{ t: "..." }`）/ `footnote`（页脚注，可空字符串）/ `kpi`（dashboard 模板的环形指标值，如 "82%"）六字段，其余 JS 一律不动
+
+样式参数解释与禁止项见 `resources/html-rules.md`。
 
 ## 落盘与截图
 
-- 文件名 `poster-<主题slug>.html`（英文 slug 化标题，如 poster-ai-work.html；DIR: auto 时落当前工作目录 posters/ 子目录，不存在则创建）
-- 同目录同时落 `poster-<主题slug>.md` 内容底稿（标题/金句/要点/页脚四要素纯文本，html 永远可从它重建——数据真相源）
+- 落盘组织一海报一目录：`<DIR>/<主题slug>/` 内三件套成组——`poster.html`（海报）+ `poster.md`（内容底稿：标题/金句/要点/页脚四要素纯文本，html 永远可从它重建——数据真相源）+ `poster.png`（SHOT 截图，与 html 同名）；DIR: auto = 当前工作目录 posters/（不存在则创建）
+- 旧版平铺产物（posters/poster-<slug>.html 等）保持原位不迁移；回炉升级扫描时两种形态（子目录 poster.html + 平铺 poster-*.html）都扫
 - OPEN_HTML: true 且落盘了 html 时自动打开浏览器（macOS：open <html文件>；Windows PowerShell：Start-Process <html文件>）
 - SHOT: true 时用 Chrome headless 截 PNG：`--headless --disable-gpu --no-sandbox --hide-scrollbars --user-data-dir=<临时目录> --screenshot=<png路径> --window-size=<宽>,<高> --virtual-time-budget=4000 "file:///<html路径>?shot"`（Windows 用 node url.pathToFileURL 生成 URL）；按 ASPECT 定窗口（3:4 → 900,1200；1:1 → 1000,1000；16:9 → 1600,900）；禁止用 `--headless=new`；Chrome 不存在换 Edge，都无则跳过并对话注明
 - **落盘完成后对话报告落盘位置**：完整路径清单（html + md + 可选 png），并注明 html 是否已在浏览器打开、截图是否跳过

package/one-pager/resources/html-rules.md

@@ -1,21 +1,66 @@
-> ⛔ **Reference 铁律（最高优先）**：本目录 `reference.html` 是定稿样式源码。生成 HTML 时必须先 Read `resources/reference.html` 与本文件两份，以 reference.html 为骨架模板逐处替换数据（标题/金句/要点 li/页脚注/poster-id UUID），本文件的描述是参数解释、变体规则与禁止项；两者冲突时**以 reference.html 为准**。修改本 skill 的 HTML 效果时，必须同步更新 `resources/reference.html` 与本文档的对应描述，禁止只改一处。
+> ⛔ **Reference 铁律（最高优先）**：本目录 `reference.html` 是定稿样式源码。生成 HTML 时必须先 Read `resources/reference.html` 与本文件两份，以 reference.html 为骨架模板只替换三处（poster-id UUID / `<title>` / DATA 对象六字段），本文件的描述是参数解释、变体规则与禁止项；两者冲突时**以 reference.html 为准**。修改本 skill 的 HTML 效果时，必须同步更新 `resources/reference.html` 与本文档的对应描述，禁止只改一处。
 
-# 海报 HTML 版式（一屏五主题 + 科技感背景层）
+# 海报 HTML 版式（一屏 · 32 模板 × 25 主题 · 双折叠切换坞）
 
 ## 版式总览
 
-- 一屏海报：`.stage` 纵向 flex 满视口（100svh）内排布标题区/金句区/要点区/页脚，内容多时自动缩放字号（JS 按内容高度收缩，禁止滚动出第二屏）；页面 body 不产生滚动条（overflow hidden）
-- 五主题：tech 深蓝科技（默认）/ biz 浅色商务 / mono IDEA 黑亮 / light IDEA 白亮 / warm 温暖渐变，色值与 daily-report 同一套 12 核心契约；`html[data-theme]` 运行时切换；右下角换肤坞五色点随点随换、localStorage 记忆（键 `poster:<ID>-theme`，ID = 页内嵌 poster-id meta，多份产物互不串台、改名/移动目录记忆不丢）；旧版三主题值不在五主题列表，启动时自动回落 tech
-- 科技感背景层四件套（与日报/周报同款）：SVG 微噪点（opacity .04，mono 退隐）+ 60px 网格底纹 + 星点（biz/light/warm 退隐 .28、mono 灰白化）+ 全屏扫描线与循环光带；内容版心 .stage-inner max-width 60%（与其它页面版心同宽）
-- 字体全用系统本地字体栈（system-ui + ui-monospace/'SF Mono'/Menlo/Consolas，品牌字体 PingFang/YaHei/apple-system 零出现），禁止 CDN、@import、外链 CSS/JS/图片/网络字体——页面离线双击可开
+- 一屏海报：`.stage` 容器满视口（100svh）内渲染当前模板，内容多时自动缩放字号（JS 按内容高度收缩，禁止滚动出第二屏）；页面 body 不产生滚动条（overflow hidden）
+- **模板管布局、主题管配色，正交组合 800 种版式**：`html[data-template]` 决定渲染哪套布局骨架（三十二选一），`html[data-theme]` 决定配色变量（二十五选一）；模板只描述结构与类名，颜色一律走主题令牌（先锋实验组与国风雅韵组风格本体色除外：glitch RGB 错位影、acid 液态金属 blob、vaporwave 透视地平线、inkwash/palace/landscape 全套国风色（宣纸/墨/朱砂/红金/青绿）用固定色相，不影响十三令牌其余部分）
+- 二十五主题：tech 深蓝科技（默认）/ biz 浅色商务 / mono IDEA 黑亮 / light IDEA 白亮 / warm 温暖渐变 / ink 水墨国风 / jade 翡翠绿 / rose 玫瑰金 / midnight 午夜金 / violet 霓虹紫 / swiss 瑞士红黑 / bauhaus 包豪斯三原色 / memphis 孟菲斯撞色 / morandi 莫兰迪 / nordic 北欧 / artdeco 装饰艺术 / noir 黑白电影 / classicblue 经典蓝 / pop 波普 / retro 复古胶片 / coral 珊瑚橙 / acid 酸性荧光 / cyber 赛博霓虹 / cream 奶油纸 / academic 学术蓝；色值走 13 核心契约变量（--bg/--bg2/--panel/--panel-solid/--text/--muted/--accent/--accent2/--border/--glow/--glow-soft/--title-grad/--tag-bg）；右下角主题坞二十五色点（5×5 网格、色点 18px）随点随换，默认折叠成胶囊把手（色点 + 「主题 · 当前主题名」），hover 色点弹出主题名浮签（.th-tip），点开选完自动收起
+- 三十二模板七组流派（顶部模板坞三十二标签随点随换，分组标：现代主义/编辑出版/数据商务/艺术流派/国风雅韵/先锋实验/场景专用；双坞默认折叠成胶囊把手不遮主体，点把手展开、选中后自动收起，把手实时显示当前模板名/主题名）：
+  1. **classic 经典舞台**：徽章 + 渐变巨字 + 装饰分隔线 + 金句 + 三列要点卡（圆点渐变球）
+  2. **minimal 极简留白**：瑞士平面风，左上小标 + 衬线巨字（Georgia/'Songti SC'）+ 细线 + 编号竖排要点 + 底栏 meta
+  3. **magazine 杂志社论**：刊头通栏线（masthead + ISSUE 01）+ 左标题金句右要点分栏 + 金句首字下沉 + 底栏
+  4. **hero 巨幕大字**：电影海报式巨型关键词（up to 140px 渐变大字）+ 金句 + 底部要点横条三列 + 绝对定位页脚
+  5. **timeline 时间叙事**：中央竖线（渐变）+ 节点圆点 + 要点卡片左右交替
+  6. **grid 卡片栅格**：标题区（左标题右金句）+ 2×2 大圆角卡片（描边编号角标 + 渐变顶条，第 5 条卡片横跨整行）
+  7. **dashboard 数据仪表**：左 KPI 环形图（conic-gradient，百分比随 DATA.kpi）+ 要点进度条，右标题金句 + 编号补充要点
+  8. **brutalist 新粗野**：撞色块（标题反色底）+ 4px 粗框 + 8px 硬阴影 + 零圆角 + 要点横排色块
+  9. **swiss 瑞士国际**：红黑极简 + 巨型无衬线标题 + 通栏细线 + 网格对齐
+  10. **bauhaus 包豪斯**：圆/方/三角几何元素 + 三原色 + 编号要点
+  11. **mondrian 蒙德里安**：8px 黑粗线网格 + 左主区/右侧色块/底部横条 + 红黄蓝色块填充
+  12. **editorial 编辑刊**：刊头通栏双线 + 首字下沉衬线标题 + 左右双栏 + 双线底栏
+  13. **typo 大字报**：巨型标题（clamp 60-128px）撑满 + 底部要点三列 + 顶底页脚
+  14. **memphis 孟菲斯**：波点底纹 + 撞色徽章 + 卡片微斜错落
+  15. **exhibit 展览**：竖排展签标签 + 斜体年份 + 展签卡片（3px 粗框 + 10px 硬影微斜）
+  16. **window 视窗**：不对称 2:1 网格 + 左大主区 + 右上色块开窗 + 右下黑框开窗
+  17. **newspaper 报纸新闻**：报头 mast 双线 + 通栏 headline + 双栏正文（column-rule 分隔）+ 首字下沉
+  18. **popart 波普艺术**：网点底纹（radial-gradient 16px）+ 描边巨字（text-stroke + 硬影）+ 卡片粗黑硬影
+  19. **opart 欧普艺术**：放射纹（repeating-conic-gradient）+ 同心框（box-shadow 叠环）+ 视觉震荡感
+  20. **artnouveau 新艺术**：慕夏拱形框（圆角顶部）+ 卷草饰线 + 细框装饰
+  21. **acid 酸性设计**：液态金属 blob（conic-gradient 曲面）+ 斜切徽章（skewX -12deg）
+  22. **glitch 故障艺术**：标题 RGB 错位影（#f0f/#0ff clip-path 分层）+ 要点阶梯裁切（clip-path polygon）
+  23. **vaporwave 蒸汽波**：落日渐变（粉紫地平线）+ 透视网格（perspective rotateX 58deg）
+  24. **cyber 赛博霓虹**：切角框（clip-path 八边形）+ 霓虹辉光（text-shadow 辉光）
+  25. **academic 学术会议**：会议横幅 + 三栏摘要（ABSTRACT/KEY FINDINGS/CONCLUSION）+ 虚线图表位
+  26. **recruit 招聘**：岗位巨字 + 职位标签 chips + 投递 CTA 按钮
+  27. **invitation 邀请函**：烫金双线框（border + outline offset 6px）+ 居中排印
+  28. **notice 通知公告**：红头大字（letter-spacing 拉开）+ 正文首行缩进（text-indent 2em）
+  29. **inkwash 水墨**：宣纸底（特许固定色）+ 墨色远山（椭圆层叠）+ 红日 + 朱印落款
+  30. **palace 红金宫廷**：朱红底（特许固定色）+ 回纹金边双线框 + 衬线金字 + 鎏金分隔
+  31. **landscape 青绿山水**：留白底 + 四层 clip-path 山峦（青绿渐深）+ 题跋落款（特许固定色）
+  32. **watermark 水印公文**：斜置大字背景水印（accent 低透明度）+ 居中公文正文（颜色走令牌）
+- 模板/主题记忆：localStorage 键 `poster:<ID>-tpl` / `poster:<ID>-theme`，ID = 页内嵌 poster-id meta，多份产物互不串台、改名/移动目录记忆不丢；旧版主题值不在二十五主题列表，启动时自动回落 tech；模板值非法自动回落 classic
+- 设计专属清爽底：无噪点/网格/星点/扫描线氛围层（设计产物靠版式与配色本身说话），body 背景只有纯色→细腻线性渐变 `linear-gradient(180deg,var(--bg) 12%,var(--bg2) 135%)`；模板内允许自带的装饰性纹理（如 memphis 波点、swiss 色块）不算氛围层
+- 字体全用系统本地字体栈（system-ui + Georgia/'Songti SC'/'SimSun' 衬线（minimal/magazine/editorial 标题用）+ ui-monospace/'SF Mono'/Menlo/Consolas（编号用），品牌字体 PingFang/YaHei/apple-system 零出现），禁止 CDN、@import、外链 CSS/JS/图片/网络字体——页面离线双击可开
 - 多文件隔离（必植）：头部写 `<meta name="poster-id" content="<UUID>">`（crypto.randomUUID() 标准 UUID v4）；localStorage 键一律 `poster:<ID>-xxx`，禁止裸通用键名；页面 JS 启动时校验 id meta——非法或缺失（占位残留/手写变体/误沿用旧值）时按路径键（`'sf-heal:' + location.pathname`）自愈为 crypto.randomUUID() 标准 v4 并回写 meta，console.warn 显性报警；路径键持久化保证同文件跨打开稳定复用；合法 UUID 原样放行
-- 版本戳：`<meta name="sf-template" content="one-pager@2">`（模板升级递增 @N）
-- 视觉层次：大标题 40-56px 渐变字（linear-gradient 背景裁切文字）+ 装饰分隔线（渐变短横线）；金句区斜体 18-22px + 左右引号装饰；要点块 3-5 条各带序号圆点（渐变球）+ 每条一行短句；页脚 10px muted
-- 入场动画：标题/金句/要点错峰上浮淡入；fill-mode 必须用 backwards 严禁 both；IntersectionObserver + 2s 兜底 setTimeout 强制全显（headless 截图 / 打印预览环境内容不得永久隐藏）
-- ?shot 截图模式：页面 JS 检测 location.search 含 shot 时给 html 挂 data-shot 属性（CSS 关闭入场动画直接终态，headless 虚拟时间下动画帧不推进会停在初始帧导致截图空白）、强制全部内容 opacity 1、隐藏换肤坞，body padding 归零，输出纯海报画面
+- 版本戳：`<meta name="sf-template" content="one-pager@10">`（模板升级递增 @N）
+- 入场动画：各模板元素带 `.anim` 错峰上浮淡入（JS 按序设 animation-delay）；fill-mode 必须用 both（backwards 会在动画结束后闪回隐藏态）；2s 兜底 setTimeout 强制全显（headless 截图 / 打印预览环境内容不得永久隐藏）
+- ?shot 截图模式：页面 JS 检测 location.search 含 shot 时给 html 挂 data-shot 属性（CSS 关闭入场动画直接终态，headless 虚拟时间下动画帧不推进会停在初始帧导致截图空白）、强制全部内容 opacity 1、隐藏模板坞与主题坞，输出纯海报画面
 - 页脚署名固定 GENERATED BY AI TEAM（禁止真实团队名/项目名）
 
 ## 内容规则
 
 - 要点块 3-5 条：每条 15-30 字，动词开头；超过 5 条合并取舍，不足 3 条向用户再要
 - 金句 12-30 字；标题 6-14 字；超长自动截断提示用户改短
+- dashboard 模板的 `kpi` 字段写百分比数值字符串（如 "82%"，控制环形图填充与中心数值）；非 dashboard 模板该字段可留默认
+
+## 用户模板内嵌（TPL_DIR，设计专属扩展）
+
+- 用户模板库目录由 user-config.md 的 `TPL_DIR` 指定（auto = `~/.skillforge/user-templates`，Windows 下 `%USERPROFILE%\.skillforge\user-templates`）；目录在技能目录之外，升级技能不覆盖
+- 模板文件为 *.html 片段包，三段式注释约定（示例见 `resources/user-template-example.html`）：
+  1. `<!--TPL_META-->` 块：`name:` 英文 slug（唯一，禁止与官方 16 个重名）+ `label:` 中文显示名（≤5 字）
+  2. `<!--TPL_CSS_BEGIN/END-->` 块：样式，选择器一律 `.tpl-{name}` 开头，颜色只准用 13 主题令牌，禁止写死色值
+  3. `<!--TPL_FN_BEGIN/END-->` 块：`TPL['{name}'] = function(){ return '...' }`，可复用 esc()/N(i)/F/DATA
+- 生成海报时逐份内嵌进 reference.html 副本四处：CSS 块 → CSS 内嵌点注释前；FN 块 → FN 内嵌点注释后；「我的模板」分组标（多份只插一次）+ 按钮 → 按钮内嵌点注释后；name → TPLS 数组末尾（'watermark' 之后）
+- 约束：name 重名或缺区块的文件跳过并在对话提醒；TPL_DIR 不存在或无 html 文件则跳过内嵌，直接进入三处替换