Imagine a digital exhibition where a fictional mid-century poster house crafts unique alpine travel posters in real-time—entirely generated on the fly. This AI-built site embodies a signature procedural technique that produces each poster as a fresh, authentic artifact without relying on any static image assets. Visitors witness a dynamic print shop, where every visit seeds a new alpine scene, and can customize elements live—making the experience both an artwork and a craft demonstration.
The creation process unfolds in three stages: first, the build phase leverages a procedural generator that combines seeded randomness with defined visual rules, producing a variety of alpine scenes. Next, a rigorous critique ensures the composition maintains visual hierarchy, deliberate spacing, and a memorable aesthetic—addressing issues like weak type hierarchy or flat layout. Finally, the art director certifies the design, fine-tuning details, and ensuring the output aligns with the vintage print ethos, all guided by an in-depth manual that documents the generator’s logic and reproduction recipes.
The full build notes live in the room’s design guide.
The visual system hinges on a carefully curated palette—cool glacier blue, warm yellows, alpine reds, soft creams, and near-black ink—applied through CSS overlays and hard-edged color blocks that evoke vintage print techniques. Type is set with open-source fonts Bebas Neue and Jost, establishing a bold, uncompromising tone that echoes mid-century poster aesthetic. The core signature method employs a procedural SVG generator housed within main.js, which combines seeded randomness with custom path functions—like mountain peaks, snow caps, and route pips—to produce a distinct poster each time. The SVG composition layers multiple data-driven elements, from weather effects to leisure activities, ensuring each print feels crafted but unique. Controls mimic traditional print press operations, allowing live redrawing of the SVG, inspection through magnifying loupe overlays, and export of the final artifact as a standalone SVG file, making the digital poster a tangible keepsake.
Want this? Paste this into your AI coding agent
Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.
BRIEF (room 37 of 175, “alpenpost”):
ALPENPOST — a mid-century travel-poster studio for alpine resorts. Aesthetic: flat poster modernism, halftone print. Palette: glacier blue #7fb4d9, sunshine yellow #f2c545, alpine red #d63c30, cream paper; halftone grain overlay. Fonts: bebas-neue (poster display), jost (body). SIGNATURE: a gallery of PROCEDURALLY GENERATED travel posters — layered SVG compositions (mountain profiles, sun rays, gondolas, ski tracks, birds) with parametric palettes; every poster reseeds unique. Then the commission desk: visitors pick mountain shape, time of day, activity and title → their poster composes LIVE and can be downloaded as SVG. Slight print misregistration + halftone for authenticity. Unforgettable: everyone leaves with their own poster.STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.
QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.
PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.
— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/alpenpost/
This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.
Visit the live exhibition to see the posters in action, explore the gallery where each piece is uniquely seeded, and experiment with live controls at the commission desk. Browse all 175 generated editions from the hub, and experience firsthand how AI and procedural techniques craft authentic-looking vintage posters—built entirely through code, with no image assets.
Visit the live room → · Browse all 175 rooms
Previously in Wing II
- Room 26: KP-9 Station — Arctic Geomagnetic Observatory
- Room 31: La Bourse — October 1929 Stock Exchange
- Room 27: CALIBRE 27 — Haute Horlogerie Manufacture
FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
