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

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

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

对我来说，是配图。

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

直到前几天，我用 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 何时触发这个技能：

--- name: article-to-promo-images description: 将文章自动转换为配图、海报、宣传图。分析文章内容，生成封面图、要点图、对比图、金句图等多种配图类型，支持自定义风格和主题色。 license: MIT --- # Article to Promo Images  何时使用 当用户请求将文章转换为配图、海报、宣传图时自动触发： - "把这篇文章做成配图" - "为这篇教程生成配图" - "帮我制作文章封面图"  执行流程 1. 读取并解析文章内容 2. 智能分析选择模板组合 3. 生成HTML文件 4. 返回文件路径和使用说明

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

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

// 教程类文章 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. 内容提取算法

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

2. 模板变量系统

 
          <h1>{{TITLE}} 
         h1> <p>{{SUBTITLE}} 
         p> <div class="tags"> {{#each tags}} <span class="tag">{{this}} 
         span> {{/each}}  
         div>

3. 国内 CDN 优化

 
          <link href="https://fonts.sourcegcdn.com/css2?family=..." />  
          <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 变量：

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

技巧 2：添加新图片类型

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

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

技巧 3：批量处理

一次处理多篇文章：

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

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

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

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

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

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

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

如果你想尝试这个技能：

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

完整的技能实现代码（含HTML模板），我放在公众号后台了。需要的话可以在公众号徐公后台回复 skills 获取

有问题或建议？ 欢迎在评论区留言！