skills/gusibi/skills/article-image

article-image

SKILL.md

文章插图生成器

为文章生成手绘风格封面及文中插图,自动上传至 R2 并在合适位置插入链接。

使用方式

# 生成封面及建议的文中插图(默认模式)
/article-image path/to/article.md

# 仅生成封面
/article-image path/to/article.md --only-cover

# 指定风格生成全套图片
/article-image path/to/article.md --style tech

# 直接解析内容并生成建议
/article-image
[粘贴内容]

选项

选项 说明
--style <名称> 指定统一的视觉风格
--only-cover 仅生成封面图,不添加文中插图
--count <数量> 限制文中插图的最大数量(默认根据长度自动决定)
--no-title 封面图不含标题文字
--no-upload 仅生成本地图片,不上传至 R2

风格列表

风格 说明
elegant(默认) 精致、优雅、低调
tech 现代、极简、科技感
warm 温暖、亲切、人文关怀
bold 高对比、吸睛、活力十足
minimal 极简、禅意、专注
playful 有趣、创意、俏皮
nature 自然、平静、质朴
retro 复古、怀旧、经典

自动风格选择

未指定 --style 时,根据内容关键词自动选择:

内容特征 选择风格
AI、编程、技术、算法、数字化 tech
个人故事、情感、成长、生活 warm
争议性、紧急、必读、警告 bold
极简、禅、专注、本质 minimal
有趣、轻松、入门、教程 playful
自然、环保、健康、养生 nature
历史、传统、怀旧、经典 retro
商业、专业、策略、分析 elegant

工作流程

步骤 1:深度内容分析

从全篇中提取:

  • 核心主题:用于封面。
  • 关键转折/概念点:识别适合配图的"插图点"(Illustration Points)。
  • 视觉风格信号:确定全系列统一的视觉基调。

步骤 2:识别插图点

除非指定 --only-cover,否则需找出 1-3 个(视文章长度而定)关键位置:

  1. 抽象概念转述处:需要视觉辅助理解的地方。
  2. 长段落分隔处:转换话题或需要视觉休息的地方。
  3. 情感共鸣点:强调核心观点或金句的地方。

步骤 3:生成系列概念

为选定的每个点(含封面)生成独立提示:

封面:提炼 8 字以内标题,气势恢宏或极简。 文中插图:侧重局部细节、隐喻符号,不含文字,保持视觉一致性。

步骤 4:创建提示文件

生成图片生成提示,保存至 imgs/prompts/ 目录下:

# 封面/插图 [名称]
主题:[关键描述]
风格:[风格名称]
类型:[封面/文中插图]
...
封面主题:[用 2-3 个词描述主题]
风格:[选定的风格名称]

[如包含标题:]
标题文字:[8 个字符以内,使用内容语言]
副标题:[可选,使用内容语言]

视觉构图:
- 主视觉:[符合风格的描述]
- 布局:[根据是否有标题调整]
- 装饰元素:[风格相关的元素]

配色方案:
- 主色:[风格主色调]
- 背景:[风格背景色]
- 强调色:[风格强调色]

风格说明:[需强调的风格特征]

[如无标题:]
注意:纯视觉插图,不含任何文字。

步骤 5:生成图片

使用 scripts/generate_image.py 脚本生成图片:

API Key 配置(二选一):

  1. 环境变量:export MODELSCOPE_API_KEY="your-api-key"
  2. 命令行参数:--api-key "your-api-key"
# 使用环境变量中的 API Key
python scripts/generate_image.py --prompt "提示内容" --output path/to/imgs/cover.png

# 或直接传入 API Key
python scripts/generate_image.py --prompt "提示内容" --output path/to/imgs/cover.png --api-key "ms-xxx"

# 指定图片尺寸(默认 1024×576,16:9比例)
python scripts/generate_image.py --prompt "提示内容" --output cover.png --width 1920 --height 1080

尺寸参数说明

参数 说明 默认值
--width 图片宽度(像素) 1024
--height 图片高度(像素) 576

常用尺寸参考:

  • 16:9 宽屏--width 1024 --height 576(默认)
  • 1:1 方形--width 1024 --height 1024
  • 手机竖屏--width 576 --height 1024

脚本功能:

  • 调用 ModelScope API 生成图片
  • 支持自定义图片尺寸(默认 1024×576,16:9 比例)
  • 支持异步任务模式,自动轮询等待结果
  • 自动创建输出目录
  • 保存图片到指定路径

步骤 6:上传至 R2

除非指定 --no-upload,否则自动上传图片:

# 使用默认端口 38123
python scripts/upload_image.py path/to/imgs/cover.png

# 指定端口
python scripts/upload_image.py path/to/imgs/cover.png --port 8080

脚本说明:

  • 通过本地代理服务上传(默认端口 38123)
  • 自动解析 JSON 响应提取图片 URL
  • 返回 R2 存储的公开访问 URL
  • 确保代理服务正在运行

解析返回结果,提取图片 URL,格式类似:

https://your-r2-domain.com/path/to/cover.png

步骤 7:智能插入文章

  1. 封面图:按原规则插入文章开头。
  2. 文中插图
    • 插入在选定的"插图点"之前的空行。
    • 使用标准 Markdown 语法:![插图描述](URL)
    • 如果对应段落有小标题,通常插在小标题下方。

步骤 8:输出摘要

输出包含所有已生成图片的列表及链接。

封面图片已生成!

主题:[主题]
风格:[风格名称]
标题:[封面标题] 或 "无标题 - 纯视觉"
本地路径:[输出路径]
R2 链接:[上传后的 URL]
文章更新:已在 [文章路径] 中插入封面

请预览图片确认效果符合预期。

文件管理

有文章路径时

保存到文章同目录下的 imgs/ 子目录:

path/to/
├── article.md(已更新,包含封面链接)
└── imgs/
    ├── prompts/
    │   └── cover.md
    └── cover.png

无文章路径时

保存到当前工作目录:

./
├── cover-prompt.md
└── cover.png

注意事项

  • 封面在小尺寸预览时应清晰可辨
  • 标题(如有)必须清晰醒目
  • 视觉隐喻优于直译表达
  • 保持风格一致性
  • 图片生成通常需要 10-30 秒
  • 上传前确保本地代理服务正在运行(端口 38123)
  • 标题文字语言应与文章内容语言一致
Weekly Installs
1
Repository
gusibi/skills
GitHub Stars
1
First Seen
6 days ago
Installed on
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1