Vibe Wire (Behind the Scenes): Vibe Coding a Landing Page

Hey everybody! I'm Dave, and I'm building out a new brand called Vibe Wire. I'm doing it in public and wanted to invite you all along for the ride.

Building the Landing Page

To get started, the first thing I'm doing is building out a landing page. For that landing page, I wanted to try some different AI coding tools that have come out recently - some do a little bit more than just landing pages, while others focus specifically on landing pages.

The Five Tools I Tested

The five biggest AI coding tools right now from my perspective are:

1. V0 - The established player
2. Google Stitch - Brand new, came out just a couple days ago
3. Bolt - Popular choice
4. Lovable - Growing platform
5. Canva Code - Canva's recent entry into the space

Our sponsor today is Hyperfeed - you can find it at hyperfeed.ai. Sign up today and you'll get 20 free credits. Hyperfeed is a marketing platform that gives you an AI-powered co-worker that can help with content creation 24/7.

The Design Brief

My prompt was: "A website for a daily podcast called Vibe Wire with a skeuomorphic style of an old video game console with some Dieter Rams style."

About Skeuomorphic Design

If you don't know who Dieter Rams is, he's one of the designers that a lot of people say inspired Jony Ive and some of the work that's happened at Apple over the last 30 years. Teenage Engineering also has a really cool style which I think looks similar.

I wanted to try this out because it's a little bit of a different style than you might see normally for a website. Skeuomorphic design has kind of fallen out of fashion - I remember the original iOS system design had this very skeuomorphic look where if you went to the notebook, it would look like an actual notebook. They transitioned at some point to a more flat, vector-style look.

I think this kind of style is coming back - the more tangible look to things - and I thought it'd be a fun experiment to see how these landing page tools handle that aesthetic.

Tool-by-Tool Results

I prompted each tool twice, so what you're looking at for the most part is each AI coding tool's first attempt at the creation.

V0 - The Winner

This is what I ultimately ended up going with because I liked what it came up with. The first attempt had a nice, clean look to it, but didn't really capture the skeuomorphic style - the buttons looked very flat and didn't look like something you would necessarily push.

I did like:

• The color scheme (red and black)
• Clean overall appearance
• Professional layout

The second prompt (adding "more Dieter Rams synthesizer style from the 1980s") resulted in what I chose as my final design. Maybe it didn't exactly match my requirements around skeuomorphism - the buttons still don't look that inviting or pressable - but I liked the overall style. It was the cleanest and easiest to navigate.

Features I loved:

• Orange, black, and white color selection
• Flashing red light in the corner
• Information display for schedule and duration
• Got to this quality with just two simple prompts

Google Stitch - The Multi-Page Generator

Google Stitch can actually do multiple pages for you off the bat, which is interesting. The first version didn't quite work, but after asking it to retry, it came up with something decent.

It kind of used the skeuomorphic style for the images it generated, and that play button had a cool '80s style background to it. The second version was better and included:

• Gray styling that matched closer to what I was asking for
• Red accent (possibly animated)
• Cool volume knob detail

Unique feature: You can export to Figma and then pull it into V0 to generate the backend code, but Stitch itself doesn't generate code directly.

Bolt - The Functional Approach

I wasn't able to show the first iteration, but the second attempt was much better. The first version had a lime green look that was '80s but not very skeuomorphic.

What I liked about the second attempt:

• Buttons with shadows that looked pressable
• Nice lighting highlight by the time signature
• Added a D-pad that you could actually use to navigate the UI
• More interactive elements

The D-pad navigation was particularly cool, though it might not be as usable on mobile where it could be off-screen.

Lovable - The Decent Attempt

The first attempt definitely had a little bit of the style I was looking for. The buttons looked somewhat pressable with that gray styling you'd see in classic design, plus a nice gradient at the bottom.

The second attempt ended up being really blown out and hard to see, but it looked like it had some potential with flashing animations and an interesting background.

Canva - The Surprise Winner (First Attempt)

I didn't even give Canva a second prompt because I thought it nailed the first attempt!

What made it special:

• Gave it a model number: "VW 1984 Vibe Wire 1984"
• Red flashing light in the corner
• Outline that looked like an iPod, radio, or video game console
• Gray bars giving it that old TV cathode ray tube look
• Functional-looking buttons for episode navigation and volume control

This was a great showing from Canva - they really nailed it on the first prompt.

What's Next?

I'm going to be putting up another video today where we'll show how I'm going to handle each episode. We're going to be talking about different tools every day - today we talked about these landing page generation tools.

I want to highlight all the amazing new tools coming out every day that can help you in different ways. I'm going to have one easy place where you can go and see all the tools I talk about every day - that's what you'll see under the episodes section.

Right now that page doesn't exist, so we'll build out the additional functionality I want to have on this website through Cursor and other tools.

Thanks for following along as we build out this new brand! I hope you'll come back for the next videos and continue this journey with me.