Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
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.
npx claudepluginhub naveedharri/benai-skills --plugin marketingHow 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.
Generates 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.
Generates branded infographics using @antv/infographic with 114 templates across 7 categories for data visualizations, process diagrams, timelines, and comparisons.
Generates publication-ready infographics by combining 21 layout types with 22 visual styles. Analyzes content, recommends layout×style combinations, and renders high-density visual summaries.
Share bugs, ideas, or general feedback.
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: