An AI Built an Ironclad Works | Hull 38 Restoration Ledger Website — Here’s the Design Trick That Makes It Work

Prime Big Deal Days · Oct 6–7Offer from Amazon

Get art and craft supplies delivered free — and shop member deals

• Fast, free delivery on millions of items
• Access to Prime Big Deal Days deals on October 6–7
• Prime Video, Amazon Music and more included

Start your free Prime trial →Free trial for eligible customers · Cancel anytime

As an affiliate, we earn on qualifying purchases.Hide

The Restoration Workshop Reimagined: A Browser as a Working Ledger

Imagine stepping into a digitally crafted workshop where each SVG cutaway tells a story of preservation and labor. This site, built entirely by an AI, transforms the browser into a dynamic restoration ledger—an interactive record that evolves with the fictional Hull 38 machine’s journey from rust to runtime. Its signature move? An immersive visual arc that shifts in tandem with the object’s state, creating a living document rather than a static display.

The Palette, Typography, and Interaction Design

The site employs a material-led color palette inspired by machine components—rusty reds, oxidized browns, and steel greys—implemented through CSS classes like .rusted and .drivetrain to shift visual states seamlessly. The typography relies on a monochrome coding font for part numbers and measurements, juxtaposed with a bone-colored serif for annotations, reinforcing the workshop atmosphere. The core signature interaction is the inline SVG cutaway, which uses shared geometry for recognizability but dynamically alters fill and stroke to simulate corrosion, structural openness, and readiness, all annotated with precise notes to evoke the feel of a well-used drawing office. This layered approach ensures that visitors experience the object as a piece of evidence, with each visual change mirroring real restoration stages, while the SVG’s annotations and layered fills ground the narrative in authenticity.

From Build to Critique: The AI-Driven Workflow

The site is developed through a streamlined three-phase process: initial construction using a set of semantic HTML and inline SVG templates, followed by an intensive critique phase where visual and interaction elements are refined based on usability and narrative clarity, culminating in a final review and certification by an art director. This guide emphasizes a material-focused palette, signature SVG interactions, and consent-gated audio effects, ensuring a cohesive and immersive experience. The AI’s role is to generate the structure and interactions, which are then fine-tuned to achieve a balance of realism and engagement, creating a convincing yet virtual restoration environment.

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 120 of 175, “ironclad”):
IRONCLAD WORKS — a tank restoration workshop, museum framing. Aesthetic: workshop pit; rust, primer, bare steel. Palette: rust orange→primer red-oxide→olive drab (the restoration arc as palette), work-lamp warm, steel grey. Fonts: archivo-black (display), chivo-mono (part numbers). SIGNATURE: THE RESTORATION ARC — one WW2 tank crosses the page in five stations (as-found rust hulk → stripped hull → drivetrain rebuild → primer → running condition), each an SVG cutaway with wrench-level annotations; THE ENGINE START is the finale: primer pumps, starter whines, one cylinder catches, then the V-12 shakes the page awake with smoke rings from the exhaust (synth idle behind switch). Track-link forging macro, “every rivet counted” inventory card, the survivor’s provenance (where this hull was found). Hero film (engine-start smoke loop). Unforgettable: the first cylinder catching.

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

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.

Explore the Restoration Room

Visit the live site to experience this AI-crafted museum workshop firsthand, where the narrative unfolds across five immersive states. And don’t forget to browse all 175 sites at the hub—each a unique digital artifact built by AI, demonstrating the future of interactive cultural storytelling.

Visit the live room → · Browse all 175 rooms

Previously in Wing V

• Room 119: Bomber Group 119 — The Long Night
• Room 116: Broadside — The Gun Deck, 1805
• Room 109: La Citadelle — An Anatomy of Siege, 1693

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