Video · 5 October 2026 · 2 min read

Design Systems for Vibe Coding Projects

Abdul Osama (عبدول أسامة) says that asking an AI to make a project “look nice” leaves its visual direction too vague. He recommends specifying a design system, color palette, and visual brand, and names five open-source options to try in vibe coding projects.

Key takeaways

A request to “make it look nice” leaves the visual direction vague.
Specify a design system, color palette, and visual brand for your AI agent.
Abdul names shadcn/ui, Material UI, Chakra UI, Radix UI, and HeroUI.
HeroUI is Abdul’s personal favorite among the options listed.
Check each option’s license before commercial use.

To improve the look of a vibe-coded project, give the AI a visual direction rather than simply asking it to “make it look nice.” Abdul Osama (عبدول أسامة) recommends naming a design system and specifying the color palette and visual brand you want. Without those details, he says, the result can look much like other vibe-coded projects.

“To get something distinctive, you need to talk to the AI.” — Abdul Osama

The options Abdul names

Abdul lists these choices in order of his personal preference, from his least favorite of the group to his favorite. They can inform an interface’s visual direction, though they are not identical kinds of tools.

| Option | What it is | Abdul’s comment | | --- | --- | --- | | shadcn/ui | A collection of customizable interface components. | Popular and appealing. | | Material UI | A component library based on Material Design. | A strong open-source option. | | Chakra UI | A library of user-interface components. | Appealing. | | Radix UI | Foundational components for building customizable interfaces. | One of his recommended options. | | HeroUI | A library of user-interface components. | His favorite; he describes it as simple, elegant, and having a 2026-style look. |

How to use the idea

Tell the AI agent helping with your project the name of the option you want it to use. You can also give it a reference from the option’s website or GitHub, a platform that hosts software projects. Abdul notes that some of these options offer a shortcut that helps AI read and understand their design system, but he does not specify which ones.

In numbers

Five options to try.
2026 describes the visual style Abdul associates with HeroUI; he does not present it as a version number.

Background

Vibe coding is a way of building software by describing what you want to an AI. A named visual reference makes that request more specific. Check each option’s current license before using it commercially.

What to do next

Pick an option and give your AI agent its name, along with the colors and visual identity you want. Review the result and refine the instructions instead of relying on a general request to make the interface look good.

Questions and answers

Why do vibe-coded projects often look alike?

Abdul points to a common mistake: asking for a nice-looking result without specifying a design system, color palette, or visual brand.

What should I tell my AI agent when designing an interface?

Name the design system you want it to work with and specify your colors and visual brand. You can also provide a reference from the tool’s website or GitHub.

Which options does Abdul recommend?

He names shadcn/ui, Material UI, Chakra UI, Radix UI, and HeroUI, in that order of personal preference.

Are all five free for commercial use?

Abdul describes them as open source and free for commercial use. Verify each option’s current license and terms before using it in a commercial project.

Sources and tools mentioned

GitHub

Full transcript

أنت عارف إنك ممكن تحسن من جودة مشاريع الفايب كودينج بتاعتك بمجرد ما تستخدم open source design systems؟ من الأخطاء الشائعة اللي شوفت الناس اللي بيعملوا vibe coding أو design coding بيعملوها إن هو بيخش يقول له اعمل لي حاجة شكلها حلو وخلاص ما بيحددلوش بالتحديد الdesign system أو الcolor palette أو الvisual brand اللي هو حابب يشتغل بيه وبعد كده بيستعجب ليه مشروعي طالع شبه معظم المشاريع الفايب كود اللي طلع شوية آيكونات على شوية ألوان لطيفة بس عادية عشان تطلع حاجة مميزة محتاج تتكلم مع الAI من ضمن كلامك مع الAI إنك تقوله على الdesign system يشتغل عليه هديك بقى خمسة open source design systems ما لهمش حل top rated على الانترنت متاحين للاستخدام التجاري ببلاش وهيفريوا جامد جدا في النتائج اللي هتطلع بيها في المشروع الجاي بتاعك أقولهم لكوا بترتيب من أكتر واحد أنا ما بحبوش وما كلهم جامدين لأكتر واحد أنا بحبه وانتو ممكن تجربوهم كلهم وفي آخر الفيديو ممكن تكتب تعليق وهبعتلك الليستة على الخاص أول واحد اسمه شاد سي ان معرفش بصراحة بيتنطق إزاي اسمه شاد سي ان يو آي لطيف جدا ومشهور جدا بعد كده فيه واحد اسمه material UI برضو open source قوي جدا طبعا بفكر الماتيريال بعد كده فيه واحد اسمه شكرة UI لطيف بعد كده فيه واحد اسمه راديكس UI وأخيرا والمفضل بالنسبالي واحد اسمه هيرو UI بصراحة بيطلع شغل تحفة هو simple كده و elegant و 2026 style فبحب استخدمه جدا هتقول ال AI agent بتاعك مجرد اسم ال open source design system ده وهو هيروح يجيبه أو هتجيب اللينك من على GitHub أو هتروح على الموقع بتاعهم وفيه ناس منهم دلوقتي بعملين اختصار لل AI عشان يخش يقرأ على طول ال design system ويفهمه بس رد بقية تعليق وهبعتلك على الخاص أنا عبدالقسامة وتابعيني عشان تعرف كل جديد عن الزكاة الصناعي والتسويق. سلام.

This text was written with AI from the video and may contain small transcription errors. · Markdown version

Watch next

Four UI Kits to Give Your AI Agent

Abdul Osama (عبدول أسامة) recommends four UI component libraries to give an AI agent a starting point: Radix UI, Ark UI, Park UI and Ariakit. His approach is to build from existing components and examples, then adapt the colors and fonts to the project.

5 October 2026 · 1 min read

Why Should Tech Managers Try Vibe Coding?

Abdul Osama (عبدول أسامة) urges managers in tech to try vibe coding themselves rather than only planning work and passing every idea to programmers. He is not asking them to become programmers or replace them; his point is to expand what managers can build and understand firsthand.

5 October 2026 · 1 min read

Finding Public APIs on GitHub for Agentic AI

Abdul Osama (عبدول أسامة) points to a categorized API collection on GitHub that viewers can find by searching for Public APIs. He suggests using APIs to give Agentic AI applications access to data or up-to-date information when needed.

5 October 2026 · 1 min read