wissel.net

Usability - Productivity - Business - The web - Singapore & Twins

AI generated blog article hero graphics

Hero image for AI generated blog article hero graphics

I always liked blog entries that feature an eye catching image at the top of an article, except when on a slow connection ¯_(ツ)_/¯. So I was wondering how I could add them to my > 1000 blog articles. Adjusting the mustache template was fast and easy. My first thought was to create one image per category and reuse that. But that would have been too easy.

With a little help of my friends

I wanted the images vary in style and have some level of relation to the article. So I asked Claude for options. It suggested to use the Anthropic API to generate a picture prompt out of the content of each blog article and submit it to DallE3 for image creation.

I liked the idea, so I asked for implementation. Claude generated a JS file that takes the file name as input.

node --env-file=.env generate-cover.mjs ../path/to/blog/article.md

The whole script is available here for your entertainment. To make it more fun: when you click on one of the header images, it will open the prompt used to generate it.

The prompt to create the prompt:

ou are an expert at writing prompts for DALL·E 3 image generation.

Read the blog post below and write a single, vivid image prompt (max 200 words) that:
- Captures the post's core theme or mood
- Works as an eye-catching blog cover image
- for the style cycle through the following styles at random:
  - Photorealistic
  - Tasteful illustrative
  - Cyberpunk
  - Vintage
  - Minimalistic
  - Comic book
- Contains NO text, letters, or words in the image
- Avoids clichés (no light bulbs, no handshakes, no generic office scenes)

Reply with ONLY the prompt — no preamble, no explanation.

Enjoy!


Posted by on 08 March 2026 | Comments (0) | categories: AI WebDevelopment

Comments

  1. No comments yet, be the first to comment