From content-engine
Generate image prompts and visuals for blog articles. Use when the user asks to "create images for an article", "generate blog visuals", "make a cover image", "create social media cards", "/content-visuals", or needs image prompts for cover heroes, Facebook cards, or Instagram cards matching article content.
npx claudepluginhub jeffrey94/jeffrey-skills --plugin content-engineThis skill uses the workspace's default tool permissions.
Generate brand-aware image prompts and visuals for blog articles. Supports 9 art styles, 3 moods, 3 image types, and pluggable generation backends.
EXTEND.mdreferences/auto-selection.mdreferences/backends/gemini.mdreferences/base-prompt.mdreferences/compatibility.mdreferences/config/backend-schema.mdreferences/config/preferences-schema.mdreferences/image-types/cover-hero.mdreferences/image-types/facebook-card.mdreferences/image-types/instagram-card.mdreferences/style-presets.mdreferences/styles/bold-graphic.mdreferences/styles/corporate-modern.mdreferences/styles/cultural-motif.mdreferences/styles/data-visual.mdreferences/styles/flat-vector.mdreferences/styles/hand-drawn.mdreferences/styles/isometric.mdreferences/styles/minimal-line.mdreferences/styles/watercolor.mdGenerates and edits AI images for blog content (hero, inline illustrations, social/OG cards) via Gemini MCP using 6-component prompts and 6 domain modes (Editorial, Product, etc.).
Analyzes article structure, identifies positions for visual aids, generates illustrations using Type × Style × Palette approach. Useful for requests to illustrate articles or add images.
Generates customizable article cover images from Markdown files using 5 dimensions: type, palette, rendering, text, mood. Supports cinematic, widescreen, square aspects with auto-selection.
Share bugs, ideas, or general feedback.
Generate brand-aware image prompts and visuals for blog articles. Supports 9 art styles, 3 moods, 3 image types, and pluggable generation backends.
Provide an article path and optional overrides:
/content-visuals path/to/article.md
/content-visuals path/to/article.md --style bold-graphic --mood energetic
/content-visuals path/to/article.md --preset data-vis
/content-visuals path/to/article.md --quick
/content-visuals path/to/article.md --types cover,instagram
/content-visuals path/to/article.md --model flash
/content-visuals path/to/article.md --model pro --types cover
| Style | Best For |
|---|---|
flat-vector | Clean geometric — Policy & Compliance |
isometric | 2.5D technical — Infrastructure, supply chains |
hand-drawn | Sketch-like — Practical guides, how-to |
corporate-modern | Polished gradient — Most blog posts (default) |
bold-graphic | High contrast — Urgent news, deadlines |
watercolor | Soft organic — Success stories, community |
minimal-line | Single-weight premium — Executive content |
data-visual | Chart-inspired — Statistics-heavy articles |
cultural-motif | Local patterns — Culturally-themed topics |
professional — corporate, trustworthy, cleanenergetic — vibrant, dynamic, action-orientedwarm — friendly, approachable, community-focused| Type | Dimensions | Aspect Ratio |
|---|---|---|
cover-hero | 1200 x 675 px | 16:9 |
facebook-card | 1200 x 628 px | 1.91:1 |
instagram-card | 1080 x 1080 px (or 1080 x 1350 px carousel) | 1:1 or 4:5 |
When no style is specified, match based on content pillar:
| Content Pillar | Style | Mood |
|---|---|---|
| Policy & Compliance | corporate-modern | professional |
| Funding & Financing | data-visual | professional |
| Industry Opportunities | isometric | energetic |
| Practical Guides | hand-drawn | warm |
Shortcut combinations:
| Preset | Style + Mood |
|---|---|
standard | corporate-modern + professional |
data-vis | data-visual + professional |
friendly | hand-drawn + warm |
impact | bold-graphic + energetic |
cultural | cultural-motif + warm |
clean | minimal-line + professional |
tech | isometric + professional |
creative | watercolor + warm |
flat | flat-vector + professional |
++ recommended, + works, - avoid:
| Style | Professional | Energetic | Warm |
|---|---|---|---|
| flat-vector | ++ | + | + |
| isometric | ++ | ++ | - |
| hand-drawn | + | + | ++ |
| corporate-modern | ++ | + | - |
| bold-graphic | + | ++ | - |
| watercolor | - | - | ++ |
| minimal-line | ++ | - | + |
| data-visual | ++ | + | - |
| cultural-motif | + | - | ++ |
Load brand colors and typography from config/brands/_active.json → points to the active brand file in config/brands/. Use the brand's palette to tint generated visuals.
--quick) — present recommendation, wait for approvaldata/images/YYYYMMDD/{article-slug}/Determine which backend is configured in config/image-generation.json.
If backend is prompt-only:
Skip generation. Prompts are already saved from Step 5.
If backend is gemini:
$GEMINI_API_KEY is set in the environment"Image generation requires a Gemini API key. Your prompts have been saved to
data/images/...— you can copy them into Google AI Studio or any image generation tool to create your images. To enable automatic generation in Claude Code, setGEMINI_API_KEYin your.envfile."
If backend is any other value: Fall back to prompt-only and notify the user that the backend is not yet implemented.
Resolve the model ID from the --model flag:
--model flash → gemini-2.5-flash-image (default if no flag)--model pro → gemini-3-pro-image-previewRead model config from config/image-generation.json → backends.gemini.models.
For each prompt file saved in Step 5, follow the procedure in references/backends/gemini.md:
jq → temp filecurljqbase64 (platform-aware decode flag)wc -cdata/images/YYYYMMDD/{article-slug}/generated/{type}-{N}.pngOn success: Report each generated image with file path and size:
"Generated cover-hero.png (245,832 bytes)"
On failure (per image):
On total failure (API key invalid, all requests fail):
data/images/YYYYMMDD/{article-slug}/
prompts/
cover-hero-prompt.md
facebook-card-1-prompt.md
instagram-card-1-prompt.md
generated/ (only when API backend is active)
*.png
manifest.json
Load from config/image-generation.json. Available backends:
prompt-only (default) — saves prompts only, no API callsgemini — Google Gemini (requires GEMINI_API_KEY)If the selected backend fails or the API key is missing, fall back to prompt-only mode.
Detailed specifications for each dimension:
references/styles/*.md — full style definitions for each of the 9 stylesreferences/image-types/*.md — specs for cover-hero, facebook-card, instagram-cardreferences/base-prompt.md — 4-layer prompt assembly guidereferences/auto-selection.md — content signal → style mappingreferences/compatibility.md — style × mood and style × image-type matricesreferences/style-presets.md — preset shortcut definitionsreferences/visual-elements.md — universal visual rulesreferences/workflow/*.md — step-by-step workflow proceduresreferences/config/*.md — backend and preferences schemasreferences/backends/gemini.md — Gemini API curl implementation reference