Jovylle Bermudez

← Back to Blog

Theme Lab — adding a Tier X of 'out of this world' skins

Jovylle Bermudez
theme-labhtmlcssdesignaicloudflare-pages

Theme Lab is a tiny playground I keep for testing what AI generates well when you give it strong visual rules. One HTML file per skin. No bundler, no npm, no shared CSS. Each page is the same scaffold — nav, hero, three cards, a form, a footer — wearing a completely different costume.

Until today it had 22 skins across three reliability tiers:

  • Tier S — terminal, pixel, Win95, DOS, blueprint, newspaper (AI nails these 95–100% of the time).
  • Tier A — CRT, mission control, cyberdeck, brutalism, Swiss (85–95%).
  • Tier B — library, explorer, VHS, radio, lab notebook, whiteboard, RPG sheet, parchment, rolodex, arcade, shipping (variable, fun).

It was missing the wild category — the maximalist, weird, otherworldly stuff that still has enough rules to actually build.

So I added Tier X — "eXperimental / out of this world." Twelve new skins:

  1. 🌅 Vaporwave / outrun — magenta + cyan + perspective grid + Roman bust + VHS chromatic aberration.
  2. ✨ Holographic foil — iridescent conic gradients, pastel squircles, foil sheen, tilted stickers.
  3. 📖 Eldritch grimoire — blackletter, blood-red ink on aged parchment, sigils, drop caps, tentacle dividers.
  4. 👽 Alien artifact console — invented runic glyphs, polygonal clip-path panels, violet + teal glow, crystal hero.
  5. 🎉 Memphis 80s — hot pink + electric blue + yellow, scattered confetti dots and zigzags, tilted thick-border panels.
  6. 🕍 Stained glass cathedral — jewel tones, thick black lead borders, gothic pointed arches, rose-window centerpiece.
  7. 🪼 Deep sea bioluminescence — abyssal black, glowing jellyfish, plankton particle dots, soft cyan and violet halos.
  8. ★ Soviet constructivism — diagonal red and black propaganda poster, Bebas Neue, geometric shapes.
  9. ▲ Origami / folded paper — clip-path notched corners, diagonal crease gradients, hard offset shadows.
  10. ◌ Dreamcore liminal — washed pale yellow halls, oversized melancholy serif, flickering vignette, hairline dividers.
  11. 📼 Cassette futurism — beige plastic, dymo embossed labels, knurled conic-gradient knob, red LED segment readout.
  12. 💿 Y2K aqua — glossy blue gel buttons, frosted pill nav, pinstripes, specular highlights everywhere.

The trick that makes wild themes work for AI

The normal failure mode for "creative" prompts is the AI hedges. Ask for "vaporwave" and you get a purple background with the word VAPORWAVE in a neon font.

The Tier X recipes avoid that by always locking down three things:

  1. A strict palette — exact hex values, usually 3–4 colors, no substitutions.
  2. A signature CSS techniqueclip-path polygons, repeating-conic-gradient for knurled knobs, background-clip: text on a conic gradient, perspective grid with transform: perspective() rotateX(), etc.
  3. A signature motif — a Roman bust, a rose window, a jellyfish, runic unicode characters, a dymo label strip.

When all three are spelled out, the model has nowhere to hedge. It either follows the rules or it doesn't, and "following the rules" is the kind of thing AI is actually good at.

The recipes live in _prompts/tier-x.md. Each one is short enough to paste into a fresh chat alongside the shared _scaffold/content.html and out comes a working theme.

Stack

Nothing fancy on the hosting side:

  • GitHub (jovylle/theme-lab) — source.
  • Cloudflare Pages — production deploys via wrangler pages deploy . --project-name=theme-lab --branch=main.
  • Cloudflare Tunnel (mac-mini-local) — gives the Pages site the custom hostname themes.uft1.com on top of the uft1.com zone.

There's no build step. Every skin is one file you can open with file:// directly. The gallery (index.html) is the only thing that needs a server, because it fetches themes.json to render the cards.

Where to look

If you have an idea for a Tier X skin that still has clear rules — open a chat with me or just fork the repo and add it. The whole point of the lab is that adding a theme is one file and zero infrastructure.