graphic-designer.

graphic-designer is the routing skill that sits between a finished post and the right graphic for it. The choice between a structured HTML/CSS layout and a hand-drawn or branded infographic is rarely the post-writer's instinct, and getting it wrong produces graphics that fight the post rather than support it. This skill makes the choice based on what the post actually contains, then hands off to the right output path.

The decision a post graphic makes is usually a single binary one, but it is the binary most writers fumble. Either the post has explicit structure (numbered steps, a comparison, a framework, data), in which case the graphic should be a clean HTML/CSS layout that lets the structure read at a glance, or it does not, in which case the graphic should be an AI-generated infographic that recaps the narrative visually. graphic-designer is the skill that makes that call, then produces the right thing.

§01What it does

The skill reads the latest post file in the project, or accepts a pasted draft. Then it offers four options through the AskUserQuestion form: a structured HTML/CSS graphic, a whiteboard-style hand-drawn infographic, a branded infographic, or you decide. The fourth option is the most interesting one. When the writer picks it, the model analyses the post and routes itself.

The routing logic is not subtle. Numbered steps, frameworks, comparisons, or data tables in the post send it down Path A (HTML/CSS). Workflow recaps, tip threads, conceptual explainers, or stories send it down Path B (image prompt), where the model picks between the whiteboard and branded styles based on tone.

Path A produces a single self-contained HTML file at 1200×1400 pixels with inline CSS, dark background, an accent colour pulled from brand-kit.md if present, and section blocks that scale with the post's structure. The file opens in a browser; the writer screenshots it. Path B writes either a whiteboard or branded Gemini prompt at 1080×1350, ready to paste into a Gemini chat with Create Image enabled.

§02Match the format to the content, not the brand mood

The interesting choice this skill enforces is that brand consistency does not mean using the same graphic format for every post. A framework post deserves a framework graphic. A personal-story post deserves a softer visual. Forcing every post through the same template is what produces feeds that all look the same and convert none of them.

The HTML route looks underused next to the AI infographic route, but it is sharper for the right kind of post. A four-step framework rendered as four bordered blocks on a dark background is more legible at small sizes than the same content drawn on a whiteboard. The whiteboard style wins on warmth and shareability. Pick the right one for the post and both styles can sit in the same feed without conflict.

§03Setup

# Trigger phrases:
#   "design a graphic"
#   "create a visual"
#   "make an image for my post"
#   "graphic for my post"

The skill checks for brand-kit.md and colours.md in the project to bake brand colours into either output path. If neither exists, it asks. The HTML output is one file; open it in a browser, screenshot at 1200×1400, post.

§04Caveats

For complex frameworks (more than five steps, or steps that nest), neither output path is ideal. Use gemini-carousel instead and let the structure breathe across multiple slides.

The HTML route assumes the writer has a browser handy. For mobile-only workflows, force the Gemini path.