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.
Generate elegant cover images for articles. An agent skill from sugarforever/01coder-agent-skills.
$ npx skills add sugarforever/01coder-agent-skills --skill cover-image -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install sugarforever/01coder-agent-skills cover-image --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "cover-image" agent skill from https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-image into .claude/skills/cover-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cover-image", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-imageType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add sugarforever/01coder-agent-skills --skill cover-image -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install sugarforever/01coder-agent-skills cover-image --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sugarforever/01coder-agent-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/cover-image .agents/skills/cover-image && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "cover-image" agent skill from https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-image into .agents/skills/cover-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cover-image", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add sugarforever/01coder-agent-skills --skill cover-image -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install sugarforever/01coder-agent-skills cover-image --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sugarforever/01coder-agent-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/cover-image .cursor/skills/cover-image && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "cover-image" agent skill from https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-image into .cursor/skills/cover-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cover-image", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/sugarforever/01coder-agent-skills.git --path skills/cover-image--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add sugarforever/01coder-agent-skills --skill cover-image -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install sugarforever/01coder-agent-skills cover-image --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sugarforever/01coder-agent-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/cover-image .gemini/skills/cover-image && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "cover-image" agent skill from https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-image into .gemini/skills/cover-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cover-image", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install sugarforever/01coder-agent-skills cover-imageInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add sugarforever/01coder-agent-skills --skill cover-image -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/sugarforever/01coder-agent-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/cover-image .github/skills/cover-image && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "cover-image" agent skill from https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-image into .github/skills/cover-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cover-image", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add sugarforever/01coder-agent-skills --skill cover-image -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install sugarforever/01coder-agent-skills cover-image --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sugarforever/01coder-agent-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/cover-image .opencode/skills/cover-image && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "cover-image" agent skill from https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-image into .opencode/skills/cover-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cover-image", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
cover-imageGenerate 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. 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.
6 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit e51fb6e. It shows what the files ask for, not the result of running them.
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.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from sugarforever/01coder-agent-skills at commit e51fb6e, republished under its MIT licence (© sugarforever). 879 words, ~2,473 tokens.
.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.Generate hand-drawn style cover images for articles with rich style and composition options.
# 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]| 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 | 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 |
| 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
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 |
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 |
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 |
Save to imgs/ subdirectory in the same folder as the article:
path/to/
├── article.md
└── imgs/
├── prompts/
│ └── cover.md
└── cover.pngSave to current working directory:
./
├── cover-prompt.md
└── cover.pngExtract key information:
If --style or --composition specified, use those. Otherwise:
elegant style + hero-center composition if no clear signalsTitle (if included, max 8 characters):
--no-title flag is usedVisual Elements:
Composition Layout:
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.Image Generation Skill Selection:
Generation: Call selected image generation skill with prompt file and output path.
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.elegant + hero-center is a safe defaultink-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
SKILL.md and 17 other files (references) in skills/cover-image of sugarforever/01coder-agent-skills.
Open the folder on GitHubat commit e51fb6e
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Cover Image this skillsugarforever/01coder-agent-skills | 137 | — | ~2.5k | Automated safety check: Pass | MIT | |
| Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill | 134k | 1 repos | ~3.5k | Automated safety check: Pass | MIT | |
| Slack GIF Creatoranthropics/skills | 180k | 29 repos | ~2k | Automated safety check: Pass | Apache-2.0 | |
| Guizang Social Cardsop7418/guizang-social-card-skill | 7.4k | 1 repos | ~7.8k | Automated safety check: Pass | AGPL-3.0 | |
| Video Cover Imageitwanger/toBeBetterJavaer | 18k | — | ~3.3k | Automated safety check: Pass | None | |
| Ccfddl X Postsccfddl/ccf-deadlines | 9.4k | — | ~5.6k | Automated safety check: Pass | MIT |
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.
anthropics/skills
Provides Slack size and frame limits, Python animation helpers and validators for building animated GIFs sized for emoji and messages.
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.
itwanger/toBeBetterJavaer
Generate matched 3:4, 16:9, and 4:3 short-video cover images from toBeBetterJavaer video scripts or AI/Java technical topics.
ccfddl/ccf-deadlines
Prepare and, with a verified authenticated publishing route and authorization, publish daily conference-deadline countdown posts for @ccfddl on X/Twitter.
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.
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.
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.
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.
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.
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.
sugarforever/01coder-agent-skills
Converts Mermaid diagrams and markdown tables into PNG images through a hosted rendering API, for platforms without rich formatting.
Categories
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.
Cover Image fits situations like: user asks to generate cover image; create article cover; make a cover for article.
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.
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.
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.
SKILL.md names no scripts, command-line tools or credentials: Cover Image is instructions for the agent only.
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.
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.
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.
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.
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.
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.