Building a Fan Site with AI

My daughter Claire is a huge fan of the Icelandic singer Laufey. She is also deeply sceptical that AI can produce anything genuinely good. So I set myself a challenge: build a comprehensive, polished fan website -- entirely through conversation with an AI agent -- that would be impressive enough to change her mind.

I did not write a single line of code. I do not know CSS. I could not tell you what an Intersection Observer is (though I know now). What I brought was an idea, some opinions, and knowledge of the subject that the AI did not have.

What came out the other end was a site called From Reykjavik with Love -- a single HTML file, about 1,800 lines, containing a full biography with a visual timeline, a complete discography with real album cover art pulled live from public APIs, embedded YouTube videos and a Spotify player, 38 verified tour dates across four continents with region filters, a reading list with actual book covers, fan communities, interview links, a song spotlight featuring Icelandic lyrics, and a colour scheme we argued about and refined across multiple rounds.

The Brief

I did not open a code editor. I opened Cowork and connected it to a folder on my computer. My first message was something like this:

That last sentence was important. I did not want the agent to just start generating code. I wanted it to think first. Come back with a plan. Let me react before anything got built.

The agent did exactly that. It proposed a site name, a section-by-section breakdown, a colour palette, fonts, and an overall aesthetic direction. It even suggested features I had not considered -- like a book club section (Laufey runs an active one on Instagram) and locale-aware Amazon links that would detect your country automatically.

Starting with "propose a design before we build" changed the entire dynamic. The agent became a collaborator pitching ideas, not a machine executing instructions.

Name It Something Good

The agent initially suggested using an album name as the site title. I pushed back. Album names are someone else's creative work -- a fan site should have its own identity.

We landed on From Reykjavik with Love. It references Laufey's birthplace, nods to a classic film franchise, and sets an affectionate tone. It sounds like something a real fan community would name itself. That small decision -- spending thirty seconds rejecting the obvious choice -- gave the whole project a personality.

The Research Phase

Before generating any code, the agent went off and researched. It ran web searches across dozens of sources, pulling together biography details, the complete discography with track listings, verified tour dates, YouTube video IDs, awards and milestones, interview quotes, book club picks, articles from publications like TIME, Rolling Stone, NPR, and Vogue Scandinavia, and fan community links from Discord, Reddit, and Instagram.

This took a few minutes. When it came back, it had assembled a remarkably thorough profile. Not perfect -- we would find errors later -- but thorough.

The First Build

The agent generated the entire site in one pass. Structure, styling, interactivity -- all in a single HTML file. No build tools, no frameworks, no installation required. You could drag this one file onto Netlify and have a live website in seconds.

The first version was genuinely impressive. Working navigation that sticks to the top of the screen and highlights which section you are reading. A biography with an interactive timeline. A discography grid. Embedded YouTube videos. Tour dates in a filterable table. A reading list. Scroll-triggered animations. Responsive design that rearranges itself for phones and tablets.

It was also, in important ways, wrong.

Where It Went Wrong

This is the part most AI demos skip over. The first build looked great in a screenshot. But when someone who actually knows the subject -- in this case, me, a dad with a daughter who would notice every mistake -- started checking the details, problems surfaced fast.

Tour dates were incomplete. The agent found 16 dates. The actual tour has 38. Entire cities across Europe, Asia, and Australia were missing. Melbourne was listed as one show when it is actually two (my daughter and I have tickets to the second one).

Album covers were broken. The agent used fabricated image URLs that pointed nowhere. Every album showed a placeholder instead of its actual cover art.

Book covers were just coloured rectangles. The reading list had no actual cover images, just emoji on coloured backgrounds.

An award year was wrong. TIME Women of the Year was listed as 2026 when it was actually 2025.

No hero photo. The main landing section had no image of Laufey at all.

None of these were catastrophic. All of them would have been immediately obvious to Claire. And that is the point: AI agents produce first drafts, not final products. The value is not that the first output is perfect. The value is that fixing it is fast.

The Iteration Loop

This is where the real work happened. Not in one dramatic moment, but across a series of conversational back-and-forths, each one making the site a little better.

Tour dates: research, research, research

I told the agent the Melbourne dates were wrong and that the tour was much bigger than what it had. The agent dispatched multiple research sub-agents in parallel -- searching ticketing sites, the official tour page, and news articles -- and came back with 38 verified dates across Europe, the Americas, Asia, and Oceania. It also correctly identified which shows were already past and which were upcoming.

Later, when the conversation context ran out and had to be resumed, the dates somehow reverted to the old incomplete set. We caught it and fixed it again. This is a real quirk of working with AI across long sessions -- the agent can lose track of changes made earlier. Verifying the final output matters.

Album covers: building a smarter system

The broken album covers could not be fixed by just finding better URLs. Album art on streaming platforms uses temporary, authenticated URLs that expire. The agent needed a fundamentally different approach.

It built a system that fetches cover art at page-load time from the Cover Art Archive -- a free, open database where every album has a permanent identifier. For book covers, it uses the Open Library API with ISBN lookups. For the hero photo of Laufey, it pulls from Wikipedia's image API.

Each image loads in the background. If any of them fail, a styled placeholder stays in place -- no broken image icons. The agent even discovered that the Open Library API has a quirk where it returns an invisible 1-pixel image instead of a proper error for missing covers, and added a size check to handle that gracefully.

But even this was not the end. When I loaded the site later, the album covers still were not showing. Turned out there was a subtle bug: the code marked the images as "lazy loading" -- a browser optimisation that defers loading until an image is visible on screen. But the images had not been added to the page yet (they were waiting for the load event to add them). Chicken-and-egg: the browser would not load them because it could not see them, and it could not see them because they had not loaded. A one-line fix -- removing the lazy loading flag -- solved it.

The hero photo: dissolving edges

I wanted a real photo of Laufey on the landing page, but not in a rectangular frame with hard edges. The agent used a CSS technique called mask-image -- a radial gradient that makes the photo fully visible in the centre and gradually transparent toward the edges. The result is a soft, dreamlike effect where Laufey's photo dissolves into the background. No image editing software required.

Colour palette: three rounds to get it right

The first palette was warm cream and burgundy. Fine, but generic. We shifted to rose, violet, and gold -- soft lavender-pink backgrounds, deep plum-purple dark sections, dusty rose accents. Then I noticed the gold was not vivid enough. One more round: higher saturation, and suddenly the gold accents popped against the purple gradients the way they should.

This was possible because the agent used CSS custom properties -- essentially a central list of colour values that the entire site references. Change the gold value in one place, and every gold element across all 1,800 lines updates instantly. Smart architecture makes iteration painless.

The Forget Me Not moment

I had seen a TikTok of Laufey singing "Forget Me Not," a track from her album A Matter of Time that includes Icelandic lyrics. I mentioned it casually. The agent researched the song, found the Icelandic chorus -- "Gleymdu mer aldrei tho eg hedan flyg / Gleymdu mer aldrei, elskan min" ("Don't forget me, even though I'm leaving / Don't forget me, my love") -- discovered the backstory about why she switched from English to Icelandic for the chorus (the English version "rang false"), found a YouTube video to embed, and built a dedicated Song Spotlight section with the lyrics displayed in gold against a deep purple gradient.

This became one of the most personal sections on the site. Neither of us could have created it alone -- I noticed the interesting thing, the agent had the research and building capability to turn it into something real in minutes.

What Is Actually Under the Hood

You do not need to understand any of this to build a site like this -- the agent handles it all. But it is worth appreciating what "a single HTML file" actually contains, because it is more sophisticated than it sounds.

The site uses CSS Grid to automatically rearrange content across phones, tablets, and desktops, with font sizes that scale fluidly. An Intersection Observer watches for content entering the viewport and triggers fade-in animations -- no animation library needed. Three public APIs supply live data: album art from the Cover Art Archive, book covers from Open Library, and the hero photo from Wikipedia. "Buy on Amazon" links check your timezone and language to send you to the right Amazon store -- .com.au, .co.uk, .de, and so on. Four typefaces are loaded from Google Fonts. And the hero photo uses a radial gradient mask to dissolve its edges into the background.

I did not ask for any of these specific technical choices. The agent made them. Some were good. Some I overruled. But the engineering decisions -- CSS custom properties for colours, data arrays for content, client-side API fetching for images -- these are what made everything else possible. Changing the gold colour across 1,800 lines of code took one edit. That is not magic. That is good architecture, chosen by the agent before I even knew those decisions existed.

What Surprised Me

The agent has opinions. When I asked for a design proposal, it did not just list features -- it made aesthetic choices. Colour palette, typography pairings, section ordering. Some were good. Some I overruled. But it was a genuine creative conversation, not a blank-canvas-waiting-for-instructions experience.

Bugs are inevitable and that is fine. The lazy-loading chicken-and-egg bug, the fabricated image URLs, the 404-returning album IDs -- none of these were showstoppers because the feedback loop is so tight. Spot the problem, describe it, get a fix in seconds. The cost of a bug is measured in minutes, not days.

Domain knowledge is irreplaceable. The agent knew Laufey existed and could research her extensively. But it did not know Melbourne had been upgraded to two shows. It did not know the gold was not saturated enough. It did not spot a TikTok that would become one of the site's best sections. The human brings the taste, the context, and the things the internet has not indexed yet.

Long sessions have memory limits. When the conversation ran too long and had to be resumed, some earlier changes got lost. Tour dates reverted to the wrong version. This is a real limitation of current AI agents -- they work within a context window, and when that window fills up, information can fall out. The fix is simple: verify the final output, do not assume earlier corrections survived.

What I Would Tell Someone Starting Their First Project

Say who it is for. Telling the agent "this is for a fan who is sceptical of AI" raised the bar for everything. It did not just build a website -- it built a website that needed to be convincing.

Ask for a proposal first. Do not let the agent start coding immediately. Ask it to think, propose, and wait for your reaction. Five minutes of alignment saves hours of rework.

Name things well. "From Reykjavik with Love" sets a tone that "Laufey Fan Site" never could. Spend thirty seconds on the name.

Verify everything you care about. Dates, stats, URLs, spelling. The agent will get things wrong. That is normal and expected. The question is not whether errors exist -- it is whether you caught them before publishing.

Mention things you notice. A casual comment about a TikTok became one of the best sections on the site. The agent cannot browse your feed. Your observations are raw material it cannot get anywhere else.

Do not worry about the technology. I never typed a line of code. I never needed to understand what CSS Grid, Intersection Observers, or API calls are. I just needed to describe what I wanted and say whether it looked right. That is genuinely all it takes.

Deploying It

The site is a single file. Deploying it is almost comically simple: go to app.netlify.com, sign up, and drag the file onto the page. That is it. Your site is live, with HTTPS, on a URL you can share immediately. Custom domains take about five minutes more.

No servers to configure. No databases to set up. No build pipeline. One file, one drag, done. You can see the finished result at laufeyfans.netlify.app.

The Verdict

Claire has not seen it yet. But when she does, she will find a site that knows Laufey's grandfather was one of China's most revered violin educators, that she snuck into practice rooms to play jazz instead of classical cello, that her twin sister Junia is her creative director, that "Forget Me Not" was written in Icelandic because the English version "rang false," and that the Melbourne show on July 31 is the one we are going to.

An AI built this. A human guided it. Neither could have done it alone.

Built in a single Cowork session, March 2026.