Moon Jar Kiln | Throw One Perfect Imperfection: An AI-Designed Web Experience

Step into the Virtual Studio of Room 93

Imagine a digital space that mimics a traditional Korean hanok workshop, where craftsmanship is celebrated through imperfect yet meaningful joins. This AI-built exhibition transforms the browser into an active kiln room, emphasizing the tactile and structural truths of ceramic making. Its signature feature is a seamless seam visualization that persists throughout the experience, embodying the vessel’s handcrafted identity.

Decoding the Design: Palette, Typing, and Interaction

The site’s visual language is rooted in a carefully curated palette inspired by the materials of kiln-fired porcelain and celadon glazes: soft porcelain, cool celadon, warm kiln amber, deep iron ink, and rich walnut. Typography choices favor a restrained, measured aesthetic, with Jost at light weights and Zen Kaku Gothic New providing clarity for labels and descriptions. The interface’s core interaction revolves around a pressure-sensitive drawing experience, where user input directly influences the form and the visible seam of the jar.

Core to the signature interaction is a pressure-to-consequence cycle, designed without image assets but enriched through layered CSS gradients that evoke fiber textures, kiln bricks, and mineral atmospheres. The seam itself is dynamically magnified with a custom pointer and slider, translating user adjustments into visible material traces—highlighting the vessel’s structural join as an essential, non-decorative feature. This approach ensures that the imperfection is an integral part of the narrative, not a flaw to hide.

The Creative Workflow: From Concept to Certification

The development follows a three-stage pipeline: first, the site is built using a code-native approach that models the craftsmanship process, translating physical constraints into interactive behaviors. Next, a rigorous critique phase assesses whether the interface credibly reveals the vessel’s imperfection as a structural truth, not just a visual motif. Finally, an art director’s review certifies that the experience embodies the craft’s philosophical underpinning, emphasizing the importance of trace and process over flawless symmetry, guided by the AI-generated design rules.

The full build notes live in the room’s design guide.

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 93 of 175, “moonjar”):
THE MOON JAR KILN — Korean porcelain, one perfect imperfection. Aesthetic: hanok workshop restraint; celadon and white porcelain. Palette: porcelain white #f4f2ec (warm), celadon #b8cfc2, kiln-fire amber, iron-brush black, walnut shelf. Fonts: zen-kaku-gothic-new? Korean subject — use jost (quiet display) + epilogue (body), with generous space doing the work. SIGNATURE: THROW THE JAR — a potter’s wheel where HOLDING near the spinning profile pulls the vessel’s silhouette (bezier profile follows your hand’s distance; too thin and it slumps); two hemispheres join (the moon jar’s secret — the seam eases but never hides), then THE KILN: firing curve climbs to 1300°, the jar glows through peepholes, and cooling reveals its unique warp and blush (subtle asymmetry generated from your throw). The “perfectly imperfect” essay, glaze chemistry drawer, a shelf of previous visitors’ jars (seeded gallery). Unforgettable: the seam you’re allowed to see.

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/moonjar/

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.

Experience the Workshop in Action

Visit the AI-crafted digital kiln room to explore the full interaction cycle—adjust the seam, observe the kiln’s behavior, and examine your imprint at different resolutions. Browse the entire collection of 175 virtual vessels at the hub and see how the site preserves the integrity of the craft’s imperfection as a vital design element.

Visit the live room → · Browse all 175 rooms

Previously in Wing IV

• Room 88: The Lace School — Two Moves, Infinite Pattern
• Room 92: Taller Calavera — Death, Drawn Dancing
• Room 86: Still House 86 — Botanical Gin, Obeying Your Hand

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.

Powered by Thorsten Meyer AI