Ljg Card
Turn articles, notes, or URLs into shareable PNG cards and posters for social channels without opening a separate design app.
Overview
ljg-card is an agent skill most often used in Grow (also Launch distribution) that casts text or URLs into PNG social visuals across seven layout molds.
Install
npx skills add https://github.com/lijigang/ljg-skills --skill ljg-cardWhat is this skill?
- Seven molds: -l long card, -i infograph, -m multi-card 1080×1440, -v editorial sketchnote, -c manga comic, -w whiteboard
- Content in from URL (WebFetch), paste, or file path; PNG out to ~/Downloads/
- HTML-to-PNG pipeline via node assets/capture.js with width, height, and fullpage options
- Trigger phrases include 铸, cast, 做成图, sketchnote, comic, whiteboard, 小红书卡片
- Replaces ljg-cards and ljg-infograph in one unified casting skill (v2.3.0)
- 7 visual layout molds (-l, -i, -m, -v, -c, -w, -b)
- Multi-card and big-font molds use 1080×1440 dimensions
- Outputs PNG files to ~/Downloads/ via capture.js
Adoption & trust: 3.8k installs on skills.sh; 5.5k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have strong written content but no fast way to turn it into polished cards, infographs, or platform-specific images inside your coding agent.
Who is it for?
Creators and indie marketers who repurpose essays, threads, or URLs into multiple visual formats from one agent workflow.
Skip if: Builders who need vector brand kits, interactive web UI, or code-only deliverables with no image export requirement.
When should I use this skill?
User says 铸, cast, 做成图/卡片/信息图/海报, sketchnote, comic, whiteboard, 大字, 小红书卡片, or asks to cast content to PNG visuals.
What do I get? / Deliverables
Named PNG assets land in ~/Downloads/ in the mold you chose, ready to attach to posts, newsletters, or 小红书 without a separate design toolchain.
- One or more PNG visuals in ~/Downloads/ named from content title (≤20 chars)
- HTML render pipeline output per selected mold flag
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Visual content compounding sits in Grow (lifecycle content), while launch-ready assets also appear in Launch—Grow is the canonical shelf because the skill optimizes ongoing content reuse. ljg-card outputs reading cards, infographs, sketchnotes, and 小红书-style attachments—pure content production, not analytics or support tooling.
Where it fits
Repurpose a newsletter draft into a -l long reading card and -m multi-card set for the week's posts.
Cast a launch story URL into a -v editorial sketchnote for a Product Hunt or 小红书 announcement.
Generate a -w whiteboard explainer from product docs for a support thread or community FAQ.
Produce a -b 碑刻 big-font attachment card with a single hook line for short-form social.
How it compares
Skill-driven HTML capture and layout molds—not a Figma plugin or generic image generator with no structured reading-card templates.
Common Questions / FAQ
Who is ljg-card for?
Solo builders and content operators who publish on 小红书, blogs, or social feeds and want agent-triggered PNG cards from URLs or pasted text.
When should I use ljg-card?
Use it in Grow when turning lifecycle content into visuals; in Launch when preparing distribution creatives; also when you say 铸, cast, sketchnote, comic, or 小红书卡片 during a content session.
Is ljg-card safe to install?
It runs Node capture scripts and may fetch URLs—check the Security Audits panel on this Prism page before installing and review what paths it writes under ~/Downloads/.
SKILL.md
READMESKILL.md - Ljg Card
# ljg-card: 铸 将内容铸成可见的形态。内容进去，PNG 出来。模具决定形状。 ## 参数 | 参数 | 模具 | 尺寸 | 说明 | |------|------|------|------| | `-l`（默认） | 长图 | 1080 x auto | 单张阅读卡，内容自动撑高 | | `-i` | 信息图 | 1080 x auto | 内容驱动的自适应视觉布局 | | `-m` | 多卡 | 1080 x 1440 | 自动切分为多张阅读卡片 | | `-v` | 视觉笔记 | 1080 x auto | 编辑式杂志专题：问题→失败→转折→顿悟→命名（6 layout 模具 / 4 字族对比 / 探案档案细节）| | `-c` | 漫画 | 1080 x auto | 日式黑白漫画风格，动态选择漫画家视觉语言 | | `-w` | 白板 | 1080 x auto | 白板马克笔风格，结构化框图+箭头+彩色标记 | | `-b` | 大字 | 1080 x 1440 | 碑刻大字 + 和紙 + 外阴影，小红书附件风格（单句/短段） | ## 约束 本 skill 输出为视觉文件（PNG），不适用 L0 中的 Org-mode、Denote 和 ASCII-only 规范。 ## 共享基础 ### 获取内容 - URL --> WebFetch 获取 - 粘贴文本 --> 直接使用 - 文件路径 --> Read 获取 ### 文件命名 从内容提取标题或核心思想作为 `{name}`（中文直接用，去标点，≤ 20 字符）。 ### 截图工具 ```bash node assets/capture.js <html> <png> <width> <height> [fullpage] ``` 从 skill 根目录运行。依赖 skill 根目录下的 `node_modules/` 中的 playwright。如报错： ```bash npm install playwright && npx playwright install chromium ``` ### Footer - 左侧：logo + 李继刚（已硬编码在模板中） - 右侧：内容来源（可选）——有明确来源时显示（如作者名、arxiv ID、网站名等），无来源时留空。使用 `{{SOURCE_LINE}}` 变量：有来源时填 `<span class="info-source">来源文字</span>`，否则空字符串。适用于 `-l`、`-i`、`-v`、`-c`、`-w` 模具（`-m` 多卡无 footer，不适用）。 ### 交付 1. 报告文件路径 ## 品味准则 **所有模具共享**。执行任何模具前，先 Read `references/taste.md`，作为视觉质量底线贯穿全流程。 核心：反 AI 生成痕迹——禁 Inter 字体、禁纯黑、禁三等分卡片、禁居中 Hero、禁 AI 文案腔、禁假数据。 ## 执行 根据参数选择模具，Read `references/taste.md` + 对应的 mode 文件，按步骤执行： ### -l（默认）：长图 Read `references/mode-long.md`，按其步骤执行。 模板：`assets/long_template.html` ### -i：信息图 Read `references/mode-infograph.md`，按其步骤执行。 模板：`assets/infograph_template.html` ### -m：多卡 Read `references/mode-poster.md`，按其步骤执行。 模板：`assets/poster_template.html` ### -v：视觉笔记 Read `references/mode-sketchnote.md`，按其步骤执行。 模板：`assets/sketchnote_template.html` ### -c：漫画 Read `references/mode-comic.md`，按其步骤执行。 模板：`assets/comic_template.html` ### -w：白板 Read `references/mode-whiteboard.md`，按其步骤执行。 模板：`assets/whiteboard_template.html` ### -b：大字 Read `references/mode-big.md`，按其步骤执行。 模板：`assets/big_template.html`