我用 Claude Skills 做了个「文章自动配图」技能
一、场景：从重复劳动到一键搞定
以前的工作流
写完一篇技术文章后，如果要制作宣传图，你需要：
- 重新打开设计软件（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 优化
<!-- 字体：使用国内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 变量：
: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
- 输入指令：
把这篇文章做成配图