Every Game Keeps Its Face: How the Art on This Site Was Made

By Ali AlQattan. How the site's 37 stickers and game tiles were generated on 9 October 2026.

TL;DR

The site's main art set was generated with Codex image generation in one batch: 23 foil stickers and 14 game dioramas. Each subject got its own hand-written prompt. Each game prompt also carried real screenshots of that game, so Kout still sits on green felt and Speedero still drives through rain at night. Every image was drawn on a flat grey backdrop, and a small Python script flood-fills that grey to transparency. The old art weighed about 89 MB in the repo. The new set is 5.9 MB.

1. What was wrong with the old art

The site had game art before, twice, and both sets came from a single template. The first fixed the palette to chartreuse #D8EF41 and deep purple #392353, asked for a sculpture, and said "no interface screenshot". The second, the Vault Room set, recut every game as a green enamel and nickel sculpture on a grey backdrop.

The template was the problem. Nothing in it described the games, so nothing in the pictures did. Riftless became two castles. Speedero became a sports car. Kout became a fan of cards with poker chips, first purple, then green. Each image was fine on its own, but none of them showed the game it was supposed to show. If you had played Riftless you would not recognise it.

So the brief for the new set was the opposite. The site gets one shared frame. The content inside the frame comes from the game.

2. One frame, many worlds

Before writing any prompt I went through every game and wrote down what makes it itself: the setting, the characters, the main mechanic, and the real colours, with hex values taken from the screenshots. That became a games bible, one section per game. The prompts came out of that file, not out of a template.

The prompts have two parts. The shared part is the frame, and it is the same for every game. It asks for a single floating isometric tile, a thick slab with rounded corners, seen from a 30 degree camera, filling about 72% of the image so it survives both a 16:9 crop and a 4:5 crop. Nothing is allowed to leave the tile. No text, no UI, no logos.

The frame also carries an identity rule. It is the line that matters most:

The attached images are real screenshots of the game. Match its real art style, characters, colours and props faithfully. Do not restyle it into a generic look.

The second part is the subject, written by hand for each game. A few examples from the actual prompts:

• Kout sits on a square tile of deep green felt (#1F5A3E) with a walnut rail. Three round seat badges, a hand fanning eight cards at the near edge, the ace of hearts mid-flip, one Joker glowing gold (#CAA45C), a brass dallah and two finjan cups on the rail.
• Speedero is a short slab of three-lane highway at night: navy asphalt (#0E1A2B), rain puddles reflecting cyan, a blue Vanta slamming sideways into a red rival inside a flashing hit zone, and the Warlord truck at the far end. The prompt says "the night lives on the tile; the background stays light grey".
• Riftless is a stone lane with Dana on one side, hair floating as if underwater, swinging a diving stone, and Ghanim on the other in a gold-embroidered black bisht, raising brass scales full of green pearls.
• Neon Horde is a black glass slab with a faint cyan grid, a cyan arrowhead ship firing into magenta diamonds and violet hexagons, with the boss rising at the far edge.

The site's look comes from the frame. Each game's colours come from the game. I never recoloured a game to match the site.

3. Screenshots, not adjectives

Writing "a pearl-diver with floating hair" gets you a pearl-diver. It does not get you Dana. Attaching Dana's real character art does.

Codex can take reference images with -i, so every game prompt went out with its own screenshots attached. In total that was 21 reference images across 13 games. Speedero got three (the desktop view, the garage and the title screen). Riftless got its live thumbnail plus the hero art for both champions. Aftertrace got its intro and its outcome screen. Most others got their thumbnail.

Two cases needed a decision:

• Bahraini Kout, the Flutter multiplayer version, had a thumbnail that was a generic stock image of cards and a dallah. I attached the original Kout screenshot next to it so the felt and the cards came from the real game.
• Banana Protocol had no usable screenshot, because its live thumbnail URL was returning an HTML page instead of an image. That one went out with no references and a longer written description: the three roles (Hands, Eyes, Book), the yellow instrument case, the wires and the braille-style keys.

The stickers needed no references. They are objects, not games, like a robot agent in a seatbelt harness or a microphone sending sound waves into a laptop for Vox. Each has its own subject line and one accent colour inside a shared style block.

4. Running the batch

The pipeline is three small scripts, and they now live in the repo under scripts/art:

1. prompts.py writes every prompt to prompts.json, with its slug, its kind (sticker or game), its size and its reference images.
2. gen-one.sh <index> runs one codex exec for one image. It tells Codex to use the image tool exactly once, pass the prompt through without rewriting it, and save the PNG to out/<slug>.png. If the file already exists it skips. If the run fails it tries once more.
3. cutout.py turns the PNG into transparent WebP.

The batch runs gen-one.sh through xargs -P 6, so six images generate at a time. Reasoning effort is set to low, because the model has nothing to think about. The prompt is already written, and its only job is to hand it to the image tool untouched. A Kout run used about 36,000 tokens.

All 37 images came back on the first attempt. Stickers were asked for at 1024x1024 and came back at 1254x1254. Game tiles came back at the requested 1536x1024. The raw PNGs add up to about 60 MB, which is the next problem.

5. Grey in, transparent out

Image models are bad at real transparency. Ask for a transparent background and you often get a fake checkerboard painted into the picture. So I asked for the opposite: a perfectly flat, seamless, solid light grey #E4E4E4, with no gradient, no floor and no shadow cast onto it. Then I removed the grey myself.

cutout.py does it in a few steps:

1. Sample the real backdrop. It takes the median colour of the four 8x8 corners. The model does not always hit #E4E4E4 exactly. The Kout tile's corner came out as rgb(220, 220, 221), so hard-coding the hex would have missed it.
2. Mark what is close to it. Any pixel within 14 levels of that colour on every channel counts as backdrop-like.
3. Flood-fill from the border. Only backdrop-like pixels connected to the edge of the image become transparent. A grey highlight inside the drawing, like a light patch on a card, stays solid because the fill can't reach it.
4. Clean the edge. The mask shrinks by one pixel, then gets a 0.8 pixel blur, so there is no grey fringe and no jagged outline.
5. Trim and size. It crops to the subject with a 3% margin, caps stickers at 900 px wide and game tiles at 1400 px, and writes two WebP files: the full one and a small one (380 px or 560 px) for lists and phones.

This is why the prompts are strict about the background. A gradient or a shadow on the backdrop would break the flood fill and leave me fixing masks by hand.

6. 89 MB to 5.9 MB

The old art was about 89 MB in the repo: 51 MB of game editions (each a master PNG plus cover, banner, share and thumb crops) and 39 MB of Vault Room sculpture masters.

The new set is 74 files, a full size and a small size for each of the 37 images, and together they come to 5.9 MB. The biggest single file is the Ascii Rush tile at 283 KB. Most stickers are around 100 KB.

Two things made the difference. First, transparent WebP at quality 86 instead of PNG masters. Second, one image per subject instead of five files per game. The tile is centred with a margin built in, so the same file works in a wide card and a tall one, and the page crops it with CSS.

What I would keep

The lesson is about the prompt more than the tool. When every game shared a template, every game looked the same. When every game got its own prompt and its own screenshots, each one came back looking like itself.

The plumbing I would reuse as is: one hand-written prompt per subject, a shared frame, real references for anything that already has a look, and a flat backdrop a script can remove. Then look at every image before it ships, because the script can't tell you whether the picture is right.