# كيف تجعل موقعك المصمم بالذكاء الاصطناعي مميزًا؟

> يرى Abdul Osama (عبدول أسامة) أن تشابه المواقع الناتجة عن Vibe Coding لا يُحلّ بتغيير أداة الذكاء الاصطناعي وحدها. ابدأ بتحديد لوحة ألوان وخطوط تناسب علامتك، ثم اختر نظام تصميم مقصودًا وأضف حركة تخدم التجربة بدل طلب حركة عامة من الأداة.

- عبدول أسامة (Abdul Osama) — الذكاء الاصطناعي والتسويق والأعمال بالعربي
- 5 أكتوبر 2026
- URL: https://abdulosama.com/feed/make-vibe-coded-websites-look-distinct
- Video: https://abdulosama.com/feed/video/159
- Instagram: https://www.instagram.com/reel/DZzst_IMJF9/

## أهم النقاط

- تشابه المواقع ليس مشكلة أداة الذكاء الاصطناعي وحدها؛ قرارات التصميم مهمة.
- اختر لوحة ألوان للعلامة تتجاوز الاعتماد على الشعار.
- ابحث عن خطوط مناسبة بدل الاكتفاء بالخيارات الشائعة.
- استخدام نظام تصميم شائع كما هو قد ينتج واجهات متشابهة.
- حدّد الحركة المطلوبة بوضوح، وجرّب GSAP عند الحاجة.

## كيف تتجنب تشابه مواقع Vibe Coding؟

إذا بدا موقعك المبني بأسلوب Vibe Coding شبيهًا بمواقع كثيرة، فراجع قرارات التصميم التي تعطيها لأداة الذكاء الاصطناعي. يلفت Abdul Osama (عبدول أسامة) إلى أربعة عناصر تصنع الفرق: لوحة الألوان، والخطوط، ونظام التصميم، والحركة.

> «أول حاجة بتميز أي موقع عن التاني هي Color Palette.» — عبدول أسامة

### حدّد هوية الموقع قبل طلب تنفيذه

- **Color Palette** هي مجموعة الألوان المستخدمة في واجهة الموقع. اختر ألوانًا خاصة بعلامتك تُستخدم إلى جانب الشعار، لا الشعار وحده.
- **الخطوط:** لاحظ عبدول أن كثيرًا من المواقع تعتمد الخطوط العربية والإنجليزية الشائعة من Google Fonts، وهي مكتبة خطوط متاحة للاستخدام على الويب. إذا أردت طابعًا مختلفًا، ابحث بتأنٍ عن خطوط مناسبة أو فكّر في شراء خط.
- **Design System** هو مجموعة قواعد ومكوّنات تنظّم شكل الواجهة واتساقها. يقول عبدول إن اعتماد الأنظمة المفتوحة الشائعة قد يجعل مخرجات الذكاء الاصطناعي متشابهة؛ وذكر Tailwind، وهو إطار عمل لتنسيق الواجهات، مثالًا. وهو يرى أن نظام تصميم مدفوعًا قد يساعد من يبحث عن شكل مختلف، لكنه لم يسمِّ النظام الذي يستخدمه.
- **Animation** تعني حركة عناصر الواجهة. لا تكتفِ بطلب «حرّك الموقع»؛ حدّد الحركة التي تريدها. ويقترح تجربة GSAP، وهي مكتبة لإنشاء حركات على الويب، مع تزويد أداة الذكاء الاصطناعي بمرجعها البرمجي.

> «لو موقعك بالـVibe Coding بيطلع شبه كل المواقع، فدي مش مشكلة الـAI؛ دي مشكلتك أنت اللي مش فاهم يعني إيه Design System.» — عبدول أسامة

## خلفية

Vibe Coding وصف لطريقة بناء البرمجيات بتوجيه أداة ذكاء اصطناعي باللغة الطبيعية. ويمكن للأداة تنفيذ واجهة متماسكة تقنيًا من دون أن تكون لها هوية بصرية خاصة؛ لذلك تفيدها قرارات تصميم واضحة.

## ماذا تفعل الآن؟

اكتب لأداة البناء ألوان علامتك وخطوطها وقواعد الواجهة، ثم صف الحركات المطلوبة بدل ترك هذه الاختيارات للتلقائية. ذكر عبدول أن GSAP كانت مدفوعة ثم أصبحت متاحة مجانًا؛ تحقّق من شروط الترخيص الحالية قبل استخدامها في مشروعك.

## أسئلة وأجوبة

### لماذا تبدو المواقع المبنية بأسلوب Vibe Coding متشابهة؟

بحسب عبدول، يرجع ذلك إلى الاعتماد على خيارات تصميم شائعة من دون تحديد لوحة ألوان وخطوط ونظام تصميم وحركة تميز الموقع.

### هل يكفي الشعار لتمييز تصميم الموقع؟

لا. ينصح عبدول بلوحة ألوان خاصة بالعلامة تُستخدم في الموقع إلى جانب الشعار.

### هل يقول عبدول إن Tailwind نظام تصميم سيئ؟

لا. يقول إن الأنظمة المفتوحة الشائعة جيدة، لكن تكرار استخدامها قد يجعل المواقع متشابهة.

### ما الأداة التي يقترحها للحركة؟

يقترح GSAP لإنشاء حركة للموقع، مع تحديد المطلوب لأداة الذكاء الاصطناعي بدل الاكتفاء بطلب عام.

## النص الكامل للفيديو

لو موقعك بال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 سالك حلو وخفيف على الكود اهم حاجة معلش انا مشغول فترة الحالية جدا وبشتغل على مشاريع كبيرة ونفس اعمل فيديوهات بس وانا شغال كده دي من الحاجات اللي خدت بالي منها ان انا بعملها فقلت اعملها لكم فيديو انا عبدالقسامة تابعوني عشان تعرف كل جديد في الزكاية الصناعي والتسويق

---
كُتب هذا النص بمساعدة الذكاء الاصطناعي من الفيديو.