Claude بيبني كل موقع بنفس الخمس علامات. سكِل وحدة بتغلبهن كلهن.
خط Inter لكل شي، gradient بنفسجي، cards جوّا cards، خط رمادي ع لون، وزوايا مدوّرة. شفتهن مية مرة، ويمكن حتى نزّلتهن. Impeccable بيعطيك إنت وClaude لغة تصميم مشتركة، فتوجّه التصميم إنت بدل ما تتمنّى المرة الجاي تطلع أقل عاديّة.
ما في تسجيل. كل شيء موجود هون بالصفحة.
سكِل تصميم بتركّبها مرة وحدة، مجانية ومفتوحة المصدر.
Impeccable ريبو مجاني برخصة Apache من Paul Bakaus وعليه عشرات الآلاف من النجوم. هي سكِل لأداة الـ AI تبعك: سبع ملفات مرجعية، أكتر من عشرين command، وقواعد anti-pattern واضحة بتغلب الـ defaults اللي كل موديل بيرجع عليها. بتشتغل مع Claude Code وCursor وGemini CLI وCodex وغيرهن، وأحسن من سكِل التصميم تبعت Anthropic نفسها.
Claude مش المشكلة، بيانات التدريب تبعو هي المشكلة.
كل موديل تدرّب ع نفس الـ SaaS templates، فلمّا تقلّو ابنيلي landing page بيرجع ع لغة التصميم الوحيدة اللي بيعرفها: معدّل بيانات التدريب تبعو. ما بتصلّحها بإنك تصير مصمّم. بتصلّحها بإنك تعطي الموديل مجموعة anti-patterns واضحة ولغة مشتركة تغلب الـ defaults. هي هاي الحركة كلها.
command وحد، وبعدها reload
# from your project root npx impeccable skills install
شغّل هذا من جذر مشروعك. بيكتشف أداتك لحاله ويكتب السكِل بالمكان الصح، بعدها اعمل reload للأداة وخلصت.
/plugin marketplace add pbakaus/impeccable
بتفضّل plugin الـ Claude Code؟ استعمل command الـ marketplace بدالها.
لتتأكّد إنها شغّالة، اكتب slash بالـ Claude Code. إذا شفت /impeccable باللائحة، يعني مركّبة.
شغّلهن بالترتيب
بعد ما Claude يبني شي، شغّلهن bolder، بعدها distill، بعدها polish.
/impeccable bolderلمّا يطلع مسطّح، آمن، وما بينحفظ
بيكبّر الـ contrast والـ hierarchy. بيدفع مقياس الخط ووزنه والمسافات حتى الأشياء المهمة تبيّن مهمة فعلاً.
/impeccable distillلمّا يطلع مزحوم أو فوضوي
بيرجّعو لجوهره. بيشيل الضجيج الزخرفي والحدود الزايدة وتكدّس الـ cards لحدّ ما يبقى بس اللي بيهمّ.
/impeccable polishديركت قبل ما تنزّل
تمريرة أخيرة: محاذاة نظام التصميم، اتساق المسافات، تغطية الحالات، وجاهزية النشر. آخر شي بتشغّلو.
لاقي الـ slop قبل ما حدا غيرك يلاقيه
Impeccable كمان عندها Chrome extension بتفحص موقعك المنشور وبتدلّك بالضبط وين علامات الـ AI مخبّاية، فتعرف شو تزبّط.
السكِل هي تعليمات بينفّذها الـ agent تبعك
git submodule add https://github.com/pbakaus/impeccable .impeccable npx impeccable skills link --source=.impeccable --providers=claude
- اقرا اللي بتركّبه. افتح ملفات السكِل أول شي. توجيه التصميم لازم ما يلمس الـ shell ولا الـ env vars ولا الشبكة.
- ثبّت نسخة. ركّب من commit أو tag محدّد، مش دايماً الأحدث، حتى أي تغيير من فوق ما يقدر يغيّر الـ agent تبعك بصمت.
- حدّد نطاقها. ركّبها ع مستوى المشروع أول، مش globally، لحدّ ما تثق فيها.
- انتبه للعلامات. إذا سكِل تصميم طلبت تقرا الـ .env تبعك، أو تفتح URL خارجي، أو تشغّل scripts زيادة، وقّف.
حصلت على الجزء المجاني. وهذا هو الطريق كاملًا.
كل ما في الأعلى لك، مجانًا. وحين تكون جاهزًا للانتقال من شاشة فارغة إلى منتج حقيقي تملكه ويعمل على نطاقك الخاص، فهذه هي الخطوة التي توصلك. الأسعار أمامك هنا مباشرة، حتى لا تبحث عنها في أي مكان آخر.
Yalla Kit
شريكك المؤسس بالذكاء الاصطناعي. مدرّب وجاهز.
$50$79وفّر 37٪دفعة واحدة
- قالب SaaS المصمم للعربية أولاً، نفسه الذي بُني عليه هذا الموقع
- صفحات ثنائية اللغة مع دعم متقن للاتجاه من اليمين لليسار، أو إنجليزي فقط بإعداد واحد
- تسجيل دخول وقاعدة بيانات وإيميلات جاهزة ومربوطة
- مصمم للوكلاء الأذكياء: مهارات وأوامر وإطلاق كامل بأمر /yalla واحد
- رخصة تجارية: منتجات غير محدودة
الكورس
ابنِ منتجك من الصفر مع Claude Code، بالعربي.
$70$99وفّر 29٪دفعة واحدة
- أكثر من 5 ساعات فيديو عملي بالعربي
- من الفكرة إلى منتج حي على نطاقك الخاص
- Claude Code و Next.js و Supabase و Stripe و Hostinger
- لا تحتاج أي خلفية برمجية
- وصول مدى الحياة مع التحديثات
الكورس + Yalla Kit
الكورس مع القالب الذي يجعل تطبيقك جاهزاً للإطلاق من اليوم الأول.
$100$149وفّر 33٪دفعة واحدة
- كل ما في الكورس
- Yalla Kit: قالب SaaS مصمم للعربية أولاً
- عربي وإنجليزي مع دعم متقن للاتجاه من اليمين لليسار، أو إنجليزي فقط بإعداد واحد
- مصمم للوكلاء الأذكياء: مهارات وأوامر وإطلاق كامل بأمر /yalla واحد
- هذا الموقع نفسه مبني عليه
- رخصة تجارية: منتجات غير محدودة
دفعة واحدة. وصول مدى الحياة وتحديثات. سعر التأسيس لأول دفعة فقط.
بطّل تنزّل AI slop. وابدا توجّه التصميم.
ركّب السكِل، شغّل التلت commands، وفرونتند الـ Claude تبعك بيبطّل يبيّن متل تبع الكل.
تعلّم تبني منتجاً كاملاً بهذي الطريقة، بالعربي، من الصفر.
تتابع على إنستغرام أو تيك توك أو يوتيوب؟
علّق «UI» وبردّ عليك بهذي الصفحة: دليل التركيب وأحسن تلت commands تشغّلهن قبل ما تنزّل.
فؤاد حسنين
@withfouad
مهندس برمجيات عربي يبني منتجات حقيقية بالذكاء الاصطناعي. أعلّم بناء تطبيقات كاملة مع Claude، بالعربي، من الصفر.
withfouad.com