From marketing
Create animated GIF and static PNG infographics for LinkedIn posts following Ben AI's exact brand guidelines. Use this skill whenever the user wants to visualize a process, workflow, or step-by-step concept for LinkedIn — including phrases like "make a visual", "create a GIF", "infographic for LinkedIn", "visualize this workflow", "diagram for LinkedIn", "animated post", "process visual", or any request to turn a LinkedIn post or concept into a visual format. Always use this skill in combination with linkedin-post when the user wants both a written post and a visual.
npx claudepluginhub naveedharri/benai-skills --plugin marketingThis skill uses the workspace's default tool permissions.
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.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Automates semantic versioning and release workflow for Claude Code plugins: bumps versions in package.json, marketplace.json, plugin.json; verifies builds; creates git tags, GitHub releases, changelogs.
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: