我用 Claude Skills 做了个「文章自动配图」技能
我用 Claude Skills 做了个「文章自动配图」技能写公众号文章，你最烦什么？
对我来说，是配图。
每次写完文章，都要绞尽脑汁想配什么图、去哪里找图、怎么排版才好看。
直到前几天，我用 Claude Code 做了个自动化技能，把这件事彻底解决了。
https://img2024.cnblogs.com/other/1001668/202601/1001668-20260118210209447-161703539.png
一、场景：从重复劳动到一键搞定
以前的工作流
写完一篇技术文章后，如果要制作宣传图，你需要：
[*]重新打开设计软件（Figma/Canva/Photoshop）
[*]手动提炼文章要点
[*]逐张设计图片
[*]调整配色和排版
[*]导出PNG上传
耗时：约 5-15 分钟（根据我的实际经验）
现在的工作流
打开 Claude Code，输入一句话：
把这篇文章做成配图 mp-wechat/_published/xxx.md约 1分钟之后：打开生成的 HTML 文件，4张精美配图已经准备好，点击下载即可。
耗时：不到 2 分钟（包含打开文件下载的时间）
二、这个技能是如何实现的？
第一步：分析需求
我先思考了一个问题："文章转配图"这个任务，可以拆解成哪些固定步骤？
1. 读取文章内容2. 分析文章结构（标题、要点、金句、对比）3. 选择合适的图片模板4. 填充内容生成HTML5. 集成预览和下载功能第二步：创建技能文件结构
.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-imagesdescription: 将文章自动转换为配图、海报、宣传图。分析文章内容，生成封面图、要点图、对比图、金句图等多种配图类型，支持自定义风格和主题色。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 张配图
https://img2024.cnblogs.com/other/1001668/202601/1001668-20260118210209447-161703539.png
[*]主标题 + 副标题 + 系列标签
[*]核心价值标签：消除重复输入、减少Token重复输入、团队知识沉淀
https://img2024.cnblogs.com/other/1001668/202601/1001668-20260118210210038-948964256.png
[*]左侧：传统提示词的痛点
[*]右侧：Claude Skills 的优势
[*]中间：转化箭头
https://img2024.cnblogs.com/other/1001668/202601/1001668-20260118210210543-257185683.png
[*]金字塔三级加载机制
[*]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. 模板变量系统
{{TITLE}}
{{SUBTITLE}}
{{#each tags}} {{this}}{{/each}}3. 国内 CDN 优化
五、使用这个技能的三种方式
方式一：直接调用（已配置技能）
把这篇文章做成配图方式二：指定参数
生成 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 获取
有问题或建议？ 欢迎在评论区留言！
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ yyds。多谢分享 喜欢鼓捣这些软件，现在用得少，谢谢分享！ 谢谢分享，辛苦了 不错，里面软件多更新就更好了 不错，里面软件多更新就更好了 这个好，看起来很实用 分享、互助 让互联网精神温暖你我 分享、互助 让互联网精神温暖你我 感谢分享 东西不错很实用谢谢分享 收藏一下 不知道什么时候能用到 鼓励转贴优秀软件安全工具和文档！ 分享、互助 让互联网精神温暖你我 谢谢分享，辛苦了 不错，里面软件多更新就更好了 这个有用。 收藏一下 不知道什么时候能用到 分享、互助 让互联网精神温暖你我 感谢分享，学习下。
页:
[1]
2