موقع احترافي بعيد عن AI slop
كيف تعرف الموقع الذي يبدو مولَّداً، وكيف تكتب لـ Claude هوية وقواعد تجعله يبني موقعاً يشبهك أنت.
AI slop هو الشكل الذي يجعل الزائر يقول «الذكاء الاصطناعي صنع هذا»، فيفقد ثقته قبل أن يقرأ كلمة.
التعريف الذي نعمل به اليوم
كيف تعرف AI slop
عشر علامات يلتقطها الزائر في ثانية، حتى لو لم يعرف اسمها.
ست علامات في الشكل
| العلامة | البديل |
|---|---|
| تدرّج بنفسجي وأزرق | لون واحد صلب، له وظيفة |
| إيموجي مكان الأيقونات | أيقونات خطية، أو لا شيء |
| كل شيء في منتصف الصفحة | محاذاة لليمين، والتوسيط للرقم البطل وحده |
| ثلاث بطاقات متطابقة في كل قسم | بنية مختلفة لكل قسم |
| أيقونة في دائرة ملوّنة فوق كل بطاقة | أيقونة في سطر العنوان، بلا دائرة ولا أرضية |
| ظلال متوهجة وتأثير الزجاج | حدّ رفيع وظل خفيف |
وأربع في الكلام
| العلامة | كيف تبدو | البديل |
|---|---|---|
| كلمة صغيرة فوق كل عنوان | «خدماتنا» فوق «ماذا نقدّم» فوق كل قسم | مرة أو مرتين في الصفحة، بقصد |
| عبارات فارغة | «حلول مبتكرة لمستقبل رقمي» | ما تفعله بالضبط، ولمن |
| أرقام مقرّبة بلا مصدر | «آلاف العملاء السعداء» | الرقم الحقيقي، ومصدره، وتاريخه |
| أزرار لا تقول شيئاً | «ابدأ الآن» · «اكتشف المزيد» | زر يقول ما سيحدث بعد الضغط |
نفس الهيرو بنسختين
اعرض صفحتك على شخص لا يعرف كيف صُنعت. إن قال «الذكاء الاصطناعي صنع هذا» بلا تردد، فلم تنتهِ بعد.
الاختبار الحاسم · من دليل هوية nezarkamel.com
الهوية قبل الكود
قرّر اللون والخط والقواعد، واكتبها لـ Claude قبل أن يبني سطراً.
اللون = دليل
الأخضر يظهر في ثلاثة مواضع فقط: نتيجة، أو دعوة للتواصل، أو نقطة الشعار.
المصدر: دليل هوية nezarkamel.com · لوحة مغلقة: لا لون خارجها، ولا تدرّج، ولا ظل ملوّن.
اكتب الهوية في CLAUDE.md قبل أن يبني
Claude يقرأ هذا الملف في بداية كل جلسة. وما لا تكتبه فيه، يملؤه بذوقه الافتراضي.
- لون أساسي واحد، ومعه دوره
- المحايدات بقيمها
- عائلة خط واحدة بأوزانها
- دور كل نصف قطر
- قائمة الممنوعات
## قواعد التصميم اللون الأساسي: #0B6B4F للنتائج وزر التواصل ونقطة الشعار فقط المحايدات: #FFFFFF · #F2F7F4 · #0D1A15 · #4C6156 الخط: Zain بأوزان 400 و700 و800، مستضاف ذاتياً الزوايا: 6 للحقول · 10 للبطاقات · لا أكبر المسافات: من سلّم 4px فقط ## ممنوع تدرّجات · إيموجي · توسيط كل شيء بطاقات متطابقة في كل قسم · «حلول مبتكرة»
عائلة خط واحدة تكفي الموقع كله
- أوزان حقيقية محمّلة فعلاً: 400 و700 و800
- استضافة ذاتية، لا عبر خدمة خطوط خارجية
- ارتفاع سطر 1.75 للنص العربي، و1.2 للعناوين
- أرقام لاتينية 123 تطابق لقطات المنصات
- الوزن 800 للرقم البطل وحده، لا للنص
Zain
عربي ولاتيني من مصمم واحد. هو الخط الذي ترونه في هذه الشرائح.
بدائل جيدة
IBM Plex Sans Arabic · Alexandria
القياس اختار الخط، لا الذوق
المصدر: دليل هوية nezarkamel.com · قياس فعلي لمحاذاة عشرة أرقام في أعمدة، أربعة خطوط.
الإيقاع والمساحة
صفحة تتنفّس، وكل قسم فيها يشبه محتواه لا القسم الذي قبله.
كل قسم ببنية تناسب محتواه
المسافات من سلّم، والزوايا لكل قيمة دور
سلّم المسافات
أساسه 4px. أي قيمة خارج السلّم تُرفض في المراجعة. وبين الأقسام: 64 على الجوال، و96 من عرض 768 فأكبر.
| نصف القطر | الاستخدام |
|---|---|
| 0 | الجداول والفواصل |
| 6 | الحقول والأزرار الصغيرة |
| 10 | البطاقات ولقطات الشاشة |
| 14 | النوافذ المنبثقة |
لا زوايا مستديرة كبيرة: توحي بتطبيق استهلاكي، والمطلوب أن يوحي موقعك بالجدية.
المصدر: دليل هوية nezarkamel.com
المحتوى الحقيقي
التصميم الجيد لا ينقذ كلاماً فارغاً.
اكتب ما تفعله، ولمن، وما سيحدث بعد الضغط
الجوال أولاً
جمهورك يفتح الرابط من واتساب. صمّم لهذه الشاشة قبل غيرها.
صمّم على 375 أولاً، ثم وسّع
لا يُعتمد قسم قبل أن يمرّ بخمس خطوات
ابنِ
قسم واحد في كل مرة
صوّر على 3 عروض
375 و768 و1440، مع فحص اتجاه اليمين لليسار
نقد مكتوب
بنداً بنداً، مقابل قواعد CLAUDE.md
أصلح
كل بند، ثم صوّر من جديد
اعرض
عليك أنت، وبعدها فقط يُعدّ منجزاً
هذه بوابة القبول نفسها في دليل هوية nezarkamel.com. كل قسم في الموقع مرّ بها.
اطلب منه أن ينتقد نفسه قبل أن يسلّمك
- يرى الصفحة فعلاً، لا يتخيّلها
- القواعد في CLAUDE.md هي المسطرة، لا ذوقه
- القائمة المكتوبة تمنع جواب «كل شيء ممتاز»
- موافقتك قبل الإصلاح تبقيك صاحب القرار
أعطه مراجع، لا صفات
لقطتان أو ثلاث
من مواقع أعجبتك فعلاً، في مجالك أو خارجه. الصورة تشرح ما تعجز عنه كلمة «فخم».
قل ما يعجبك بالضبط
«المسافات بين الأقسام في الأول، وجدول الأسعار في الثاني». ولا تنسخ ألوانهما: ألوانك في CLAUDE.md.
Skills للتصميم
وصفات تصميم تُثبَّت في Claude Code فترفع ذوق كل ما يبنيه، مثل frontend-design.
الأساسيات التي لا يراها أحد حتى تغيب
| المحور | افعل | لأن |
|---|---|---|
| الصور | صيغة WebP، ومضغوطة قبل الرفع | أغلب زوارك على شبكة الجوال |
| التباين | نص بتباين AA على الأقل حسب WCAG | القراءة في ضوء النهار وعلى شاشات ضعيفة |
| النص البديل | alt يصف ما في الصورة، لا اسم الملف | قارئات الشاشة ومحركات البحث |
| العنوان والوصف | title وdescription لكل صفحة | هذا ما يظهر في نتيجة البحث |
| المشاركة | صورة OG وأيقونة favicon | شكل الرابط في واتساب وتبويب المتصفح |
قائمة الفحص قبل النشر
الشكل والكلام
- لون تمييز واحد، على النتائج والدعوات فقط
- لا تدرّج، ولا إيموجي، ولا ظلال متوهجة
- عائلة خط واحدة بأوزان حقيقية
- كل قسم ببنية مختلفة
- كل رقم معه مصدره
- كل زر يقول ما سيحدث
التقنية
- لا تمرير أفقي على عرض 375
- كل هدف لمس 44px على الأقل
- الصور WebP ومضغوطة
- alt لكل صورة يصف محتواها
- title وdescription وصورة OG
- الأيقونة ورابط واتساب يعملان
طبّق على صفحتك من الندوة 2
- أضف قسم «قواعد التصميم» إلى CLAUDE.md: اللون ودوره، الخط، الزوايا، الممنوعات
- شغّل طلب النقد الذاتي واقرأ القائمة كاملة قبل أي إصلاح
- أصلح مع Claude بنداً بنداً، قسماً قسماً
- مرّر قائمة الفحص الـ12 بنفسك على جوالك
- احفظ لقطتين على عرض 375: قبل وبعد
معيار النجاح
تعرض الصفحة على شخص من جمهورك، فلا يقول «الذكاء الاصطناعي صنع هذا».
النشر المجاني الدائم على Netlify
من مجلد على جهازك إلى رابط على دومينك، بالأرقام الحقيقية للخطة المجانية.