How to design as a vibecoder

@thisguyvibecodes

1.1K followers · usually 1.5K views a post

Views

10.4K

Likes

825

Comments

22

Shares

100

Selling · SaaS › Developer Tool

21st.devseen in 7 videos →21st.dev ↗

Why it worked

The video provides practical, actionable advice for web designers and developers by showcasing specific tools and resources for creating engaging loading animations. The creator's personal journey as a solo developer and their offer to share tips also builds a connection with the audience.

Summary

The creator explains how to find inspiration for website loading animations by looking at award-winning designs on awwards.com and using components from 21st.dev. They showcase an example of a loading animation they created for a cafe website.

Structure

1Introduction to designing with loading animations
2Finding inspiration on awwards.com
3Using 21st.dev for faster components
4Demonstrating a custom loading animation
5Introducing the creator and their devlog series

Product placement

The video mentions and shows examples from awwards.com for design inspiration and 21st.dev for loading animation components. It also briefly shows Igloo.inc, Oryzo.ai, shopify.com, and terminal-industries.com as examples of websites with loading animations.

Original caption

How to design as a vibe coder (with loading animations) 💻👾 #vibecoding #claude #buildinpublic

More from @thisguyvibecodes

Their other posts in the index, biggest breakout first.

Call to action

Follow along.

On-screen text

How to design as a vibecoder awwards.com Framer igloo.inc INFUSED OF BIO ENERGY manayerbamate awwards.com Oryzo.ai shopify.com/editions/winter 2026 terminal-industries.com 21st.dev devlog DAY 5 @thisguyribecodes Follow Along!

Transcript

How to make your websites not look like AI slop. One thing that I've noticed when looking at websites that I want a lot of design awards is that before entering the website they always have a loading animation that looks really polished and clean. Now whenever I want to make loading animations from my own website I love going to awwards.com and finding cool loading animations like this one or this one or this one to draw inspiration from. Or if I need something faster I go to 21st.dev I grab a component that I really like and just paste a prompt to Claude. Here's an example of the loader that I made for a cafe website which is supposed to be the cafe logo filling up like a drink. My name is Brandon and I'm documenting my life as a solo developer and sharing tips along the way. So if you're interested, follow along.