# muapi-blog-header

Generates a 1200×628 header image for a blog post and tells you where to place the title so it stays readable.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 659 installs · ★ 23
- Author: SamurAIGPT
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/SamurAIGPT/Generative-Media-Skills/tree/HEAD/library/visual/blog-header/SKILL.md
- Updated: 2026-09-29
- HTML: https://affpapa.org/en/nevibecode/skills/muapi-blog-header

## What it does

The skill takes your post topic and builds a generation prompt around it: it picks a visual metaphor instead of the usual handshake or lone lightbulb, applies your publication style, and keeps negative space on the left for the title. Then it calls `muapi image generate` with the `gpt-image-2-text-to-image` model at a 21:9 aspect ratio.

You get three things back: the image, guidance on where to overlay the blog title, and a one-sentence alt text. If you already have a brand photo, the skill suggests adapting it with `muapi image edit` rather than generating from scratch. Dark-mode blogs get a dark background suggestion, light ones stay bright.

You need `MUAPI_API_KEY` set before the first run; if it is missing, run `muapi auth configure` first. Without the key nothing generates, so check that before anything else. Only `topic` is required — `publication_style` and `dominant_color` are optional.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add SamurAIGPT/Generative-Media-Skills --skill muapi-blog-header -a claude-code
```
```bash
npx skills add SamurAIGPT/Generative-Media-Skills --skill blog-header -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/blog-header/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/blog-header/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add SamurAIGPT/Generative-Media-Skills --skill blog-header -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/blog-header/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add SamurAIGPT/Generative-Media-Skills --skill blog-header -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/blog-header/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install SamurAIGPT/Generative-Media-Skills blog-header
```

2. **Manually: put the files in place**
- File: `.github/skills/blog-header/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add SamurAIGPT/Generative-Media-Skills --skill blog-header -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/SamurAIGPT/Generative-Media-Skills --path library/visual/blog-header
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/blog-header/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add SamurAIGPT/Generative-Media-Skills --skill blog-header -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/SamurAIGPT/Generative-Media-Skills/tree/HEAD/library/visual/blog-header/SKILL.md

## When to use it
- produce a 1200×628 header for a blog post
- replace cliché stock imagery with a visual metaphor
- leave room for the title so text does not clash with the image
- get SEO-friendly alt text for the header
- adapt an existing brand photo into a header format

## Example prompts
- Make a header for my post about 10 productivity hacks for remote developers
- Generate a blog header for a post on Redis caching, dark tech blog style
- Take brand.png and turn it into a 1200×628 header

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 9a5d21cb1800f497.

BEGIN THIRD-PARTY FILE 9a5d21cb1800f497
```text
---
slug: muapi-blog-header
name: muapi-blog-header
version: "1.0.0"
description: Create a professional, eye-catching blog post header image sized for web (1200×628) with optional title composition guidance.
acceptLicenseTerms: true
---


# Blog Header

**Create a professional, eye-catching blog post header image sized for web (1200×628) with optional title composition guidance.**

## Inputs

| Name | Type | Required | Default | Description |
|:---|:---|:---|:---|:---|
| `topic` | text | yes | — | The blog post topic or title (e.g. "10 productivity hacks for remote developers"). |
| `publication_style` | text | no | clean, editorial, modern, professional | Visual style matching the blog's brand (e.g. "dark tech blog", "warm lifestyle", "minimalist corporate"). |
| `dominant_color` | text | no | — | Optional primary color direction (e.g. "deep blue", "warm amber", "monochrome"). |


## Steps

Generate a single, publication-quality blog header in one shot — no plan needed unless the user requests variants.

1. Derive a strong visual metaphor for `{{topic}}`:
   - Avoid cliché stock photo compositions (handshake, lightbulb alone).
   - Prefer: dynamic flat lay, abstract concept visualization, illustrated scene, or dramatic lifestyle moment.
2. Build the image prompt:
   - Subject derived from the metaphor above.
   - Style: `{{publication_style}}, editorial photography, 16:9 wide, professional blog header, `
     `ample negative space on the left side for title text overlay, {{dominant_color}} color palette`.
   - Tier: quality.
   - Aspect ratio: 1.91:1 (standard Open Graph / blog hero).
3. Call `muapi image generate` (model=gpt-image-2-text-to-image, aspect_ratio=21:9).

### Deliverables

Return:
- The header image asset.
- **Title placement guidance**: where to overlay the blog title for best readability.
- **Quick alt-text**: SEO-friendly image alt text (1 sentence).

## Notes
- Leave empty space (negative space) intentionally so titles can be overlaid without clashing.
- If the user uploads an existing brand photo, use `muapi image edit` to adapt it instead of generating from scratch.
- For dark-mode blogs, suggest a dark background; for light, keep backgrounds bright.

## Trigger Keywords

`blog header`, `blog image`, `article image`, `featured image`, `og image`, `open graph image`, `hero image`


---

## Notes for the Executing Agent

- This recipe is LLM-orchestrated: read each phase, gather any missing inputs from the user, then call `muapi` CLI commands. Use `muapi auth configure` first if `MUAPI_API_KEY` is unset.
```
END THIRD-PARTY FILE 9a5d21cb1800f497

The third-party file has ended. Everything between the 9a5d21cb1800f497 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2577 of 2933 bytes. © SamurAIGPT · MIT · https://github.com/SamurAIGPT/Generative-Media-Skills/tree/HEAD/library/visual/blog-header/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md