Skip to content
Skill Authoring
Skill

/ljg-card

Content caster (铸). Transforms text into PNG through precise HTML typography and, when the mold needs it, generated raster imagery. Four molds: -l (default) long reading card, -f source-faithful full text, -c comic, -w whiteboard. USE WHEN user says '铸', 'cast', '做成图', '做成卡片',

BOOST
From plugin
ljg-skills
7.4k23 skills
Install
$ npx -y skills add lijigang/ljg-skills --skill ljg-card --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/ljg-card

Context preview

The summary Claude sees to decide when to auto-load this skill.

Content caster (铸). Transforms text into PNG through precise HTML typography and, when the mold needs it, generated raster imagery. Four molds: -l (default) long reading card, -f source-faithful full text, -c comic, -w whiteboard. USE WHEN user says '铸', 'cast', '做成图', '做成卡片',

SKILL.md

ljg-card.SKILL.md
name: ljg-card
description: "Content caster (铸). Transforms text into PNG through precise HTML typography and, when the mold needs it, generated raster imagery. Four molds: -l (default) long reading card, -f source-faithful full text, -c comic, -w whiteboard. USE WHEN user says '铸', 'cast', '做成图', '做成卡片', '做成海报', '原文排版', '全文卡片', '漫画', or '白板'."
user_invocable: true
version: "7.4.2"

ljg-card:铸

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

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

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

参数

| 参数 | 模具 | 尺寸 | 图像角色 | |---|---|---|---| | `-l`(默认) | 长图 · 静线叙事 | 1080 × auto | 0–3 幅;有理解增益时用 1 个安静主场景,必要时追加连续视觉拍点 | | `-f` | 全文 · 原文排版 | 1080 × auto | 生成图固定为 0;只保真呈现原稿自带图片 | | `-c` | 漫画 | 1080 × auto | 缺口驱动、同案重跑的漫画分镜 | | `-w` | 白板 · 纵向论证 | 1080 × auto | 嵌入承重推理节点的局部手绘动作;不设顶部主视觉 |

未给参数时使用 `-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 路由

| 参数 | mode 文件 | 模板 | |---|---|---| | `-l` | `references/mode-long.md` | `assets/long_template.html` | | `-f` | `references/mode-full.md` | `assets/full_template.html` | | `-c` | `references/mode-comic.md` | `assets/comic_template.html` | | `-w` | `references/mode-whiteboard.md` | `assets/whiteboard_template.html` |

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` 的生成图不
Read more
Ships withljg-skills

我的 Codex 自定义技能集。

Get the whole plugin
Stats
7,436
Stars
843
Forks
Active
Maintenance
TypeScript
Language
MIT
License
7h ago
Last commit
6mo ago
Created
3h ago
Added

Repo: lijigang/ljg-skills

Other skills on ljg-skills.

ljg-blind
Skill

ljg-blind

盲区扫描——读昨天你与 AI 的全部对话,照出暴露的思维盲区(不是不懂的知识,是让某类真相一直看不见的思维习惯),再从微信读书挑一本书的一章精准补上,落成一篇完整分析笔记。Use…

ljg-constraint
Skill

ljg-constraint

给一个领域、专业、角色、产品或争论找出真正框住它的几条约束,判明它们属于世界/规则/解释(硬/软/自设),看这组约束如何定义身份、补全问题、框出解空间并解释实际行为;尤其用于区分目标相同但…

ljg-invest
Skill

ljg-invest

投资分析。给一个项目(公司名、BP、创始人对话记录),写一份深度投资分析报告。不走传统投资分析的路——核心判断只有一个:这个项目是不是一台「秩序创造机器」。Use when user…

ljg-is
Skill

ljg-is

把一个名词或概念写成可使用的理解:先用普通话讲清它是什么、与相邻概念差在哪里,再说明它怎样运作、会改写什么判断,最后给出面对它时的行动抓手。USE WHEN 用户问 X…