أعرف الموقع المبني بالذكاء الاصطناعي خلال ثوانٍ. وهذا هو الحل السهل.
المواقع المبنية بالذكاء الاصطناعي صارت كلها تشبه بعضها. 21st.dev مكتبة مجانية لمكوّنات الواجهة، صنعها مصممون ومهندسون حقيقيون، وتنربط مباشرةً بـ Claude. هاي المكوّنات التي أستخدمها أكثر شيء، وكيف تربطه بـ Claude حتى يسحبها لك.
ما في تسجيل. كل شيء موجود هون بالصفحة.
اوصف المكوّن، وClaude يسحبه لك من 21st.dev. ✦
مكتبة ضخمة لمكوّنات الواجهة، وأغلبها مجاني تنسخه.
أقسام hero، أشرطة تنقّل، آراء عملاء، فوترات، صفحات دخول، لوحات تحكم، بطاقات منتجات، أي شيء يخطر ببالك، من صنع مصممين ومهندسين حقيقيين. تتصفّح، تختار اللي يعجبك، وتاخذ الـ prompt أو الكود وتحطه في Claude. وما هو إعلان مدفوع، بس مفيد فعلاً.
المكوّنات التي أعتمد عليها أكثر شيء
أقسام الـ Hero
أول شيء يشوفه الزائر، وأسرع طريقة تطلع فيها من الشكل المكرّر.
أشرطة التنقل
تنقّل نظيف ومتجاوب، مع حالات الجوال والقائمة جاهزة.
آراء العملاء
دليل اجتماعي يبيّن مصمَّم، كاروسيل أو شبكة.
جداول الأسعار
تسعير بطبقات مع خطة مميّزة، بشكل صحيح.
شاشات الدخول
صفحات دخول أنيقة كنت بتنسّقها يدوياً.
لوحات التحكم
بطاقات إحصائيات وجداول وتخطيطات لِما خلف الدخول.
طريقتان لاستخدامه، والثانية أفضل
الطريقة عبر الموقع
تصفّح المكتبة على 21st.dev، اختر مكوّناً يعجبك، اضغط عليه، وانسخ الـ prompt أو الكود مباشرةً إلى Claude.
اربط الـ MCP بـ Claude
عندهم Magic MCP ينربط مباشرةً بـ Claude. أضِفه مرة واحدة بمفتاحك المجاني وأعد تشغيل Claude.
اوصف اللي تبيه
قل لـ Claude المكوّن اللي تحتاجه، ويسحب المناسب من 21st.dev، يضيفه لمشروعك، وتكمّل التعديل.
اربطه بـ Claude، الصق هذا الإعداد
{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-key-here\""]
}
}
}أضِف هذا إلى إعداد MCP في Claude، بدّل المفتاح بمفتاحك المجاني من 21st.dev، وأعد تشغيل Claude. وبعدها فقط اوصف المكوّن اللي تبيه وClaude يسحبه لك.
أوصاف مكوّنات جاهزة للنسخ
الصق واحداً في Claude وشوف المكوّن يظهر.
اضغط على أي وصف لنسخه.
التفاصيل الدقيقة، بدون مبالغة
- الباقة المجانية تعطيك عدداً محدوداً من التوليدات كل شهر.
- بعض المكوّنات المميّزة مدفوعة، بس أغلبها مجاني تنسخه.
- لسّه تحتاج ذوق: راجع وعدّل اللي يطلّعه.
- كل ما وصفت ما تريد بوضوح، طلعت النتيجة أحسن.
حصلت على الجزء المجاني. وهذا هو الطريق كاملًا.
كل ما في الأعلى لك، مجانًا. وحين تكون جاهزًا للانتقال من شاشة فارغة إلى منتج حقيقي تملكه ويعمل على نطاقك الخاص، فهذه هي الخطوة التي توصلك. الأسعار أمامك هنا مباشرة، حتى لا تبحث عنها في أي مكان آخر.
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 واحد
- هذا الموقع نفسه مبني عليه
- رخصة تجارية: منتجات غير محدودة
دفعة واحدة. وصول مدى الحياة وتحديثات. سعر التأسيس لأول دفعة فقط.
بطّل تطلّع مواقع تشبه مواقع الكل.
عندك المكوّنات، والأوامر، والإعداد. هلّأ روح ابنِ شي يلفت النظر.
تعلّم تبني منتجاً كاملاً بهذي الطريقة، بالعربي، من الصفر.
تتابع على إنستغرام أو تيك توك أو يوتيوب؟
علّق «21st» وبردّ عليك بهذي الصفحة، فيها اختياراتي وطريقة ربط Claude كاملة.
فؤاد حسنين
@withfouad
مهندس برمجيات عربي يبني منتجات حقيقية بالذكاء الاصطناعي. أعلّم بناء تطبيقات كاملة مع Claude، بالعربي، من الصفر.
withfouad.com