Every post on my blog has a unique square image. It looks like a QR code but it is not. The colors change from one post to another. And at the center, always the same kanji: 忍 (shinobi).
These images are not designed manually. They are generated by the content itself.
The problem
I run a trilingual blog (Spanish, English, Japanese) about integrating AI into professional design work. I publish every three days. Creating a unique header image for each post in three languages was not sustainable.
Stock photos felt generic. Midjourney images felt disconnected from the content. I wanted something that was automatic, unique to each post, and visually consistent across the entire site.
How it works
The system takes two inputs from each post: the title and the character count of the content.
The title generates the pattern. It gets hashed using MD5 and SHA1 chained together to produce enough data to fill a 32x32 grid (1024 cells). Each hexadecimal character from the hash maps to one of four cell states:
- Black cube
- Accent color cube
- Light gray cube
- Empty (white)
Change one word in the title and the entire pattern changes. The image is a visual fingerprint of the text.
The character count determines the accent color. Short posts are gold. Medium-length posts shift through cold blue and purple. Long posts become terracotta. If I ever write something really long, it will be mint green.
The result: every post has a unique visual identity that is alive as long as the text is. If the article grows, the color shifts. If the title changes, the pattern regenerates completely.
The kanji at the center
Every image has a white space in the center with the kanji 忍. It reads "shinobi" in Japanese and means to persevere silently. It is the origin of the blog name and the visual anchor that connects all images regardless of how different their patterns are.
Technical implementation
The images are generated server-side with PHP and the GD library. Here is the basic flow:
1. Take post title
2. Generate hash: md5(title) + sha1(title) chained
3. Map each hex character to a cell state
4. Fill 32x32 grid on white canvas
5. Determine accent color from character count
6. Render kanji center with Noto Sans CJK font
7. Save as PNG
The same image is used in three contexts: thumbnail on the homepage, header inside the post, and Open Graph card when someone shares a link on social media. One image, three uses, zero manual work.
Why not AI-generated images
This is a blog about a designer working with AI. I use Midjourney and other tools daily for client work. But for the blog identity itself, I wanted something deterministic. Something where the relationship between content and visual is direct and explainable, not probabilistic.
There is also a practical reason. With three languages and a new post every three days, I would need to generate or select 3 images every 72 hours. The generative system handles this automatically. I publish, the images appear.
The stack
The entire blog is built from scratch. No WordPress, no frameworks, no JS build tools.
- PHP (vanilla)
- MariaDB
- CSS (no preprocessors)
- GD library for image generation
- Noto Sans CJK for kanji rendering
Try it
You can see the system in action at shinobis.com. Every post on the homepage has its own generated image. The generative identity page explains the full concept.
If you want to implement something similar for your own project, the approach is simple: hash your content, map it to a grid, pick a color rule. The result gives any content platform a unique visual identity with zero ongoing effort.
I am a UX/UI designer with 10+ years in banking and fintech. I built this blog to document my real experience integrating AI into professional design workflows. Writing in Spanish, English and Japanese at shinobis.com.
Top comments (0)