Design

Blog Title Card

Turn one background image into a 1080x1080 blog title card with a label, a two-line title and a sub line, free on your own computer.

Download ZIP (4KB)blog

Free · No sign-up · Updated 2026-10-27 · By sphereai.work💻Install Claude Code (or Codex, Antigravity) firstThis skill runs best in VS Code with Claude Code, Codex or Antigravity.How to install →

Works with Claude, GPT and GeminiInstall any one of them in VS Code →ClaudeClaude CodeGPTCodexGeminiAntigravity

How to use

1
Download the ZIP
Get the skill file with the button below. No sign-up.
2
Unzip and open
Unzip it into a folder and open that folder in VS Code.
3
Just ask
Tell your AI agent ‘Run the automation pipeline in this folder’.

When to use it

You need a top image for a blog post
You want to hide the small corner mark of free image tools
You want to try card texts quickly

Try saying

“이 이미지로 블로그 제목 카드 만들어줘”Make a blog title card from this image

“제목 카드 문구를 바꿔서 다시 렌더해줘”Change the card text and render again

What you get

01A 1080x1080 title card
02The list of texts used on the card

Tips

Subject in the upper half and a calm dark lower half keeps the text readable.
Works with just Chrome installed; no other software.

Get it free now

No sign-up, just one ZIP. Edit it freely for personal or commercial use.

Download ZIP (4KB)

Installation

Claude.ai / Desktop app (ZIP upload)

Download the ZIP below.
Upload it under Settings → Capabilities → Skills.
Turn the skill on and start a chat with one of the "Try saying" lines.

Claude Code (copy the folder)

Unzip it. You'll get a folder named after the skill.
Put that folder inside ~/.claude/skills/ (or .claude/skills/ for a single project).
Restart Claude Code.

Menu names may differ slightly depending on your environment. If you can't see the menu, check that skills are enabled on your plan.

Files and preview

Included files

SKILL.md
references/card_template.html
references/render_card.py
README.txt

Preview of SKILL.md

---
name: blog-title-card
description: Make a 1080x1080 blog title card from one background image with a label, two-line title and sub line, rendered free with headless Chrome. Crops the corner mark of free image tools. 블로그 제목 카드 만들기.
---

# Blog Title Card

Use this to make the first image of a blog post: one background picture plus clean Korean text. Everything runs on the user's computer, no account, no cost.

## Requirements
- Python 3 and Google Chrome (or Edge/Chromium). No Python packages needed to render.
- A background image (see `flow-nano-banana-images`; ask for a calm dark lower half and the subject in the upper half).

## Steps
1. Pick the background. The subject should sit in the **upper half**. The **lower half** must be calm and dark because the title goes there.
2. Write the text. Keep it short: label (about 10 characters), small line above the title, title line 1 and line 2 (about 12 Korean characters each at this size), one sub sentence. Put the key word of line 2 inside `<u>...</u>` for an accent underline. The title should carry the same main keyword and twist as the post title.
3. Render:

```
python references/render_card.py --bg card_bg.png --out card.png \
--tag "Label" --chip "Small line" --l1 "Title line 1" --l2 "Title line <u>2</u>" \
--sub "One sentence" --accent "#ffb347"
```

4. Open `card.png` and check: text is not cut off, text does not cover the main subject, the bottom-right corner shows no leftover sparkle mark, and the contrast is readable on a phone-size preview.
5. Fix by editing the text length or the `--zoom` value (default 1.12; the zoom is what crops the corner mark), then render again.

## Notes
- Fonts: the template uses fonts already on the computer (Malgun Gothic on Windows, Apple SD Gothic Neo on Mac, Noto Sans CJK on Linux). If you add a custom font, make sure its license allows it.
- Do not add the blog name, other channel names or a face to the card unless the user asks.
- One card per post. The same size works for the post's top image and for social previews.

## Output
`card.png` (1080x1080) and the exact text used, so the user can reuse it in the post caption.

---
만든이: sphereai.work (https://sphereai.work)