visual-content
Designs and directs the visual assets that carry content — carousels, infographics, quote graphics, diagrams, and social imagery — including the generation prompts where they are AI-produced. Use this to turn a written piece into a visual format, design a carousel or infographic,
Install
npx skills add https://github.com/cbrock84/headcount/tree/main/plugins/marketing/skills/visual-content
claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install cbrock84-headcount@llmmart
git clone https://github.com/cbrock84/headcount.git
The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole cbrock84/headcount collection as a plugin from our marketplace. Git is the plain clone.
Skill manifest
Visual content
The format follows the content's shape
- Sequence or process → carousel. One step per slide, one idea per slide.
- Comparison or relationship → single diagram. A carousel would break what needs to be seen at once.
- A single memorable claim → quote graphic.
- Quantity, trend, or proportion → chart, with one message.
- Anything with more than about seven elements → it is two visuals.
Choosing format by what is fashionable rather than by the content's shape is why so many carousels are a paragraph cut into ten pieces.
Carousels
The first slide is the entire hook — treat it as a headline, not a title card. Every subsequent slide must earn the swipe, which means each ends slightly incomplete.
Consistent template across slides: same margins, same type positions, same palette. Variation across slides reads as error. Number them so the reader knows the commitment.
Last slide lands the idea. A last slide that only says "follow for more" wastes the only slide with guaranteed attention from everyone who finished.
Infographics and diagrams
A diagram earns its place when it shows a relationship prose would take three paragraphs to establish. If it restates the text, cut it.
Label directly on the element. Legends make the reader hold a mapping in memory while looking elsewhere. Strip anything not carrying meaning — decorative gradients, 3D effects, and drop shadows on data.
Designing for the actual context
Almost all of this is seen small, on a phone, in a feed, at speed. Test at that size before finishing. If the headline is not readable at thumbnail scale, it does not exist.
High contrast between subject and background is what stops the scroll. Subtlety is a desktop luxury.
Where images are generated
Write the prompt as a brief: subject, composition, lighting, palette, mood, and negative constraints. Generate one concept per image. Then check the output actually renders any embedded text correctly and matches the brand palette — generated imagery drifts, and drifted brand color is worse than no brand color.
Sources
references/sources.md in this skill lists the outside authorities that settle the questions
here — what each one is authoritative for, and what you may do with it. Check them before
answering on anything they cover, and cite what you used. Most are free to read and not free
to reproduce; the use note on each is binding.
Never
- Choose a visual format before knowing whether the content is a sequence, a comparison, or a single claim.
- Design at full size for something that will be seen at thumbnail size.
- Put load-bearing information in an image alone. It is unsearchable, untranslatable, and invisible to a screen reader.
Files (headcount)
-
references
-
sources.md 918 B
# Sources — `marketing:visual-content` <!-- Generated by scripts/build-sources.py from sources/*.toml. Do not edit. --> Check these before answering on anything they cover, and cite what you used. The use note on each one is binding: most of what a professional cites is free to read and not free to reproduce. ## Web Content Accessibility Guidelines 2.2 World Wide Web Consortium · global · **read and cite only — copyrighted, do not reproduce** <https://www.w3.org/TR/WCAG22/> **Authoritative for:** Whether a page, email or video is accessible. It is the criteria list that US Section 508, the EU's EN 301 549 and most enterprise procurement point at, so it settles any argument that reaches a buyer's accessibility requirement. --- Sources are maintained in `sources/` upstream, not here. If one is wrong, out of date, or missing, fix it there — this file is regenerated and an edit to it is lost.
-
-
SKILL.md 3.1 KB
--- name: visual-content description: Designs and directs the visual assets that carry content — carousels, infographics, quote graphics, diagrams, and social imagery — including the generation prompts where they are AI-produced. Use this to turn a written piece into a visual format, design a carousel or infographic, create social graphics, or fix visuals that are not stopping the scroll. --- # Visual content ## The format follows the content's shape - **Sequence or process** → carousel. One step per slide, one idea per slide. - **Comparison or relationship** → single diagram. A carousel would break what needs to be seen at once. - **A single memorable claim** → quote graphic. - **Quantity, trend, or proportion** → chart, with one message. - **Anything with more than about seven elements** → it is two visuals. Choosing format by what is fashionable rather than by the content's shape is why so many carousels are a paragraph cut into ten pieces. ## Carousels The first slide is the entire hook — treat it as a headline, not a title card. Every subsequent slide must earn the swipe, which means each ends slightly incomplete. Consistent template across slides: same margins, same type positions, same palette. Variation across slides reads as error. Number them so the reader knows the commitment. Last slide lands the idea. A last slide that only says "follow for more" wastes the only slide with guaranteed attention from everyone who finished. ## Infographics and diagrams A diagram earns its place when it shows a relationship prose would take three paragraphs to establish. If it restates the text, cut it. Label directly on the element. Legends make the reader hold a mapping in memory while looking elsewhere. Strip anything not carrying meaning — decorative gradients, 3D effects, and drop shadows on data. ## Designing for the actual context Almost all of this is seen small, on a phone, in a feed, at speed. Test at that size before finishing. If the headline is not readable at thumbnail scale, it does not exist. High contrast between subject and background is what stops the scroll. Subtlety is a desktop luxury. ## Where images are generated Write the prompt as a brief: subject, composition, lighting, palette, mood, and negative constraints. Generate one concept per image. Then check the output actually renders any embedded text correctly and matches the brand palette — generated imagery drifts, and drifted brand color is worse than no brand color. ## Sources `references/sources.md` in this skill lists the outside authorities that settle the questions here — what each one is authoritative for, and what you may do with it. Check them before answering on anything they cover, and cite what you used. Most are free to read and not free to reproduce; the use note on each is binding. ## Never - Choose a visual format before knowing whether the content is a sequence, a comparison, or a single claim. - Design at full size for something that will be seen at thumbnail size. - Put load-bearing information in an image alone. It is unsearchable, untranslatable, and invisible to a screen reader.
Comments (0)
Sign in to join the conversation.
Reviews (0)
No reviews yet.
No comments yet.