Stats
Actions
Tags
Make a 1:1 블로그 썸네일 (square blog/SNS thumbnail, 1000×1000 → exported as a 2000×2000 PNG) from a user-supplied photo plus short Korean text — a 제목(title), 카테고리(category), and 주제/키워드(topic keyword). The signature look: the photo fills the whole square uncovered, and the text sits in a bottom gradient band with a sky-blue + white palette (강조는 하늘색). Built with self-contained HTML/CSS and rendered to an image with Playwright. Use this skill whenever the user wants a 블로그 썸네일 / 썸네일 / thumbnail / 대표 이미지 / 표지 이미지 for a blog post or SNS, ESPECIALLY when they hand over a photo and want title/category/topic text on it — even if they just say "이걸로 썸네일 만들어줘", "이미지 업로드 했으니 썸네일 뽑아줘", or drop an image with a 제목·카테고리·주제. Also use it to re-render after changing text, swapping the photo, or tweaking the accent color while keeping the same look. Prefer this skill over ad-hoc HTML so every thumbnail stays on-brand and consistent.
How this skill is triggered — by the user, by Claude, or both
Slash command
/blog-thumbnail-generator:blog-thumbnail-generatorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill turns **one photo + a little text** into an on-brand square thumbnail for a blog post or SNS. The whole point is **consistency and speed**: the layout and type system are fixed, so across many posts every thumbnail looks like it belongs to the same series — only the photo, the text, and (optionally) the accent color change.
This skill turns one photo + a little text into an on-brand square thumbnail for a blog post or SNS. The whole point is consistency and speed: the layout and type system are fixed, so across many posts every thumbnail looks like it belongs to the same series — only the photo, the text, and (optionally) the accent color change.
Output is a 1000×1000 design rendered at 2× to a 2000×2000 PNG (sharp for upload; well above the 750×750 minimum a blog needs).
A user gives you up to four things. Map them to the template like this:
| Input | Where it goes | Example |
|---|---|---|
| 이미지 (photo) | fills the square as the background | a waffle photo |
| 카테고리 (category) | first chip in the bottom band | 맛집 |
| 주제/키워드 (topic) | second chip, shown as # 주제 | 와플 → # 와플 |
| 제목 (title) | the big headline (white, with one part highlighted sky-blue) | 카페인중독 광교에듀하임 |
If the user gives fewer than four, use what they gave and ask once for anything essential that's missing (you can't make a thumbnail with no photo and no title). For everything else, pick a sensible default and proceed — don't interrogate.
The single most important constraint: text must not sit on top of the photo's subject. The photo fills the whole canvas; all text lives in the bottom .scrim (a dark gradient band that fades to transparent toward the middle). That band is "dead space" over which white text reads cleanly without hiding what the photo is showing. Keep this invariant — it's the heart of the look. If a title is so long it would climb out of the band, shorten the wording or split the highlight onto its own line before shrinking the type.
Confirm you have the photo and the text fields. The photo can be anywhere on disk — you'll point the renderer at it, so its filename doesn't matter.
Set up a working folder for this thumbnail (e.g. the current project, or a thumbnail/ dir). Copy the template in:
cp <skill>/assets/template.html thumbnail.html
Edit thumbnail.html and replace the four placeholders:
[[CATEGORY]] → the category (e.g. 맛집)[[KEYWORD]] → the topic keyword (the # is already in the template, so just 와플)[[TITLE_HL]] and [[TITLE_REST]] → the title, split into the highlighted part (sky-blue) and the rest (white).Choosing the highlight is the main bit of craft. Emphasize the part that carries the most meaning — usually the place/brand name or the hook — and leave connective words white. A <br> between them often reads best on a square. Examples:
Example 1
Input: 제목 "카페인중독 광교에듀하임"
Output: <span class="hl">카페인중독</span><br>광교에듀하임
Example 2
Input: 제목 "성수동 감성 카페 BEST 5"
Output: <span class="hl">성수동</span> 감성 카페<br>BEST 5
Keep the title to ~2 lines. If the user gave no obvious word to stress, highlight the first noun phrase.
Point the renderer at the HTML and the photo (the photo path is optional — if you put the image next to thumbnail.html, it's auto-detected):
node <skill>/scripts/shoot.mjs thumbnail.html img /path/to/photo.jpg
This writes img/thumb.png at 2000×2000. The script self-locates Playwright (local, npx cache, or global). If it says the browser is missing, run npx playwright install chromium once and re-run.
Always read back the rendered PNG before declaring done — text overflow, an awkward photo crop, or a font fallback only show up in the actual image, not the HTML. Check: is the photo's subject uncovered? Does the title fit in the band? Is the highlight on the right word? Then tell the user where the file is and offer quick tweaks (crop position, accent color, highlight choice).
--accent (and --accent-bg) in :root. Leave layout and type alone so the series stays coherent.background-position:center. If the subject is cut off, set e.g. background-position:center 30% on .photo and re-render..thumb section, give each a unique data-name, and the renderer outputs one PNG per section.assets/template.html — the fixed design with the four placeholders and inline how-to comments. Start here.scripts/shoot.mjs — the Playwright renderer (auto-finds Playwright, auto-injects the photo, exports 2×). Run it; don't reinvent it.Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub cyeji/blog-thumbnail-plugin --plugin blog-thumbnail-generator