I built a Claude Skill to automate brand-consistent social graphics (HTML to PNG) The Backstory

#automation #claude #design #showdev

Automating Brand-Consistent Social Graphics with a Claude Skill

I’ve been using a custom Gemini setup to produce Instagram content for IBBE, a company I work with. While the workflow worked, it was fragile. I found myself repeating brand constraints, hex codes, and styling rules in every new session.

I wanted a way to formalize this process, something reusable, brand-aware, and easily installable. So, I built a Claude Skill that handles the heavy lifting of design consistency through a structured memory system.

How it Works

The skill transforms Claude from a general assistant into a specialized brand designer through three main phases:

The Onboarding Interview: The first time you request a design, Claude conducts a brand interview. It collects your color palette, typography preferences, design personality, and specific brand restrictions.
Persistent Memory: Once the profile is generated, you save it to memory. Every future session picks up exactly where you left off, ensuring your brand identity isn't "hallucinated" or lost between chats.
HTML-to-Image Pipeline: Claude generates a self-contained HTML file. This isn't just a mock-up; it includes a staging environment and an export button that uses html2canvas to download a high-resolution PNG directly from your browser.

The Aesthetic

The design language is opinionated and "dev-friendly." Every asset generated follows a consistent visual logic:

Structure: Inset cards with thick borders and hard offset shadows (Neo-brutalism style).
Textures: Dot grid backgrounds and rotated pill tags.
Dynamics: Carousel slides automatically alternate rotation directions, and visual metaphors are selected based on the slide's specific content.

What it Generates

Instagram Posts & Carousel Slides
OG Images for blog posts
Featured Images
General Visual Assets

Why HTML?

Generating graphics as HTML instead of raw images via DALL-E or Midjourney gives us pixel-perfect control over text. No more AI "gibberish" in your graphics. Since it's code, you can tweak the hex codes or layout in seconds before exporting.