ليش بيطلع قبيح، وشو الفرق بين الأنواع الثلاثة
Claude Code لما تقله «اعمل صفحة» بيختار الأشياء الآمنة: بنفسجي على أبيض، بطاقات جوّا بطاقات، أزرار متساوية، عنوان عام، وتدرّج لوني بنص الصفحة. مش غلط تقنياً، بس «شكله AI». الحل مش تطلب «خلّيه أحلى»؛ الحل تعطيه قواعد ذوق أو مرجع أو قطع جاهزة:
الفرق عن دليل Claude Design: هناك Claude بيصمّم لك واجهة بأداة بصرية. هون إنت بتعلّم Claude Code نفسه يصمّم صح جوّا كودك. والاثنين بيكمّلوا بعض.
شو بتحتاج
- Claude Code شغّال (التركيب) ومشروع ويب فيه واجهة (أي شي: HTML، React، Next…).
- Node.js 22 أو أحدث: أغلب أوامر التثبيت تحت بتشتغل بـ npx.
- Python 3 لـ UI/UX Pro Max (سكربتاته بايثون)، وChrome لـ Taste Skill (بيفحص الصفحة بالمتصفح).
- فكرة عن الـ Skills: مجلد فيه SKILL.md بيقرأه Claude Code لحاله. لو جديد: دليل Skills.
/plugin marketplace add ثم /plugin install)، أو أمر npx من صاحب المصدر. أمر npx skills add أداة طرف ثالث (مشروع agent-skills من Vercel)، مش من Anthropic؛ بتنسخ مجلد الـ skill لمكانه. اختار الطريقة اللي بترتاح لها، مش الاثنتين.ثلاث ملفات بتعلّم الوكيل الألوان والخطوط والمسافات. ابدأ بواحد.
UI/UX Pro Max
github.com/nextlevelbuilder/ui-ux-pro-max-skill · uupm.cc · 146,288 نجمة · MIT. الأكبر بالقائمة: 192 قاعدة تفكير تصميمي و80 ستايل واجهة قابل للبحث (مثلاً «SaaS نظيف»، «لوحة تحكم غامقة»). لما تطلب صفحة، الوكيل بيختار ستايل، لوحة ألوان، خطوط، ومسافات متسقة قبل الكود.
التثبيت كـ plugin من جوّا Claude Code (أمرين):
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skillأو بأداتهم (لكل مشاريعك):
npm install -g ui-ux-pro-max-cli
uipro init --ai claude --globalبدون --global بيتركّب بالمشروع الحالي بس. الحزمة اسمها ui-ux-pro-max-cli (النسخ القديمة uipro-cli ما تستعملها، حسب الـ README). بعد التثبيت اطلب مباشرة: «صمّم صفحة هبوط لـ [منتجك] بستايل SaaS نظيف، والتزم بقواعد UI/UX Pro Max».
Taste Skill
github.com/Leonxlnx/taste-skill · tasteskill.dev · 111,331 نجمة · MIT. الفكرة: «اتجاه فني» بدل قواعد عامة: الوكيل بيختار مرجع بصري حقيقي (صور وأمثلة مرفقة بالـ skill)، بيبني عليه، وبعدين بيفتح الصفحة بالمتصفح ويفحصها قبل ما يقول خلصت. هاد الفحص هو اللي بيمنع «صفحة AI عامة».
التثبيت (الـ skill اسمه design-taste-frontend):
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"أو كـ plugin من جوّا Claude Code:
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skillبده Node 22+ وChrome (أو Edge) مثبّت عشان الفحص. ما بيركّب شي وما بده مفاتيح. أحسن استعمال: صفحات هبوط وبورتفوليو وإعادة تصميم صفحة موجودة؛ قله «استعمل design-taste-frontend وافحص النتيجة بالمتصفح قبل ما تسلّم».
Impeccable
github.com/pbakaus/impeccable · impeccable.style · 105,002 نجمة · Apache-2.0. «قاموس التصميم للوكيل»: أوامر قصيرة بتوجّه (/polish، /bolder، /distill، /clarify) وأوامر بتراجع (/critique، /audit)، وأهم شي: hook تصميم بيفحص كل ملف واجهة الوكيل بيعدّله وبيرجّع له الملاحظات قبل ما يقول «خلصت». يعني بيمسك الـ «slop» وقت حدوثه.
التثبيت (بيكتشف أدواتك وبيسألك: مشروع أو عام، وبيعرض عليك الـ hook. وافق على الـ hook):
npx impeccable installأو من جوّا Claude Code: أضف المتجر ثم ركّبه من قائمة /plugin:
/plugin marketplace add pbakaus/impeccableبعدها أعد تشغيل الأداة. التحديث: npx impeccable update. وفيه فاحص لأي صفحة منشورة: npx impeccable detect https://موقعك بيستعمل Chrome عندك. الأنسب لما يكون عندك واجهة موجودة وبدك تحسّنها بدل ما تبدأ من الصفر.
ستايل براند حقيقي بملف واحد يلتزم فيه الوكيل.
Awesome DESIGN.md
github.com/VoltAgent/awesome-design-md · 125,949 نجمة · MIT. ملف DESIGN.md فكرة من Google Stitch: ملف نصي عادي بيوصف نظام تصميم (ألوان، خطوط، مسافات، مكوّنات) بيقرأه أي وكيل برمجة. المستودع فيه 84 ملف مستخرَج من مواقع حقيقية (ومنهم ملف Claude نفسه: «terracotta دافئ وتخطيط تحريري نظيف»).
- إنت افتح المستودع، اختار البراند الأقرب لذوقك، وانسخ ملفه DESIGN.md لجذر مشروعك.
- إنت اطلب من Claude Code:
اقرأ ملف DESIGN.md بجذر المشروع والتزم فيه بكل شي: الألوان والخطوط والمسافات وشكل الأزرار. ابنِ صفحة التسعير بنفس اللغة البصرية، وقلّي أي عنصر ما لقيت له قاعدة بالملف. - Claude Code بيستعمل الملف كمرجع لكل صفحة بعدها. بدّل الملف = بدّل الستايل.
بتقدر تطلب ملف لموقع معيّن من getdesign.md/request. الملف ما بيخلّيك تنسخ موقعهم؛ بيعطيك «قواعدهم» لتبني شغلك بنفس الانضباط.
Refero Styles
styles.refero.design (Beta). نفس فكرة DESIGN.md بس بمكتبة أكبر: أكثر من 2,000 نظام تصميم «قابل للقراءة من AI» مأخوذ من مواقع منتجات مشهورة (Apple، Intercom، Ramp، Figma، Vercel…). بتفتح أي ستايل بتشوف الألوان والخطوط والمسافات والمكوّنات، وملف DESIGN.md جاهز لـ Claude Code أو Cursor أو Codex.
الاستعمال نفس القسم 4: نزّل الملف، حطه بجذر المشروع، «التزم فيه». وفيه زر «Connect to your AI» بيربط المكتبة مباشرة بـ Claude أو ChatGPT أو Cursor. بصراحة: تصفّح الستايلات ونسخ الملف متاح، وRefero نفسها (مكتبة لقطات المنتجات الكاملة) منتج مدفوع؛ راجع صفحة أسعارهم قبل ما تعتمد ميزة.
قطع جاهزة، حركة من مصمّم حقيقي، وتطبيق تصميم مفتوح المصدر.
21st (كان اسمه Magic MCP)
21st.dev/mcp. مكتبة فيها 12,000+ مكوّن React/Tailwind مصمّم (جداول أسعار، بطاقات، قوائم…) الوكيل بيدوّر فيها وبيركّب القطعة بمشروعك. تصحيح عن الريل: اسمها القديم «Magic MCP» (المستودع 21st-dev/magic-mcp صار مجرّد وسيط توافق)؛ الطريقة الحالية عبر أداة 21st:
npm i -g @21st-dev/cli
21st login
21st search "pricing table"
21st add efferd/pricingعشان Claude Code يعرف يستعملها لحاله (skills 21st):
npx @21st-dev/cli install-skillأو كـ plugin من جوّا Claude Code (بعدها ركّب «21st» من قائمة /plugin):
/plugin marketplace add 21st-dev/magic-mcpبعدها بالعربي: «ضيف جدول أسعار بثلاث باقات من 21st بستايل الموقع». المجاني: نسختين باليوم؛ خطة Builder حوالي 6$ بالشهر (سنوي) لنسخ وتركيب بلا حد، وخطة فيها AI أغلى. التفاصيل بالقسم الخاص بـ 21st بـ دليل الإضافات الخمس.
skills إميل كوالسكي (ومنها Apple design)
github.com/emilkowalski/skills · 54,203 نجمة · MIT. إميل مصمّم-مهندس معروف (صاحب مكتبة Sonner)، وهاي مجموعة skills من خبرته: apple-design (مبادئ Apple للواجهة والحركة من محاضرات WWDC، مترجمة للويب)، animate وchoreograph (حركة بمنحنيات ومدد صح)، prototype (كذا نسخة من نفس العنصر بمبدّل)، break-ui (يكسّر واجهتك بأسوأ بيانات: أسماء طويلة، قوائم فاضية)، وmobile-native (يخلّي الويب يحسّ تطبيق على الموبايل).
npx skills@latest add emilkowalski/skillsبعدها اطلب بالاسم: «طبّق skill apple-design على صفحة الإعدادات: المسافات والحركة والتسلسل البصري»، أو «شغّل break-ui على نموذج التسجيل». هاد المصدر للتفاصيل اللي بتفرّق بين «شغّال» و«محترف»، مش لبناء الصفحة من الصفر.
Open Design: بديل مفتوح المصدر لـ Claude Design
github.com/nexu-io/open-design · open-design.ai · 106,369 نجمة · Apache-2.0. تطبيق سطح مكتب (مساحة عمل تصميم) محلي ومفتوح المصدر: موشن، نماذج أولية، مواقع، لوحات، عروض، صور، فيديو، مع فريقك والوكلاء بنفس المكان. بيشتغل مع الوكيل اللي عندك أصلاً (Claude Code، Codex، Cursor) ونظام تصميم واحد لكل الإخراجات.
- إنت نزّل التطبيق من الموقع وسجّل.
- إنت اربط Claude Code بأمرهم:
od mcp install claude - إنت من Claude Code: «افتح مشروع Open Design الحالي واعمل نموذج أولي لصفحة الحساب بنفس نظام التصميم».
بصراحة: التطبيق والكود مجانيان، وفيه خطط مدفوعة اختيارية («Go») لكريدت موديلات سحابية. لو عندك Claude مدفوع، Claude Design أبسط؛ Open Design لما بدك محلي ومفتوح وبتشتغل مع فريق.
من وين تبدأ، وشو ما تعمله.
ابدأ بواحد: الوصفة بجملة «صمّم بذوق»
| وضعك | ابدأ بـ | ضيف بعدين |
|---|---|---|
| صفحة جديدة من الصفر | UI/UX Pro Max (1) | ملف DESIGN.md من 4 أو 5 |
| واجهة موجودة وشكلها AI | Impeccable (3) مع الـ hook | Taste Skill للفحص بالمتصفح |
| عندك براند ولازم يلتزم | DESIGN.md إلك (اطلب من Claude يكتبه من موقعك) | Refero لمقارنة بستايل قريب |
| بدك قطع سريعة (جدول أسعار، بطاقات) | 21st (6) | apple-design للتفاصيل (7) |
| فريق وتصميم كامل محلي | Open Design (8) | skills الذوق جوّاه |
بعد ما تركّب واحد، الجملة اللي بتفرق (الصقها كما هي):
قبل ما تكتب أي كود: صمّم بذوق. اختار لوحة ألوان (لون أساسي، لون ثانوي واحد، ورمادي للنص)، خطّين كحد أقصى (عناوين ونص)، ونظام مسافات ثابت (8 بكسل ومضاعفاته). اكتب لي هالقرارات الثلاثة بسطرين، وبعدين ابنِ الصفحة والتزم فيهم بكل عنصر. ممنوع: تدرّج لوني بالخلفية، بطاقات جوّا بطاقات، أزرار متساوية الأهمية، وعنوان عام زي «مرحباً بك».التعديل بعدها بملاحظة وحدة محدّدة: «المسافات أكبر بين الأقسام»، «لون ثانوي واحد بس»، «الزر الأساسي أوضح». مش «خلّيه أحلى».
أخطاء بتخلّي التصميم أسوأ
| الغلط | شو بيصير | الصح |
|---|---|---|
| تركّب الثمانية مرة وحدة | قواعد متعارضة، والوكيل بيتلخبط (وسياق ضايع). | واحد من كل نوع كحد أقصى، وابدأ بواحد. |
| تركّب نفس الـ skill مرتين (plugin + npx) | نسختين بيقرأهم الوكيل. | طريقة وحدة. احذف الثانية. |
| «خلّيه أحلى» | تغييرات عشوائية. | ملاحظة محدّدة وحدة بكل رسالة. |
| DESIGN.md لبراند وبتطلب ستايل ثاني بالرسالة | الوكيل بيتبع الرسالة وبيكسر الملف. | الملف هو المرجع؛ غيّر الملف لو بدك ستايل ثاني. |
| Impeccable بدون الـ hook | الفحص بيصير بس لما تتذكّر تطلبه. | وافق على الـ hook وقت التثبيت. |
| Taste Skill بدون Chrome | الفحص بالمتصفح ما بيشتغل. | ركّب Chrome أو Edge، أو حدّد CHROME_PATH. |
| تنسخ موقع براند حرفياً من DESIGN.md | مشكلة هوية (وقانونية لو شعار). | القواعد والانضباط، مش الشكل الحرفي. |
تنبيهات صدق
- القائمة قائمتي. الفكرة من ريل tenfoldmarc («from ugly to fire، 8 مصادر»)، بس الثمانية هون اللي فحصتها بنفسي على GitHub، مش قائمته.
- النجوم بتكبر يومياً (الريل قال 140 ألف لـ UI/UX Pro Max؛ يوم الدليل 146 ألف). الأرقام من GitHub يوم 2026-11-07.
- كلها مجانية ومفتوحة المصدر إلا 21st (مجاني محدود: نسختين باليوم) وRefero (الستايلات متاحة، والمنتج الكامل مدفوع). Open Design مجاني وفيه خطط اختيارية.
- 21st تغيّر اسمه وطريقته: الريل قال «21st Magic»؛ الطريقة الحالية أداة 21st وskills، وMagic MCP صار وسيط قديم.
- الـ skills نصوص بتوجّه الوكيل، مش سحر. بتحسّن النتيجة من «AI عام» لـ «مقبول واحترافي»؛ الذوق النهائي لسا إلك، راجع وعدّل.
- أوامر npx من طرف ثالث (skills.sh، impeccable، 21st): بتشغّل كود من الإنترنت على جهازك. اقرأ شو بيعمل الأمر قبل ما توافق، وفضّل طريقة الـ plugin لما تكون متاحة.