Claude Code typesets an Instagram quote card
Hasan reports using Claude Code to design and render a quote-card PNG with local Python typography, checking contrast and element placement rather than generating text as painted pixels.
learnwithhasan.com
Original prompt
Shared by the source author. See source notes for context.
make me a quote card for instagram stories: "Build quietly. Let the work make the noise." by @learnwithhasan
Reach people exploring AI agents
See placements →What happened
Hasan reports using Claude Code to design and render a quote-card PNG with local Python typography, checking contrast and element placement rather than generating text as painted pixels.
Reported by Hasan Aboul HasanHow the agent did it
- Provide the story-format quotation and attribution.
- Have Claude Code read the design skill and choose palette and font roles.
- Write a local Python rendering script with the exact text strings.
Where a person stepped in
Hasan supplies the brief and demonstrates the output. Automated contrast and placement checks do not independently prove accessibility or visual effectiveness.
Hasan Aboul Hasan demonstrates a Claude Code skill that turns an Instagram-story quote into a designed PNG. The instruction names the format, quotation and attribution. Claude reads the design playbook, selects a style, palette and font roles, then writes a Python script using the provided rendering engine.
The displayed result uses a gradient field, large typography and differently styled emphasis words. Pillow and NumPy render real font strings rather than an image model predicting letter-shaped pixels. Keeping the script makes later layout and text changes inspectable and repeatable without regenerating the entire composition.
The playbook checks pixels behind text for contrast and verifies where elements land, rerendering when needed. Those checks are the author's described method, not proof that every generated design is accessible or visually effective. The image-rendering stage runs locally without an external image-generation API, while Claude Code itself still has a usage cost. The source also includes a separate three-dimensional renderer, but this entry stays with the completed quote-card task. The useful constraints are an exact text string, output aspect ratio, explicit font roles and a final PNG inspection after rendering.
Prompt
Original prompt
Source: Blog · Hasan Aboul Hasan
Frequently asked questions
How is text rendered?
The local script typesets actual font strings rather than asking an image model to paint letters.
Does local rendering make the entire workflow free?
No. The renderer does not call an external image API, but Claude Code itself still has a usage cost.
What makes edits repeatable?
The retained script allows changes to text and layout while rerendering the same defined composition.
More details
Remaining steps
- Check text contrast and element placement, then rerender if needed.
- Inspect the saved PNG and retain the script for future edits.
About this account
Claude Code makes design choices, writes and runs a rendering script, checks its output and revises the generated layout through the skill’s validation loop.
Firsthand account by Hasan Aboul Hasan; original publication date verified against Primary blog Published 2026-07-07; July9 update not substituted. Outcomes are the author’s reports, not independently reproduced. Original quote-card instruction from the demonstrated workflow; local rendering and agent usage costs are distinct.
Credit: Hasan Aboul Hasan
Source published 7 Jul 2026
Source checked 14 Oct 2026
Tools and topics
Claude Code · prompt-to-design skill · Python · Pillow · NumPy · PNG
Quote-card typography · Contrast checks · Editable render script
Editorial completeness: 100/100. Measures documented fields, not agent performance or verified outcomes.