我用 Claude Skills 做了个「文章自动配图」技能

写公众号文章，你最烦什么？

对我来说，是配图。

每次写完文章，都要绞尽脑汁想配什么图、去哪里找图、怎么排版才好看。

直到前几天，我用 Claude Code 做了个自动化技能，把这件事彻底解决了。

一、场景：从重复劳动到一键搞定

以前的工作流

写完一篇技术文章后，如果要制作宣传图，你需要：

重新打开设计软件（Figma/Canva/Photoshop）
手动提炼文章要点
逐张设计图片
调整配色和排版
导出PNG上传

耗时：约 5-15 分钟（根据我的实际经验）

现在的工作流

打开 Claude Code，输入一句话：

复制代码

把这篇文章做成配图 mp-wechat/_published/xxx.md

约 1分钟之后：打开生成的 HTML 文件，4张精美配图已经准备好，点击下载即可。

耗时：不到 2 分钟（包含打开文件下载的时间）

二、这个技能是如何实现的？

第一步：分析需求

我先思考了一个问题："文章转配图"这个任务，可以拆解成哪些固定步骤？

复制代码

1. 读取文章内容
2. 分析文章结构（标题、要点、金句、对比）
3. 选择合适的图片模板
4. 填充内容生成HTML
5. 集成预览和下载功能

第二步：创建技能文件结构

复制代码

.claude/skills/article-to-promo-images/
├── SKILL.md              # 技能入口（自动触发）
├── core-logic.md         # 详细逻辑说明
├── templates/
│   └── base-template.html  # HTML模板
└── examples/
    └── sample-article.md   # 示例文章

第三步：编写 SKILL.md

核心是告诉 Claude 何时触发这个技能：

markdown 复制代码

---
name: article-to-promo-images
description: 将文章自动转换为配图、海报、宣传图。分析文章内容，生成封面图、要点图、对比图、金句图等多种配图类型，支持自定义风格和主题色。
license: MIT
---

# Article to Promo Images

## 何时使用
当用户请求将文章转换为配图、海报、宣传图时自动触发：

- "把这篇文章做成配图"
- "为这篇教程生成配图"
- "帮我制作文章封面图"

## 执行流程
1. 读取并解析文章内容
2. 智能分析选择模板组合
3. 生成HTML文件
4. 返回文件路径和使用说明

第四步：定义图片生成规则

不同类型的文章，生成不同的图片组合：

javascript 复制代码

// 教程类文章
tutorial: ['cover', 'roadmap', 'key-points', 'quote']

// 技术类文章
technical: ['cover', 'key-points', 'comparison', 'quote']

// 观点类文章
opinion: ['cover', 'quote', 'key-points']

三、实战效果展示

我用这个技能处理了一篇《Claude Code Skills 入门》文章，来看看效果：

生成的 3 张配图

主标题 + 副标题 + 系列标签
核心价值标签：消除重复输入、减少Token重复输入、团队知识沉淀
左侧：传统提示词的痛点
右侧：Claude Skills 的优势
中间：转化箭头
金字塔三级加载机制
L1 元数据（100 tokens）
L2 SKILL.md（3000 tokens）
L3 参考资源（按需加载）

设计风格

采用赛博科技风：

深蓝渐变底色 + 霓虹青/橙红强调
网格纹理 + 扫描线效果
科技感字体（Orbitron + JetBrains Mono）

四、技术实现细节

1. 内容提取算法

javascript 复制代码

// 从 Markdown 中提取结构化信息
{
  title: "一级标题",
  subtitle: "首段摘要",
  keyPoints: ["无序列表1", "无序列表2"],
  sections: ["章节1", "章节2"],
  quotes: ["引用块内容"],
  articleType: "tutorial"  // 自动判断
}

2. 模板变量系统

html 复制代码

<!-- 使用占位符便于动态替换 -->
<h1>{{TITLE}}</h1>
<p>{{SUBTITLE}}</p>
<div class="tags">
  {{#each tags}}
    <span class="tag">{{this}}</span>
  {{/each}}
</div>

3. 国内 CDN 优化

html 复制代码

<!-- 字体：使用国内CDN -->
<link href="https://fonts.sourcegcdn.com/css2?family=..." />

<!-- html2canvas：使用 bootCDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

五、使用这个技能的三种方式

方式一：直接调用（已配置技能）

复制代码

把这篇文章做成配图

方式二：指定参数

复制代码

生成 3 张配图，用极简风格

方式三：URL 输入

复制代码

把这个链接做成配图 https://example.com/article

六、这个技能的价值

对个人

维度	提升
效率	从 20-30 分钟 → 1-2 分钟
质量	统一设计风格，专业感强
复用	一次配置，永久使用

对团队

统一品牌视觉：所有文章配图风格一致
降低协作成本：新人无需学习设计工具
知识沉淀：配图模板纳入版本控制

七、进阶技巧

技巧 1：自定义主题色

修改模板中的 CSS 变量：

css 复制代码

:root {
  --primary: #00fff2;      /* 主色 */
  --secondary: #ff6b35;    /* 强调色 */
  --background: #0a0e17;   /* 背景色 */
}

技巧 2：添加新图片类型

在 core-logic.md 中定义新的提取规则，比如：

markdown 复制代码

### 数据图表
从文章中提取数字和统计数据，自动生成对比图表

技巧 3：批量处理

一次处理多篇文章：

复制代码

批量处理 _published/ 目录下的所有文章

八、总结

这个技能我已经用了一段时间，实际感受是：

Claude Skills 的本质不是"存储提示词"，而是"固化工作流"。

以前我每次都要重新思考：

"怎么提取文章要点？"
"用什么设计风格？"
"字体和配色怎么搭配？"

现在这些决策逻辑全部封装在技能文件里，Claude 会自动按我设定的规则执行。

一次思考，永久复用------这就是 Skills 的价值。

下一步

如果你想尝试这个技能：

创建技能目录 ：.claude/skills/article-to-promo-images/
创建 SKILL.md：参考上文"第三步"的示例内容
重启 Claude Code
输入指令 ：把这篇文章做成配图

完整的技能实现代码（含HTML模板），我放在公众号后台了。需要的话可以在公众号后台回复 skills 获取
有问题或建议？ 欢迎在评论区留言！