[{"data":1,"prerenderedAt":661},["ShallowReactive",2],{"post-music-discovery-claude-fable-5-personal-project-en":3,"surround-/en/blog/music-discovery-claude-fable-5-personal-project-en":647,"post-translations-22":656},{"id":4,"title":5,"body":6,"canonical_id":629,"category":630,"date_created":631,"date_updated":631,"description":12,"extension":632,"head":633,"image":634,"lang":635,"layout":636,"meta":637,"navigation":638,"ogImage":633,"path":639,"reading_time":640,"robots":633,"schemaOrg":633,"seo":641,"sitemap":643,"stem":645,"__hash__":646},"blog/en/blog/22.music-discovery-claude-fable-5-personal-project.md","Music Discovery: I Built a Site with Claude Fable 5 to Listen to Albums Again",{"type":7,"value":8,"toc":600},"minimark",[9,13,16,19,22,39,45,75,84,89,92,95,98,141,148,151,155,158,161,180,185,188,192,195,199,202,205,212,216,222,229,232,249,256,259,262,266,269,272,289,296,300,306,309,313,330,334,348,351,355,362,365,382,388,396,412,416,419,423,426,430,433,438,442,445,449,452,460,464,467,470,473,477,480,483,487,515,518,521,528,531,536,540,552,565,568,576,579,586,589],[10,11,12],"p",{},"This summer, during a quieter August, I put my Product Engineering skills and experience with AI to work on a small personal project about music.",[10,14,15],{},"Over the past few years, I had almost stopped listening to albums.",[10,17,18],{},"I was still listening to plenty of music, but mostly through playlists. Tracks followed one another without me knowing which album they came from or what came before or after them. I had gained variety, but lost part of the experience.",[10,20,21],{},"I wanted to rediscover the pleasure of listening to complete albums, and use the opportunity to explore some of the landmark records I had missed along the way.",[10,23,24,25,29,30,38],{},"One Spotify API key, three evenings with ",[26,27,28],"strong",{},"Claude Fable 5",", and quite a few prompts later, I had built ",[26,31,32],{},[33,34,37],"a",{"target":35,"href":36},"_blank","https://music-discovery-emerika.netlify.app/en/","Music Discovery",": a bilingual mini-site featuring curated selections of albums, organized into genre-based top 100s, with a way to track what I have listened to and enjoyed.",[10,40,41,42],{},"This is also what I like about AI: it is not only useful for automating processes or accelerating roadmaps. ",[26,43,44],{},"It can turn a personal idea into a polished digital project that is genuinely fun to build.",[46,47,51,52],"div",{"className":48},[49,50],"text-center","mx-auto","\n  ",[33,53,54,55,51],{"target":35,"href":36},"\n    ",[56,57,58,59,58,64,58,68,54],"picture",{},"\n      ",[60,61],"source",{"srcSet":62,"type":63},"/img/blog/illustration/music-discovery-homepage.avif","image/avif",[60,65],{"srcSet":66,"type":67},"/img/blog/illustration/music-discovery-homepage.webp","image/webp",[69,70],"img",{"src":71,"alt":72,"loading":73,"className":74},"/img/blog/illustration/music-discovery-homepage.jpg","Music Discovery homepage","lazy",[50],[10,76,77,78,80],{},"Explore the site: ",[33,79],{"target":35,"href":36},[33,81,36],{"href":36,"rel":82},[83],"nofollow",[85,86,88],"h2",{"id":87},"rediscovering-the-pleasure-of-listening-to-albums","Rediscovering the pleasure of listening to albums",[10,90,91],{},"The starting point was deliberately simple: I wanted a list of 100 essential albums everyone should hear at least once.",[10,93,94],{},"I also wanted to create a place I would enjoy returning to, somewhere I could choose a record and keep track of my musical discoveries and rediscoveries.",[10,96,97],{},"Once the first top 100 was ready, I quickly realized that I wanted to explore more albums and genres. The project therefore grew around five main families and eight universes, for now:",[99,100,101,108,118,127,135],"ul",{},[102,103,104,107],"li",{},[26,105,106],{},"The Greatest 100",", across every genre;",[102,109,110,113,114,117],{},[26,111,112],{},"Rock",", with ",[26,115,116],{},"Punk"," as its first subgenre;",[102,119,120,113,123,126],{},[26,121,122],{},"Electronic",[26,124,125],{},"Techno",";",[102,128,129,113,132,126],{},[26,130,131],{},"Hip-Hop",[26,133,134],{},"French Rap",[102,136,137,140],{},[26,138,139],{},"Metal",", designed as a family ready to welcome subgenres of its own.",[10,142,143,144,147],{},"Each universe contains 100 albums. Because some records appear in several selections, the site currently brings together ",[26,145,146],{},"713 distinct albums",".",[10,149,150],{},"Each universe becomes an aisle, like in a record store, with its own visual theme, color palette, display font, atmosphere image, and graphic details.",[85,152,154],{"id":153},"three-ways-to-explore-a-top-100-albums","Three ways to explore a top 100 albums",[10,156,157],{},"I could have stopped at a conventional grid. But the way you browse a collection is a large part of the pleasure of discovering it.",[10,159,160],{},"Each universe therefore offers three views.",[46,162,51,164],{"className":163},[49,50],[33,165,54,167,51],{"target":35,"href":166},"https://music-discovery-emerika.netlify.app/en/electronic",[56,168,58,169,58,172,58,175,54],{},[60,170],{"srcSet":171,"type":63},"/img/blog/illustration/music-discovery-topage.avif",[60,173],{"srcSet":174,"type":67},"/img/blog/illustration/music-discovery-topage.webp",[69,176],{"src":177,"alt":178,"loading":73,"className":179},"/img/blog/illustration/music-discovery-topage.jpg","Music Discovery top 100 page with its three exploration views",[50],[181,182,184],"h3",{"id":183},"the-shelf","The Shelf",[10,186,187],{},"Album covers sit on wooden shelves. On hover, a vinyl record slides slightly out of its sleeve. It is the most direct view and the one that feels most like a physical record collection.",[181,189,191],{"id":190},"eras","Eras",[10,193,194],{},"A horizontal timeline groups albums by decade. It makes it possible to see movements emerge, overlap, and sometimes disappear. In the global top 100, the colors and illustrations change with each era.",[181,196,198],{"id":197},"the-globe","The Globe",[10,200,201],{},"A 3D globe places albums in their country of origin. It reacts to the active filters and provides a different, geographical perspective on the collection.",[10,203,204],{},"In every view, I can filter by genre, decade, country, listening status, or rating, then sort by rank, year, or artist. A local search completes the exploration tools.",[10,206,207,208,211],{},"And whenever I do not feel like choosing, the ",[26,209,210],{},"“Surprise me”"," button opens the modal for a random album I have not yet heard from the current selection.",[85,213,215],{"id":214},"everything-i-need-to-know-about-an-album-in-one-modal","Everything I need to know about an album, in one modal",[10,217,218,219,147],{},"Opening an album brings up a modal with its official cover, rank, year, country, style, and a short note explaining ",[26,220,221],{},"why it matters",[10,223,224,225,228],{},"An embedded Spotify player lets me start the album without leaving the site. When a record appears in several top 100s, the ",[26,226,227],{},"“On the shelves”"," section displays the other universes as colorful record spines.",[10,230,231],{},"I can then mark the album as listened to and choose one of five ratings:",[99,233,234,237,240,243,246],{},[102,235,236],{},"Loved it;",[102,238,239],{},"Liked it;",[102,241,242],{},"Neutral;",[102,244,245],{},"Not a fan;",[102,247,248],{},"Not for me.",[10,250,251,252,255],{},"The ",[26,253,254],{},"“My records”"," page brings together my overall progress, my ratings, progress within each universe, and every album I have already heard.",[10,257,258],{},"Finally, a global search lets me browse all 713 albums.",[10,260,261],{},"That is a lot of detail for a personal mini-site. But those details are what make me want to keep using it after the initial pleasure of building it.",[85,263,265],{"id":264},"the-top-100s-were-curated-with-ai","The top 100s were curated with AI",[10,267,268],{},"The most important part of the project, at least as important as the interface, was the content.",[10,270,271],{},"For every universe, I asked Claude to cross-reference several sources: Rolling Stone's 500 Greatest Albums list, Rate Your Music ratings, and references specific to each scene. We then worked on the balance of each selection:",[99,273,274,277,280,283,286],{},[102,275,276],{},"representation across decades;",[102,278,279],{},"diversity of countries and scenes;",[102,281,282],{},"coverage of the main subgenres;",[102,284,285],{},"a deliberate cap of two to four albums per artist, depending on the top 100;",[102,287,288],{},"consistency between ranking, historical influence, and listening value.",[10,290,291,292,295],{},"Each page ends with a ",[26,293,294],{},"“Deliberate choices”"," section explaining the sources, the caps we applied, and a few records that narrowly missed the cut.",[85,297,299],{"id":298},"what-claude-fable-5-actually-changed","What Claude Fable 5 actually changed",[10,301,302,303,305],{},"I built the project with ",[26,304,28],{},", the most capable model Anthropic released in June 2026 for long coding and prototyping tasks. I could probably have achieved a similar result with Opus 5, but I wanted to test Fable 5's capabilities on an end-to-end project.",[10,307,308],{},"The project is still a long way from the fantasy of “one sentence, one finished application.”",[181,310,312],{"id":311},"what-ai-handled-well","What AI handled well",[99,314,315,318,321,324,327],{},[102,316,317],{},"quickly generating the components and three visualization modes;",[102,319,320],{},"proposing and balancing the top 100s;",[102,322,323],{},"automating data integration and enrichment;",[102,325,326],{},"distributing the album descriptions across several agents;",[102,328,329],{},"fixing issues revealed by builds and screenshots.",[181,331,333],{"id":332},"what-remained-human","What remained human",[99,335,336,339,342,345],{},[102,337,338],{},"the project idea and its features;",[102,340,341],{},"the vocabulary, colors, icons, and atmospheres;",[102,343,344],{},"the validation of every selection;",[102,346,347],{},"the final review that ensured the quality of the finished product.",[10,349,350],{},"AI dramatically reduced the distance between the idea and the website. It did not remove the need to frame, verify, and test the work.",[85,352,354],{"id":353},"claude-proposes-but-taste-remains-a-human-decision","Claude proposes, but taste remains a human decision",[10,356,357,358,361],{},"This project reminded me of a limitation that is being discussed more and more in AI: ",[26,359,360],{},"taste",". AI can create with ease, but amid this explosion of content, human taste is still what separates thoughtful projects from AI slop.",[10,363,364],{},"Our decisions shape the entire personality and quality of the product:",[99,366,367,370,373,376,379],{},[102,368,369],{},"which interface to build;",[102,371,372],{},"how users should navigate the site;",[102,374,375],{},"what to call a selection;",[102,377,378],{},"where to draw the line between two genres;",[102,380,381],{},"how to balance simplicity and richness.",[10,383,384,385],{},"The model brings speed, references, and an impressive ability to execute. ",[26,386,387],{},"Taste is still the ability to say yes, no, almost, or “this is not quite right yet.”",[10,389,390,391,395],{},"This is an important part of my work as a ",[33,392,394],{"href":393},"/en/blog/product-engineer-new-role-ai","Product Engineer",": I do not simply pass an instruction to AI. I maintain the overall vision and take responsibility for the decisions that give the product its coherence.",[46,397,51,399],{"className":398},[49,50],[56,400,54,401,54,404,54,407,51],{},[60,402],{"srcSet":403,"type":63},"/img/blog/illustration/music-discovery-taste.avif",[60,405],{"srcSet":406,"type":67},"/img/blog/illustration/music-discovery-taste.webp",[69,408],{"src":409,"alt":410,"loading":73,"className":411},"/img/blog/illustration/music-discovery-taste.jpg","AI proposes multiple options while human taste makes the final product decision",[50],[85,413,415],{"id":414},"my-workflow-for-designing-this-mini-site","My workflow for designing this mini-site",[10,417,418],{},"After the first few universes, my method settled into a six-step loop.",[181,420,422],{"id":421},"_1-i-choose-the-next-music-genre","1. I choose the next music genre",[10,424,425],{},"I tell Claude which universe I want to add, what I have in mind, and what information to research.",[181,427,429],{"id":428},"_2-claude-researches-the-content","2. Claude researches the content",[10,431,432],{},"Claude conducts the research and proposes the top 100, explains its balance, and makes deliberate curation choices. If my brief does not already cover it, Claude can also suggest a visual direction, colors, and a prompt for the atmosphere image.",[10,434,435],{},[26,436,437],{},"More than an executor, it acts as a genuine creative partner.",[181,439,441],{"id":440},"_3-i-review-and-correct","3. I review and correct",[10,443,444],{},"I review the selection and make the final calls on scope, vocabulary, and identity. Some proposals are accepted immediately. Others lead to another iteration.",[181,446,448],{"id":447},"_4-subagents-accelerate-content-creation","4. Subagents accelerate content creation",[10,450,451],{},"While Claude handles the integration in the main conversation, several agents work on the albums' “Why it matters” descriptions. Running this work in parallel speeds up a substantial editorial task without polluting the context of the main conversation.",[10,453,454,455,459],{},"This way of distributing work follows the principles of ",[33,456,458],{"href":457},"/en/blog/vibe-coding-agentic-engineering-google-report","agentic engineering",": delegate clearly scoped tasks, then review their results, instead of asking a single agent to imagine and build everything.",[181,461,463],{"id":462},"_5-i-enrich-the-data-with-spotify-and-finalize-the-atmosphere","5. I enrich the data with Spotify and finalize the atmosphere",[10,465,466],{},"Once the changes are committed, I run a script on my machine to retrieve Spotify covers, links, and players. The API credentials never leave my local environment.",[10,468,469],{},"A second script audits the results and detects albums matched to the wrong record. I can also manually pin a Spotify ID when the automated search chooses a reissue or another album with the same name.",[10,471,472],{},"Finally, I generate the atmosphere image.",[181,474,476],{"id":475},"_6-the-product-is-reviewed-visually","6. The product is reviewed visually",[10,478,479],{},"After the static build, Claude performs an initial review with Playwright and generates screenshots at several viewport widths. It then fixes the visual issues it detects.",[10,481,482],{},"I finish by reviewing the project locally to make sure the implementation and the work produced by AI match my expectations.",[85,484,486],{"id":485},"a-deliberately-simple-architecture","A deliberately simple architecture",[10,488,489,490,493,494,497,498,501,502,505,506,509,510,514],{},"Music Discovery uses my framework of choice, ",[26,491,492],{},"Nuxt 4",", with static generation and several essential modules, including ",[26,495,496],{},"Nuxt UI v4",", ",[26,499,500],{},"Nuxt I18n",", and ",[26,503,504],{},"VueUse",". ",[26,507,508],{},"Tailwind CSS"," handles the design, while ",[511,512,513],"code",{},"globe.gl"," powers the geographic view.",[10,516,517],{},"The site generates around 40 pages in French and English before being deployed to Netlify. The visitor's browser language is detected at the CDN level, with English as the default.",[10,519,520],{},"There is no backend, user account, or database. Albums and configuration live in JSON files version-controlled with Git.",[10,522,523,524,527],{},"For my local use, my listening history is stored in a file that I synchronize between machines with Git. On the public version, it remains in each browser's ",[511,525,526],{},"localStorage"," and can be exported as a file.",[10,529,530],{},"I could have added authentication, a hosted database, and real-time synchronization. That would mostly have added maintenance to a need that did not require it.",[10,532,533],{},[26,534,535],{},"The right architecture is not the most impressive one. It is the one that fits the actual problem.",[85,537,539],{"id":538},"ai-can-also-help-us-build-things-simply-because-we-enjoy-them","AI can also help us build things simply because we enjoy them",[10,541,542,543,497,547,551],{},"I often write here about ",[33,544,546],{"href":545},"/en/blog/from-idea-to-saas-why-building-begonia-pro-local-seo","SaaS products",[33,548,550],{"href":549},"/en/blog/mcp-server-saas-feedback","MCP servers",", and agent workflows. These are useful, structured applications with real production considerations.",[10,553,554,555,559,560,564],{},"Music Discovery shows another side of what AI can be used for. Like ",[33,556,558],{"href":557},"/en/blog/vibe-coder-app-codex-openai","SIZR, my window resizing app"," or ",[33,561,563],{"href":562},"/en/blog/agent-deck-ai-coding-agents-dashboard","Agent Deck, my dashboard for monitoring AI agents",", Music Discovery started with a very concrete personal desire.",[10,566,567],{},"Of course, it is also a demonstration of what I can do professionally: start with a vague intention, turn it into a coherent product, choose an appropriately scaled architecture, direct agents, review their work, and bring a sensibility that code does not contain on its own.",[10,569,570,571,573],{},"Music Discovery: ",[33,572],{"target":35,"href":36},[33,574,36],{"href":36,"rel":575},[83],[10,577,578],{},"What small personal project are you building now that implementation is no longer the main obstacle?",[10,580,581,582,147],{},"📌 Do you have a product idea that needs to be framed and turned into an application? I can design, develop, and deliver it end to end through my ",[33,583,585],{"href":584},"/en/services/product-engineering","Product Engineering approach",[85,587,588],{"id":60},"Source",[99,590,591],{},[102,592,593,594,147],{},"Anthropic, ",[33,595,599],{"href":596,"rel":597,"target":598},"https://www.anthropic.com/news/claude-fable-5-mythos-5",[83],"\\_blank","“Claude Fable 5 and Claude Mythos 5”",{"title":601,"searchDepth":602,"depth":602,"links":603},"",2,[604,605,611,612,613,617,618,626,627,628],{"id":87,"depth":602,"text":88},{"id":153,"depth":602,"text":154,"children":606},[607,609,610],{"id":183,"depth":608,"text":184},3,{"id":190,"depth":608,"text":191},{"id":197,"depth":608,"text":198},{"id":214,"depth":602,"text":215},{"id":264,"depth":602,"text":265},{"id":298,"depth":602,"text":299,"children":614},[615,616],{"id":311,"depth":608,"text":312},{"id":332,"depth":608,"text":333},{"id":353,"depth":602,"text":354},{"id":414,"depth":602,"text":415,"children":619},[620,621,622,623,624,625],{"id":421,"depth":608,"text":422},{"id":428,"depth":608,"text":429},{"id":440,"depth":608,"text":441},{"id":447,"depth":608,"text":448},{"id":462,"depth":608,"text":463},{"id":475,"depth":608,"text":476},{"id":485,"depth":602,"text":486},{"id":538,"depth":602,"text":539},{"id":60,"depth":602,"text":588},"22","product_engineering","2026-08-07T07:00:00.000Z","md",null,"/img/blog/blog22.jpg","en","page",{},true,"/en/blog/music-discovery-claude-fable-5-personal-project",7,{"description":642,"title":5},"How I used Claude Fable 5 to build a music discovery site, combining Product Engineering skills, AI direction, and personal taste.",{"loc":639,"lastmod":644},"2026-08-07T09:00:00+02:00","en/blog/22.music-discovery-claude-fable-5-personal-project","NzCHax0HpCCfnvjk6DkxMe081xyiqxlXADr9WAmFVFs",[648,652],{"title":649,"path":650,"stem":651,"children":-1},"Agent Plugins: The Open Standard for Skills and MCP Servers","/en/blog/agent-plugins-open-standard-skills-mcp","en/blog/23.agent-plugins-open-standard-skills-mcp",{"title":653,"path":654,"stem":655,"children":-1},"AI Skills: What Are They and How Do You Install Them?","/en/blog/ai-skills-what-they-do-how-to-install","en/blog/21.ai-skills-what-they-do-how-to-install",[657,658],{"path":639,"lang":635},{"path":659,"lang":660},"/fr/blog/claude-fable-5-projet-perso-musique","fr",1786121183548]