OpenTube

The one thing vibe coding CAN’T fix about your website

Kole Jain

43,179 views

Try the Relume MCP for easier, more consistent site generation: https://www.relume.ai/relume-library-mcp

Here's exactly how to take a website that feels 'fine' to unforgettable. We break down why a clean, functional site can still feel soulless, then rebuild it including the visual identity and animations for management software submitted by a fellow viewer.

Enjoying the content? Subscribe for more!
@KoleJain

Submit your site/software for a video like this:
https://www.kolejain.com/submit

Figma files:
http://kolejain.com/resources?scrollT...

Timestamps:
0:00 The problem with this site
1:43 Visual Identity
3:05 Frankensteining a site
5:18 Sectioning
7:08 Animation

--
'Origami' by Scott Buckley - released under CC-BY 4.0. www.scottbuckley.com.au

20 Comments

@ayushdeshmukh108 1 month ago

you don't know how much I was waiting for your video 😭😭

@L0N3W0LF59 1 month ago

this looks good but the hero image does look forced, and the background pattern was all over the screen. The entire idea of using a seamless pattern as a bg layer is to add a subtle base to the text above it. Frankensteining website only works when you take elements from different websites but with similar layout style, the design system in this was not coherent and appeared more like a collage on a ppt slideshow. But good approach man, like the idea.

@abhinav.sharma 1 month ago

This channel is a goldmine to aspiring designers!

@kennethkwakye-gyamfi4765 1 month ago

Can't wait for the day you start to analyse personal websites

@nayakboy916 1 month ago

This video is very helpful for me because I used to have problem in designing like this. I don't have any material to submit because I am a beginner but I watch all your videos and I get such help. I want more videos like this so that I can know how to create a design system from basic and how to finalize fonts, colors, layouts, visuals and that too very fast because It takes me too much time

@KoaGun 1 month ago (edited)

Thank you 🙏 I really appreciate that. I’ll redesign it.

@roanyosky9918 1 month ago

Amazing video. Thank god for the youtube algorithm for blessing me with this one. You got a new subscriber💖

@jd4300 1 month ago (edited)

Great video man. Really like seeing the process behind the re design 🔥

@Viviko 1 month ago

Saving this. Love the process you outlined. As a primarily backend developer… I just go with templates. So knowing this is very helpful.

@rodlivz 2 weeks ago

Wow, this was amazing UI content! I've learnt a great deal! I rank 'the profess' videos as the best type of content. Please do more... Have you considered doing a training?

@AnxiousKoisiAnxious 1 month ago

Great now I can fine tune the model with this video

@viniciusm.m.7822 1 month ago

Beautiful!

@johnchimela2 1 month ago

Thanks!
So much insights

@harshchelani9896 1 month ago

Super contrasty to read anything and the shadows will ground the image more in hero section rest as concept love the breakdown.

@randomshortsxd-l5h 1 month ago

No it’s just people don’t know how design actually works so normal can’t even tell ai what to actually edit lol💀💀u can’t just tell ai to get rid of slop it doesn’t even what slop is

@Chris-if8og 1 month ago

Amazing video, thanks so much.

How did you do these animations, like around 3:45. Looks so sick.

@IittleMouse11 1 month ago

Just how to manage those kitchen graphics on the hero responsively and maintain the spacing on that hero text... burn/combine them into the hero image?

@carlyoutube 1 month ago

Where can I hire you? 😊

@codechamps1375 1 month ago

For a client that wants both a very good and unique design, but also compatibility and seamlessness on mobile interface, how would you make the design responsive without getting rid of its personality. Love the workflow though, definitely helps me stay organized. And do you use figma first for adding noise and the vignette and adding components?