How do you make a vibe-coded website look distinct?
Give your AI tool specific design decisions rather than asking it to make a generic site. Abdul Osama (عبدول أسامة) identifies four areas that shape the result: color palette, fonts, design system, and animation.
“The first thing that distinguishes one website from another is its color palette.” — Abdul Osama
Make the design choices explicit
- Color palette means the set of colors used across a site. Choose one for your brand that works alongside your logo; the logo is not the whole visual identity.
- Fonts: Abdul observes that many sites use the same familiar Arabic and English typefaces from Google Fonts, a library of fonts for the web. For a different look, spend time finding suitable typefaces or consider buying one.
- Design system means the rules and reusable components that keep an interface consistent. Abdul says AI tools often draw on familiar open systems, which can make their outputs look alike. He mentions Tailwind, a framework for styling interfaces, as an example. He suggests considering a paid design system for a more distinctive result but does not name the one he uses.
- Animation means movement in the interface. Rather than vaguely telling an AI tool to animate the site, describe the motion you want. Abdul suggests GSAP, a library for web animation, and recommends giving the AI its code reference.
“If your vibe-coded site looks like every other site, that’s not the AI’s problem; it’s that you don’t understand what a design system is.” — Abdul Osama
Background
Vibe coding is a way of building software by directing an AI tool in natural language. The tool can produce a working interface without knowing what makes a particular brand visually distinct, so clear design choices matter.
What to do next
Write down your brand colors, font choices, and interface rules before prompting the AI. Then describe any animation you want precisely. Abdul says GSAP used to be paid and became free; check its current license terms before using it in a project.
