Loading...
Loading...
Create LinkedIn post graphics. Decides between an HTML/CSS structured graphic or an AI-generated infographic based on the post content. Use this skill whenever the user says "design a graphic", "create a visual", "make an image", "graphic for my post", "LinkedIn image", or wants any visual content to pair with a LinkedIn post. Also trigger when the user finishes writing a post and wants a matching graphic.
npx skill4agent add charlie947/social-media-skills graphic-designerPaste the post you want a graphic for.
[
{
"question": "What type of graphic fits this post best?",
"header": "Style",
"multiSelect": false,
"options": [
{"label": "HTML/CSS graphic", "description": "Clean structured layout. Framework, comparison, steps, data. Fully editable, screenshot to export."},
{"label": "Whiteboard infographic", "description": "Hand-drawn marker style on a whiteboard or notebook page. Recaps the post visually. Generated in Gemini."},
{"label": "Branded infographic", "description": "Professional infographic using your brand colours. Recaps the post visually. Generated in Gemini."},
{"label": "You decide", "description": "Analyse the post and pick the best format automatically"}
]
}
]Open the HTML in your browser and screenshot it.
Generate a single image of a physical, hand-drawn infographic on a large whiteboard or notebook page.
Crucial Style Instructions (Read First):
Medium: The image must look like a photograph of a real whiteboard or large paper notepad.
Texture: All elements must look created by hand using colored marker pens (black, blue, red, green) and highlighters (yellow/orange). Lines should be slightly imperfect, wobbly, and have the texture of ink on a surface.
No Digital Fonts: All text, headings, and bullet points must appear handwritten or hand-printed in marker pen.
Layout: Structure the 1080x1350 image as follows:
TITLE (large, bold marker, top of page):
[Insert headline from the post]
CONTENT (hand-drawn sections with marker pen):
[Insert 3 to 6 key points, each as a short hand-written line with a bullet, number, or small icon drawn next to it]
[If there are stats or numbers, draw them large with a circle or box around them]
Use multi-colored markers for emphasis. Keep text large and legible. Make everything look hand-drawn with slight imperfections. Make it look like a photograph of an actual notebook page.
Always include the handwritten text "[Author name from about-me.md] | Repost" at the bottom of the image, in the same hand-drawn marker style.Generate a professional infographic image at 1080x1350 pixels.
Style: Clean, modern, editorial. Flat design with sharp edges and strong typography. No 3D effects, no gradients, no stock photos.
Colour palette:
- Background: [primary brand colour or dark neutral]
- Text: [white or high-contrast colour]
- Accent: [secondary brand colour]
Layout:
HEADLINE (top, large bold text):
[Insert headline from the post]
BODY (structured sections, each with an icon or number):
[Insert 3 to 6 key points as short lines, each with a visual marker: numbered circle, checkmark, or simple icon]
[If there are stats, display them as large feature numbers with a label underneath]
FOOTER:
[Author name from about-me.md] | [CTA or tagline if appropriate]
Keep text large and scannable. Maximum 40 words on the entire image. No decorative borders. No watermarks. No logos unless the user provides one.Paste this into Gemini or your image generator. The prompt is ready to go.
Graphic ready. Say "score my post" when you want feedback before publishing.