开源个大树自己的插图Skill，希望能帮助到大家

“我是大树，一个差点开始放弃折腾的AGI学习与实践者。 最近在探索和从事的事儿：

• 企业出海、AGI创作与出海
• 传统企业的AI化/自动化转型；自动化工作流搭建，AI 转型技术咨询
• 继续打磨开源项目，包括我自己调的 illustrator 配图工具

欢迎大家关注”

分享给大家一个我自己的插图skill，如果大家决定有帮助，可以点个爱心或者给项目点个star。

前两天在群里聊到公众号配图，一个朋友吐槽说："让 Midjourney 画个流程图，字全是错的，数字对不上，改都没法改。"

我回了句：那你试试用代码渲染？

然后他愣住了——"啊？代码还能渲染图？"

我意识到，这个概念对很多人来说还挺陌生的。大部分人现在的认知就是：做图 = 扔给 AI 图像模型，等它出图，然后祈祷它别把字写错。

但问题是——AI 图像模型真的适合做"信息类配图"吗？

我的配图之痛

我自己写公众号以来，最痛苦的事情之一就是配图。

不是不会画，是画了但不对。

你要个对比表格，AI 给你画两个模糊的框框，数字全是乱的，比例七歪八扭； 你要个流程图，AI 给你一个"看起来很高级但根本读不懂"的玩意儿； 你要个数据图表，AI 直接给你编了三个数字，加起来还不是 100%。

而且最关键的是——它没法改。

"这个颜色调一下" "这里改个数字" "这里字体再大一点"

每次都是重新生成，然后碰运气。运气好了勉强能用，运气不好又得折腾半天。

所以后来我换了个思路。

既然是"信息配图"，为什么不直接写代码？

这个念头冒出来之后，我就开始琢磨：配图的核心是什么？

对公众号、小红书这些场景来说，配图不是为了"好看"，是为了把信息说清楚。

一个流程图，步骤要明确；一个对比表，数字要准确；一个知识卡片，逻辑要清晰。

那这些东西，用 HTML/CSS 写出来，再截图，不是正好吗？

• 文字想怎么精确就怎么精确
• 数据想怎么准确就怎么准确
• 颜色、字体、间距，全部可控
• 要改？修改 HTML 重新截图就行，不用重新生成

而且——秒级出图，不需要等 AI 慢悠悠地吐。

但光有想法不够，还得落地。所以我写了这个叫 illustrator 的工具。

Illustrator 是什么？

说人话就是：一个用代码驱动视觉生成的 skill。

你给它一段文字描述，它根据内容选择最合适的视觉形式——可以是数据图表、对比卡片、流程图、知识卡片、概念海报……甚至动态 GIF。

然后生成自包含的 HTML 文件，Playwright 截图输出 PNG/GIF。

它精通的几种类型

我自己用得最多的是知识卡片和数据图表——这两个正好是公众号文章最需要的。

为什么说它"更适合移动端配图"？

市面上的开源配图工具不是没有，但很多都是面向"网页设计"或者"Dashboard"的。

我想要的是——一张图发到微信群里，别人在手机上不用放大就能看清。

所以这个工具从根上就和别人不一样：

• 默认 3:4 竖屏布局——小红书、公众号贴图兼容，手机上看不需要旋转
• 最小字号 24px——内容再多也不能把字缩到看不清
• 单栏垂直结构——用户从上往下滑，不需要左右扫
• **信息密度 70-80%**——没有无意义的留白，也不挤在一起
• 3 秒理解原则——一眼扫过去就知道"这图在说什么"

不夸张地说，在"移动端传播配图"这个方向上，国内应该还没几个开源工具做得比我细。

这玩意儿是怎么"我调"出来的？

说起来挺有意思的。

一开始我只是想给自己写个小工具，解决自己的配图问题。写着写着发现——嗯，这东西好像能让别人也用？

但直接给别人用是不可能的，因为 Claude 或其他模型生成的图片质量，和提示词关系太大了。同一个模型，提示词写得不好，出来的图可能完全不能看。

所以我做了一件事：把"好设计"写进了工具的 DNA 里。

举个例子：

:root {
  --bg: #FAF9F6;
  --surface: #FFFFFF;
  --text: #1E293B;
  --accent: #2563EB;
  --radius: 14px;
  --font-display: 'Inter', 'Noto Sans SC', sans-serif;
  --font-body: 'Noto Sans SC', 'PingFang SC', sans-serif;
}

这不是"一个配色"，这是一套设计系统。

它内置了：

• 3 种视觉模式（Flow/Frame/Chart）——根据内容自动选择"气质"
• 11 种设计风格——从极简扁平到野兽派，从吉卜力到孟菲斯
• 20 套配色方案——莫兰迪、海洋色、大胆创意、数据渐变……
• 色彩理论体系——互补色、分裂互补、三角色、四元色，每种都有理论依据
• 严格的设计规范——字体层级、信息密度、留白比例、圆角大小……

这些不是我"发明"的，是我看了几百张优秀设计图之后，总结成代码规则的。

所以即使模型本身不懂设计，它生成的图也丑不到哪里去。

一个真实案例

拿我这篇文章封面图来举个例子。

需求是：一张公众号封面图，21:9 比例，标题突出，风格杂志感。

以前的流程是：

“写提示词 → 等 AI 生成 → 字不对 → 改提示词 → 再生成 → 颜色不对 → 再改提示词 → 再生成 → 最终勉强能用 → 但再改一个字就要疯了”

现在用 illustrator：

“告诉我"公众号封面图，21:9，标题'xxx'，风格 Editorial" → 生成 HTML → 截图导出 → 完成”

想改？改 HTML 里的文字，重新截图。全程不到 10 秒。

那为什么决定开源？

这个问题我自己也问了自己好几遍。

最开始做这个工具的时候，我没想过要开源。毕竟是自己用的东西，够用就行，开源意味着要写文档、处理 issue、回应反馈——都是纯纯的额外工作量。

但做完整之后我反而觉得：这个东西对别人应该也挺有用的。

因为每次我在群里或者朋友圈里放出自己做的知识卡片、对比图、数据图表，都有人问"这个怎么做出来的""用的什么工具"。

而市场的现状是：

• 市面上没有专门为"移动端配图"设计的开源方案
• AI 图像模型做信息类配图，精度和可控性远不够
• 大部分人甚至不知道"代码渲染"这个思路

那我就觉得——行吧，扔出来，也许能给一些人启发。

哪怕你最后不用我这个工具，但"配图可以用代码渲染"这个思路，我觉得就值得被更多人知道。

怎么用？

依赖很少，就两个：

pip install playwright pillow
playwright install chromium

然后装到 Claude 的 skills 目录就行：

git clone https://github.com/BEATREE/illustrator-skill.git ~/.claude/skills/illustrator

装好之后，直接用自然语言描述你想要的视觉内容：

"画一个 CI/CD 流程示意图"
"用环形图展示用户来源分布"
"帮我做一张小红书封面图，主题是 AI 学习路线"
"帮我总结这篇文章做成知识卡片"
"做一个 React vs Vue 对比卡片"
"生成一个展示 AI 工作流的动图"

它就自己去判断最好的视觉形式、配色、布局，生成 HTML，截图导出。

项目地址：https://github.com/BEATREE/illustrator-skill.git

对了，如果 PicGo 跑着，它还能自动上传图床返回 URL——写公众号的时候直接粘贴，省了一步。

几个我做这个项目的感受

1. 有时候"回归基础"反而是创新

AI 图像模型可以做很多漂亮的东西，但当你要"精确传达信息"的时候，代码渲染仍然是不可替代的。

不是所有问题都需要 AI 来解决。有时候最老实的方案，就是最好的方案。

2. 质量不是靠"调参"调出来的

我花在这个工具上的大部分时间，不是在写代码，是在**定义什么是"好的设计"**。

一个图表字多大、留白多少、什么颜色搭配好看——这些不是 AI 能告诉你的，是你要自己去看、去想、去总结的。

3. 开源是强迫自己做更好的产品

说实话，如果这个工具只是我自己用，我不会把文档写得这么详细，不会设计系统做得这么完整。

但因为我要扔出来给大家用，我就会想：这个功能完善吗？文档清楚吗？其他人能不能快速上手？

这种"被看见"的压力，反而是促进我把东西做得更好的动力。

Roadmap（画的饼）

我已经在规划的一些方向：

• 更多设计风格——目前 11 种，目标是 20 种
• 模板市场——社区贡献知识卡片模板，大家可以直接复用
• 批量生成——一篇文章的多张配图风格统一，一次搞定
• 知识卡片自动提取——输入文章链接，自动提取关键信息生成卡片

但不是承诺，随缘更新（你懂的，开源项目 + 一个人）。

追工具不如追思路

写完这篇文章我一直在想一个问题：

技术发展这么快，到底应该追什么？

年初大家都在追 MCP，年中都在追 Agent，现在 OpenClaw 火得一塌糊涂。

但我觉得，追工具不如追思路。

"用代码渲染配图"这个思路，其实并不新。但当我把它变成一套完整的设计系统、一个可以开箱即用的工具时，我发现——一个老思路+扎实的执行，可能比一个花哨的新技术更有价值。

所以我想做的，不是又一个"AI 生图工具"，而是：

“一个让信息配图变得精确、可控、秒级的脚手架。”

如果你也在做公众号、小红书、或者任何需要配图的内容，这个工具就是为你准备的。

哪怕只是让你知道了"配图还能这样搞"，那这篇文章就值了。

如果这篇文章对你有一点启发：

• 💬 欢迎在 评论 区聊聊你的配图痛点，或者分享你是怎么解决配图问题的
• 👍 点个赞，让我知道这类开源项目分享有人看
• 🔁 转发给正在被配图折磨的朋友，也许能帮到他
• ⭐ Star 一下项目，开源作者需要鼓励

你的每次互动，都是我继续肝开源项目的动力。