# How to Make a Vibe-Coded Website Look Distinct > Abdul Osama (عبدول أسامة) argues that changing AI tools alone will not fix a generic-looking vibe-coded website. Define your brand colors and fonts, choose a design system deliberately, and specify the animations you want instead of leaving those decisions to the AI. - By Abdul Osama (عبدول أسامة) — AI, marketing and business, in Arabic - 5 October 2026 - URL: https://abdulosama.com/en/feed/make-vibe-coded-websites-look-distinct - Video: https://abdulosama.com/feed/video/159 - Instagram: https://www.instagram.com/reel/DZzst_IMJF9/ ## Key takeaways - A generic-looking site is not solely an AI-tool problem; design decisions matter. - Define brand colors beyond the logo. - Look beyond commonly used fonts if they do not suit your brand. - Reusing a familiar design system unchanged can make sites look alike. - Specify the motion you want and consider GSAP for web animation. ## 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. ## Questions and answers ### Why do vibe-coded websites often look alike? Abdul points to repeated design choices: familiar colors, fonts, design systems, and generic animation. ### Is a logo enough to define a website’s visual identity? No. Abdul recommends a brand color palette that is used throughout the site alongside the logo. ### Does Abdul say Tailwind is a bad choice? No. He says common open systems can be good, but widespread use can make the results look similar. ### Which animation library does Abdul suggest? He suggests GSAP and advises specifying the animation you want rather than giving an AI tool a vague instruction. ## Full transcript لو موقعك بالVibe Coding بتطلع شبه كل المواقع و AI Slop زي ما بيقولوا فدي مش مشكلة الAI دي مشكلتك انت اللي مش فاهم يعني ايه Design System وايه اللي بيميز موقع عن التاني خلينا اقولك اول حاجة بتميز اي موقع عن التاني هي Color Palette لازم يبقى للبراند بتاعك غير اللوجو Color Palette بيشتغل بيها كمان تاني حاجة مهمة جدا هي الFonts الFonts اللي بتشتغل بيها غالبا كل ناس بتشتغل بيها اللي هي Google Fonts كم فونت عربي مشهورين كل الناس بتشتغل بيهم كم فونت انجليش كل الناس لازقة فيهم اللي هي فونتات جوجل والفونتات المشهورة لو انت عايز تعمل حاجة مميزة محتاج تشتري فونتس او تدور شوية وتدعبس على فونتس حلوة اخر حاجة بقى ودي الاهم هو الDesign System الDesign Systems المتاحة والمفتوحة زي Tailwind ومش عارف كم Design System التانين اللي انا كنت تكلمت عليهم في فيديو تاني دول الAI حافظهم وفرمهم وبيشتغل بيهم وهم شبه بعض وهم Design Systems حلوة بالمناسبة احنا بس زينا منهم عشان كلنا بنطلع بيهم عايز تعمل بقى حاجة مميزة يبقى لازم تشتغل بالDesign System مدفوع وفيه Design Systems paid بس مش اقول لك انا بشتغل بايه بصراحة اخيرا واهم حاجة الAnimation لما بيبقاش فيه Animation او الAnimation يبقى تعبان لان انت فكرك بقى بتقوله حركلي كده فبيحركلك بالزبط زي ما بتقوله عايز تعمل Animation حلو فهقولك بقى على مكتبة Animation جميلة او اسمها G-SAP صح اسمها كده؟ اسمها ها G-SAP ممكن ترد بأي تعليق وهبعتها لك على الخاص كانت Paid وبقت Free متاحة وليها على GitHub لينك هتاخده هتديلي الAI هيعملك شوية Animation سالك حلو وخفيف على الكود اهم حاجة معلش انا مشغول فترة الحالية جدا وبشتغل على مشاريع كبيرة ونفس اعمل فيديوهات بس وانا شغال كده دي من الحاجات اللي خدت بالي منها ان انا بعملها فقلت اعملها لكم فيديو انا عبدالقسامة تابعوني عشان تعرف كل جديد في الزكاية الصناعي والتسويق --- Transcribed and written up with AI from the video; reviewed on request.