Claude Code للتصميم.

ما هو Claude Code فعلًا

‏Claude Code هو أداة البرمجة الوكيلة من Anthropic. يقرأ قاعدة شيفرتك، ويحرّر الملفات، ويشغّل الأوامر، ويتكامل مع أدوات التطوير لديك — مخطِّطًا وكاتبًا ومتحققًا من العمل انطلاقًا من مهام باللغة الطبيعية بدلًا من مجرد إكمال السطور تلقائيًا.

يأتي عبر عدة واجهات تشترك جميعها في المحرك نفسه: واجهة سطر أوامر طرفية، وإضافات لبيئات التطوير VS Code وCursor وJetBrains، وتطبيق سطح مكتب بمراجعة فروقات مرئية، وتجربة ويب للمهام الطويلة. وتنتقل ملفات CLAUDE.md وإعداداتك وخوادم MCP عبرها كلها.

• ملف التعليمات: يقرأ Claude Code ملف CLAUDE.md في جذر مشروعك في بداية كل جلسة — المكان الطبيعي لترميز أعراف التصميم لديك والـ tokens وقوائم المراجعة.
• الـ Skills: تجمع Agent Skills تعليمات وسكربتات وموارد قابلة للتكرار يحمّلها Claude عند الطلب، بما في ذلك Frontend Design skill الرسمي من Anthropic للذوق.
• التخطيط والوكلاء الفرعيون: يمكنه التخطيط قبل التنفيذ وإنشاء وكلاء فرعيين يعملون على أجزاء مختلفة من المهمة بالتوازي، ما يحافظ على تماسك إعادة هيكلة الواجهات الكبيرة.

• المزوِّد: Anthropic
• بيانات الاعتماد: مفتاح Anthropic API (مبدأ BYOK، عبر الـ Console) أو اشتراك Claude (Pro / Max)
• الواجهات: واجهة سطر أوامر طرفية، إضافات VS Code / Cursor / JetBrains، تطبيق سطح مكتب، ويب

لماذا يجيد Claude Code التصميم

من بين وكلاء البرمجة، يتمتع Claude Code بسمعة الذوق في عمل الواجهات الأمامية. تفسّر ذلك بضعة أمور.

• قرارات محددة لا غامضة: يميل Claude Code إلى الالتزام بخيارات ملموسة — قيم hex بالضبط، وسلالم المسافات، وتدرّجات الخطوط، وهرمية المكوّنات — بدلًا من التهرّب، وهذا ما يميّز واجهة حقيقية عن مجرد عنصر نائب.
• تفكير واعٍ بقاعدة الشيفرة: بفضل سياق عمل واسع، يعيد هيكلة الواجهة عبر ملفات كثيرة دفعة واحدة، معيدًا استخدام مكوّناتك وtokens الموجودة بدلًا من ابتكار أنماط لمرة واحدة.
• skill رسمي للواجهة الأمامية: تقدّم Anthropic مهارة Frontend Design تجعل Claude يكتب اتجاهًا تصميميًا أولًا، وتبتعد عمدًا عن خطوط النظام العامة والتدرّجات البنفسجية المتوقّعة.

الدرس هو نفسه الذي تقوله Anthropic عن نماذجها: لا يملك Claude ذوقًا افتراضيًا — وإذا تُرك وحده يتقارب نحو المركز الإحصائي لتصميم الويب (Inter، تدرّجات بنفسجية، ظلال ناعمة). إنه ينتج تصميمًا جيدًا حين تمنحه قيودًا. ويجمع Open Design تلك المدخلات بالضبط، ولهذا يتلاءم الاثنان معًا (المزيد أدناه).

إعداد Claude Code لعمل التصميم، من الصفر

هذا هو المسار الكامل من جهاز نظيف إلى Claude Code قادر على بناء الواجهة والتحقق منها.

# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex

# 2. Start it in your project and sign in on first run
cd your-project
claude            # sign in with your Claude subscription or API key

# 3. Generate project context
/init             # creates a CLAUDE.md for this project

# 4. Add the official Frontend Design skill
claude plugin install frontend-design@claude-plugins-official

# 5. Wire the Figma MCP server (optional, for design handoff)
claude plugin install figma@claude-plugins-official

• رمّز قواعد التصميم لديك: ضع tokens وعناصرك الأولية وأعرافك في CLAUDE.md ووجّه Claude إليها، كي تطابق المخرجات هوية علامة بدلًا من العودة إلى مظهر عام.
• أضف التحقق في المتصفح: اربط Playwright أو Chrome MCP كي يعرض Claude في متصفح حقيقي ويتحقق من مخرجاته عبر نقاط التوقف بدلًا من مجرد تأكيد نجاح البناء.

سير عمل CLAUDE.md والـ Skills

أعلى حلقات التصميم رافعةً مع Claude Code هي تغذيته بمراجع حقيقية إضافةً إلى سياق التصميم لديك، ثم التكرار حتى تطابق الواجهة — مع حمل CLAUDE.md والـ Skills للقيود كي لا تعيد شرحها في كل مطالبة.

1. ابدأ من أوضح المراجع البصرية لديك — وضمّن حالات متعددة (سطح المكتب والجوال، التحويم، الفارغ، التحميل)، لا لقطة بطل واحدة فقط.
2. كن محددًا في المطالبة؛ فالمطالبات الغامضة تنتج واجهة عامة حتى مع وكيل قوي.
3. احتفظ بنظام تصميمك وأعرافك في CLAUDE.md، وأخبر Claude بمكان الـ tokens والعناصر الأولية المرجعية.
4. أضف Frontend Design skill كي يلتزم Claude باتجاه جمالي حقيقي قبل كتابة الشيفرة.
5. اربط التحقق في المتصفح كي يعرض Claude، ويغيّر الحجم إلى نقاط التوقف، ويقارن بالمراجع — لا أن يكتفي بتأكيد البناء.

أسقِط صورة مرجعية في الجلسة وأرسِل مطالبة بقيود ملموسة:

claude "Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse the design-system components and tokens described in CLAUDE.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser, verify it matches the references across
  breakpoints, and iterate until it does."

شغّل خادم تطوير بالتوازي، وأبقِ المطالبات صغيرة ومركّزة، وثبّت التكرارات الجيدة / وأرجِع السيئة (مع إخبار Claude حين تُرجِع) كي تبني كل تمريرة على قاعدة نظيفة. استخدم وضع التخطيط لإعادة الهيكلة الأكبر كي تراجع المنهج قبل أي تغيير على الملفات.

‏Claude Code + Figma: تكامل ثنائي الاتجاه بين التصميم والشيفرة

في فبراير 2026 أطلقت Anthropic وFigma تكاملًا متقدّمًا ثنائي الاتجاه عبر خادم Figma MCP. وهو يعمل في الاتجاهين.

• التصميم ← الشيفرة: حدّد إطارًا في Figma أو الصق رابطًا في Claude Code، واسحب سياق التصميم، واطلب منه تنفيذ التصميم باستخدام مكتبة مكوّناتك الموجودة. ويبقي Code Connect المخرجات متوائمة مع مكوّناتك الحقيقية.
• الشيفرة ← التصميم: ابنِ ميزة وعاينها في المتصفح، ثم قل «Send this to Figma» لالتقاط الواجهة قيد التشغيل بصفتها طبقات Figma قابلة للتحرير — الشاشة كاملةً أو عنصرًا محددًا.

ثبّته مرة واحدة عبر claude plugin install figma@claude-plugins-official (يتطلب Dev Mode MCP خطة Figma مدفوعة). وخادم Figma MCP نفسه متاح لـ Claude Code وCodex وCursor وVS Code — وهو تمامًا نوع القدرة المحمولة متعددة الوكلاء التي بُني Open Design لتنسيقها.

‏Claude Code مقابل Codex مقابل Cursor للتصميم

لا يوجد فائز واحد في عمل التصميم — فلكل وكيل قوة مختلفة، والفرق المتمرّسة تجمع بينها. وإليك خلاصة منصفة:

الحكم المتكرر في المجتمع أن الذوق يأتي من البشر: فجميعها تتجه افتراضيًا إلى مظهر عام دون skills ومراجع وقيود. تلك هي المشكلة الحقيقية التي ينبغي حلّها — وهي بشكل أداة تصميم، لا بشكل نموذج.

المزالق، وكيف تتجنّب مظهر «فوضى الذكاء الاصطناعي»

حتى مع سمعة Claude Code في الذوق، فإن أكثر شكوى شيوعًا عن التصميم المولَّد بالذكاء الاصطناعي أنه يبدو عامًا — خطوط Inter، تدرّجات بنفسجية على أبيض، ظلال ناعمة، زوايا دائرية مفرطة الحجم، جماليّة «تصرخ بأن ذكاءً اصطناعيًا صنع هذا.» وتعزو Anthropic نفسها ذلك إلى التقارب التوزيعي: الخيارات الآمنة تهيمن على بيانات تدريب الويب. وتشمل المشكلات الأخرى المبلَّغ عنها انكسار تخطيطات الجوال وتسرّب التعليمات إلى نصوص الواجهة.

• ثبّت Frontend Design skill: يجبر Claude على الالتزام باتجاه حقيقي ويتجنّب صراحةً الخطوط والتدرّجات المفرَطة الاستخدام من الذكاء الاصطناعي.
• فعّل التحقق في المتصفح: اجعل Claude يعرض ويتحقق ذاتيًا عبر نقاط التوقف كي لا تنكسر التخطيطات بصمت على الجوال.
• زوّده بالـ tokens والمراجع: tokens التصميم الحقيقية ولقطات الشاشة المرجعية هي أكبر رافعة منفردة على جودة المخرجات.
• رمّز القواعد في CLAUDE.md: ضع قواعد بأسلوب «لا بطاقات بطل، خطّان كحد أقصى، هرمية تقدّم العلامة» حيث يقرؤها الوكيل في كل تشغيل.

لاحظ أن كل إجراء تخفيف يتمحور حول منح الوكيل سياق تصميم منسّقًا. والحفاظ على ذلك السياق يدويًا، لكل مشروع، هو الكدّ الذي يزيله Open Design.

التصميم بـ Claude Code داخل Open Design

‏Open Design هو طبقة التصميم مفتوحة المصدر التي يطلبها سير العمل أعلاه باستمرار. يعامل Claude Code بصفته محوّلًا أصيلًا ويغلّفه بمكتبة منسّقة من الـ skills وأنظمة التصميم، وخط معالجة عرض منظّم، وواجهة سطح مكتب محلية — كي يكون سياق التصميم الذي يجعل Claude Code جيدًا حاضرًا من أول تشغيل، لا مُجمَّعًا يدويًا في كل مرة.

1. ثبّت Open Design واختر Claude Code وكيلًا لك.
2. صادِق بمفتاح Anthropic API (مبدأ BYOK) أو اشتراك Claude — تبقى بيانات الاعتماد على جهازك ولا تُمرَّر عبرنا أبدًا.
3. اختر نظام تصميم وskill، ثم ولّد العروض والنماذج الأولية وصفحات الهبوط بذوق متّسق.
4. كل أثر وكل ملف DESIGN.md يعيش في مستودعك الخاص، لا في سحابة مستضافة.

وكيل Claude Code نفسه، المفتاح نفسه — إضافةً إلى سير عمل تصميمي حقيقي ومحمول ومفتوح المصدر يحيط به. إنه محلي أولًا وبرخصة Apache-2.0، فلا شيء عن عملك أو بيانات اعتمادك يغادر جهازك.

الأسئلة الشائعة

1. 01 هل Claude Code جيد لعمل التصميم؟ +

   نعم — فهو يُعدّ على نطاق واسع وكيل البرمجة صاحب الذوق الأفضل في الواجهة الأمامية، إذ يتخذ قرارات محددة وواعية بقاعدة الشيفرة بشأن قيم hex والمسافات وسلالم الخطوط. ومع Frontend Design skill ونظام تصميم وصور مرجعية حقيقية في السياق، ينتج واجهة بجودة إنتاجية ومتجاوبة ويمكنه التحقق منها في متصفح. وبدون ذلك السياق يميل إلى مظهر عام، وهي الفجوة التي يسدّها Open Design.

2. 02 هل أحتاج إلى اشتراك Claude للتصميم بـ Claude Code؟ +

   يمكنك استخدام مفتاح Anthropic API (مبدأ BYOK، عبر الـ Console) أو اشتراك Claude (Pro / Max). وفي كلتا الحالتين لا يمرّر Open Design بيانات اعتمادك أبدًا — فهي تُستخدَم مباشرةً بواسطة وكيلك على جهازك.

3. 03 ‏Claude Code أم Codex لتصميم الواجهة الأمامية؟ +

   كلاهما قوي. يُعرَف Claude Code بقرارات تصميم محددة وواعية بقاعدة الشيفرة وتفكير في الواجهة الأمامية؛ ويتمتع Codex بصقل بصري قوي ويتفوّق في عمليات البناء المفوّضة المعزولة. وتستخدم فرق كثيرة كليهما — ويتيح لك Open Design تبديل الوكلاء دون تغيير سير عمل التصميم.

4. 04 كيف أصل Claude Code بـ Figma؟ +

   ثبّت إضافة Figma الرسمية عبر claude plugin install figma@claude-plugins-official. عندها يمكنك تنفيذ إطارات Figma في شيفرة باستخدام سياق التصميم، ودفع واجهة قيد التشغيل عائدةً إلى إطارات Figma قابلة للتحرير عبر «Send this to Figma». ويتطلب Dev Mode MCP خطة Figma مدفوعة.

5. 05 ما هي الـ Skills وملف CLAUDE.md؟ +

   ‏CLAUDE.md ملف markdown في جذر مشروعك يقرؤه Claude Code في بداية كل جلسة — وهو المكان لترميز أعراف التصميم لديك. وتجمع الـ Skills تعليمات وموارد قابلة للتكرار يحمّلها Claude عند الطلب، بما في ذلك Frontend Design skill الرسمي من Anthropic. ويقدّم Open Design مكتبة منسّقة من الاثنين كي تتخطّى الإعداد لكل مشروع.

6. 06 كيف أتجنّب جماليّة «فوضى الذكاء الاصطناعي» العامة؟ +

   ثبّت Frontend Design skill، وزوّده بـ tokens تصميم حقيقية ولقطات شاشة مرجعية، ورمّز قواعد العلامة في CLAUDE.md، وفعّل التحقق في المتصفح. ويقدّم Open Design هذه بصفتها مكتبة منسّقة كي تتخطّى الإعداد لكل مشروع.

7. 07 هل Open Design تابع لـ Anthropic؟ +

   لا. Claude Code منتج من Anthropic؛ وOpen Design مشروع مستقل مفتوح المصدر يدعمه بصفته محوّلًا أصيلًا. وClaude وClaude Code علامتان تجاريتان لـ Anthropic.

8. 08 هل ملفاتي وبيانات اعتمادي آمنة؟ +

   نعم — Open Design محلي أولًا وبرخصة Apache-2.0. تبقى ملفاتك وآثارك وملف DESIGN.md في مستودعك الخاص، وتُستخدَم بيانات اعتماد Anthropic مباشرةً بواسطة وكيلك، ولا تُمرَّر عبر خوادم Open Design أبدًا.