Stats
Actions
Tags
From marketing
Creates animated GIFs and static PNG infographics for LinkedIn posts using PIL/Pillow and Ben AI's brand guidelines for workflows, processes, and step-by-step visuals.
How this skill is triggered — by the user, by Claude, or both
Slash command
/marketing:gif-creatorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create polished, on-brand animated GIF and static PNG infographics for LinkedIn posts. These visuals follow Ben AI's exact brand guidelines and are designed for maximum engagement on LinkedIn.
Create polished, on-brand animated GIF and static PNG infographics for LinkedIn posts. These visuals follow Ben AI's exact brand guidelines and are designed for maximum engagement on LinkedIn.
This skill follows a strict two-step interactive process. Never skip to creating the visual without Step 1 approval.
Before creating anything, propose 2-3 different ways to visualize the content. Consider:
For each suggestion, briefly explain:
Wait for user to confirm which approach before proceeding.
Once the approach is confirmed, build the visual using PIL/Pillow following the exact brand guidelines below. Always output both:
Save both to the outputs folder.
These are non-negotiable. Every visual must follow these exactly.
| Role | Color | Hex |
|---|---|---|
| Background | Light yellow | #FAF3E3 (250, 243, 227) |
| Card background | White | #FFFFFF (255, 255, 255) |
| Border / shadow / text | Near-black | #020309 (2, 3, 9) |
| Title accent | Green | (72, 160, 120) |
| Gray text (descriptions) | Gray | (100, 100, 100) |
| Divider lines | Warm gray | (210, 205, 190) |
| Phase | Color | Hex |
|---|---|---|
| INPUT | Dark yellow | #FDEEC4 (253, 238, 196) |
| PLAN | Light blue | #E5F5F9 (229, 245, 249) |
| ENGINE | Light blue | #E5F5F9 (229, 245, 249) |
| EXEC | Green | #D2ECD0 (210, 236, 208) |
| DEBUG | Red/pink | #F3C1C0 (243, 193, 192) |
Phase tags are optional — use them when the content has clear phases/categories.
Font paths: /usr/share/fonts/truetype/google-fonts/Poppins-Bold.ttf and Poppins-Medium.ttf
Always include: "Ben Van Sprundel | Founder @ BenAI"
Add relevant icons/logos to cards where they make sense. Draw them programmatically with PIL (do not rely on external image files). Available logo drawing patterns:
(224, 125, 79)(234, 72, 108)For other tools/concepts, draw simple representative icons using PIL primitives (ellipses, rectangles, polygons). Keep icons small (45px radius at 3x) and positioned on the left side of each card.
See references/template-code.py for complete logo drawing implementations.
The GIF animation reveals content progressively:
Frame timing: 100ms per frame for reveal, 150ms for final hold. Aim for under 300KB total.
This is critical for sharp text:
SCALE = 3
WIDTH = 800 * SCALE # 2400
HEIGHT = 998 * SCALE # 2994
# ... draw everything at 3x size ...
# Downscale for crisp final output
final = img.resize((800, 998), Image.LANCZOS)
Always render at 3x and downscale. Text rendered at 1x or 2x will look blurry on LinkedIn.
Vertically center the text block (label + gap + description) within each card:
label_bbox = draw.textbbox((0, 0), label, font=FONT_NODE_LABEL)
label_h = label_bbox[3] - label_bbox[1]
desc_bbox = draw.textbbox((0, 0), desc, font=FONT_NODE_DESC)
desc_h = desc_bbox[3] - desc_bbox[1]
text_gap = 12
total_text_h = label_h + text_gap + desc_h
text_top = card_y + (CARD_H - total_text_h) // 2
This prevents text from floating too high or low in cards.
pip install pillow --break-system-packages
PIL (Pillow) is the only required dependency.
For the complete working implementation (logo drawing functions, card rendering, animation frame generation), read:
references/template-code.py
This contains a fully tested template that produces a vertical process flow infographic. Adapt it for each new visual by changing the NODES data, title text, and logo assignments.
When creating a new visual, adapt the template by:
part1, part2 (accent colored), and subtitletotal_cards_h and start_y based on number of nodesBefore delivering, verify:
npx claudepluginhub naveedharri/benai-skills --plugin marketingGenerates professional infographics using Gemini AI via Nano Banana MCP. Guides through content analysis, visualizable concepts, visualization approaches, and on-brand image creation for social media.
Generate branded infographic specifications from any content or data, outputting structured layout, copy, data visualization, and color scheme for HTML/CSS, Satori, Canva, or any design tool.
Generates professional infographics from content using Gemini AI via Nano Banana MCP. Guided phases: analyze content, suggest visualizable concepts, propose approaches, generate on-brand images. Invoke via /infographic-v2 or triggers.