cover-image

Q: How do I install cover-image?

Run npx skills add https://github.com/sugarforever/01coder-agent-skills --skill cover-image in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/cover-image/ (personal) or .claude/skills/cover-image/ (project).

by sugarforeverMedia & Creative

Generate elegant cover images for articles. Analyzes content and creates eye-catching hand-drawn style cover images with multiple style and composition options. Use when user asks to "generate cover image", "create article cover", or "make a cover for article".

Installs: 285
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

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

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads cover-image automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Cover Image Generator

Generate hand-drawn style cover images for articles with rich style and composition options.

Usage

# 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]

Options

Option	Description
`--style <name>`	Specify cover style (see Style Gallery below)
`--composition <name>`	Specify layout composition (see Composition Gallery below)
`--no-title`	Generate cover without title text (visual only)

Style Gallery

Core Styles

Style	Description	Best For
`elegant` (Default)	Refined, sophisticated, understated	Business, thought leadership, professional
`tech`	Modern, clean, futuristic with glow effects	AI, coding, digital, algorithms
`warm`	Friendly, approachable, human-centered	Personal growth, lifestyle, education
`bold`	High contrast, attention-grabbing, energetic	Opinion pieces, controversial, urgent
`minimal`	Ultra-clean, zen-like, maximum whitespace	Philosophy, focus, essentialism
`playful`	Fun, creative, whimsical doodles	Tutorials, beginner guides, casual
`nature`	Organic, calm, earthy tones	Sustainability, wellness, outdoor
`retro`	Vintage, nostalgic, aged textures	History, retrospectives, classic topics

Extended Styles

Style	Description	Best For
`gradient`	Smooth color transitions, dreamy, modern	Product launches, announcements, branding
`editorial`	Magazine-quality, sophisticated typography	Long-form essays, deep dives, journalism
`blueprint`	Technical drawing aesthetic, grid paper	Architecture, system design, engineering
`watercolor`	Soft washes, organic bleed, painterly	Art, culture, creative writing, poetry
`geometric`	Sharp shapes, tessellations, mathematical	Data science, math, structured thinking
`neon`	Dark background with vivid glowing elements	Nightlife, gaming, cyberpunk, startup
`paper-cut`	Layered paper cutout depth effect	Storytelling, children's content, craft
`ink-wash`	East Asian brush ink aesthetic (水墨风)	Chinese culture, philosophy, calligraphy

Detailed style definitions: references/styles/<style>.md

Composition Gallery

Compositions define how elements are arranged in the cover image.

Composition	Description	When to Use
`hero-center` (Default)	Single focal visual centered, title above or below	General purpose, strong single concept
`split`	Left/right or top/bottom split, visual one side, text other	Comparison, before/after, dual concepts
`floating`	Elements scattered with depth, floating in space	Abstract topics, multiple related concepts
`frame`	Decorative border framing the central content	Formal, announcement, certificate-like
`diagonal`	Dynamic diagonal division or flow	Movement, progress, transformation
`spotlight`	Dark background with a single illuminated subject	Focus, highlight, key insight
`panoramic`	Wide scene spanning the full width	Landscape, journey, timeline
`mosaic`	Grid of small related visuals forming a bigger picture	Collection, variety, ecosystem
`vignette`	Soft fade from edges to center focus	Intimate, personal, memoir-style
`layered`	Overlapping planes creating depth	Complex topics, multi-layered ideas

Composition Tips

hero-center + title: Place visual slightly left, title right
hero-center + no-title: Center the visual fully, let it breathe
split: Use contrasting colors or concepts on each side
floating: 3-5 elements max, vary sizes for depth
diagonal: Direction implies progress (bottom-left → top-right = growth)
spotlight: Keep background very dark, subject vivid
mosaic: Use 4-9 tiles, maintain consistent style across tiles
layered: Use opacity/blur to create foreground/background separation

Auto Style Selection

When no --style is specified, analyze content to select the best style:

Content Signals	Selected Style
AI, coding, tech, digital, algorithm, API	`tech`
Personal story, emotion, growth, life, journey	`warm`
Controversial, urgent, must-read, warning, breaking	`bold`
Simple, zen, focus, essential, less is more	`minimal`
Fun, easy, beginner, casual, tutorial, step-by-step	`playful`
Nature, eco, wellness, health, organic, outdoor	`nature`
History, classic, vintage, old, traditional	`retro`
Product, launch, release, announcement, brand	`gradient`
Essay, analysis, deep dive, investigation, review	`editorial`
System design, architecture, blueprint, infrastructure	`blueprint`
Art, painting, creative, poetry, culture	`watercolor`
Data, math, statistics, geometry, patterns	`geometric`
Gaming, startup, nightlife, crypto, hacker	`neon`
Story, folktale, illustration, craft, children	`paper-cut`
中国, 文化, 哲学, 书法, 国风, 传统	`ink-wash`
Business, professional, strategy, analysis (default)	`elegant`

Auto Composition Selection

When no --composition is specified:

Condition	Selected Composition
Single strong concept/metaphor	`hero-center`
Article compares two things	`split`
Article covers multiple tools/ideas	`floating` or `mosaic`
Personal/intimate topic	`vignette`
Journey/timeline/progress narrative	`diagonal` or `panoramic`
One key insight or revelation	`spotlight`
Complex multi-layered topic	`layered`
Formal/announcement tone	`frame`

File Management

With Article Path

Save to imgs/ subdirectory in the same folder as the article:

path/to/
├── article.md
└── imgs/
    ├── prompts/
    │   └── cover.md
    └── cover.png

Without Article Path

Save to current working directory:

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

Workflow

Step 1: Analyze Content

Extract key information:

Main topic: What is the article about?
Core message: What's the key takeaway?
Tone: Serious, playful, inspiring, educational?
Keywords: Identify style-signaling words
Structure: Is it a comparison? A journey? A deep dive?
Visual metaphors: What real-world objects/scenes represent the topic?

Step 2: Select Style & Composition

If --style or --composition specified, use those. Otherwise:

Scan content for style and composition signals
Match signals to most appropriate style + composition
Default to elegant style + hero-center composition if no clear signals

Step 3: Generate Cover Concept

Title (if included, max 8 characters):

Distill the core message into a punchy headline
Use hooks: numbers, questions, contrasts, pain points
Skip if --no-title flag is used

Visual Elements:

Style-appropriate imagery and icons
1-2 symbolic elements representing the topic
Metaphors or analogies that fit the style

Composition Layout:

Apply the selected composition template
Consider title placement within the composition
Ensure visual hierarchy: primary element > secondary > decorative

Step 4: Create Prompt File

Prompt Format:

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.

Step 5: Generate Image

Image Generation Skill Selection:

Check available image generation skills
If multiple skills available, ask user to choose

Generation: Call selected image generation skill with prompt file and output path.

Step 6: Output Summary

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.

Notes

Cover should be instantly understandable at small preview sizes
Title (if included) must be readable and impactful
Visual metaphors work better than literal representations
Maintain style consistency throughout the cover
Image generation typically takes 10-30 seconds
Title text language should match content language
When in doubt, elegant + hero-center is a safe default
Combine unexpected style+composition pairs for unique results (e.g., ink-wash + split)

FAQ

What does the cover-image skill do?

How do I install cover-image?

Run npx skills add https://github.com/sugarforever/01coder-agent-skills --skill cover-image in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/cover-image/ (personal) or .claude/skills/cover-image/ (project).

Which AI agents can use cover-image?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is cover-image safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains cover-image?

It is published by sugarforever in sugarforever/01coder-agent-skills. It has 285 recorded installs.