Make an Image with Data Using Several Different Image Generators

Request

Product Owner

make a pricing comparison table image for the top LLM APIs — GPT-5.4, Claude Opus 4.7, GLM-5.1, DeepSeek, and Kimi-K2. find the current pricing on the web first. use a polished dark glassmorphism style — search Dribbble for a good reference and download it. then run it through nanobanana, grok image, and gpt-image so we can compare all three

Designer

Lumi

sonnet

Got it — first I'll search Dribbble for a real dark glassmorphism pricing table, download the best match as the style reference, then run the same data and prompt through nanobanana, Grok Image, and GPT-Image-1.5 in parallel. We'll compare all three outputs side by side.

What Happens Inside

One request, three generators, one style reference. The agent picks a real-world design reference (an Apple-style pricing table), writes a tight prompt with the exact data, and fires all three generators. Below is the full technique.

The idea: Give each generator the same style reference image + the same structured data prompt. Compare how faithfully each one interprets the visual style and how accurately it renders the table values.

The Data

We’re comparing cached-input pricing across the top LLM APIs (April 2025):

Model	Input /1M	Cached /1M	Output /1M	Notes
GPT-5.4	$2.50	$0.25	$15.00	OpenAI API
Claude Opus 4.7	$5.00	$0.50	$25.00	Anthropic
GLM-5.1	$0.88	$0.19	$3.52	¥6/¥1.3/¥24 @ 6.82 CNY
DeepSeek	$0.28	$0.028	$0.42	cache-hit pricing
Kimi-K2	$0.60	$0.15	$2.50	Kimi K2 pricing page

Style Reference

Rather than describing the style in text, the agent searched Dribbble for real dark glassmorphism pricing table designs, picked the best candidate, and downloaded it as .temp/downloads/apply_table_style_ref.jpg. This image is then passed as IMAGE-INPUT to all three generators.

The reference defines: dark background, glass-effect cards, gradient accents, clean typography hierarchy, and subtle glows. Giving all three generators the same reference image is what keeps the visual language consistent across outputs.

Style reference image downloaded from Dribbble

Step 1 — Nanobanana (with style reference)

Nanobanana is a high-quality image generator with strong layout and typography control. It takes the style reference as IMAGE-INPUT and follows the prompt closely.

Meta section:

FILE: output/pricing_table_nanobanana.webp
WIDTH: 1820
HEIGHT: 1024
UTILITY: nanobanana
ASPECT_RATIO: 16:9
RESOLUTION: 1K
VERSION: pro

PROMPT: |
  Figure 1 is a fancy polished pricing-table style reference from Apple.

  Create a new table in the visual style of Figure 1:
  - premium polished UI table
  - clean high-end gradients
  - glassmorphism cards and borders
  - elegant typography hierarchy
  - subtle glow and refined shadows

  Keep this exact table data and order:
  Model | Input per 1M | Cached input per 1M | Output per 1M | Notes
  GPT-5.4 | $2.50 | $0.25 | $15.00 | OpenAI API pricing page
  Claude Opus 4.7 | $5.00 | $0.50 | $25.00 | Anthropic pricing page
  GLM-5.1 | $0.88 | $0.19 | $3.52 | converted from ¥6/¥1.3/¥24 at 1 USD ≈ 6.82 CNY
  DeepSeek | $0.28 | $0.028 | $0.42 | cache-hit and cache-miss pricing published
  Kimi-K2 | $0.60 | $0.15 | $2.50 | Kimi K2 pricing page cache-hit input rate

  Keep values exact and legible. No extra rows, no missing values.

IMAGE-INPUT: .temp/downloads/apply_table_style_ref.jpg
FILES: .temp/downloads/apply_table_style_ref.jpg

Nanobanana result — dark glassmorphism pricing table

Nanobanana strengths: Strong layout adherence, accurate data rendering, clean glassmorphism execution. Best for structured data tables where precision matters.

Step 2 — Grok Image (with style reference)

Grok Image is Aurora-based and excels at stylistic interpretation. Same data, same reference, different prompt framing.

Meta section:

FILE: output/pricing_table_grok.webp
UTILITY: grok_image
ASPECT_RATIO: 16:9
RESOLUTION: 1k

PROMPT: |
  Figure 1 is a polished fancy pricing table from Apple. Use it as the only style reference.

  Produce a premium comparison table image with the style language of Figure 1:
  glossy panels, modern gradients, soft glows, rounded card geometry, crisp typography.

  Keep exact columns and values:
  Model | Input per 1M | Cached input per 1M | Output per 1M | Notes
  GPT-5.4 | $2.50 | $0.25 | $15.00 | OpenAI API pricing page
  Claude Opus 4.7 | $5.00 | $0.50 | $25.00 | Anthropic pricing page
  GLM-5.1 | $0.88 | $0.19 | $3.52 | converted from ¥6/¥1.3/¥24 at 1 USD ≈ 6.82 CNY
  DeepSeek | $0.28 | $0.028 | $0.42 | cache-hit and cache-miss pricing published
  Kimi-K2 | $0.60 | $0.15 | $2.50 | Kimi K2 pricing page cache-hit input rate

  Keep all numbers exact and readable. No extra text.

IMAGE-INPUT: .temp/downloads/apply_table_style_ref.jpg

Grok Image result — glossy dark pricing table

Grok strengths: Rich visual style, strong gradient and glow interpretation. May take more creative liberties with layout — great for mood-driven outputs.

Step 3 — GPT-Image-1.5 (with style reference)

GPT-Image-1.5 has the strongest text rendering and structured layout control. QUALITY: high is essential for dense data tables.

Meta section:

FILE: output/pricing_table_gptimage.webp
WIDTH: 1536
HEIGHT: 1024
UTILITY: gpt_image
OUTPUT_FORMAT: webp
QUALITY: high
BACKGROUND: opaque

PROMPT: |
  Figure 1 is a polished Apple-style pricing table. Use it as the only style and visual reference.

  Generate a premium pricing-comparison graphic in the style of Figure 1.
  Use sleek gradients, elegant cards, clean grid lines, modern spacing, and highly legible text.

  Keep exact columns:
  Model | Input per 1M | Cached input per 1M | Output per 1M | Notes

  Keep exact rows:
  GPT-5.4 | $2.50 | $0.25 | $15.00 | OpenAI API pricing page
  Claude Opus 4.7 | $5.00 | $0.50 | $25.00 | Anthropic pricing page
  GLM-5.1 | $0.88 | $0.19 | $3.52 | converted from ¥6/¥1.3/¥24 at 1 USD ≈ 6.82 CNY
  DeepSeek | $0.28 | $0.028 | $0.42 | cache-hit and cache-miss pricing published
  Kimi-K2 | $0.60 | $0.15 | $2.50 | Kimi K2 pricing page cache-hit input rate

  Keep all values unchanged and readable.

IMAGE-INPUT: .temp/downloads/apply_table_style_ref.jpg
FILES: .temp/downloads/apply_table_style_ref.jpg

GPT-Image-1.5 result — premium structured pricing table

GPT-Image strengths: Best text legibility and data accuracy. QUALITY: high is mandatory for tables — low quality will blur numbers. Strongest for structured, information-dense visuals.

Refining the Results — v2

Product Owner

visually compare the reference and the v1 outputs from nanobanana and gpt-image. adjust the prompts automatically so both results match the reference structure and style — vertical card layout, neon borders, dark glassmorphism

Designer

Lumi

sonnet

Placing the reference and both v1 outputs side by side now. The diff is clear — both generators defaulted to a horizontal spreadsheet layout while the reference shows 5 vertical cards with neon borders and dark glass panels. Rewriting the prompts to match the reference structure exactly and re-running both generators.

The v1 results weren’t a perfect style match — both Nanobanana and GPT-Image produced horizontal spreadsheet tables instead of the vertical card layout from the reference. To fix this, the agent was asked to do a visual comparison between the reference and the v1 outputs, then automatically adjust the prompt to close the gap.

The agent placed the reference and v1 result side by side, analyzed the structural differences, and rewrote the prompt to match the reference layout exactly — no manual prompt editing needed, all changes were automatic.

What the visual compare found

The reference shows 5 vertical card blocks side by side — each card has a dark glass panel, neon blue border, large price at top, and metric rows below. The v1 prompts described a “horizontal table” which conflicted with what the reference actually showed. The generators tried to satisfy both and produced a compromise that matched neither.

Automatic prompt fix

The agent rewrote the prompt based on the visual diff:

Drop “horizontal table / spreadsheet” framing entirely
Ask explicitly for “5 vertical card blocks side by side, like the cards in the reference”
Describe each card’s anatomy (model name → big price → divider → metric rows with checkmarks)
Reinforce style: “Recreate the EXACT visual style of the reference — same dark glass cards, same electric blue neon borders, same black background with blue outer glow”

Nanobanana v2

Nanobanana v2 result — vertical card layout matching the reference

GPT-Image v2

GPT-Image v2 result — vertical card layout matching the reference

Both now match the reference style much more closely — black background, electric blue neon borders, vertical card layout, “Pricing” watermark behind the cards.

Key Learnings

Search and download a real reference image — don’t describe the style in text; find an actual design on Dribbble (or similar), download it, and pass it as IMAGE-INPUT. This locks the visual language across all generators far more reliably than any prompt description
Match the reference layout, don’t fight it — if the reference shows vertical cards, ask for vertical cards. Asking for a horizontal table while showing a vertical card reference creates a conflict the generator resolves badly
Embrace the reference structure — describe the layout in terms of what the reference actually shows, not what you originally imagined
GPT-Image needs QUALITY: high for tables — at lower quality, small numbers become unreadable
Run all three in parallel — generation is async, so there’s no reason to wait for one before starting the next
Keep the data in the prompt as a plain table — structured text (pipe-separated) is parsed more reliably than prose descriptions of numbers