[{"data":1,"prerenderedAt":22},["ShallowReactive",2],{"blog-theme-lab-tier-x-out-of-this-world-skins":3},{"slug":4,"title":5,"excerpt":6,"author":7,"date":8,"status":9,"private":10,"featured":11,"tags":12,"thumbnail":19,"load_readme_from_this_repo":20,"content":20,"body":21},"theme-lab-tier-x-out-of-this-world-skins","Theme Lab — adding a Tier X of 'out of this world' skins","Theme Lab now has 34 self-contained HTML skins across four tiers. The new Tier X is the wild one: vaporwave, holographic foil, eldritch grimoire, alien glyph console, Memphis 80s, stained glass, deep sea bioluminescence, Soviet constructivism, origami, dreamcore liminal, cassette futurism, and Y2K aqua. Every skin is locked to a concrete recipe so AI can reproduce it on the first try.","Jovylle Bermudez","2026-06-29","published",false,true,[13,14,15,16,17,18],"theme-lab","html","css","design","ai","cloudflare-pages","https://themes.uft1.com/","","---\ntitle: \"Theme Lab — adding a Tier X of 'out of this world' skins\"\ndate: 2026-06-29T13:50:00Z\ncategories: [\"theme-lab\",\"html\",\"design\",\"ai\"]\nfeatured: true\ndraft: false\n---\n\n[Theme Lab](https://themes.uft1.com) 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.\n\nUntil today it had 22 skins across three reliability tiers:\n\n- **Tier S** — terminal, pixel, Win95, DOS, blueprint, newspaper (AI nails these 95–100% of the time).\n- **Tier A** — CRT, mission control, cyberdeck, brutalism, Swiss (85–95%).\n- **Tier B** — library, explorer, VHS, radio, lab notebook, whiteboard, RPG sheet, parchment, rolodex, arcade, shipping (variable, fun).\n\nIt was missing the **wild** category — the maximalist, weird, otherworldly stuff that still has enough rules to actually build.\n\nSo I added **Tier X** — \"eXperimental / out of this world.\" Twelve new skins:\n\n1. **🌅 Vaporwave / outrun** — magenta + cyan + perspective grid + Roman bust + VHS chromatic aberration.\n2. **✨ Holographic foil** — iridescent conic gradients, pastel squircles, foil sheen, tilted stickers.\n3. **📖 Eldritch grimoire** — blackletter, blood-red ink on aged parchment, sigils, drop caps, tentacle dividers.\n4. **👽 Alien artifact console** — invented runic glyphs, polygonal clip-path panels, violet + teal glow, crystal hero.\n5. **🎉 Memphis 80s** — hot pink + electric blue + yellow, scattered confetti dots and zigzags, tilted thick-border panels.\n6. **🕍 Stained glass cathedral** — jewel tones, thick black lead borders, gothic pointed arches, rose-window centerpiece.\n7. **🪼 Deep sea bioluminescence** — abyssal black, glowing jellyfish, plankton particle dots, soft cyan and violet halos.\n8. **★ Soviet constructivism** — diagonal red and black propaganda poster, Bebas Neue, geometric shapes.\n9. **▲ Origami / folded paper** — clip-path notched corners, diagonal crease gradients, hard offset shadows.\n10. **◌ Dreamcore liminal** — washed pale yellow halls, oversized melancholy serif, flickering vignette, hairline dividers.\n11. **📼 Cassette futurism** — beige plastic, dymo embossed labels, knurled conic-gradient knob, red LED segment readout.\n12. **💿 Y2K aqua** — glossy blue gel buttons, frosted pill nav, pinstripes, specular highlights everywhere.\n\n## The trick that makes wild themes work for AI\n\nThe 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.\n\nThe Tier X recipes avoid that by always locking down three things:\n\n1. **A strict palette** — exact hex values, usually 3–4 colors, no substitutions.\n2. **A signature CSS technique** — `clip-path` polygons, `repeating-conic-gradient` for knurled knobs, `background-clip: text` on a conic gradient, perspective grid with `transform: perspective() rotateX()`, etc.\n3. **A signature motif** — a Roman bust, a rose window, a jellyfish, runic unicode characters, a dymo label strip.\n\nWhen 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.\n\nThe recipes live in [`_prompts/tier-x.md`](https://github.com/jovylle/theme-lab/blob/master/_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.\n\n## Stack\n\nNothing fancy on the hosting side:\n\n- **GitHub** (`jovylle/theme-lab`) — source.\n- **Cloudflare Pages** — production deploys via `wrangler pages deploy . --project-name=theme-lab --branch=main`.\n- **Cloudflare Tunnel** (`mac-mini-local`) — gives the Pages site the custom hostname `themes.uft1.com` on top of the `uft1.com` zone.\n\nThere'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.\n\n## Where to look\n\n- **Gallery:** [themes.uft1.com](https://themes.uft1.com)\n- **Tier X filter:** click the **Tier X** pill at the top of the gallery to see only the new skins.\n- **Repo:** [github.com/jovylle/theme-lab](https://github.com/jovylle/theme-lab)\n- **Recipes:** [`_prompts/tier-x.md`](https://github.com/jovylle/theme-lab/blob/master/_prompts/tier-x.md)\n\nIf 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.\n",1783435413718]