Social Explainer Diagram Generator

---
name: social-explainer-diagram-generator
description: Turn a product idea, technical concept, or workflow into a social-ready visual explainer for X/LinkedIn, with a clean HTML/SVG-style asset, post copy, and QA pass for mobile readability.
tags:
  - social-media
  - marketing
  - visual-design
  - diagrams
  - linkedin
  - x
  - product-marketing
---

# Social Explainer Diagram Generator

Use this skill when the user wants to turn an idea, workflow, product feature, or technical concept into a polished social-media explainer image and accompanying post copy.

This is for **social-first visual explanation**, not exhaustive documentation.

A documentation diagram can be dense, explicit, and complete.
A social explainer should communicate one idea quickly, survive mobile viewing, and give the audience a simple narrative they can remember.

## Inputs

Ask for or infer:

- `{{topic}}` — the concept, feature, or workflow to explain
- `{{audience}}` — who should understand or care
- `{{platform}}` — X, LinkedIn, or both
- `{{brand_context}}` — product/company positioning, voice, colors, URL
- `{{desired_action}}` — what the viewer should think or do next

If details are missing, make reasonable assumptions and label them briefly.

## Workflow

### 1. Find the core idea

Identify the single sharpest claim or contrast.

Good social explainer ideas often use one of these forms:

- Old model vs better model
- Problem → new mental model
- Before → after
- Hidden layer → visible value
- One misconception → clearer framing
- Workflow broken into 3–5 steps

The viewer should grasp the main point in 3–5 seconds.

### 2. Choose a compact structure

Prefer one of these layouts:

#### Contrast layout
- Big thesis headline
- One sentence setup
- Two cards: old model vs better model
- 3–5 steps or components
- One bottom-line takeaway

#### Anatomy layout
- Big thesis headline
- Short explanation
- 4–6 compact component cards
- One bottom-line takeaway

#### Flow layout
- Big thesis headline
- 3–5 numbered steps
- One outcome box

#### System bridge layout
- Big thesis headline
- Left node → bridge → right node
- One outcome box

### 3. Write social-first copy

Use outcome language, not implementation jargon.

Prefer:

- “reusable workflow” over “prompt template”
- “agent know-how” over “instruction text”
- “portable across tools” over “format conversion”
- “version, test, fork, reuse” over long feature lists

Keep body copy short. If the design starts to feel like documentation, cut 30–50% of the text.

### 4. Create the visual asset

Create a standalone HTML file with inline CSS/SVG-style layout.

Recommended default:

- Square canvas: `1200x1200`
- Dark navy/black background
- Cyan + violet gradient accent
- High-contrast white text
- Rounded cards
- Big headline hierarchy
- Minimal footer with URL and tagline

Use the template in `templates/social-explainer-template.html` if helpful.

### 5. Preview and critique

Open the HTML in a browser and inspect it visually.

Then run a vision/QA critique asking:

- Is it readable on mobile?
- Is it visually balanced?
- Is it too dense?
- Is anything cropped?
- Is the footer too close to the edge?
- Does the hierarchy make the main idea obvious?

Treat critique as product/design feedback, not just aesthetics.

### 6. Simplify aggressively

Common fixes:

- Shorten card text to phrase-level copy
- Remove internal commentary
- Reduce components from 6 to 4 if needed
- Increase headline clarity
- Make the final takeaway larger
- Move footer/URL away from the bottom edge
- Split into a carousel if there is more than one main narrative arc

### 7. Export and verify

Export the final image as a PNG.

If Firefox is available:

```bash
firefox --headless --window-size 1200,1200 --screenshot /tmp/social-explainer.png file:///tmp/social-explainer.html
```

Then verify:

- no browser chrome
- no cropping
- no unintended borders
- text is readable
- footer/safe area is intact

### 8. Deliver the posting package

Provide:

- final PNG path
- source HTML path
- X post
- shorter X variant
- LinkedIn post
- hook variants
- optional carousel breakdown

If the user wants a review queue, create a Notion page with the asset, copy, checklist, and status.

## Quality bar

A good result should feel like a product-marketing artifact, not a generic AI image.

It should be:

- clear in 3–5 seconds
- readable on mobile
- specific enough to teach the concept
- simple enough to share
- visually consistent with the brand
- paired with post copy that can be published with minimal editing

## Example framings

- “Prompts are snippets. Skills are reusable workflows.”
- “A good AI skill is more than a prompt.”
- “If agents run your workflows, instructions need version control.”
- “Don’t copy prompts. Fork skills.”
- “Your agent should be able to browse your skill library.”
- “Your best AI workflows are proof of craft.”

## Pitfalls

- Do not cram an entire feature list into one image.
- Do not use a diagram style that only makes sense as internal documentation.
- Do not make the footer or CTA essential if it might be cropped by a platform preview.
- Do not use tiny text for important ideas.
- Do not post externally without user approval unless the user has explicitly authorized autonomous posting.