خلّ كلود يصمم موقعك مثل مصمم محترف
ثلاث مهارات وأداتين تعطي Claude Code ذوق مصمم حقيقي: حركة ناعمة، لغة تصميم، اتجاه فني، تصميمك من فيقما، واختبار في المتصفح.
① ليش موقعك شكله «ذكاء اصطناعي»؟
لأن كلود بدون توجيه يرجع لنفس القالب: تدرّج بنفسجي، بطاقات متشابهة، وخطوط عادية. المهارات هذي تعطيه ذوق: قواعد مصممين حقيقيين، ومراجع مواقع حقيقية، وعين تراجع الشغل قبل ما يوصلك.
② مهارة إميل كوالسكي: الحركة والنعومة
من إميل كوالسكي، مصمم ومهندس اشتغل في Vercel وLinear. تعلّم كلود متى يتحرك العنصر وبأي سرعة: حركات أقل من 300 جزء من الثانية، منحنيات مخصصة بدل الافتراضية، وتراجع الكود وتقول لك الغلط قبل وبعد.
npx -y skills add emilkowalski/skill --skill emil-design-eng --agent claude-code
③ إمبيكابل: لغة المصممين
من pbakaus. أمر واحد /impeccable فيه 24 أمر فرعي: نقد التصميم، تلميع قبل النشر، الخطوط، الألوان، المسافات، والحركة. وفيها 62 قاعدة تمسك علامات «تصميم الذكاء الاصطناعي» قبل ما تطلع.
npx impeccable install
بعدها في كلود كود اكتب /impeccable init مرة وحدة. وأهم الأوامر: critique للنقد، polish للتلميع، typeset للخطوط، layout للمسافات.
صفحة المهارة ↗④ تيست سكل: الأقوى
مبنية على دراسة 247 موقع حقيقي. تقرا وصفك، تعطيه ثلاث اتجاهات فنية يختار منها، تبني الصفحة بصور حقيقية مرخّصة، وبعدين تفتح الموقع في متصفح حقيقي على ثلاث مقاسات، تصوّره، وتصلّح أكبر المشاكل بنفسها.
/plugin marketplace add Leonxlnx/taste-skill /plugin install taste-skill@taste-skill
تحتاج Node 22+ ومتصفح كروم أو إيدج على جهازك. ما تحتاج أي مفتاح.
صفحة المهارة ↗⑤ الأداتين
فيقما: تصميمك يتحول كود
الإضافة الرسمية من Figma: كلود يقرا تصميمك من فيقما ويبنيه كود. شغّل هذا في الترمنال:
claude plugin install figma@claude-plugins-official
بلاي رايت: يجرب موقعك مثل العميل
من Microsoft: كلود يفتح موقعك في متصفح، يضغط ويعبّي النماذج ويتأكد إن كل شي شغال. يحتاج Node.js:
claude mcp add playwright -- npx @playwright/mcp@latest
⑥ جرّب الحين: أوامر جاهزة
بعد التركيب، انسخ أي أمر وعدّله على مشروعك:
📚 عندنا أكثر من 20 دليل مجاني ثاني
إرشادات مجانية أكثر؟ اضغط هنا ↖تبي تتعلم أكثر؟
في مجتمع نادر نشرح Claude وصناعة المحتوى والإعلانات خطوة بخطوة. فيه 5 مسارات نطوّرها باستمرار: