Claude Code للمصممين: إعداد مصمم يعمل فعلاً

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

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

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

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

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

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

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

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

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

تحتاج إلى ثلاثة أشياء: Node.js، وterminal، وحساب Claude.

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

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

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

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

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

عامل 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."

اكتبه مرة واحدة لكل repo. حدّثه حين تتعلم شيئاً جديداً عن كيف يُخطئ الوكيل في codebase الخاص بك. يتراكم.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قائمة البدء للمصمم

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

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

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

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

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

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

هل Claude Code آمن على repo إنتاجي؟

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

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

Cursor هو محرر كامل مع Claude مدمج فيه. v0 وLovable يولّدان UI من prompts لكنهما لا يعيشان في repo الخاص بك على المدى البعيد. Claude Code بلا واجهة (headless)، يعيش في أي repo، وهو الأقوى للـ codebases الموجودة. للنماذج الأولية الجديدة تماماً، v0 أو Lovable أسرع. لعمل المنتج الحقيقي، Claude Code يفوز.

كم يكلّف Claude Code؟

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

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

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

لم تعد المبتدئ بعد الآن

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

ذلك العصر انتهى.

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

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

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

ثبّته. اكتب الموجز. اشحن العمل.