The Dawn-to-Morning Making of LIKE WONI TOP 100
Vibecoding Development: Codex, Claude Code
“What's the name of the solo song?”
“It's LIKE WONI.”
An Won Jal Bu「Woni's Recent Updates」 from
Fans are actually creating this song that appeared in the video.
I thought it would be great to collect and listen to them, so I created LIKE WONI TOP 100.
I started at 3:30 AM, thinking I should make it, and finished it at 7:30 AM.
This time, I worked with Codex and Claude Code.
03:30 Start → Approx. 4 hours → 07:30 First Completion
I created the LIKE WONI TOP 100 website.
1. This time, I created a song chart.
Last time,Seontae ExpoI created the Seontae Expo and posted about its making, and this time I also made a fan site. Its name is LIKE WONI TOP 100.
I started around 3:30 AM, thinking I should make it. I fed the collected data, created a draft, and made various adjustments while looking at the screen. By then, it was 7:30 AM. It took approximately four hours to complete the first version.
For the Seontae Expo, I collected data with OpenClaw, created documents with GPT, and then worked on them using Cursor. This time, I used Codex and Claude Code.
The work was much simpler than with the Seontae Expo. Codex handled everything from data analysis to the initial draft, and then I showed it to Claude Code to refine the design.
The development method has changed incredibly in six months.
2. Fans are creating songs.
Those who watch Le Sserafim and An Won Jal Bu might know that,「Woni's Recent Updates」 in the video, while talking about the future 10 years from now, a song title called LIKE WONI appears.
However, fans are actually creating that song. Even though it's the same LIKE WONI, the genre and atmosphere are different. While it's fun to search for and listen to them one by one on YouTube, I thought it would be great to have them all collected in one place.
Since fans are creating songs, I figured I could create a chart. Initially, I thought of something like Melon TOP 100, so I named it LIKE WONI TOP 100. For the screen, I decided not to directly copy a specific site but to refer to various music sites.
4:36 AM. First, I explained why I wanted to create this. You can click to enlarge it.
I should have explained this well from the beginning, but since I started with basic development tasks, I ended up explaining it again later. If I had just made it a site to collect Woni-related videos, it would have been different from what I envisioned.
3. First, I fed the data to Codex.
Since I had the specifications and collected HTML, I asked Codex to read them first. I decided to build it based on Node.js and use the same Supabase project that was used for the Seontae Expo. Service data would be separated.
Looking back at the conversation, it proceeded roughly in this order.
03:43 · “Install dependencies”
I asked it to perform the necessary installations and basic tasks based on the existing specifications.
View conversation at this time
I started by referring to the environment used during the Seontae Expo.
04:22 · Reading specifications and collected data
I said “98 sites,” but when I opened it, 98 was the number of thumbnails within the HTML. The video records included 86 related videos and 13 candidates for review. First, I reconfirmed what had been collected.
View data analysis conversation
The collected data contained various videos mixed in, not just songs.
05:01 · Decided to exclude user registration and internal comments
I thought there was no need to register again just to listen to a song. Since everyone is already active on YouTube, they could find and listen to songs here, and leave comments or likes on YouTube. This also reduces the unnecessary collection of personal information.
View conversation where features were decided
Similar to the Seontae Expo, I decided to link to where people already are, without a separate community.
06:03 · “Create a draft like that”
After discussing up to this point, I asked it to create a draft. It's easier to discuss what's good and what's not once there's a screen to look at.
When creating the draft, I made the request in a single line like this.
The initial draft only contained 18 videos. So I asked why there were only 18, to bring in the rest, and to show Shorts separately. I also requested that videos play embedded when clicked, and to include the creator's profile image, number of likes, and comments.
Rather than deciding all these things at once, I continuously discussed them while looking at the screen. It was a process of saying, “Add this,” or “Why does this look like this?” and then making corrections.
When the first draft came out
The first draft, showing 18 videos. It included search, genre filters, and song details.
Related evidence:Collected data analysis conversation ·Draft completion record
4. I entrusted the design to Claude Code again.
The draft created by Codex had a bright background with coral colors. While the functionality was there, it felt a bit ordinary for a fan site.
So I showed the draft to Claude Code and said this:
The concept and design are a bit ordinary. Please suggest and revise the design to capture a fan site feel.
Claude Code's suggested name was MIDNIGHT FANCLUB 2036. It used neon colors on a dark background, had a cheering message scrolling at the top, and changed recommended songs to look like photo cards.
I didn't specify each color or CSS property. I just told it that the draft was too ordinary and asked it to give it a fan site feel, and it read the existing files and made revisions. Then I could review it in the browser and provide further feedback.
Reading the existing screen and changing the design. After modifications, I also ran tests and builds.
First draft created by Codex
This is the design proposed by Codex.
Currently published site
This is the current screen after changing the design and further refining the text and video list.
Looking at the first draft and the current screen side-by-side, they've changed quite a bit.
Changing the design wasn't the end. There were phrases like “Hit songs of 2036, created first by fans,” but they sounded too much like AI-generated text, so I asked for them to be removed.
I also re-determined which videos to include in the chart. It shouldn't be all Woni-related videos, but specifically theLIKE WONI song chartLong-form videos were kept as the main content, and Shorts were separated. Original or reaction videos were excluded from the song rankings.
I'm also keeping the intermediate screen from when the design was being changed.
At this point, related videos were still appearing in the recommendation section. I needed to further organize it so that only songs were included in the chart.
This is the record left after design modifications. I checked 20 tests, builds, mobile screens, and embedded playback.
5. Here's how you can view it now.
Upon entering, the LIKE WONI long-form chart appears first. Shorts can be viewed separately, and clicking a song opens the YouTube player. You can also see the creator's profile, views, likes, and comments.
A few key comments are displayed on the site, and to read more or write comments directly, you can go to the original YouTube video. There's no need for separate registration. For those who want to listen continuously, a YouTube playlist has also been created.
The playlist was created using computer automation. I entrusted it with tasks like opening a Chrome window and adding songs to a playlist on YouTube, and it handled it easily. It was convenient to be able to organize the playlist immediately after creating the site.
Long-form videos:88
Shorts videos:41
Playlist tracks:85
As of September 3rd. The playlist is updated separately, so the number of tracks differs slightly from the chart.
Initially, I considered ranking by combining views, likes, and comments, but currently, it's displayed by view count. The other numbers are included for reference when viewing a song.
Even after the initial creation, I added new videos, removed deleted ones, and adjusted song placements and the playlist. The four hours were for the first completion, and I've been making minor adjustments since then.
6. It was much more convenient than during the Seontae Expo.
During the Seontae Expo, I would take documents organized by GPT to Cursor, then feed the reviewed content back into GPT, and implement it once it was organized. I also had to manage the results collected and classified by OpenClaw.
This time, Codex read the project files and data to create the initial draft. Claude Code then read those files and refined the design. It was convenient because I had fewer instances of moving documents and re-explaining the same things in between.
Since I had the environment used during the Seontae Expo and video data was pre-collected, I didn't start everything from scratch. The task of classifying tens of thousands of comments is also different from this site's purpose. Nevertheless, using this combination felt much simpler when I tried it myself.
What I kept saying was things like: “First, understand why I'm making this.” “No login is needed.” “The design is too ordinary.” “Only LIKE WONI songs should be collected, not all related videos.” When I said these things, it would modify the actual files, making it easy to continue the conversation while looking at the screen.
It was great to be able to see in the morning what I had decided to create in the early hours. There are many songs created by fans, so it might be nice to give them a listen. If you find a song you like, please leave a comment or a like on the original YouTube video.
Following the Seontae Expo, I had fun creating this again. Thank you for reading this long post.