دليل مجاني · Awesome Design MD + Claude

أنظمة تصميم Apple وStripe و56 شركة غيرها، جاهزة لموقعك الجاي.

ريبو جديد على GitHub فيه 58 نظام تصميم حقيقي. اختر واحد، شغّل الـ command تبعو، وClaude ينزّل ملف design.md بمشروعك، نفس الألوان والخطوط والمكوّنات. وجّه Claude 3a هالملف ويبني على شكل شغّال فعلاً. هاي الطريقة كاملة.

شوف الكورس

ما في تسجيل. كل شيء موجود هون بالصفحة.

design.md
Colors
Aa
Type
Components

افتح الـ design.md تبع أي نظام، وألوانه وخطوطه ومكوّناته مرتّبين قدّام Claude. ✦

ما هو فعلاً

ثمانية وخمسون نظام تصميم، على بُعد design.md واحد.

Awesome Design MD ريبو مجاني على GitHub فيه أنظمة تصميم Apple وStripe وLinear وNotion وSpaceX وعشرات غيرها. اختر واحد وبتاخد ملف design.md يفصّل ألوانه وخطوطه ومكوّناته، نص واضح يقدر Claude يقراه، فتبني على شكل شغّال فعلاً بدل ما تخمّن.

awesome-design-md
ثلاثة أنظمة تصميم وَلّدها Awesome Design MD: نايكي، كلود، وفريمر
ريبو واحد، وعشرات أنظمة التصميم الجاهزة. اختر شكلاً، ويبني كلود على نفس النمط.
جوّا الريبو

اختر شكلاً تثق فيه أصلاً

Stripe
Linear
Notion
Apple
Vercel
Framer
Raycast
Figma
SpaceX
GitHub
Discord
Shopify

كيف تشتغل

# 1. Browse the repo, pick a system
github.com/voltagent/awesome-design-md

# 2. Run that system's command (or ask Claude)
#    -> writes design.md into your project

# 3. Build against it
"Build my landing page and follow design.md."

تصفّح الريبو، اختر نظام، وشغّل الـ command تبعو. Claude يكتب design.md بمشروعك فيه ألوان النظام وخطوطه ومكوّناته، وبيتبعو كل مرة يبني.

الإعداد · حوالي 5 دقائق

من الريبو لموقع مصقول بخمس خطوات

1

افتح الريبو

روح 3a ريبو Awesome Design MD على GitHub وتصفّح الأنظمة: Stripe، Linear، Raycast، Notion، حتى SpaceX.

2

اختر نظامك

اختر الشكل اللي تبيه. كل واحد إجا مع الـ install command تبعو، موجود بالريبو.

3

شغّل الـ command

شغّل هالـ command، أو عطيه لـ Claude Code. بعد كم ثانية بتاخد ملف design.md منزّل بمشروعك.

4

ابنِ على design.md

اطلب من Claude Code يبني موقعك ويتبع design.md. النظام محترَم، بس التخطيط لسّه عادي شوي.

5

رتّب التخطيط

ركّب الـ refine skill واطلب من Claude يصقل الموقع. هلّأ بيبيّن حلو فعلاً، وهذا كان حوالي خمس دقائق شغل.

جرّب هذي

طلبات تنسخها في Claude

الصق واحداً وشوف موقعك يتكوّن.

اضغط على أي طلب لنسخه.

ملاحظات بصراحة

التفاصيل الدقيقة، بدون مبالغة

  • الريبو يعطيك لغة التصميم، مش موقعاً جاهزاً. لسّه أنت ترتّب الصفحة.
  • أول بناء يحترم النظام بس يبيّن عادي. خطوة الـ refine هي اللي تخلّيه يلمع.
  • لسّه تحتاج ذوق: راجع وعدّل اللي يطلّعه Claude.
  • كل ما وصفت التخطيط اللي تبيه بوضوح، طلعت النتيجة أحسن.
من الدليل المجاني إلى منتج مكتمل

حصلت على الجزء المجاني. وهذا هو الطريق كاملًا.

كل ما في الأعلى لك، مجانًا. وحين تكون جاهزًا للانتقال من شاشة فارغة إلى منتج حقيقي تملكه ويعمل على نطاقك الخاص، فهذه هي الخطوة التي توصلك. الأسعار أمامك هنا مباشرة، حتى لا تبحث عنها في أي مكان آخر.

الأفضل قيمة

يلا كيت

نموذج Next.js المثالي المصمم خصيصًا لوكلاء الذكاء الاصطناعي والدعم السلس لليمين-لليسار.

$50$150وفّر 67٪دفعة واحدة

  • كل شيء جاهز للإطلاق
  • ثنائي اللغة افتراضياً (LTR و RTL)
  • Supabase Auth وقاعدة البيانات مهيأة
  • مدفوعات Stripe مدمجة
  • وصول مدى الحياة لجميع التحديثات
احصل على يلا كيت

دفعة واحدة. وصول مدى الحياة وتحديثات. سعر التأسيس لأول دفعة فقط.

خمس دقائق لهذا. تخيّل ساعة كاملة.

عندك الريبو، والخطوات، والطلبات. روح ابنِ شي يبيّن إنه مرّ عليه مصمّم.

شوف الكورس

تعلّم تبني منتجاً كاملاً بهذي الطريقة، بالعربي، من الصفر.

تتابع على إنستغرام أو تيك توك أو يوتيوب؟

علّق «Design» وبردّ عليك بهذي الصفحة: الريبو، والـ refine skill، وطريقة ربط Claude كاملة.

دليل مجاني من

فؤاد حسنين

@withfouad

مهندس برمجيات عربي يبني منتجات حقيقية بالذكاء الاصطناعي. أعلّم بناء تطبيقات كاملة مع Claude، بالعربي، من الصفر.

withfouad.com