Text to PNG Card Caster

ljg-card：铸

内容进去，PNG 出来。生成图负责把思想变成可见动作，HTML 负责把话说准确；-f 只设计原文的呈现，不改动原文，也不生成新图。

-l、-w 承担知识讲解时，还要接通「具体情形 → 判别依据 → 有条件的关系 → 具体结果」。读者应能从正文里的动作或状态看出对象凭什么属于某个概念，再用关系推出眼前的结果；只把例子放在术语旁边，连接仍然缺失。先确定目标读者要完成什么判断，再决定材料和画面；下上结构不规定版面上下，也不要求每张卡从故事开头。文学、叙事与审美表达按自身目的组织，不强加习题。

成品在内容自身的结论、问题或余韵处结束，之后只留署名与来源。不要追加「阅读边界」、免责声明、制作说明或验收说明，也不要换个标题保留这类尾注。会改变理解的原文条件、分歧与限制，就近融入相应论证；提炼范围、材料缺口和验证状态放在交付回复中。-f 原稿已有的段落仍按全文保真合同保留。

参数

未给参数时使用 -l。

必读顺序

-l、-c、-w 每次执行都必须依次 Read：

1. references/taste.md
2. references/image-generation.md
3. 当前 mode 文件
4. 当前 HTML 模板

不得跳过共享图像协议直接写提示词，也不得把一种 mode 的图像语法套给另一种。

-l、-w 用于知识讲解时，在第 3 步后、读取模板前补读 references/learning-design.md：其中包含读者任务、下上连接、来源边界、换案检验，以及四组失败与修复对照。-f 不进入这条路线。

-f 依次 Read：

1. references/taste.md
2. references/mode-full.md
3. assets/full_template.html

-f 不生成新图；只有原稿自带图片时才补读 references/image-generation.md 的资产身份、来源保真与本地落盘合同。

-f 字体优先级

-f 的所有编辑性文字优先使用本机已安装的 KingHwa_OldSong，包括 title、headline、章节标题、正文、强调、图注、表头与署名，从而保持整张长卡的字体气质统一。浏览器检测不到时，正文回退到 Songti SC、STSong、Noto Serif CJK SC 与 serif，标题类文字回退到 PingFang SC、Hiragino Sans GB、Microsoft YaHei 与系统 sans。不得为了制卡联网下载、临时安装或远程引用该字体。code、pre 与来源行保留等宽字体，因为字符对齐在这些位置承担语义。

-f 长文阅读面

-f 通常产生超长卡片，因此使用独立于 -l 的白底黑字阅读面：画布固定为纯白 #FFFFFF，普通正文使用深中性黑 #171717，辅助信息只用克制的中性灰。1080px 成品的普通正文不小于 40px，行高保持 1.9，正文有效宽度约 896px；段距默认 36px，章节间距明显大于段落间距。列表与引用同为 40px/1.9，表格 34px，脚注与代码块 32px，图注 30px。以约 390px 手机显示宽度复查，正文约等效 14.4px；允许长图增高，不为压缩高度缩字。不得把暖纸底、小号网页正文、过紧行距或大面积彩色模块带入 -f。

全局临时目录约束

无论从哪个目录启动，制卡前都必须在 /tmp 下建立本任务独占的临时目录。生成图候选稿、用于组版的源图、HTML、CSS、矢量草稿、渲染输入、截图草稿、QA 切片、缓存与日志等所有中间产物，全部只能写入该目录。

只有用户明确要求交付的最终文件可以写入 /tmp 之外。候选 PNG 和未通过验收的渲染结果仍属于中间产物。完成前检查当前目录和仓库没有遗留中间文件，最终交付物验收后清理本任务的临时目录。

共同生产线

1. 读取 URL、粘贴文本或本地文件，确认标题、作者、来源与事实边界。
2. -f 锁定来源、建立有序原文块账本，直接进入 references/mode-full.md；不经过提炼、视觉母题或图片生成。
3. -l、-w 的知识讲解先按 references/learning-design.md 明确读者任务，整理具体情形、判别依据、关系、结果与适用条件。进入版式前，实际草稿应把对象、动作或状态、条件怎样通向结果写出来；源文缺少的材料记入制作记录，交付时简报。-l、-c 随后建立视觉母题表；-w 先把此次输入保存为精确来源快照，再运行 assets/prepare-whiteboard-source.ts 建立逐段来源清单，让论证账本覆盖这份独立清单，并同时检查论证承重与学习承重，才决定哪些步骤需要视觉化。不能从一句摘要直接进入版式。-w 的生成图预算为 0–4 幅。
4. -c 调用当前环境的 image generation 工具，先生成一张代表图校准语义与系列风格；-l、-w 的资产预算大于 0 时才做同样校准，0 幅是合法结果。
5. 将图片保存为本地 PNG/JPG，逐一核对文件、尺寸、构图、无字与来源属性。
6. 将所有可读文字、数字、公式、标签、箭头和来源放入 HTML/CSS；图片承担具体场景、机制动作、条件对比或明确标明的类比。画面有具体物件，不自动说明它提供了可用于判别的下层材料。
7. 读取对应模板，替换全部占位符。-l、-c 的顶部图槽无图时必须显式设为 data-state="empty"；有图时必须提供本地路径和语义化 alt。-w 没有顶部图槽：把最终论证账本写入 {{LOGIC_LEDGER_JSON}}，每幅生成图只在对应步骤内部出现，并用 data-source-claim 回指该步骤 ID。
8. 截图前等待字体与全部图片加载成功；任一图片损坏就停止。
9. 交付前检查整图；长图再用重叠切片覆盖全部高度。
10. 知识讲解另做内容审阅：关键概念有可用的判别依据，关系与实例对应，换案能暴露条件差异。来源与渲染检查、内容审阅、读者实测在交付回复中分别报告，不排进卡片；提供试用题不能证明读者已经学会。

-l、-c、-w 已判定为必要的关键生成图失败时最多做两次定向重生。仍失败就说明阻断原因，不得改用远程占位图、伪图标或矢量图悄悄兜底；不能把失败图悄悄改写成「本来就不需要图」。

输入与命名

• URL：用当前可用的网页读取工具获取正文，并保存明确来源。
• 粘贴文本：直接使用，不补写原文没有的事实。
• 文件路径：Read 本地文件。
• {name}：从标题或核心判断提取，中文可保留，去标点，最多 20 个字符。

截图工具

从 skill 根目录运行：

bun assets/capture.ts <html> <png> <width> <height> [fullpage]

-w 截图前必须先从精确来源快照生成独立清单，并把二者一起交给截图门禁：

bun assets/prepare-whiteboard-source.ts /tmp/<task>/source.txt /tmp/<task>/whiteboard-source-inventory.json
bun assets/capture.ts <html> <png> 1080 1600 fullpage /tmp/<task>/whiteboard-source-inventory.json /tmp/<task>/source.txt

来源清单必须直接由本次输入生成，不能由论证账本反推；否则账本漏掉的段落也会一起消失，完整性校验失去意义。

依赖缺失时：

bun install
bunx playwright install chromium

截图脚本会等待字体与本地图片。不要绕过它的加载门禁。

Footer

• -l、-f、-c、-w：左侧保留 logo + 李继刚；右侧用 {{SOURCE_LINE}} 写明确来源，没有来源则替换为空字符串。
• logo 是既有品牌位图，不属于生成图，也不能拿来充当测试外的内容插图。

mode 路由

Gotchas

• 「具体例子 + 抽象结论」仍可能难读。概念连接看正文是否写出同一情形的归类依据与结果变化；不能以例子、术语或验收字段都出现了代替内容审阅。用户反馈难懂时，重建这条连接，再调整措辞；对照见 references/learning-design.md。
• -l 的识别度来自「极简单线气质 + 漫画式可见变化 + 编辑式证据结构」。只做一张漂亮单幅会丢掉讲解，只做连续漫画会压过长文；具体路由以 references/mode-long.md 为准。
• -f 的强调只能提升原稿中已经存在的字句：可以改变字号、字重、颜色、留白与语义标签，不能抽出一句再复制成金句，不能补写标题、导语、小结或过渡句。
• -f 的全文验收看有序文本块账本，不看肉眼印象。改单字、调序、漏块或重复块都必须让 assets/verify-full-text.ts 失败。
• -f 不能因为 KingHwa_OldSong 缺失而阻断，也不能悄悄改用远程字体；缺失时由本地默认字体栈自然接管。安装时则应在截图前分别确认普通正文、title 与 headline 都实际解析到 KingHwa_OldSong，不能只看 CSS 声明。代码与来源行的等宽字体是唯一例外。
• -f 的白底黑字是长文可读性合同，不是临时配色：背景必须是 #FFFFFF，普通正文必须是深中性黑，正文尺寸/行高不得低于 40px/1.9。暗朱红只标记少量分隔和强调，不能与黑字争夺主体。
• 稀疏线稿在局部裁图里清楚，放回整张长卡可能完全消失。-l 的代表图必须同时通过局部像素检查和整卡缩略检查；必要时只加粗轮廓，不连带更换隐喻、镜头或构图。
• -c 的格数由认知因果拍点决定，不设固定范围。短内容不凑格，长内容不因模板删掉承重关系。
• 漫画主画面负责让动作与结果可见；概念名、对白、旁白和证据分寸仍由 HTML/CSS 写准，不能让图片模型代写解释。
• 同一轮讲解或同案重跑要求角色、道具与空间连续；换案检验可以更换对象，保留待检验关系。每个讲解拍点换一套隐喻会切断前后比较。
• object-fit: cover 可能只裁坏一格。逐资产检查后仍要扫描所有分格的脸、手、关键道具与动作点，再检查最终 DOM、整图和重叠切片。
• -w 的母结构不是五选一 topology，而是一条从问题沿推理展开的 .reasoning-spine。chain、branch、timeline、matrix、radial 是可以嵌入主干的局部结构；真实文章允许先递进、再分叉、再汇合，不能为了选一种图形而删除推理，也不必为收尾另造边界节点。
• -w 在任何视觉决策之前建立论证账本：每个源章节必须映射到步骤，或登记具体省略理由；每个步骤与关系都绑定账本 ID。例子即使不参与证明，也可能承担辨认概念的工作。来源对账与账本、DOM 一致是结构门禁，不能证明判别依据充分。
• -w 的主干不断，不等于每一层都要出声。普通延续、解释与递进使用静默关系；只有矛盾、问题改写、分支、回收或边界真正改变阅读方向时，才显示一条完整过渡句。不要用「继续追问」「再向前一步」之类旁白替代原文中的具体未解压力。
• -w 的生成图不得成为正文之前的 hero。图像只嵌入它所解释的步骤；删图后若论证、对象判别与结果理解都不受损，0 幅是正确结果。文字也可以提供完整下层材料。
• -w 的静默关系只在账本和真实 .logic-relation DOM 中保留端点，不显示箭头或文案；可见转折的箭头不能用 ::before/::after，必须使用 .relation-stem 与 .relation-arrowhead 真实元素，并用唯一的 .transition-sentence 承担整句过渡。
• -w 不联网取字体。拉丁手写字体不会提供中文字形，中文最终会无声回退；模板使用本地楷体/中文 Sans 字栈，字体差异不得改变节点层级或几何验收。

Examples

Example 1：把论文或书铸成长图

User: 「把这篇论文做成卡片 -l」
→ 用一个稳定人物或物件承载可见变化：论文走「问题→机制→证据→边界→决策」，书走「原状→压力→变化→余波」
→ 知识讲解先明确读者任务，展示对象凭什么归入概念、关系怎样落回结果；生成图画可见动作，准确文字由 HTML/CSS 承担
→ 交付一张具有暖纸、稀疏黑线、单一暗红与完整阅读层级的 1080px PNG

Example 2：把技术概念铸成漫画

User: 「把这篇技术解释做成漫画 -c」
→ 固定一个最小案例，让零号模型先运行并暴露失败
→ 每次只用一格引入当前缺口需要的概念，再回到同案重跑
→ 最后从头运行完整模型，并留一个边界拍点

Example 3：把完整长文铸成漫画

User: 「把这份已验收的完整笔记做成漫画 -c，不限格数」
→ 先锁定 Org 路径与 SHA-256，再从全文因果主线选择认知拍点
→ 格数服从承重关系与删除测试，不继承旧五格或固定页数
→ 生成分格、组装 HTML，完成逐图、整图与重叠切片 QA

Example 4：原文一字不改地排成长图

User: 「这篇文稿用 -f 铸成全文卡片，原文不要动」
→ 锁定来源与 SHA-256，把标题、段落、列表、引用、强调和脚注登记为有序原文块
→ 不摘要、不补标题、不抽取重复金句；只用白底、深黑、KingHwa_OldSong、克制灰阶、字体层级与留白做编辑设计
→ 全文校验器通过后截图，交付一张生成图数量为 0 的 1080px 原文长 PNG

交付合同

最终回复至少报告：PNG 绝对路径、像素尺寸、内容来源、使用的 mode、生成图数量，以及整图/分段视觉 QA 结果。若输入来自已验收 Org，先记录其路径与 SHA-256，制卡后再确认源文件哈希未变。-f 还必须报告有序原文块数量与全文校验结果；生成图数量固定为 0。

知识讲解在交付回复中额外简报下上连接的内容审阅结果、未补齐的材料缺口，以及是否做过读者换案实测。没有实测时写「未做读者实测」，不以自审或程序通过代替学习效果。这些是交付信息，不是成品正文或尾注。

维护自检

升级模板或 mode 后运行：

bun run audit
bun test
bun run fixtures

第一条检查共享协议、四路引用、位图槽、白板来源对账、全文忠实度合同与禁用项；第二条运行纯函数与反例测试；第三条在 /tmp/ljg-card-v7-fixtures/ 生成代表 HTML，运行全文与白板来源校验，随后用 capture.ts 实际截图并读回 PNG。

每次维护使用独占目录：LJG_CARD_FIXTURE_DIR=/tmp/<task>/fixtures bun run fixtures。现有 fixtures 验证渲染和结构；改动学习设计时，另用 references/learning-design.md 的对照材料试写，检查实际表达，不能用文本规则命中代替内容审阅。