ljg-infograph

📁 lijigang/ljg-infograph 📅 1 day ago
2
总安装量
2
周安装量
#63813
全站排名
安装命令
npx skills add https://github.com/lijigang/ljg-infograph --skill ljg-infograph

Agent 安装分布

kimi-cli 2
kilo 2
gemini-cli 2
junie 2
antigravity 2
zencoder 2

Skill 文档

约束

本 skill 输出为视觉文件(PNG),不适用 L0 中的 Org-mode、Denote 和 ASCII-only 规范。

Usage

Instructions

步骤 1:读取资源

读取以下文件:

  • ~/.claude/skills/ljg-infograph/assets/infograph_template.html
  • 确认截图脚本:~/.claude/skills/ljg-infograph/assets/capture.js

步骤 2:内容分析与模块化

2.1 提取元信息

从用户输入中识别:

  • 标题:文章/笔记标题,或从内容提炼(≤ 15 字)
  • 副标题:一句话概括内容核心(≤ 30 字)
  • 来源:作者或出处(用户提供则用,否则 李继刚)

2.2 选择主色调

整张图使用单一主色,根据内容主题选择:

主题 accent accent-light accent-dark
科技/AI #2563EB #EFF6FF #1E3A5F
方法论/教育 #7C3AED #F5F3FF #3B1F6E
商业/金融 #0D9488 #F0FDFA #134E48
健康/生活 #059669 #ECFDF5 #064E3B
创意/设计 #D97706 #FFFBEB #78350F
通用默认 #2563EB #EFF6FF #1E3A5F

2.3 拆分为信息模块

将内容拆分为 5-8 个信息模块,每个模块包含:

  • 模块标题:2-6 字,名词性短语
  • 模块类型:从下表选择
  • 模块内容:该模块的具体信息
类型 适用场景 HTML 结构
(默认) 要点列举 ul.check-list > li
mod-stat 关键数字 .stat-row > .stat > .stat-number + .stat-label
mod-steps 步骤流程 .step-item > .step-num + .step-text
mod-highlight 核心洞察(全宽) p.insight 居中大字
mod-dark 结论/警告(全宽) 深色底白字,内部可嵌任意元素
mod-table 对比数据 table.info-table > th + td
mod-compare A vs B .compare-row > .compare-item

禁止使用的模块:不要生成「关键词/标签」类模块(如 mod-tags)。论文关键词、书籍术语索引等属于信息密度极低的填充物,不应出现在信息图中。

2.4 布局规划

  • 默认占 1 列,mod-highlight / mod-dark 设为 span-2
  • 模块不加 color-* class——全局只用一个 accent 色
  • 相邻两列模块内容量尽量接近,保持视觉对齐
  • 孤儿对齐:模板内置 JS 自动处理——若末尾单列模块落单,会自动展开为全宽。无需手动干预

步骤 3:生成 HTML

每个模块渲染为:

<div class="module {类型class} {span-2}">
  <div class="module-title">模块标题</div>
  <!-- 按类型填充 -->
</div>

渲染模板,替换变量:

变量 内容
{{TITLE}} 主标题
{{SUBTITLE}} 副标题
{{ACCENT}} 主色
{{ACCENT_LIGHT}} 主色浅底
{{ACCENT_DARK}} 主色深底
{{GRID_HTML}} 所有模块 HTML
{{SOURCE}} 来源/署名

步骤 4:文件命名与截图

文件名从标题提取 {name}(中文直接用,去标点,≤ 20 字符)。

node ~/.claude/skills/ljg-infograph/assets/capture.js /tmp/ljg_infograph_{name}.html ~/Downloads/{name}.png 1080 800 fullpage

步骤 5:交付

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