An AI Built The Lace School — Two Moves, Infinite Pattern Website — Here’s the Design Trick That Makes It Work

Discover a Digital Textile Workshop Crafted by AI

Imagine a virtual lace pillow brought to life through code, where intricate weaving patterns evolve seamlessly through just two core interactions. This AI-generated site demonstrates how minimal gestures can unlock a universe of endless, delicate designs, echoing historic craftsmanship in a 21st-century digital space.

Streamlined Creative Pipeline

The project begins with an initial conceptualization grounded in the timeless art of lace-making, translated into a minimalistic visual language. A three-phase development ensues: first, building an interactive SVG simulation that models the core weaving motions; second, conducting rigorous critique sessions focusing on visual clarity, user flow, and technical efficiency; third, final refinement and approval by an art director, ensuring the digital craftsmanship faithfully mirrors the delicate intricacies of traditional lace. The entire process is guided by an AI-driven blueprint that emphasizes the importance of principle over surface, ensuring each interaction underscores the site’s thesis: that minimal moves can breed infinite complexity.

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

Deconstructing the Digital Loom

The site’s palette is rooted in a subdued linen base, accented by a single silk-inspired hue that guides the viewer’s eye like a fine thread. All visual components—typography, SVG illustrations, and CSS textures—are meticulously crafted through code, avoiding traditional images, and instead employing layered SVGs with gradients and shadows to evoke tactile depth. The signature interaction hinges on two state-driven updates: a “CROSS” and a “TWIST”—these toggles animate the lace pattern by morphing SVG paths, controlled via JavaScript functions that optimize performance by updating existing nodes rather than recreating them each frame. Keyboard controls extend engagement, allowing users to experiment with pattern variations freely, while the entire experience responds to user preferences like reduced motion, ensuring accessibility. Every visual element, from the brass pin icons to the linen grain, is generated with code, emphasizing the site’s core idea: complex beauty emerges from simple, repeatable choices rendered through precise programming techniques.

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 88 of 175, “bobbin”):
THE LACE SCHOOL — bobbin lace, thread mathematics. Aesthetic: linen pillow, brass pins, wound bobbins. Palette: linen #efe9dc, thread white/ecru, pin brass, pricking-card blue, one silk-ribbon rose. Fonts: cormorant-garamond (display), epilogue (body). SIGNATURE: WATCH THREADS THINK — a lace pillow where paired bobbins CROSS and TWIST in slow choreography (the two moves of all lace, captioned), threads tightening around pins to grow a ground (torchon fan, spider, rose ground) row by row; speed control from meditative to time-lapse; then YOUR TURN: a guided six-move sequence (click the bobbin pairs in order) completes a motif — mistakes gently unravel. Pricking patterns as star charts, bobbin spangle gallery, “lace = binary before binary” essay linking to jacquard’s room. Unforgettable: two moves becoming infinite pattern.

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

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 Infinite Pattern in Action

Visit the live AI-crafted Lace School site to explore its mesmerizing interactions firsthand. Dive into the gallery of all 175 unique pattern states at the central hub, and witness how two simple moves can unlock a boundless universe of delicate design—an elegant testament to craftsmanship reimagined through code.

Visit the live room → · Browse all 175 rooms

Previously in Wing IV

• Room 86: Still House 86 — Botanical Gin, Obeying Your Hand
• Room 77: The Foley Stage — Perform the Picture
• Room 76: The Immortal Game — London, 1851

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