5 repos مجانية تعطي Claude ذوقًا حقيقيًا في الـ design

ما هذا

قالب مجاني خطوة بخطوة من ريلز طه — الأدوات والـ prompts والروابط بالضبط، مرتّبة لتتابع معها وتُطلق تطبيقك. علّق بالكلمة المفتاحية على الريل ويصلك أيضًا في رسائلك الخاصة.

مرحبًا! 👋 إليك ما وعدتك به:

Claude وحده يصمّم كأي AI: نفس الـ layouts، نفس الألوان، نفس الـ "slop". هذه الـ 5 repos المجانية تفتح عينيه — layout وألوان وtypography وmotion — حتى يبدو الـ front-end الخاص بك premium.

1. UI UX Pro Max — يعطي Claude "design intelligence": styles وcolor palettes وfont pairings وقواعد UX، حتى لا يخرج الـ layout والألوان والـ typography ناقصة.

🔗GitHubhttps://github.com/nextlevelbuilder/ui-ux-pro-max-skill 🔗الموقعhttps://www.uupm.cc/

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

2. Taste Skill — يمنع الـ AI من إنتاج "AI slop" العادي والمكرر، حتى لا يبدو موقعك وكأن bot صنعه.

🔗GitHubhttps://github.com/Leonxlnx/taste-skill 🔗الموقعhttps://tasteskill.dev

npx skills add https://github.com/Leonxlnx/taste-skill

3. Awesome Claude Design — 68 design system جاهزة بصيغة DESIGN.md. ضع واحدة عند Claude فلا يبدأ الـ design من الصفر.

🔗GitHubhttps://github.com/VoltAgent/awesome-claude-design 🔗الموقعhttps://getdesign.md/

4. design-md-chrome (DESIGN.md Style Extractor) — extension لـ Chrome: افتح أي موقع فيستخرج الـ design الخاص به (typography، ألوان، spacing، radius، shadows، motion) في ملف DESIGN.md أو SKILL.md تعطيه لـ Claude.

🔗GitHubhttps://github.com/bergside/design-md-chrome 🔗Chrome Web Storehttps://chromewebstore.google.com/detail/designmd-style-extractor/ogpdnchdjiibhobphelbbkemnnemkfma

5. Design Motion Principles — skill للـ motion: timing وeasing وanimations لها هدف (مستخلصة من أعمال Emil Kowalski وJakub Krehel وJhey Tompkins)، حتى يبدو موقعك premium وليس جامدًا.

🔗GitHubhttps://github.com/kylezantos/design-motion-principles

npx skills add kylezantos/design-motion-principles

اجمعها معًا: DESIGN.md (3 أو 4) للشكل، UI UX Pro Max + Taste للقواعد، وMotion Principles للـ animations. 😉

تريد المزيد؟ تقدّم أكثر في فصل Atlas Room على Skool

هذه الصفحة تعطيك الأدوات. أما فصل Skool فيأخذك خطوة بخطوة — دورات وأدلة كاملة لتبني وتبيع تطبيق AI أو SaaS خاصًا بك، بالدارجة، مع درس جديد كل أسبوع.

انضم إلى فصل Skool ←

جديد في vibe coding؟ شاهد ما ستتعلمه ←

🧰TOOLS

TREND🔥

قوالب مجانية أخرى

تصفّح كل القوالب ←

💡SAAS

#28

كيف تجد فكرة SaaS رابحة

📱BUILD

#29

ابنِ تطبيق موبايل بخبرة 0

🧰TOOLS

#30

5 أدوات AI مجانية يجب أن تكون لديك

🔥TREND

#32

5 repos انفجرت على GitHub هذا الأسبوع (كلها مجانية)

💸SWAP

#33

5 أدوات مجانية ومفتوحة المصدر بدل Loom وGrammarly وTypeform

🖥️AGENTBOX

#34

أعطِ الـ AI agent الخاص بك حاسوبًا خاصًا به (Cloudflare Computer)