Generate elegant cover images for articles. An agent skill from sugarforever/01coder-agent-skills.

MITAuto-check passedMedia & Creative

Install Cover Image

skills CLI
$ npx skills add sugarforever/01coder-agent-skills --skill cover-image -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install sugarforever/01coder-agent-skills cover-image --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/sugarforever/01coder-agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/cover-image .claude/skills/cover-image && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
cover-image
GitHub stars
137
Token cost
~2.5k tokens
SKILL.md length
879 words
Files
18 (incl. references)
Skills in repo
21
Repo updated
First seen
Licence
MIT

At a glance

Generate elegant cover images for articles. An agent skill from sugarforever/01coder-agent-skills.

  • Works in 6 steps: Analyze Content → Select Style & Composition → Generate Cover Concept → …
  • User asks to generate cover image
  • SKILL.md covers Usage, Options, Style Gallery and Composition Gallery, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Cover Image is an agent skill from sugarforever/01coder-agent-skills. 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".

Its SKILL.md is about 2.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 19 other files, including reference files (for example `references/base-prompt.md`, `references/styles/blueprint.md` and `references/styles/bold.md`).

It sits in Media & Creative, covering Social media graphics. The licence is MIT.

When your agent uses it

  • User asks to generate cover image
  • Create article cover
  • Make a cover for article

Example prompts

  • “generate cover image”
  • “create article cover”
  • “make a cover for article”
  • “/cover-image”

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Analyze Content
  2. Select Style & Composition
  3. Generate Cover Concept
  4. Create Prompt File
  5. Generate Image
  6. Output Summary

What it can do on your machine

Read from SKILL.md and the folder at commit e51fb6e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are bash and markdown).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Cover Image loads about 2.5k tokens when it runs, and up to ~5.1k if it reads all its reference files. Until then it costs about 68 tokens; SKILL.md has 879 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~68
When it runs · the whole SKILL.md, loaded when a task matches
~2.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~5.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from sugarforever/01coder-agent-skills at commit e51fb6e, republished under its MIT licence (© sugarforever). 879 words, ~2,473 tokens.

Download SKILL.mdSave it as .claude/skills/cover-image/SKILL.md (or your agent's skills folder). This skill also uses 17 other files; get the full folder from GitHub.
name
cover-image
description
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".

Cover Image Generator

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

Usage

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

OptionDescription
--style <name>Specify cover style (see Style Gallery below)
--composition <name>Specify layout composition (see Composition Gallery below)
--no-titleGenerate cover without title text (visual only)
Core Styles
StyleDescriptionBest For
elegant (Default)Refined, sophisticated, understatedBusiness, thought leadership, professional
techModern, clean, futuristic with glow effectsAI, coding, digital, algorithms
warmFriendly, approachable, human-centeredPersonal growth, lifestyle, education
boldHigh contrast, attention-grabbing, energeticOpinion pieces, controversial, urgent
minimalUltra-clean, zen-like, maximum whitespacePhilosophy, focus, essentialism
playfulFun, creative, whimsical doodlesTutorials, beginner guides, casual
natureOrganic, calm, earthy tonesSustainability, wellness, outdoor
retroVintage, nostalgic, aged texturesHistory, retrospectives, classic topics
Extended Styles
StyleDescriptionBest For
gradientSmooth color transitions, dreamy, modernProduct launches, announcements, branding
editorialMagazine-quality, sophisticated typographyLong-form essays, deep dives, journalism
blueprintTechnical drawing aesthetic, grid paperArchitecture, system design, engineering
watercolorSoft washes, organic bleed, painterlyArt, culture, creative writing, poetry
geometricSharp shapes, tessellations, mathematicalData science, math, structured thinking
neonDark background with vivid glowing elementsNightlife, gaming, cyberpunk, startup
paper-cutLayered paper cutout depth effectStorytelling, children's content, craft
ink-washEast Asian brush ink aesthetic (水墨风)Chinese culture, philosophy, calligraphy

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

Compositions define how elements are arranged in the cover image.

CompositionDescriptionWhen to Use
hero-center (Default)Single focal visual centered, title above or belowGeneral purpose, strong single concept
splitLeft/right or top/bottom split, visual one side, text otherComparison, before/after, dual concepts
floatingElements scattered with depth, floating in spaceAbstract topics, multiple related concepts
frameDecorative border framing the central contentFormal, announcement, certificate-like
diagonalDynamic diagonal division or flowMovement, progress, transformation
spotlightDark background with a single illuminated subjectFocus, highlight, key insight
panoramicWide scene spanning the full widthLandscape, journey, timeline
mosaicGrid of small related visuals forming a bigger pictureCollection, variety, ecosystem
vignetteSoft fade from edges to center focusIntimate, personal, memoir-style
layeredOverlapping planes creating depthComplex 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 SignalsSelected Style
AI, coding, tech, digital, algorithm, APItech
Personal story, emotion, growth, life, journeywarm
Controversial, urgent, must-read, warning, breakingbold
Simple, zen, focus, essential, less is moreminimal
Fun, easy, beginner, casual, tutorial, step-by-stepplayful
Nature, eco, wellness, health, organic, outdoornature
History, classic, vintage, old, traditionalretro
Product, launch, release, announcement, brandgradient
Essay, analysis, deep dive, investigation, revieweditorial
System design, architecture, blueprint, infrastructureblueprint
Art, painting, creative, poetry, culturewatercolor
Data, math, statistics, geometry, patternsgeometric
Gaming, startup, nightlife, crypto, hackerneon
Story, folktale, illustration, craft, childrenpaper-cut
中国, 文化, 哲学, 书法, 国风, 传统ink-wash
Business, professional, strategy, analysis (default)elegant
Show full SKILL.md (340 more words)Show less

Auto Composition Selection

When no --composition is specified:

ConditionSelected Composition
Single strong concept/metaphorhero-center
Article compares two thingssplit
Article covers multiple tools/ideasfloating or mosaic
Personal/intimate topicvignette
Journey/timeline/progress narrativediagonal or panoramic
One key insight or revelationspotlight
Complex multi-layered topiclayered
Formal/announcement toneframe

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:

  1. Scan content for style and composition signals
  2. Match signals to most appropriate style + composition
  3. 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:

markdown
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:

  1. Check available image generation skills
  2. 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)

© sugarforever, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 17 other files (references) in skills/cover-image of sugarforever/01coder-agent-skills.

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

Open the folder on GitHubat commit e51fb6e

Compare with similar skills

Cover Image next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Cover Image compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Cover Image this skillsugarforever/01coder-agent-skills137—~2.5kAutomated safety check: PassMIT
Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill134k1 repos~3.5kAutomated safety check: PassMIT
Slack GIF Creatoranthropics/skills180k29 repos~2kAutomated safety check: PassApache-2.0
Guizang Social Cardsop7418/guizang-social-card-skill7.4k1 repos~7.8kAutomated safety check: PassAGPL-3.0
Video Cover Imageitwanger/toBeBetterJavaer18k—~3.3kAutomated safety check: PassNone
Ccfddl X Postsccfddl/ccf-deadlines9.4k—~5.6kAutomated safety check: PassMIT

Similar skills

  • Brand and Design Toolkit

    nextlevelbuilder/ui-ux-pro-max-skill

    Bundles design tasks behind one skill: brand identity, tokens, UI styling, logos, corporate identity mockups, slides, banners, icons and social images.

    134k GitHub starsUsed in 1 repo~3.5k tokens
    Media & CreativeAuto-check passed
  • Slack GIF Creator

    anthropics/skills

    Official

    Provides Slack size and frame limits, Python animation helpers and validators for building animated GIFs sized for emoji and messages.

    180k GitHub starsUsed in 29 repos~2k tokens
    Media & CreativeAuto-check passed
  • Guizang Social Cards

    op7418/guizang-social-card-skill

    Produces social card sets for Xiaohongshu and WeChat: carousels, Live Photo motion cards and puzzle layouts, and WeChat cover pairs, rendered from single-file HTML.

    7.4k GitHub starsUsed in 1 repo~7.8k tokens
    Media & CreativeAuto-check passed
  • Video Cover Image

    itwanger/toBeBetterJavaer

    Generate matched 3:4, 16:9, and 4:3 short-video cover images from toBeBetterJavaer video scripts or AI/Java technical topics.

    18k GitHub stars~3.3k tokensUpdated today
    Media & CreativeAuto-check passed
  • Ccfddl X Posts

    ccfddl/ccf-deadlines

    Prepare and, with a verified authenticated publishing route and authorization, publish daily conference-deadline countdown posts for @ccfddl on X/Twitter.

    9.4k GitHub stars~5.6k tokensUpdated today
    Media & CreativeAuto-check passed
  • Web Asset Generator

    alonw0/web-asset-generator

    Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn.

    514 GitHub starsUsed in 1 repo~6.6k tokens
    Media & CreativeAuto-check passed

More from sugarforever/01coder-agent-skills

All 21 skills in this repo
  • Typography Cover Designer

    sugarforever/01coder-agent-skills

    Designs typography-driven video covers and thumbnails in HTML/CSS and screenshots them with Chrome DevTools at 16:9, 16:10, 9:16 and 3:4.

    137 GitHub stars~3.3k tokensUpdated 3 mo ago
    Auto-check passed
  • Mining Session Skills

    sugarforever/01coder-agent-skills

    Reviews one finished Claude Code session from its exported markdown and decides whether a skill is worth creating, updating or reusing for similar work.

    137 GitHub stars~1.4k tokensUpdated 3 mo ago
    Auto-check passed
  • Subtitle Correction

    sugarforever/01coder-agent-skills

    Fixes speech-recognition mistakes in .srt subtitle files, in Chinese or English, using terms you supply and leaving every timestamp untouched.

    137 GitHub stars~2.3k tokensUpdated 3 mo ago
    Auto-check passed
  • Claude Session Exporter

    sugarforever/01coder-agent-skills

    Lists Claude Code session transcripts and exports them to organized Markdown with a digest, a clean conversation and linked tool-call details.

    137 GitHub stars~1.7k tokensUpdated 3 mo ago
    Auto-check passed
  • Codex Session Manager

    sugarforever/01coder-agent-skills

    Lists, filters and exports local Codex session transcripts to organized Markdown with a digest, timeline and tool-call details, in full or pick-one mode.

    137 GitHub stars~1.2k tokensUpdated 3 mo ago
    Auto-check passed
  • Diagram to Image Converter

    sugarforever/01coder-agent-skills

    Converts Mermaid diagrams and markdown tables into PNG images through a hosted rendering API, for platforms without rich formatting.

    137 GitHub stars~1.9k tokensUpdated 3 mo ago
    Auto-check passed

Questions about Cover Image

What does Cover Image do?

Generate elegant cover images for articles. An agent skill from sugarforever/01coder-agent-skills. Cover Image is an agent skill from sugarforever/01coder-agent-skills. Generate elegant cover images for articles.

When should I use Cover Image?

Cover Image fits situations like: user asks to generate cover image; create article cover; make a cover for article.

How do I install Cover Image in Claude Code?

Run `npx skills add sugarforever/01coder-agent-skills --skill cover-image -a claude-code`. Or copy the skill folder (skills/cover-image in sugarforever/01coder-agent-skills) into .claude/skills/cover-image in your project. Claude Code loads it when a task matches its description.

How do I install Cover Image in Codex?

Run `npx skills add sugarforever/01coder-agent-skills --skill cover-image -a codex`. Or copy the skill folder (skills/cover-image in sugarforever/01coder-agent-skills) into .agents/skills/cover-image in your project. Codex loads it when a task matches its description.

Can I use Cover Image in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sugarforever/01coder-agent-skills --skill cover-image -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/cover-image, .gemini/skills/cover-image, .github/skills/cover-image and .opencode/skills/cover-image in your project.

What does Cover Image need to run?

SKILL.md names no scripts, command-line tools or credentials: Cover Image is instructions for the agent only.

Does Cover Image access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Cover Image safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Cover Image use?

Cover Image is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Cover Image use?

About 2.5k tokens (SKILL.md is roughly 9.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.6k tokens, read only when the agent opens those files.

What are the alternatives to Cover Image?

Skills that share tags, products or a category with Cover Image: Brand and Design Toolkit (nextlevelbuilder/ui-ux-pro-max-skill, 134k stars), Slack GIF Creator (anthropics/skills, 180k stars), Guizang Social Cards (op7418/guizang-social-card-skill, 7.4k stars) and Video Cover Image (itwanger/toBeBetterJavaer, 18k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Cover Image?

sugarforever (a GitHub user) maintains it in sugarforever/01coder-agent-skills, which has 137 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on June 19, 2026.

Source: sugarforever/01coder-agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.