/ 目录 / 演练场 / smart-illustrator
● 社区 axtonliu ⚡ 即开即用

smart-illustrator

作者 axtonliu · axtonliu/smart-illustrator

Claude Code 技能,可自动在文章和封面中插入上下文相关的插图 — Gemini、Excalidraw 和 Mermaid 的完美组合。

Smart Illustrator 分析你的 markdown 文章,检测最优的插图位置,并为每个位置选择合适的引擎 — Gemini 用于创意视觉、Excalidraw 用于手绘图表、Mermaid 用于结构化流程。支持文章、幻灯片和平台优化的封面模式(YouTube、微信、Twitter)。支持恢复,可重新运行而不会重新生成现有图片。

为什么要用

核心特性

实时演示

实际使用效果

smart-illustrator-skill.replay ▶ 就绪
0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "smart-illustrator-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axtonliu/smart-illustrator",
        "~/.claude/skills/smart-illustrator"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "smart-illustrator-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axtonliu/smart-illustrator",
        "~/.claude/skills/smart-illustrator"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "smart-illustrator-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axtonliu/smart-illustrator",
        "~/.claude/skills/smart-illustrator"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "smart-illustrator-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axtonliu/smart-illustrator",
        "~/.claude/skills/smart-illustrator"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "smart-illustrator-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axtonliu/smart-illustrator",
        "~/.claude/skills/smart-illustrator"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "smart-illustrator-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/axtonliu/smart-illustrator",
          "~/.claude/skills/smart-illustrator"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add smart-illustrator-skill -- git clone https://github.com/axtonliu/smart-illustrator ~/.claude/skills/smart-illustrator

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: smart-illustrator

如何自动为长篇博文添加插图

👤 发布 markdown 文章的技术写手和内容创作者 ⏱ ~20 min beginner

何时使用: 你有一篇完成的 markdown 文章,需要在发布前添加 4-8 张插图,且不想逐个手动编写提示。

前置条件
  • 技能安装在 ~/.claude/skills/smart-illustrator — git clone https://github.com/axtonliu/smart-illustrator 到该路径
  • Gemini API 密钥(用于创意视觉) — 导出 GEMINI_API_KEY;技能从环境变量读取
  • Mermaid CLI(如果你想要图表渲染) — npm i -g @mermaid-js/mermaid-cli
步骤
  1. 指向你的文章
    在 article 模式下对 posts/2026-04-launch.md 运行 smart-illustrator。选择 5 个插图位置。✓ 已复制
    → 技能输出选定的位置,每个带有单行理由
  2. 审查引擎选择
    给我看你为每个插图选了哪个引擎以及为什么。让我覆盖其中任何一个。✓ 已复制
    → 每个位置的表格:位置 → 引擎 → 理由
  3. 生成并嵌入
    生成所有图片并将更新的 markdown 写回同一文件。✓ 已复制
    → 文章已用内联图片参考更新;PNG 文件保存在 assets/ 下

结果: 一个可发布的 markdown 文件,包含 5 张符合上下文的插图和一张封面图片。

注意事项
  • Gemini 为抽象概念返回了一张看起来很常见的图片 — 重新运行该单一位置,使用 --engine excalidraw 获得手绘隐喻
  • Mermaid 语法因为 LLM 错误转义引号而渲染失败 — 对图表使用 --prompt-only,粘贴到 mermaid.live 调试,然后重新注入
搭配使用: banana-claude-skill

为文章生成平台优化的封面

👤 在 YouTube、微信和 Twitter 上重新发布内容的创作者 ⏱ ~10 min beginner

何时使用: 你即将跨平台发布,需要同一概念在 3 个不同的宽高比和风格中呈现。

前置条件
  • 完成的文章标题 + 1 行概要 — 准备一个简短的提示;技能将其用作摘要
步骤
  1. 为每个平台运行封面模式
    使用 smart-illustrator 的封面模式,标题为 'The 2AM Bug That Cost Us $40k' — 为 youtube、wechat、twitter 生成。✓ 已复制
    → 3 张 PNG,分辨率正确,构图符合平台特点
  2. A/B 变体
    用 2 个替代角度重新生成 YouTube 封面,这样我可以进行 A/B 测试。✓ 已复制
    → 3 张缩略图,视觉上有明显差异

结果: 一个封面包,可以直接上传到各个频道而无需打开设计工具。

注意事项
  • 封面上的文字看起来很乱 — Gemini 文字渲染不可靠 — 改为请技能添加标题作为后处理覆盖

将演讲大纲转换为幻灯片信息图

👤 准备技术演讲大纲的演讲者 ⏱ ~25 min intermediate

何时使用: 你有一个演讲大纲,想在设计幻灯片前为每个关键部分生成一张信息图。

步骤
  1. 运行幻灯片模式
    获取 talk-outline.md,幻灯片模式,每个 H2 部分生成一个独立的信息图。✓ 已复制
    → 每个部分一张 PNG,各自独立
  2. 优化较弱的部分
    第 3 部分的信息图太抽象了。用 Excalidraw 引擎重做,专注于 3 步循环。✓ 已复制
    → 与大纲匹配的手绘替代品

结果: 一个幻灯片就绪的信息图文件夹,对应你的大纲。

注意事项
  • 信息图与你的幻灯片视觉风格不匹配 — 传递 --style='flat pastel' 或风格参考图片,使输出保持一致

组合

与其他 MCP 搭配,撬动十倍杠杆

smart-illustrator-skill + banana-claude-skill

用 Smart Illustrator 生成图表,用 Banana Claude 生成同一篇文章中逼真的英雄图

对于 posts/launch.md,在第 2 部分使用 smart-illustrator 生成架构图,然后在顶部使用 banana-claude 生成逼真的英雄图。✓ 已复制
smart-illustrator-skill + notebooklm-skill

NotebookLM 研究主题,Claude 起草文章,Smart Illustrator 装饰它

用 notebooklm 研究 'CRDT conflict resolution',起草一篇 2000 字的文章,然后用 smart-illustrator 添加插图。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
detect_illustration_points markdown_path: str, count?: int 首次对任何文章进行扫描,以决定插图的帮助位置 ~2k Claude tokens
generate_illustration position: str, engine: 'gemini'|'excalidraw'|'mermaid', prompt: str 在审查后为每个选定的位置生成 1 Gemini call or 0 (for Mermaid/Excalidraw)
generate_cover title: str, platform: 'youtube'|'wechat'|'twitter', style?: str 封面模式;为每个目标平台调用一次 1 Gemini call
embed_into_markdown markdown_path: str, illustrations: list 所有图片生成完毕后的最后一步 0

成本与限制

运行它的成本

API 配额
Gemini 免费层:15 请求/分钟,1500/天。Mermaid/Excalidraw 引擎免费(本地渲染)。
每次调用 Token 数
位置检测 2k-5k Claude tokens;图片生成使用单独的 Gemini 配额
费用
Gemini 免费层免费。付费 Gemini 大约 $0.04 每张图片(当前费率)。
提示
使用 --prompt-only 起草所有提示,然后在夜间批量生成以保持在免费层内。

安全

权限、密钥、影响范围

凭据存储: shell 环境中的 GEMINI_API_KEY。无 OAuth,无 PAT。
数据出站: 文章内容被发送到 Google Gemini 用于插图提示。在运行前不要在机密草稿上运行。

故障排查

常见错误与修复

Gemini 429 配额超出

等待每日重置或升级到付费层。为剩余位置使用 --engine mermaid|excalidraw。

验证: curl -s https://generativelanguage.googleapis.com/v1beta/models?key=$GEMINI_API_KEY
Mermaid 渲染失败,显示 'Parse error'

LLM 生成了无效的 Mermaid。使用 --prompt-only,粘贴到 mermaid.live,修复语法,重新生成。

验证: mmdc -i test.mmd -o test.png
Claude Code 找不到技能

确认克隆路径是 ~/.claude/skills/smart-illustrator,且根目录存在 SKILL.md。

验证: ls ~/.claude/skills/smart-illustrator/SKILL.md

替代方案

smart-illustrator 对比其他方案

替代方案何时用它替代权衡
banana-claude-skill你只需要逼真的英雄图片,不需要图表无位置检测,无图表引擎
手动 Midjourney/DALL-E 工作流你的出版物有严格的品牌风格指南,LLM 路由无法遵守更多控制权,速度慢得多

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills