I built Thumbnail Prompt Builder: a small experiment for naturally deploying AI-generated thumbnail images across multiple platforms

When creating hero images for blog posts, you can now produce quite impressive visuals using image generation AI like ChatGPT.

However, when it comes to actual operations, there's one problem.

The required image dimensions vary significantly across different platforms.

For example, with this tool, I ultimately anticipated the following outputs.

At first, I thought, "What if we created one square image and could expand it to all the required sizes? That would be convenient."

That's when I started building Thumbnail Prompt Builder.

What I Originally Wanted to Create

The initial goal was straightforward.

A tool that takes article titles and summaries as input and generates prompts to paste into image generation AI.

Furthermore, once you upload the generated square image,

• Instagram
• Thumbnail
• X
• Cover

we wanted to automatically convert it to each platform size.

In other words, the ideal workflow was this:

Input article info
↓
Create image generation prompt
↓
Generate square image
↓
Auto-expand to platform sizes

Our initial design was fairly straightforward.

"If we place the main subject in the center and add margin around it, it should work on any platform."

That's what we thought.

Issues we discovered through actual testing

However, once we actually rendered the images, problems emerged.

Especially with cover images.

When converting square images to landscape format,

• the top and bottom get cropped significantly
• the main subject becomes unnaturally small
• the background edges become prominent
• compositions that work in square format fall apart in cover format

These issues occurred.

Initially, we worked with Codex to explore several directions.

For example,

• Set the SAFE ZONE to the center 60%
• Concentrate the main subject in the center
• Avoid background objects
• Extend left and right using background color only
• Add a fade to the edges of the original image
• Slightly reduce the image on X / Cover to minimize cropping

and so on.

All of these had some effect.

However, a critical issue remained.

There are limits to naturally creating a Cover from a square image.

The Cover has a very wide aspect ratio of 1280×560.

When you place a PC, person, UI card, icon, and other elements within a square image, they may look fine in the square format, but the top and bottom get cropped significantly in the Cover.

Conversely, if you try to fit everything in, the main subject becomes too small.

That's when we decided to change our design approach.

Final conclusion: Split prompts into two systems

In the end, we adopted a design that splits the prompt into two.

Instagram / Thumbnail 用プロンプト
X / Cover 用プロンプト

In other words, instead of relying on a single square image to cover everything,

正方形画像
→ Instagram / Thumbnail 用

横長画像
→ X / Cover 用

that was our approach.

This was quite a major shift in strategy.

Initially, we aimed for a tool that could create everything from a single image, but when we thought about real-world operation, we realized that it's more natural to separate the composition by medium from the start.

In a worst-case scenario, a designer could adjust the layout, but we wanted to create something that AI alone could handle simply, so that people who can't use tools like Figma could also use it.

What the current tool can do

The current Thumbnail Prompt Builder generates two types of prompts when you input article information.

1. Instagram / Thumbnail

A prompt for square eye-catch images.

• 1:1 square image
• Main subject centered
• Whitespace that accommodates vertical Instagram layouts
• Composition that's easy to read as a blog thumbnail

with that consideration in mind.

2. X / Cover Usage

A prompt template for landscape-oriented thumbnails.

• Landscape composition from the start
• Top and bottom cropping is minimized even in Cover
• Whitespace on left and right sides
• Works well in both X and Cover without awkward distortion

This instruction is included.

As a result, Cover images no longer look like "a square forcibly stretched into landscape format."

Image expansion was also changed to two systems

We've also divided image uploads into two systems.

• Square image upload
• Landscape image upload

From square images, we generate

• instagram.png
• thumbnail.png

.

From landscape images, we generate

• x.png
• cover.png
• [email protected]

.

We made Cover output at 2x size for Retina displays.

Initially, we tried outputting 2x size for all images, but since Instagram and X compress uploads easily and Thumbnails are already sufficiently large, we ultimately narrowed it down to Cover only at 2x output.

Prevented input content from disappearing

A subtle issue we ran into during development was that input forms would disappear when the page refreshed.

When Codex updated the page while I was working on it, the content I was typing would sometimes disappear.

This was a bit stressful, so I also strengthened the save functionality.

Now I

• localStorage
• Cookie

save input content to both.

The Cookie side serves as a 7-day backup.

This way, even if the page refreshes or reloads during development, the input content is more likely to be restored.

What I learned from implementation

The biggest insight from this development was

AI image generation is more stable when created for specific use cases from the start, rather than converting afterward

.

Especially with hero images, the aspect ratio differences across media are significant.

A good composition for square is different from a good composition for cover.

If you try to force a unified approach,

• the main subject becomes too small
• excess whitespace increases
• top and bottom get cut off
• the background looks unnatural

and other problems occur.

That's why ultimately,

avoid over-standardization and tailor generation assumptions per use case

We settled on this design approach.

Progress made through collaboration with Codex

This tool didn't have a final form envisioned from the start.

Through collaboration with Codex,

• Distribute square images across different media
• Eliminate background expansion inconsistencies
• Review the SAFE ZONE
• Resolve the issue of the main subject appearing too small in Cover
• Organize size definitions
• Add Retina output
• However, Retina is limited to Cover only.
• Split the prompt into two systems.
• Save input content.

That's how we gradually changed the design approach.

Our initial idea was to "use square images as the universal master."

But as we tested and refined, it eventually evolved into a more practical approach: "separate square and landscape versions."

That shift was interesting.

Summary

Thumbnail Prompt Builder is not simply an image resizing tool.

Rather, it's more like

a support tool for refining AI-generated thumbnail images into a form that can withstand actual operational use

.

In its current form,

• Generate two types of image prompts from article information
• Generate Instagram / Thumbnail images from square images
• Generate X / Cover images from landscape images
• Also output Retina version for Cover only
• Save input content for a certain period

up to this point.

While it became slightly more complex than originally planned, it has become considerably more user-friendly for actual operation.

If we were to make further improvements in the future,

• Prompt template switching
• Color management by brand
• Save generation examples
• Output workflows for Notion and WordPress
• Direct integration with AI image generation

I'd like to try those too.

AI image generation is convenient, but using it in actual articles and social media still requires thoughtful human design.

I want to nurture Thumbnail Prompt Builder as a tool that can help reduce some of that design effort.