← All writing

Writing

Building in Public · Human–Agent Interaction

The Waterside Workshop: How My Homepage Was Made

I turned a room developed through conversations with ChatGPT into an explorable entrance to my portfolio. I shaped its meaning, visual direction and visitor experience, and worked with Claude to build it in Blender. This is how that collaboration became a homepage.

Felix Rieseberg’s homepage is a room: a desk at night, rain on the window, a television whose tapes are his work. In Made by mechanical means he describes how he made it with Claude, without writing the code himself: parallel threads, a room scripted in Blender, a view built from a photograph, music written in Python, and quality kept by agents that tested the site for him.

On October 16, 2026, I showed his site to Claude and asked whether I could make something like it as the landing page of my own site. Five days later, lilu.design opened on a room of my own. His homepage suggested a way to turn a room I already cared about into an interface. His post inspired this write-up. The question for my own site was how to make a personal, symbolic space work as an entrance to a professional portfolio.

Three of us made it. I brought the personal material, set the creative and product direction, and developed the experience through the work. ChatGPT synthesized our conversations into a room, images and design handoffs. Claude translated those references and briefs into the scene, soundtrack and website, contributing its own technical proposals along the way.

A room from a prompt

It started with a prompt I saw online: ask ChatGPT to draw your “spiritual room” from what it knows about you. In my ChatGPT project, I wrote: “Based on me as you see me, generate my spiritual room. Every object in it should stand for one of my traits. You choose the style. Don’t make it an ordinary bedroom.”

That prompt drew on a history of conversations: my work in design, my music, the things I read and made, and my interest in memory. Those were the materials ChatGPT had to work with because I had shared them over time.

ChatGPT proposed a waterside “meaning workshop”: a room with music, mechanisms where different ideas meet, and a corner where I could finally put everything down and simply be. It drew the room, named it, and proposed a symbolic vocabulary for it. The loom, memory cabinet and book tree were its visual synthesis of that material. Their meanings continued to develop as I responded, asked questions and recognized connections in the image.

The first spirit room: a cut-away room on a stone base above a fjord at dusk, with a grand piano and violin, a cabinet of lit bell jars, a paper tree growing from a book, a brass loom and miniature arched rooms on a long table, three hanging glass forms, steps to the water and a green armchair with a blanket. Figure 1. The first spirit room, generated by ChatGPT from the personal context of our conversations.

ObjectInitial interpretation proposed by ChatGPT (translated)
Piano and violinA sensitivity to small differences: pitch, tone, emotion.
The loom on the tableWeaving scattered ideas, people’s needs and technical possibility into meaningful structure.
A cabinet of miniature worldsCare for the integrity of memory: every experience deserves to keep its own texture.
A tree growing out of a bookWhat I read keeps growing in me, into questions, connections and new work.
Three hanging glass formsValuing what is distinct in different minds, and the light they make when they meet.
Connected miniature roomsWanting to make spaces for living together while leaving each person a door of their own.
A compass with a coral needleCuriosity leads down many side paths; the sense of direction stays in my hands.
Steps down to the waterWanting to step beyond the identities I already have and see who else I could become.
Armchair, blanket and pastrySensory pleasure, and a corner where I don’t have to look after anyone or prove anything.

It said it had turned the chair toward the water, so that sitting there I could turn my back on everything unfinished for a while.

I wanted that room to be my homepage, with its objects opening my real work. The connections between music, memory, research and design were already part of my practice; the room gave me a way to make them visible together.

That introduced a design problem. A visitor should be able to enjoy exploring the room and still find a case study, understand my role and assess the work. The symbolism needed to support that journey, with clear titles, links and another way to view all the work.

How the work was set up

The responsibilities were different, but the concept and its meaning developed through the collaboration.

I set the purpose of the homepage and shaped how the room would represent me. I chose to turn the image into an interface, requested a more coherent spatial reference, directed the visual revisions, corrected the object meanings and content associations, and wrote the music brief and listening journey. I also brought my artwork and performance into the experience. Comparing renders and choosing options were part of that work; so were defining what the options needed to accomplish and deciding when the result was ready.

ChatGPT (in my ChatGPT project) proposed the initial room and object metaphors from our conversations, generated both images, and helped develop the concept and content. It translated our discussions into two design handoffs: a design note, a brief addressed to Claude Code, a floor plan, and an object list (objects.csv, 62 objects in the second version), with sizes, positions, priorities and destinations on my site. It also proposed content rules I relied on later.

Claude (in Claude Code on my Mac) led the implementation: it installed Blender, wrote every script, rendered every image, built the clickable prototype, made the music and put the room on the site. The work ran in one coordinating session that started five more as the work branched: the clickable prototype and later the homepage; detail, light and colour; the music; an audit of what had been built, which also handled the launch fixes; and a late pass on the book tree, the rug, the plants and the artwork.

I didn’t write or read the implementation code. I directed the work through briefs, references, visual reviews, content corrections and testing the experience itself.

The room was scripted in Blender and rendered locally on my Mac. The site remained the same Astro site, deployed by Netlify from GitHub, with changes reviewed through pull requests and deploy previews.

Felix ran around sixty threads in a Claude Project, mostly in the cloud. I asked Claude whether I should do the same. It advised against it for now: rendering needed the GPU on my desk, which cloud threads don’t have; the coordinating session could already start sessions that publish private pages I could open on my phone; and every decision so far lived in that session and in the project’s docs. So everything ran locally. The sessions handed work to each other through short notes in a shared folder, and each folder had one owner: the prototype session owned the web page, the music session owned the music, and only one session at a time edited the Blender scene.

Finding the direction

ChatGPT had read Felix’s post too, and it proposed a plan: keep every existing case study and URL; map my work to the room’s objects; test a clickable prototype on the picture itself before building anything in 3D; then consider a static, finely rendered room with light motion. It added that I didn’t need to start in Blender just because Felix had. Its pre-launch checks were good ones: every object reachable by keyboard, nothing hidden behind hover, a simple version for phones, and the site still usable with motion and sound off.

I also asked ChatGPT for a second picture of the same room, one with clearer spatial coherence and believable geometry, so it could later be rebuilt as a 3D scene in Blender. This was a new brief for the image: it needed to become a place a visitor could occupy. The first picture looks down into a cut-away model. The second stands inside the room. I wanted to preserve the atmosphere and symbolic objects while making the room more suitable as an interactive homepage.

The second picture: an eye-level view of the same room, the long table in the foreground with a captain's chair, the piano at left, the cabinet and the paper tree at the back left, a wide opening onto a fjord at sunset, and the armchair at right. Figure 2. The second picture, also by ChatGPT. It became the reference for everything that followed.

I brought both pictures and ChatGPT’s plan to Claude and told it that it didn’t have to agree. It agreed with most of the plan and disagreed twice. Hotspots drawn on a generated picture would have to be redrawn as soon as a real render moved the objects, so it proposed building a gray block model (a whitebox) in Blender from the picture’s own camera and laying it over the picture; hotspots defined on the whitebox would survive every later change of material and light. And it argued for starting in Blender early, but as a renderer rather than a real-time engine: my visitors don’t need to walk around, so the room could be a set of pre-rendered views, much lighter than a live 3D scene.

Claude also challenged the reference’s visual language: warm light everywhere, candles, crystals, surfaces glowing. It argued that rebuilding and lighting the room would create an opportunity to move beyond familiar generated-image aesthetics. That was useful criticism to consider alongside what I wanted to retain: the room’s atmosphere and the relationships among its objects.

What shipped is a mix of both advisers: pre-rendered views with hotspots that cross-fade into close-ups, which is close to ChatGPT’s static-first idea, built in Blender as Claude argued.

ChatGPT then turned our conversation into the first handoff. Its design note articulated a principle I adopted: the objects are paths into the work; they never replace the evidence, the role descriptions and the full case studies. It gave the build a criterion beyond visual fidelity: the room still had to function as my portfolio.

Building the room

Four minutes after I sent the first handoff, Claude had installed Blender and built the handoff’s coordinates as plain blocks. The handoff had placed the overview camera 12.8 meters outside the room and 7.2 meters up, looking into a model with its front wall removed: a dollhouse, closer to the first picture than the second. From eye level, the same layout pushed the piano and the loom out of the frame. Claude asked me to choose.

A raw gray-and-coral block model of the room seen from high above, with object IDs as labels. Figure 3. The first handoff’s coordinates as plain blocks, from its dollhouse camera. Re-rendered for this article from the same coordinates, with the labels turned to face the camera.

I chose eye level, as if standing in the room like the second picture. That viewpoint invites a visitor into the space; the elevated view presents it as a model to inspect. I asked Claude to shrink the room and pull the objects in so the important objects would remain visible from that position. Twenty-five minutes later there was a first whitebox. I then asked ChatGPT to recalibrate its handoff to the second picture. The second handoff made that picture the visual authority, shrank the room to 9 × 6.4 × 3.6 meters, put the loom on the table, and proposed a camera, which it flagged as a starting guess. It suggested a tolerance: each object’s center within about 3% of the frame, its size within about 10%.

Claude treated the handoff’s numbers as a hypothesis and solved the layout against the picture, fitting the camera and object positions to visible landmarks. Within half an hour, all ten anchor points were within 1.3% of the reference frame. That measurement helped check the composition; I still reviewed whether the room felt right and whether its objects read clearly.

Side by side: the gray whitebox render on the left and the reference picture on the right, with matching composition. Figure 4. The whitebox beside the reference. Claude also produced a 50% overlay and a box comparison after each pass.

The picture is not one camera. Its tabletop is drawn from well above, while the lake and mountains are painted near eye level. No single 3D world satisfies both, so Claude built the backdrop as a stage set that is correct only for the overview camera, and moved the steps and the landing outside the wall, where the solved camera put them.

Where fitting the picture fought with physics, physics won. The second handoff asked for believable body scale. The fit wanted a work chair 1.27 meters tall and an oversized violin, so Claude capped both at sizes a body could use and wrote down that they read narrower than the picture draws them.

The picture held more than ChatGPT’s list. I asked for what was missing: the olive tree and lanterns on the terrace, the sheepskin, the knitted pouf, the glass cloche and armillary sphere, the shelf on the right wall. The detail session added the rest: scenes inside the bell jars, candles, a stack of lettered books, the words on the wall. In the end, 33 objects in the room, each with its own ID, aren’t on ChatGPT’s list. Each was measured on the picture and placed by projecting it back through the camera at its real-world size. Lettering uses only words from the handoff or words legible in the picture; anything illegible was left blank.

Late that afternoon I told Claude the objects looked like they came from a different era than the reference. Matching their positions had preserved the composition, but their forms and materials were changing the character of the room. That distinction became an art-direction criterion for the next pass. Claude rebuilt them in the picture’s style: a plank table with breadboard ends, a captain’s chair with a green knit scarf over its back, a brass loom with 36 warp threads, a channel-tufted armchair whose knit throw drapes according to the chair’s own shape, a piano with keys in the real pattern, a violin with f-holes on an A-frame stand. Every surface is procedural: wood grain, velvet sheen and knit stitches are all generated, with no image textures, until my own artwork and a museum print went on the walls.

Light

The first lit render came out at 13:52 on the first day, four hours after I first showed Claude Felix’s site. A frame took about 30 seconds on the GPU. By the end, with the room full, the overview took about a minute, and the full set of close-ups a few minutes.

Side by side: the first Cycles render of the room, sparse and dim, beside the reference picture. Figure 5. The first lit render, on the first day, beside the reference.

For the second lighting pass, Claude measured brightness region by region against the picture and found that the cabinet was less than half as bright as the reference. It added lights and rendered three looks: Glow, Golden and Dusk. I chose Golden. These comparisons gave me a way to review the atmosphere of the whole room alongside the visibility of individual objects.

Four renders in a grid: the reference at top left and three lit versions of the room. Figure 6. The reference (top left) and three looks. I chose Golden (bottom left).

The view outside

The view is a Norwegian fjord at sunset, or rather ChatGPT’s painting of one. Claude’s 3D mountains read flat beside it, so I asked for the reference’s own sky, mountains and lake behind the opening.

Claude cleaned the foreground objects out of the reference’s sky and projected the result through the overview camera. That preserved the painted view while allowing the floor’s reflections and the glass forms’ refraction to show the appropriate part of it.

Felix built his view from a Creative Commons photograph of Berlin and a depth map. Mine is the reference painting itself, and that has a limit: it lines up only for the overview camera. The close-ups show painted ridges and a procedural sky, so the mountains change when you step closer. I accepted that trade-off.

The music

The room’s sound is adapted from Brahms’s Intermezzo in B minor, Op. 119 No. 1, a piece I have played and loved for years. Choosing it connected the room to my own musical life. I wrote the brief myself: a recognizable piano phrase, spacious timing, subtle electronic resonance and soft, glassy echoes; quiet, intimate, slightly unresolved; no added beat. Brahms’s polyphony also answers the loom.

I designed the visitor’s journey before any sound existed. The room opens in silence, with a clear Sound control. If a visitor turns it on, the adaptation plays softly while they explore. At the piano corner they learn that the music comes from a piece I play, and they can choose to watch my performance of the original on Instagram. The room’s music fades out before Instagram opens, so the two never compete, and when they come back it stays paused until they choose to resume. As I put it in the brief: it’s a discovery, not a push.

Those decisions defined the interaction as well as the soundtrack. Sound could make the room more personal, but the visitor needed control over when it entered their environment. The piano offered a path from the room’s atmosphere to something I actually do: play the piece myself.

Claude did not use anyone’s recording. It transcribed the first eight bars by hand from the 1893 Simrock first edition, a public-domain scan on IMSLP, checking each note against the scan bar by bar. It engraved them with LilyPond, rendered them with a small Python sampler on the Salamander Grand Piano V3 samples (Alexander Holm, CC BY 3.0), then added resonance, reverb and glassy tones of its own. It put three mixes on a private listening page: more piano, more resonance, more glass. I chose more piano. Clara Schumann called this piece a grey pearl, veiled and very precious, and I wanted to keep that simplicity and intimacy without much resonance or shimmer. The result is a seamless loop of 2 minutes 4 seconds, about 2 MB, which isn’t downloaded until a visitor presses Sound.

The first eight bars of Brahms's Intermezzo Op. 119 No. 1, engraved. Figure 7. Bars 1–8 as Claude transcribed and engraved them; the loop is built from these.

When I opened the deploy preview on my iPhone, there was no sound: iOS mutes web audio when the silent switch is on. The fix asks iOS for playback audio only at the moment a visitor presses Sound, and releases it when the sound stops. With it, the room played on my iPhone with the switch on silent.

Shipping it

From the first day, a separate session turned the whitebox renders into a clickable prototype, published as a private page I could open on my phone: six hotspots in the room, a close-up and a panel for each, real titles and links, keyboard support, and Escape and Back that both go up one level. It went through twelve versions. The lit renders replaced the gray ones, and the copy I developed replaced the placeholders.

Content needed its own design review. The three glass forms represent minds in relation: each keeps its shape, while their reflected and refracted light creates colors that emerge through their encounter. That meaning had developed in my conversation with ChatGPT, and I corrected the prototype when it described them as three topics. Sostenuto, my memory project, belongs with memory, not with music. Lakehouse joined the featured work. Every title was checked against the live site. These decisions connected the symbolic room to the actual work and ideas it was meant to represent.

On the morning of October 21 I asked whether the current version could be published, with the rest left for later. That afternoon the prototype became the homepage on its own branch. The old homepage moved to /evolution, every page got the same menu and a way back to the room, and a draft pull request gave me a deploy preview to try on my phone. It went live at 15:50, and two small fixes followed that night.

The live homepage: the lit room with the site's menu above it, a Sound button showing Off, and a hint in the corner reading "Explore the objects, or view all work." Figure 8. lilu.design the next morning, with the renders that went live on October 21.

That evening, looking at the live room, I found three things I didn’t like: the book tree was a few thick tubes with square cards and covered part of the lettering on the wall; the sheepskin and pouf had drifted away from the armchair; and the two plants in the foreground were dark blobs. Claude rebuilt the tree as a paper cut-out growing from the open book, with branches, leaves and handwritten notes kept clear of the wall lettering. The plants were rebuilt leaf by leaf. My artwork The Shape of Inference went into a frame on the shelf, and Aubrey Beardsley’s The Peacock Skirt (a public-domain image from the Princeton University Art Museum) into the frame beside the tree. A small model after the Venus Grotto at Linderhof joined the miniatures on the table. I approved the set at 23:20, and it went live the next morning.

Three crops of the book tree: the old version with thick branches and square cards, the rebuilt paper-cut tree with leaves and pinned notes, and the reference. Figure 9. The book tree before, after, and in the reference.

Reviewing the work

Quality had several dimensions: the room needed to express the intended character, the content needed to represent my work accurately, and the interactions needed to function. I used visual and experiential review, with automated checks and a separate audit to examine parts of the implementation I could not inspect myself.

Pictures at the same framing. Each pass came back as a before and after from the same camera, beside the reference. That is how I caught the objects from the wrong era, the thin tree and the stray pouf.

Numbers the scene reports about itself. After each pass, scripts measured each object group against its box on the reference, rendered every camera, counted overlapping meshes (zero, every time), and measured how much of each hotspot stays visible on a 1,440-pixel screen, so small objects stay large enough to tap.

An audit by a different session. Instead of trusting the report that everything on ChatGPT’s list had been built, I asked a separate session to check the build against the list. All 59 objects marked P0 to P2 were there; the three marked P3 were left out, as the handoff itself recommends. The audit also named the weak spots: objects waiting on images or copy, and a few that no camera could see.

A factual boundary for the symbolism. ChatGPT’s handoff proposed rules I adopted: list only verified degrees; keep a submitted paper marked as submitted; no Play button without audio; no quotation without a source. The room could be imaginative, but claims about my work and qualifications needed evidence. So Ludwig II appears as a grotto model rather than a made-up quote, and the Gould line in the score is marked as an excerpt.

Being told what wasn’t checked. Most hand-overs ended with what the session had not verified, usually real Safari on an iPhone. Those were the things I tested myself.

My go-ahead for anything that leaves the machine. Nothing was pushed, merged or downloaded without my approval, including the piano samples, the score and the Beardsley image.

What I take from it

This project made me pay attention to where design authorship lives when agents can produce so much of the visible result. The initial room came from ChatGPT, but it drew on the music, work and questions about technology I had brought into our conversations. Its synthesis gave those things a spatial form. I recognized something in that form and developed it into a brief for a public experience.

The reference mattered because of the connections it held: music beside a worktable, memory preserved as small worlds, reading that grows into something else, distinct minds making light together. Staying close to it was a creative decision. I could change the geometry, materials and interactions while preserving the relationships that made me want to enter the room in the first place.

Claude contributed substantial engineering and visual problem-solving, including proposals I would not have known to make. ChatGPT contributed metaphors, imagery, language and structured handoffs. My responsibility was to decide what this homepage should communicate and how someone should encounter it, then carry that intention through viewpoints, objects, copy, sound and navigation.

The most revealing corrections were the ones a render comparison could not catch. Three topics could look exactly like three minds. A project could have a working link and still sit under the wrong metaphor. The site could play music correctly and still interrupt a visitor who never asked to hear it, which is why nothing plays until they press Sound. Those were questions of meaning and experience, and they required design judgement throughout the build.

The room opens in silence. If you press Sound, you’ll hear Brahms. If you follow the piano corner, you’ll hear me.


Credits. Creative and product direction, personal source material, visual review, interaction and music briefs, content decisions and final approval: Li. Room concept and symbolic meanings: developed by Li in dialogue with ChatGPT (GPT-5.6 Sol, GPT-6, GPT-6.1 Sol in different conversation sessions), which proposed the initial room and object metaphors. Both reference images and design handoffs: ChatGPT, developed through that dialogue. Scene construction, renders, prototype, music production and site integration: Claude (Claude Opus 5.5 in Claude Code). Built with Blender 5.2 and Cycles, LilyPond, and the Salamander Grand Piano V3 by Alexander Holm (CC BY 3.0). Aubrey Beardsley, The Peacock Skirt, Princeton University Art Museum, public-domain image. Inspired by Felix Rieseberg’s Made by mechanical means.