# Ljg Cards

> Generates reading cards from text input. Default mode renders a single long PNG (1080px wide, height auto). Use -m flag for multi-card mode (1080x1440 per card). Output saved to ~/Downloads/. Use when user says "做成卡片", "生成阅读卡", "reading card", "卡片", or provides text and asks for visual cards.

- **Type:** Skill
- **Install:** `agentstack add skill-lijigang-ljg-cards-ljg-cards`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [lijigang](https://agentstack.voostack.com/s/lijigang)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [lijigang](https://github.com/lijigang)
- **Source:** https://github.com/lijigang/ljg-cards/tree/main/skills/ljg-cards

## Install

```sh
agentstack add skill-lijigang-ljg-cards-ljg-cards
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

## 约束

本 skill 输出为视觉文件（PNG），不适用 L0 中的 Org-mode 和 Denote 规范。输出为图片渲染，不受 ASCII-only 限制。

## Usage


User: 把这段文字做成卡片：[一段文字]
Assistant: [Calls ljg-cards, generates a single long PNG card to ~/Downloads/]



User: /ljg-cards -m [一段文字]
Assistant: [Calls ljg-cards in multi mode, generates multiple 1080x1440 PNG cards to ~/Downloads/]


## 参数

| 参数 | 说明 |
|------|------|
| （无） | 默认模式：所有内容渲染为一张宽 1080px 的长图，高度自适应 |
| `-m` | 多卡模式：自动切分为多张 1080x1440 卡片 |

## Instructions

为了执行本项技能，请严格按照以下步骤操作：

**首先判断模式**：检查用户输入中是否包含 `-m` 参数。
- 有 `-m` → 进入**多卡模式**（跳到「多卡模式」章节）
- 无 `-m` → 进入**默认长图模式**（继续下方步骤）

### 步骤 1：读取资源

读取以下文件内容到内存：
- `~/.claude/skills/ljg-cards/assets/card_template_long.html`
- 确认截图脚本路径：`~/.claude/skills/ljg-cards/assets/capture.js`

### 步骤 2：内容预处理

- 识别标题行（`#`/`##`/`###` 开头，或独立短行）
- 识别引用块（`>` 开头）
- 识别加粗（`**text**`）
- **识别金句**：独立成段的短句（通常 文本`
- 章节标题（##/### 级别） → `标题`
- 引用 → `引用`
- 加粗 → `文本`
- 列表 → `...`

**金句（独立成段的核心洞察短句，视觉突出）：**
```html
金句文本
```
判断标准：独立成段、`。

**条目组（核心结构，用于有标题+正文的并列条目）：**
```html

  条目标题
  条目正文

```

**副标题标签（用于安静的分类标签）：**
```html
标签文字
```

**分割线（章节之间使用）：**
```html

```

### 步骤 4：渲染模板

读取 `card_template_long.html` 并替换模板变量：

| 变量 | 规则 |
|------|------|
| `{{TITLE_BLOCK}}` | 有标题时：`标题`；无标题时：空字符串 |
| `{{BODY_HTML}}` | 步骤 3 生成的全部 HTML |
| `{{SOURCE}}` | 来源/作者信息（用户提供则填入，否则 `李继刚`） |

注意：长图模板无 `{{HEADER_BLOCK}}`、无 `{{PAGE_INFO}}`。logo 图片路径已硬编码在模板中，无需替换。

**文件命名**：从内容中提取标题或核心思想作为文件名前缀 `{name}`：
- 优先用文章标题（h1）
- 无标题则取首段核心关键词（2-6 个中文字或英文单词）
- 文件名规则：中文直接用，英文用连字符连接，去除标点和特殊字符，长度不超过 20 字符

写入：`/tmp/ljg_card_long_{name}.html`

### 步骤 5：截图生成

使用 fullpage 模式截图，高度由内容自动撑开：
```bash
node ~/.claude/skills/ljg-cards/assets/capture.js /tmp/ljg_card_long_{name}.html ~/Downloads/{name}.png 1080 800 fullpage
```

**依赖说明**：`playwright` 已安装在 `~/.claude/skills/ljg-cards/node_modules/`。如报错：
```bash
cd ~/.claude/skills/ljg-cards && npm install playwright && npx playwright install chromium
```

### 步骤 6：交付

1. 报告文件路径
2. 执行 `open ~/Downloads/`

---

## 多卡模式（`-m` 参数）

当用户传入 `-m` 参数时，执行以下流程（替代上方默认长图流程）：

### M-步骤 1：读取资源

读取以下文件内容到内存：
- `~/.claude/skills/ljg-cards/assets/card_template.html`
- 确认截图脚本路径：`~/.claude/skills/ljg-cards/assets/capture.js`

### M-步骤 2：内容分析与切分

**2.1 预处理**

与默认模式步骤 2 相同：
- 识别标题行、引用块、加粗、金句
- 按空行分割为段落列表

**2.2 计算视觉重量**

模板直接在 1080x1440 全分辨率渲染，正文 36px，行高 1.7。手机端缩放比 ≈ 0.36，实际显示约 13pt。

- 普通段落：字符数 × 1.4
- 标题行（h1 首卡 84px）：字符数 × 6.0
- 金句（`.highlight` 40px + 左边框 + 上下留白）：字符数 × 3.0
- `.item` 条目组（label + 正文）：字符数 × 1.8
- 引用块：字符数 × 1.7
- 分割线（divider）：固定 60 权重
- 代码块：字符数 × 2.2
- Running title（续页头部）：固定 70 权重

**2.3 贪心切分**
- 阈值：每卡约 **380** 字符等价视觉重量
- 逐段累加，超过阈值时在当前段之前切分
- **切分规则**：
  - 绝不在句子中间切
  - 优先在段落/条目/章节边界切
  - 标题不落单（必须跟至少一个内容元素在同一卡）
  - 超长单段在句号处强制切
  - 一个章节（h2 + 3 items）通常刚好一卡

**2.4 特殊情况**
- 只有一张卡：不显示页码
- 多张卡：显示 `1 / N` 格式页码

### M-步骤 3：格式化为 HTML

与默认模式步骤 3 完全相同的结构映射规则。

### M-步骤 4：渲染模板

对每张卡片，读取 `card_template.html` 并替换模板变量：

| 变量 | 规则 |
|------|------|
| `{{HEADER_BLOCK}}` | 续页卡：`文章标题`；首卡或单卡：空字符串 |
| `{{TITLE_BLOCK}}` | 首卡有标题时：`标题`；续页卡或无标题时：空字符串 |
| `{{BODY_HTML}}` | M-步骤 3 生成的 HTML |
| `{{SOURCE}}` | 来源/作者信息（用户提供则填入，否则 `李继刚`） |
| `{{PAGE_INFO}}` | 多卡时 `1 / 3`，单卡时空字符串 |

注意：logo 图片路径已硬编码在模板中，无需替换。

**文件命名**：同默认模式规则，从内容提取标题或核心思想作为 `{name}`。

写入：`/tmp/ljg_card_{name}_{N}.html`

### M-步骤 5：截图生成

直接以 1080x1440 全分辨率截图：
```bash
node ~/.claude/skills/ljg-cards/assets/capture.js /tmp/ljg_card_{name}_{N}.html ~/Downloads/{name}_{N}.png 1080 1440
```

多张卡片可并行截图。

**依赖说明**：同默认模式。

### M-步骤 6：交付

1. 报告卡片数量 + 文件路径
2. 执行 `open ~/Downloads/`
3. 多卡时给出每张摘要（前 30 字）

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [lijigang](https://github.com/lijigang)
- **Source:** [lijigang/ljg-cards](https://github.com/lijigang/ljg-cards)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-lijigang-ljg-cards-ljg-cards
- Seller: https://agentstack.voostack.com/s/lijigang
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.