Claude Code للمصممين: إعداد مصمم حقيقي

المصممة التي عملت معها الشهر الماضي أطلقت إعادة هيكلة كاملة لنظام التصميم في ثلاثة أيام. هي ليست مهندسة. لا تعرف Bash. لم تكتب تعبيراً نمطياً واحداً في حياتها. كان معها Claude Code، وملف CLAUDE.md، وشهية للاعتراف بقراراتها السيئة.

هذه هي النسخة من هذه الأداة التي لا يتحدث عنها أحد. كل مقالة عن Claude Code يكتبها مهندس أول، لمهندسين أوائل. مليئة بمسارات الوكلاء وسكريبتات الخطافات والأعلام الغامضة. يقرأها المصممون، يفترضون أنها ليست لهم، ويغلقون التبويب.

هي لك. أكثر مما هي لمعظم المهندسين، بصراحة. لأن ما يعاني منه المصممون ليس الكتابة البرمجية. إنه صيانة نظام تصميم عبر عشرة مستودعات بينما الفريق يواصل إضافة الميزات. هذا بالضبط ما يلتهمه Claude Code على الإفطار.

Claude Code وكيل، لا إكمال تلقائي

Claude Code ليس نسخة مستنسخة من GitHub Copilot. ليس نافذة محادثة بثيم كودي. إنه وكيل طويل الأمد يعيش في طرفيتك، يقرأ مستودعك بالكامل، يعدّل الملفات، يشغّل الاختبارات، يفتح طلبات السحب، ويردّ عليك حين يشعر بالارتباك.

التحول المهم: لا ينتظر أن تخبره بأي سطر يعدّله. تعطيه هدفاً. هو يحدد الملفات التي يفتحها، وما يغيّره، وما إذا كان يضيف مكوناً جديداً أو يعدّل موجوداً، وكيف يبقي بقية الكود سليماً أثناء ذلك.

هذا هو الجزء الذي يغيّر كل شيء لمصمم. تتوقف عن الإشارة إلى أسطر بعينها. تبدأ في وصف النتائج. "حدّث كل مكون Button ليستخدم رمز حلقة التركيز الجديد، بما في ذلك نسخة الحالة المعطّلة القديمة، وتأكد من أن قصص storybook لا تزال تنجح." هذه جملة. وهي أيضاً يوم عمل في عمليات التصميم يختفي في أربع دقائق.

كان دور المصمم دائماً الذوق لا الصياغة. Claude Code يجعل الذوق هو المنتج الفعلي.

ثبّته في عشر دقائق

تحتاج ثلاثة أشياء: Node.js، وطرفية، وحساب Claude.

1. افتح Terminal (Mac: Cmd+Space، اكتب Terminal). ستكتب أمرين فقط. هذا هو التثبيت بالكامل.
2. ثبّت Node إن لم يكن لديك. اذهب إلى nodejs.org، انقر على تنزيل LTS، شغّله. هذا الجزء مثبّت عادي بنقر مزدوج.
3. في الطرفية، الصق: npm install -g @anthropic-ai/claude-code
4. انتقل إلى مستودع التصميم: cd ~/path/to/your/repo
5. شغّل: claude

عند التشغيل الأول، سيرشدك خلال تسجيل الدخول. انتهيت.

يمكن أن يكون المستودع أي شيء: حزمة نظام تصميم، موقع تسويقي على Next.js، Storybook، تصدير رموز Figma، إعداد Tailwind، أي شيء تعمل فيه. إذا كان مجلداً يحتوي على ملفات، يمكن لـ Claude Code قراءته.

اكتب CLAUDE.md كموجز تصميم لا كملف readme

CLAUDE.md هو الملف الذي يقرأه Claude Code أولاً في كل مرة يفتح فيها مستودعاً. يستخدمه المهندسون لأوامر البناء ومسارات الاختبار. هذا جيد. لكنه أيضاً يترك تسعين بالمئة من القيمة الحقيقية على الطاولة.

تعامل مع CLAUDE.md كموجز تصميم تسلّمه لمصمم جديد. الصوت، وقواعد العلامة التجارية، وماهية المنتج، وما لا نفعله أبداً، وكيف يبدو العمل النظيف هنا. كل جملة تضعها في CLAUDE.md هي جملة لن تضطر لتكرارها في المحادثة.

القالب الذي أعطيه لكل مصمم أدرّبه:

# CLAUDE.md

## What this repo is
One line. "Marketing site for Acme, a B2B analytics tool for finance teams."

## Voice
Three adjectives that describe how we write. Three phrases we never use. One example of a sentence we would ship and one we would cut.

## Design system
Where tokens live (path). Where components live (path). How we name things. Forbidden patterns (no inline styles, no hardcoded hex, no px values for spacing).

## Components we have
One-line descriptions of Button, Card, Hero, Nav, etc. So Claude does not build a new one when we already have it.

## What clean work looks like
A short paragraph. "We ship small, focused PRs. We update the Storybook story when we change a component. We never introduce a new dependency without asking."

## What to ask before proceeding
"If you are about to add a new color, stop and ask. If you are about to rename a component, stop and ask."

## Review standards
"Every change must pass typecheck and lint. Screenshots of before/after for any visual change."

اكتبه مرة واحدة لكل مستودع. حدّثه حين تتعلم شيئاً جديداً عن كيفية إخفاق الوكيل في قاعدة الكود الخاصة بك. إنه يتراكم.

سير العمل الخمسة المهمة

معظم دروس Claude Code تسرد عشرين ميزة. خمس منها هي حيث تظهر تسعون بالمئة من قيمة المصمم.

صيانة نظام التصميم. "ابحث عن كل مكان لا نزال نستخدم فيه قيم المسافات القديمة (8px، 16px، 24px) وضعها برموز (--space-2، --space-4، --space-6). حدّث المكونات. أبقِ القصص تنجح." دقيقتان. تاريخياً أسبوع كامل.

إعادة هيكلة المكون. "زاد Button لدينا إلى اثنتي عشرة نسخة. دقّقها. أخبرني أي ثلاثة منها مستخدمة فعلاً وأي تسعة منها ميتة. ثم اقترح API موحدة ونفّذها خلف علم ميزة." تراجع الاقتراح. تقول نعم. يُطلق.

من Figma إلى صفحة. الصق لقطة شاشة Figma أو، الأفضل، اربط Figma MCP (دليل منفصل قادم). قل "ابنِ قسم البطل هذا باستخدام مكوناتنا ورموزنا الموجودة، لا جديدة." يعطيك طلب سحب يطابق التصميم في جولة أو جولتين من التغذية الراجعة.

انتشار الرمز. تحدّث العلامة التجارية لوناً. "استبدل --color-accent عبر المستودع الكامل وشغّل typecheck." العمل ليس الكتابة، إنه الشجاعة. لدى Claude Code شجاعة لا محدودة وصفر من الأنا.

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

أعطه Figma لا لقطة الشاشة

إذا كان لديك PNG فقط، الصق الـ PNG. يتعامل Claude Code مع الصور. سيفوته دقة التباعد وبعض الفروق الطباعية، لكن الهيكل سيظهر.

إذا كان لديك Figma، اربط خادم Figma MCP. تثبيت من خمس دقائق يمنح Claude Code وصولاً مباشراً لقراءة إطارات Figma. معرّفات الإطار، أسماء الطبقات، قيم التباعد، روابط الرموز، الهيكل بالكامل. جودة الناتج ترتفع بشدة. يتوقف النموذج عن التخمين.

في كلتا الحالتين، قاعدة واحدة: دائماً أعطه نظام التصميم الموجود لديك، لا قماشة فارغة. "ابنِ هذا بمكوناتنا" يتفوق على "ابنِ هذا" في كل مرة. إذا تركت القماشة فارغة، سيخترع Claude Code مكونات لديك بالفعل. هذا عمل ضائع.

أين يتوقف Claude Code عن استحقاق ثقتك

كن صادقاً مع نفسك. هذا حيث تفشل الأداة اليوم.

التوضيح الحقيقي للعلامة التجارية. أي شيء يتطلب أسلوباً فنياً بعينه، أعمال شخصيات مرسومة باليد، أو شخصيات علامة تجارية يجب أن تبدو كعلامتك. Claude Code يستدعي المولّدات، ليس لديه ذوق. لا تزال تُحيط بـ Prismlight أو Runesmith أو مصوّر بشري لذلك.

الذوق التخطيطي الذاتي. يمكنه تخطيط صفحة بشكل صحيح. لا يمكنه إخبارك أن الصفحة مملة عاطفياً. لا يمكنه إخبارك أن البطل يحتاج مزيداً من الهواء. لا يمكنه الشعور أن قرار الوزن خاطئ. هذا لا يزال أنت.

قرارات المنتج من المبادئ الأولى. يمكنه تنفيذ أي شيء تطلبه. لا يمكنه إخبارك إذا كان يجب عليك طلبه. هذا لا يزال دور المصمم، وهو الدور الذي يدفع فعلاً.

أي شيء حين يكون المستودع فوضى. إذا لم يكن لقاعدة الكود لديك نظام متسق، ولا CLAUDE.md، ولا اصطلاح تسمية، ولا رموز، فإن Claude Code سيجعل الفوضى أسوأ بشكل أسرع. يجب أن تنظّف الأساس أولاً. هذا محبط لكنه أيضاً عادل.

إذا أردت المزيد من تحليلات سير عمل الذكاء الاصطناعي، تصفّح بقية أوراق Brainy. إذا أردت تثبيت هذا في فريق التصميم الخاص بك بشكل صحيح، وظّف Brainy وسنتولى الإعداد بالإضافة إلى سير العمل الحقيقي الأول.

قائمة تحقق المصمم للبداية

اليوم الأول، هذه هي القائمة الحقيقية.

• ثبّت Claude Code (أمر npm، دقيقة واحدة)
• سجّل الدخول وتحقق من عمل الجلسة
• اختر مستودعاً واحداً. واحداً فقط. ابدأ صغيراً.
• اكتب CLAUDE.md باستخدام القالب أعلاه. اقضِ ساعة عليه.
• اختر أحد سير العمل الخمسة. نفّذه من البداية للنهاية.
• راجع الفرق بعناية. لا تختم دون تدقيق. أنت المدير الفني.
• أخبر Claude أين أخطأ. حدّث CLAUDE.md بالدرس.
• نفّذ سير عمل آخر. افعله غداً.

أسبوع من هذا وستشعر بالفرق. شهر وستجد نفسك غير قادر على التراجع.

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

هل أحتاج معرفة البرمجة لاستخدام Claude Code؟

لا. تحتاج معرفة ما تريده، وكيف تصفه، وكيف تقرأ فرقاً بما يكفي لتقول "هذا صحيح" أو "هذا خاطئ." إذا سبق لك تقديم تغذية راجعة لمصمم مبتدئ، فلديك المهارة.

هل Claude Code آمن على مستودع الإنتاج؟

نعم، إذا استخدمت فرعاً. لا تشغّله أبداً على main. أنشئ فرعاً، دع Claude Code يعمل هناك، راجع طلب السحب كأي طلب آخر، ادمج حين يكون جيداً. Git يحميك. كذلك اشتراط اجتياز الاختبارات لطلبات السحب.

Claude Code مقابل Cursor مقابل v0 مقابل Lovable، ما الفرق؟

Cursor محرر كامل مع Claude مدمج. v0 وLovable يولّدان UI من موجّهات لكنهما لا يعيشان في مستودعك على المدى الطويل. Claude Code عديم الواجهة، يعيش في أي مستودع، وهو الأقوى للقواعد البرمجية الموجودة. لنماذج الأولية الجديدة كلياً، v0 أو Lovable أسرع. للعمل الحقيقي على المنتج، Claude Code يفوز.

كم يكلف Claude Code؟

اشتراك Claude Max يغطيه، وهذا ما يجب أن يبدأ به معظم المصممين. الفرق الأثقل تنتقل إلى تسعير API. في كلتا الحالتين، التكلفة رخيصة مقارنة بالوقت الذي يوفره في سير العمل أعلاه.

ما الذي يجب أن لا أستخدم Claude Code له أبداً؟

التوضيح للعلامة التجارية، قرارات الذوق الذاتية، استراتيجية المنتج، أي شيء يتطلب معرفة لماذا يريد المستخدم الميزة فعلاً. أبقِ هذه في يدك. أعطِ التنفيذ المتكرر للأداة.

لم تعد الجونيور بعد الآن

لفترة طويلة، كان المصممون هم من يرسمون الرؤية ويسلّمونها للمهندسين الذين يبنون الشيء فعلاً. هذا يعني أن المصممين كانوا ينتظرون. طاقة السبرنت. العمل الخلفي. أن يكتب شخص آخر.

تلك الحقبة انتهت.

الجونيور لم يعد شخصاً. الجونيور نموذج. أنت المدير الفني.

اكتب CLAUDE.md كموجز تصميم. سلّم العمل للوكيل. راجع الفرق كما تراجع نموذج مصمم مبتدئ، بمعايير. أعده حين يكون خاطئاً. أطلقه حين يكون صحيحاً.

إعادة هيكلة نظام التصميم ثلاثة أيام لا ثلاثة سبرنتات. الموقع التسويقي يُطلق هذا الأسبوع لا الربع القادم. تحديث الرمز ينتشر في دقائق لا أيام من التتبع.

ثبّته. اكتب الموجز. أطلق العمل.