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

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

写公众号文章，你最烦什么？
对我来说，是配图。
每次写完文章，都要绞尽脑汁想配什么图、去哪里找图、怎么排版才好看。
直到前几天，我用 Claude Code 做了个自动化技能，把这件事彻底解决了。

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

以前的工作流

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

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

耗时：约 5-15 分钟（根据我的实际经验）
现在的工作流

打开 Claude Code，输入一句话：

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

复制代码

约 1分钟之后：打开生成的 HTML 文件，4张精美配图已经准备好，点击下载即可。
耗时：不到 2 分钟（包含打开文件下载的时间）
二、这个技能是如何实现的？

第一步：分析需求

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

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

复制代码

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

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

复制代码

第三步：编写 SKILL.md

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

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

复制代码

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

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

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

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

复制代码

2. 模板变量系统

1. [size=6]{{TITLE}}[/size]
3. {{SUBTITLE}}
4.   {{#each tags}}    {{this}}  {{/each}}

复制代码

3. 国内 CDN 优化

1. [/code][size=5]五、使用这个技能的三种方式[/size]
3. [size=4]方式一：直接调用（已配置技能）[/size]
5. [code]把这篇文章做成配图

复制代码

方式二：指定参数

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

复制代码

方式三：URL 输入

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

复制代码

六、这个技能的价值

对个人

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

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

七、进阶技巧

技巧 1：自定义主题色

修改模板中的 CSS 变量：

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

复制代码

技巧 2：添加新图片类型

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

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

复制代码

技巧 3：批量处理

一次处理多篇文章：

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

复制代码

八、总结

这个技能我已经用了一段时间，实际感受是：
Claude Skills 的本质不是"存储提示词"，而是"固化工作流"。
以前我每次都要重新思考：

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

现在这些决策逻辑全部封装在技能文件里，Claude 会自动按我设定的规则执行。
一次思考，永久复用——这就是 Skills 的价值。
下一步

如果你想尝试这个技能：

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

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

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

yyds。多谢分享

喜欢鼓捣这些软件，现在用得少，谢谢分享！