Social Graphics as Real Files, Not Flat JPEGs
Build carousels, quote cards and infographics in code so fonts, colors and logos stay correct — exported as crisp PNG/PDF, locked to a reusable weekly template.
You can spot AI-generated social graphics from across the room. The font is almost your brand font but not quite. The logo is a slightly-wrong recreation. The quote has a typo the model hallucinated into the artwork, baked into pixels you can't edit. That's what you get when a model paints text into an image: a flat JPEG that approximates your brand instead of being it. The median image generator treats your logo as a suggestion and your typography as a vibe.
The fix is to stop painting and start building. When social graphics are constructed in code — real text in real fonts, your actual hex values, your actual logo file — nothing is approximated. The carousel, the quote card, the infographic all export as crisp PNG or PDF where the fonts are correct because they are the fonts, not a render of them. This is Layer 2 anti-slop applied to the channel where slop is most visible: your feed.
Key Takeaways
- Painted text is approximated; coded text is exact. A model rendering words into a JPEG guesses your font and logo; a code-backed graphic uses the real files, so nothing is "almost right."
- Real files, real exports. canvas-design-social-graphics builds carousels, quote cards and infographics in code, exported as clean PNG/PDF.
- Editable forever. Fix a typo or swap a color by changing a value, not by regenerating a whole image — the opposite of pixels baked into a JPEG.
- Lock a template once. Pair it with claude-design-templates to freeze a reusable weekly layout so every post is on-brand by default.
- The median is detectable. Wrong-ish fonts and recreated logos are the universal "tell" of AI social graphics — code-backed assets remove the tell entirely.
Why Flat JPEGs Betray Your Brand
A brand is a system of exact values: a hex code, a specific typeface at a specific weight, a logo with precise proportions. An image generator doesn't respect any of that — it paints something that looks like text in something that looks like your font. Up close, every approximation shows.
Building the graphic in code flips every one of those weaknesses.
| Flat image tool (painted) | Code-backed graphic (built) | |
|---|---|---|
| Fonts | Approximated, sometimes garbled | The real font file, rendered as text |
| Colors | Whatever the model picked | Your exact hex tokens |
| Logo | Recreated, slightly wrong | Your actual logo asset placed precisely |
| Text accuracy | Can hallucinate typos into pixels | Real text — copy-paste accurate |
| Edits | Regenerate the whole image | Change one value, re-export |
| Output | Flat JPEG, fixed resolution | Crisp PNG/PDF, any size |
| The "tell" | Reads as AI-generated | Reads as designed |
The "text accuracy" row alone is worth the switch. A quote card with a hallucinated typo baked into the JPEG is unfixable without regenerating and re-rolling the dice. A coded card has real text — what you typed is what ships, every time.
Building Graphics in Code
canvas-design-social-graphics gives your agent the ability to construct social assets as real files: carousels, quote cards, infographics — built from text, shapes, and your brand assets, then exported as PNG or PDF.
npx skills add anthropics/skills --skill canvas-design
With it loaded, you describe the asset and the agent builds it with real elements instead of painting a picture of one:
"Build a 6-slide branded carousel, 1080x1080 each, on '5 ways to kill
AI design slop'. Slide 1 is the title/hook; slides 2-6 are one tactic
each with a number badge, a bold headline, and two lines of body.
Use our brand: heading font DM Sans 800, body DM Sans 400, primary
#FF6B35, text #111827, white background. Logo bottom-left on every
slide. Export all six as PNG and a combined PDF."
Because it's built, not painted, every slide has the correct font, the correct orange, and the real logo in the same spot. Find a typo on slide 4? Change the string and re-export — you don't regenerate the other five and pray they come back the same.
Locking a Reusable Weekly Template
Building one great carousel is good. Building every carousel consistently is the actual win, and that's a templating problem. claude-design-templates lets you freeze a layout — the grid, the badge style, the type scale, the logo placement — into a reusable template so next week's post inherits all of it.
The division of labor is clean: canvas-design-social-graphics is the renderer that turns structure into PNG/PDF; claude-design-templates is the system that keeps the structure identical week over week.
"Save this carousel layout as a reusable weekly template:
slide dimensions, number-badge style, headline scale, body scale,
logo position, and the brand palette. Next week I just supply 6 new
headlines and bodies and the template fills in everything else."
This is the same compounding move from Design Systems for Solo Builders: you don't redesign each post, you select and apply a frozen system. The template carries the brand discipline; you carry the words. Consistency stops being something you remember to do and becomes the default the file enforces.
Frequently Asked Questions
Why are code-backed graphics better than AI image generation for social?
Because social graphics are mostly text and brand assets, and that's exactly what image generators get wrong. A model painting words into a JPEG approximates your font and recreates your logo imperfectly, and it can hallucinate typos into pixels you can't edit. canvas-design-social-graphics uses the real font files, your exact hex, and your actual logo — nothing is approximated.
Can I fix a typo without regenerating everything?
Yes — that's a core advantage. In a flat JPEG the text is baked into pixels, so a typo means regenerating the whole image and re-rolling the look. In a code-backed graphic the text is real, so you change the string and re-export just that slide. The other slides stay byte-for-byte identical.
How do I keep every weekly post consistent?
Lock a template. Pair the renderer (canvas-design-social-graphics) with claude-design-templates to freeze the layout, badge style, type scale, logo placement, and palette. Each week you supply only the new copy; the template fills in everything else, so consistency is the default rather than something you maintain by hand.
PNG or PDF — which export should I use?
Both, for different uses. PNG per slide is what you upload to a feed or carousel. The combined PDF is handy for review, sending to a collaborator, or repurposing as a downloadable. Because the graphic is built in code, you get both crisp at any resolution from the same source — no quality loss from a fixed-resolution JPEG.
Browse 135+ agent-ready design systems in the Designs category, or explore the full skill catalog at aiskill.market.