Website Building

Build a Personalized Music Website

Create and publish a personalized music website for someone special using Google Flow, Claude Code and Netlify.

An afternoon2 steps14 promptsIntermediate

Tools Installation Step-by-step guide Prompts Built with

01 · Tools

AI tools you’ll use.

Claude CodeWrites the code and runs the terminal for you.

NetlifyDeploys the static build and hosts the domain.

GitHubStores the code and connects the deploy.

Google Flow

Node.js / npm

GitHub (gh CLI)

Netlify (incl. Netlify Blobs)

YouTube IFrame API / oEmbed

YouTube Data API (optional)

02 · Installation

Set up each tool.

Do these before step 1.

Install Claude CodeWrites the code and runs the terminal for you.

Create the project folder
Open Claude Code inside the folder

03 · Guide

Step-by-step guide.

2 of 2 open

SetupBuild in order, not all at once

Storage first, then the mobile screen, then the player. Look at each result yourself before the next part gets built on top of it.

TestThe desktop layout must add no player logic

If it needs any, the player was not built properly the first time. This one check keeps the code from splitting into two players that slowly drift apart.

04 · Prompts

The prompts that built it.

prompt-1.txt

Design a premium desktop web interface for a personalised music playlist called "Nostalgia."

Create a single-page, full-screen music player with a warm, cinematic, vintage aesthetic. The design should feel like a personal digital mixtape made for someone special—not like Spotify, a dashboard, or a generic streaming platform.

CANVAS AND STYLE
- Desktop viewport: 1440 x 1024 px.
- Use a warm ivory, cream, beige, taupe, and burnt-orange color palette.
- Main background: soft ivory with very subtl
…

06 · Built with