majiayu000 Skill Stack Thumbnail Generator
Generate on-brand thumbnails for Skill Stack blog posts using Google's Gemini API.
Brand Identity
Skill Stack is a curated repository of SKILL.md files for content creators. The aesthetic is:
- Clean and minimal - Anthropic-adjacent sophistication
- Paper/document metaphor - Skills as stackable knowledge artifacts
- Terracotta accent - Single warm pop of color
- Editorial quality - Think publishing meets productivity
Logo Reference
The logo is 4 stacked paper documents:
- 3 gray layers (light → medium → darker)
- 1 terracotta top layer with folded corner
- Warm cream background
- Subtle shadows for depth
Color Palette
| Role | Color | Hex |
|---|---|---|
| Primary Accent | Terracotta/Coral | #D4654A |
| Background | Warm Cream | #F5F3EE |
| Paper Light | Light Gray | #E8E6E1 |
| Paper Medium | Medium Gray | #DEDBD5 |
| Paper Dark | Darker Gray | #D4D1CB |
| Text/Line | Near-Black | #2D2D2D |
Rule: Terracotta appears on ONE element only per image.
Workflow
Step 1: Understand the Post
Read the post title and content to understand:
- What's the core concept?
- What metaphor would resonate?
- What visual would make someone click?
Step 2: Brainstorm Concepts (APPROVAL REQUIRED)
Generate 4-5 visual concepts. Each should be:
- One sentence describing the visual
- Concrete - you can picture it instantly
- Non-generic - no lightbulbs, handshakes, arrows
- On-brand - fits the paper/document aesthetic
Format for presenting concepts:
## Thumbnail Concepts for "[Post Title]"
1. **[Short label]** - One sentence visual description. Why it works.
2. **[Short label]** - Description...
3. **[Short label]** - Description...
4. **[Short label]** - Description...
Which direction resonates? I can refine from there.
Wait for user approval before proceeding.
Step 3: Develop the Prompt
Once user selects a concept, expand into full prompt:
Create a minimal editorial thumbnail for a blog post about [TOPIC].
CONCEPT: [Expand the selected concept into 2-3 sentences]
STYLE: Clean, flat editorial illustration with paper-like shapes and subtle shadows.
Think Anthropic brand guidelines meets publishing design - sophisticated, minimal, intentional.
NOT photorealistic. NOT glossy AI aesthetic. NOT busy.
COMPOSITION:
- Focal element offset to [left/right third]
- Generous negative space (40%+ of frame empty)
- Single clear focal point
- Asymmetrical balance
COLOR PALETTE:
- Background: warm cream, almost off-white (like #F5F3EE)
- Primary accent: terracotta/burnt coral (like #D4654A) on ONE key element only
- Supporting: light gray and medium gray tones for layered paper shapes
- Shadows: soft, subtle, not harsh drop shadows
TEXTURE: Matte paper quality. Flat shapes with slight edge shadows.
No glossy renders. No gradients. No photorealism.
AVOID:
- Busy compositions
- More than 2-3 distinct elements
- Photorealistic rendering
- Cliche imagery (lightbulbs, gears, arrows)
- Neon or saturated colors
- Gradients
- Glossy AI aesthetic
- Text or words in the image
FORMAT: 16:9 landscape aspect ratio for blog thumbnails
Step 4: Generate
Run via Gemini API:
cd scripts/images
export GEMINI_API_KEY=$(grep GEMINI_API_KEY ../../.env.local | cut -d= -f2)
python3 generate_image.py "PROMPT" --output ../../public/images/thumbnails --name "post-slug"
Or use the /gemini-imagegen skill if available.
Step 5: Review & Iterate
After generation:
- 80% good? Request specific edits
- Composition off? Adjust framing language
- Wrong vibe? Simplify further or try different concept
- Too busy? Remove elements
Concept Templates by Post Type
Framework Posts (CODER, 4S, etc.)
- Stacked/layered shapes representing steps
- Flow diagrams with paper elements
- Numbered paper cards in sequence
Philosophy/Thesis Posts
- Transformation metaphors (rough → polished)
- Contrast/juxtaposition of two elements
- Single powerful symbol
Tool/Technical Posts
- Tool icon + paper document interaction
- Simple geometric representation
- Integration/connection visual
How-To/Practical Posts
- Action in progress (folding, stacking, organizing)
- Before/after implied through arrangement
- Single focused action
Example Concepts
For "The 4S Framework":
- Four stacked squares - Four paper squares arranged diagonally ascending, each labeled S1-S4, top one terracotta
- Funnel of papers - Four documents funneling into one polished output
- Compass with 4 points - Vintage compass where N/E/S/W are replaced by the 4 S's
- Building blocks - Four cube shapes stacking, architectural quality
For "Transform Don't Generate":
- Crumpled to crisp - Crumpled paper ball on left, crisp folded document on right, terracotta accent on the crisp one
- Rough cut to gem - Raw stone transforming into faceted shape
- Sketch to blueprint - Messy sketch evolving into clean technical drawing
Output Location
Save thumbnails to: public/images/thumbnails/[post-slug].png
Reference in frontmatter: image: "/images/thumbnails/[post-slug].png"
Always get concept approval before generating. The thinking is as important as the image.