mcpField
C
cover-image

cover-image

github.com/sugarforever创意与媒体139285 次安装1 周前更新
代码仓库

关于 cover-image

cover-image 是一项根据文章内容生成手绘风格封面图的技能,适用于文章作者和内容创作者。它可选择多种视觉风格与构图,也能从 Markdown 文件分析主题并自动选择方案。

主要功能

  1. 01从 Markdown 文章提取主题
  2. 02自动选择风格与构图
  3. 03指定封面风格和布局
  4. 04生成无标题的纯视觉封面
  5. 05按文章路径保存封面文件

适用场景

  1. 01为文章生成配套封面
  2. 02为产品发布选择渐变风格
  3. 03为技术文章制作蓝图风格封面
  4. 04为无标题视觉图指定构图

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/sugarforever/01coder-agent-skills --skill cover-image

安装后在 Claude Code 中输入/cover-image确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

references/
base-prompt.md
references/styles/
blueprint.md
bold.md
editorial.md
elegant.md
geometric.md
gradient.md
ink-wash.md
minimal.md
nature.md
neon.md
paper-cut.md
playful.md
retro.md
tech.md
warm.md
watercolor.md

详细介绍

封面图生成器

生成手绘风格的文章封面图,提供丰富的风格和构图选项。

用法

# From markdown file (auto-select style based on content)
/cover-image path/to/article.md

# Specify a style
/cover-image path/to/article.md --style tech
/cover-image path/to/article.md --style gradient

# Specify a composition
/cover-image path/to/article.md --composition hero-center

# Without title text
/cover-image path/to/article.md --no-title

# Combine options
/cover-image path/to/article.md --style editorial --composition split --no-title

# From direct text input
/cover-image
[paste content or describe the topic]

选项

选项描述
--style <name>指定封面风格(见下方的风格图库)
--composition <name>指定布局构图(见下方的构图图库)
--no-title生成不含标题文字的封面(仅视觉内容)

风格图库

核心风格
风格描述最适合
elegant(默认)精致、优雅、低调商业、思想领导力、专业主题
tech现代、简洁、未来感,带有发光效果AI、编码、数字、算法
warm友好、亲切、以人为本个人成长、生活方式、教育
bold高对比度、引人注目、充满活力评论文章、争议性主题、紧急议题
minimal极简、禅意、留白充足哲学、专注、极简主义
playful有趣、富有创意、带有奇趣涂鸦教程、入门指南、轻松主题
nature自然、有宁静感、大地色调可持续发展、健康、户外
retro复古、怀旧、做旧质感历史、回顾、经典主题
扩展风格
风格描述最适合
gradient平滑的色彩过渡,梦幻、现代产品发布、公告、品牌塑造
editorial杂志级品质、精致的字体排版长篇随笔、深入探讨、新闻报道
blueprint技术制图美学、网格纸建筑、系统设计、工程
watercolor柔和的色彩晕染、自然渗色、绘画质感艺术、文化、创意写作、诗歌
geometric锐利的形状、镶嵌图案、数学感数据科学、数学、结构化思维
neon深色背景搭配鲜艳的发光元素夜生活、游戏、赛博朋克、初创企业
paper-cut层叠纸艺剪贴的立体效果讲故事、儿童内容、手工艺
ink-wash东亚水墨笔触美学(水墨风)中国文化、哲学、书法

风格定义详见:references/styles/<style>.md

构图图库

构图用于定义封面图中各元素的排列方式。

构图描述适用场景
hero-center(默认)单一视觉焦点居中,标题置于上方或下方通用场景、突出单一概念
split左右或上下分割,一侧放视觉内容,另一侧放文字对比、前后变化、双重概念
floating元素分散排列,营造纵深感和漂浮于空间中的效果抽象主题、多个相关概念
frame用装饰边框框住中央内容正式主题、公告、类似证书的设计
diagonal动感的对角线分割或流动运动、进展、转变
spotlight深色背景搭配单个受光主体聚焦、突出、关键洞见
panoramic横跨全幅的宽阔场景风景、旅程、时间线
mosaic小型相关视觉元素组成网格,共同构成一幅大图集合、多样性、生态系统
vignette从边缘柔和地渐隐至中心焦点亲密、个人、回忆录风格
layered重叠的平面营造纵深感复杂主题、多层次的观点
构图技巧
  • hero-center + 标题:将视觉内容略微置于左侧,标题放在右侧
  • hero-center + 无标题:让视觉内容完全居中,留出呼吸空间
  • split:在两侧使用对比鲜明的颜色或概念
  • floating:最多使用 3-5 个元素,通过改变大小营造纵深感
  • diagonal:方向暗示进展(左下 → 右上 = 成长)
  • spotlight:背景保持很暗,主体色彩鲜明
  • mosaic:使用 4-9 个图块,并确保所有图块的风格一致
  • layered:使用不透明度或模糊效果,区分前景与背景

自动选择风格

未指定 --style 时,分析内容并选择最合适的风格:

内容信号选定风格
AI、编码、科技、数字、算法、APItech
个人故事、情感、成长、生活、旅程warm
有争议、紧迫、必读、警告、突发bold
简约、禅意、专注、精要、少即是多minimal
有趣、轻松、入门、随意、教程、循序渐进playful
自然、环保、健康、养生、有机、户外nature
历史、经典、复古、古老、传统retro
产品、发布、上线、公告、品牌gradient
随笔、分析、深入探讨、调查、评论editorial
系统设计、架构、蓝图、基础设施blueprint
艺术、绘画、创意、诗歌、文化watercolor
数据、数学、统计、几何、模式geometric
游戏、创业公司、夜生活、加密货币、黑客neon
故事、民间传说、插画、手工、儿童paper-cut
中国、文化、哲学、书法、国风、传统ink-wash
商业、专业、战略、分析(默认)elegant

自动选择构图

未指定 --composition 时:

条件选定构图
单一鲜明的概念/隐喻hero-center
文章对比两件事split
文章涵盖多个工具/观点floating 或 mosaic
个人/私密主题vignette
旅程/时间线/进展叙事diagonal 或 panoramic
一个关键洞见或揭示spotlight
复杂的多层主题layered
正式/公告式语气frame

文件管理

提供文章路径时

保存到与文章同一文件夹下的 imgs/ 子目录:

path/to/
├── article.md
└── imgs/
    ├── prompts/
    │   └── cover.md
    └── cover.png
未提供文章路径时

保存到当前工作目录:

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

工作流

步骤 1:分析内容

提取关键信息:

  • 主题:文章讲的是什么?
  • 核心信息:最重要的要点是什么?
  • 语气:严肃、有趣、鼓舞人心,还是具有教育意义?
  • 关键词:找出能体现风格的词语
  • 结构:内容是比较、旅程,还是深入探讨?
  • 视觉隐喻:哪些现实物体/场景可以代表主题?
步骤 2:选择风格和构图

如果指定了 --style 或 --composition,则使用指定项。否则:

  1. 浏览内容,寻找风格和构图信号
  2. 将信号与最合适的风格和构图匹配
  3. 如果没有明确的信号,则默认使用 elegant 风格和 hero-center 构图
步骤 3:生成封面概念

标题(如需添加,最多 8 个字符):

  • 将核心信息提炼成简洁有力的标题
  • 使用吸引人的元素:数字、问题、对比、痛点
  • 使用 --no-title 标志时跳过

视觉元素:

  • 符合风格的图像和图标
  • 1-2 个代表主题的象征性元素
  • 符合风格的隐喻或类比

构图布局:

  • 应用选定的构图模板
  • 考虑标题在构图中的位置
  • 确保视觉层级:主要元素 > 次要元素 > 装饰元素
步骤 4:创建提示词文件

提示词格式:

Cover theme: [topic in 2-3 words]
Style: [selected style name]
Composition: [selected composition name]

[If title included:]
Title text: [8 characters or less, in content language]
Subtitle: [optional, in content language]

Visual composition:
- Main visual: [description matching style]
- Layout: [composition-specific layout description]
- Primary element: [what draws the eye first]
- Secondary elements: [supporting visuals]
- Decorative elements: [style-appropriate accents]

Color scheme:
- Primary: [style primary color]
- Background: [style background color]
- Accent: [style accent color]

Style notes: [specific style characteristics to emphasize]
Composition notes: [specific layout guidance]

[If no title:]
Note: No title text, pure visual illustration only.
步骤 5:生成图像

选择图像生成技能:

  1. 检查可用的图像生成技能
  2. 如果有多个可用技能,请用户选择

生成: 使用提示词文件和输出路径调用选定的图像生成技能。

步骤 6:输出摘要
Cover Image Generated!

Topic: [topic]
Style: [style name]
Composition: [composition name]
Title: [cover title] (or "No title - visual only")
Location: [output path]

Preview the image to verify it matches your expectations.

注意事项

  • 封面应在小尺寸预览中也能一目了然
  • 标题(如有)必须清晰易读且富有冲击力
  • 视觉隐喻比直白呈现效果更好
  • 整个封面应保持风格一致
  • 图像生成通常需要 10-30 秒
  • 标题文字的语言应与内容语言一致
  • 不确定时,elegant + hero-center 是稳妥的默认选择
  • 将意想不到的风格与构图组合起来,打造独特效果(例如,ink-wash + split)

评论

支持 Markdown