من Figma إلى موقع حي · الدليل الشامل لربط Figma بـ Claude Code.

تخيل طريقة العمل القديمة: مصمم يبني الشاشات في Figma، يرسلها إلى المطور، المطور يكتب الكود، يعودون بملاحظات، المطور يُصلح، ملاحظات إضافية، بكسل هنا، لون هناك. أسابيع من لعبة البينج بونج وعشرات الآلاف من الشواقل على موقع واحد. العالم يتحرك. في عام 2026، يستطيع Claude القراءة مباشرة من ملف Figma. التصميم يتحول من صورة ثابتة إلى تعليمات ينفذها الذكاء الاصطناعي. أنت تظل مصمماً. لست بحاجة إلى فهم الكود. لست معتمداً على مطور. Claude هو طرفك الثالث · يعمل على مدار الساعة طوال أيام الأسبوع دون أن تشعر بالحرج. هذا الدليل هو خلاصة اللقاء رقم 19 لنادي AI Master مع أفيفيت بلومشتاين. سنرى كيف نربط Figma بـ Claude عبر MCP، أي وكلاء مخصصين يجعلون العملية احترافية، ما هي قواعد الحديد في تصميم Figma التي تجعل Claude يُخرج كوداً دقيقاً، وكيف ننشر النتيجة على Vercel مع نطاق خاص بك.

ما الذي ستحصل عليه في نهاية الدليل

• اتصال MCP مباشر بين Claude Code وحساب Figma الخاص بك · يقرأ Claude الملفات مباشرة ولا يخمن
• رمز API مُعد بشكل آمن · غير مكشوف في المحادثة ويتم حفظه في .env
• وكلاء مخصصون · Copywriter, Critic, Developer, Launcher · مكتب تصميم متكامل بدون رواتب
• قواعد حديدية لتصميم Figma تجعل Claude يترجم 1:1 · Auto Layout، ومتغيرات Variables، وإطارات صحيحة
• عملية مزامنة ثنائية الاتجاه · التغيير في Figma يتم تحديثه في الكود والعكس صحيح، عبر وكيل Design Sync
• موقع حي على الهواء · Localhost ← GitHub ← Vercel ← نطاق خاص بك

لماذا هذا مهم · الفجوة بين المصمم والمطور تغلق

الخطوة 1 · 3 تثبيتات أساسية قبل البدء

حساب Figma مدفوع

Professional فما فوق · الحساب المجاني لا يدعم MCP

حساب Figma المجاني لا يسمح بالاتصال عبر MCP. تحتاج إلى اشتراك Professional على الأقل. إذا كنت تريد فقط التجربة · يمكنك البدء بفترة تجريبية. إذا كنت تعمل مسبقاً مع Figma · تحقق من الإعدادات للتأكد من أن لديك نوع الحساب الصحيح.

نصيحة للوكلاء: إذا كان حساب شركتك هو Professional · اطلب من المسؤول (Admin) إضافتك. لا داعي لشراء اشتراك شخصي بشكل منفصل.

Node.js

المحرك الذي يشغل كل شيء من خلف الكواليس

Node.js هي بيئة تشغيل JavaScript. فكر فيها كَمُتَرْجِم · فهي تأخذ الكود الذي يكتبه Claude، وتنفذه مباشرة على جهاز الكمبيوتر الخاص بك (وليس في المتصفح)، وتتيح تشغيل موقع على localhost قبل رفعه على الهواء. التثبيت يستغرق دقيقتين، وهو مجاني، ويجب القيام به مرة واحدة.

نصيحة للوكلاء: اختر إصدار LTS (الذي في اليسار) · فهو أكثر استقراراً. بعد التثبيت · افتح Terminal واكتب `node -v`. إذا رأيت رقم الإصدار · فالأمور تعمل.

Claude Code Desktop

الوصول المريح والقوي · ليس المتصفح

لا تعمل على Claude من خلال المتصفح. أنت بحاجة إلى تطبيق سطح المكتب لـ Claude Code. هذا الإصدار وحده قادر على الوصول إلى المجلدات الموجودة على حاسوبك، الاتصال بـ MCP، وتشغيل الكود محلياً. الإصدار الويبي جيد للأتمتة مع Gmail أو Drive · ولكنه ليس مناسباً للتطوير.

نصيحة للوكلاء: بعد التثبيت · سجل الدخول إلى حساب Claude Pro (20 دولاراً/شهرياً) أو Max (100 دولار/شهرياً). الورشة والأدلة الحالية تعمل على إصدار Pro.

💡 Claude Code مقارنة بـ Claude Cowork مقابل Claude Design · جميعها تعتمد على نفس المحرك (Opus / Sonnet). Cowork هو نسخة مُجرّدة ولطيفة. Claude Design هو واجهة أونلاين جميلة ولكنها مكلفة (رموز منفصلة، وقد تصل التكاليف إلى 300 دولار). Claude Code يمنحك كافة قدرات الثلاثة معاً · ولديه وصول كامل لسطح المكتب وFigma عبر MCP. إذا اعتدت العمل معه · فلن تعود للوراء.

الخطوة 2 · لحظة، ما هو Figma؟

🧰 لا تعرف كيف تستخدم Figma؟ لا داعي للتوتر. في نهاية الدليل يوجد رمز QR لمجتمع المصممين التابع لأفيفيت · 'بورتفوليو ليف' (Portfolio Lev). ولكن حتى دون معرفة التصميم · يمكنك الدخول إلى Figma Community، تنزيل قالب جاهز (Portfolio, Dashboard, Landing Page)، وربطه مباشرة بـ Claude.

الخطوة 3 · إنشاء رمز API Token في Figma (5 دقائق)

كيفية إنتاج الرمز · خطوة بخطوة

• ادخل إلى Figma (عبر المتصفح أو سطح المكتب)، انقر على الصورة الرمزية الخاصة بك · Settings
• تبويب Security · انزل إلى الأسفل حتى تصل إلى Personal Access Tokens
• انقر على Generate new token · اعطه اسماً ذا مغزى (مثال 'Claude MCP')
• Expiration · اختر 90 يوماً (الحد الأقصى المتاح). سيببه لك Claude تنبيهاً عندما يحين وقت التجديد
• نطاقات الصلاحيات (Scopes) · وافق على الآتي: File content (Read), File metadata, Library content (Read), Library assets (Read), Variables (Read), Design system (Read)
• لا توافق على الآتي: File comments (Write), Webhooks · من الأفضل عدم منح Claude صلاحيات الكتابة على المستندات المشتركة مع الآخرين
• انقر على Generate token · ستحصل على سلسلة طويلة من الحروف والأرقام. انسخها إلى مكان آمن · فلن تراها مرة أخرى

هل تريد إتقان Claude Code من الصفر؟

هذا الدليل منحك الأساس. في ورشة Claude Code الكاملة نبني معاً خطوة بخطوة: التثبيت، ملف CLAUDE.md، المهارات، الوكلاء وموقع حي على الهواء. 4 لقاءات مسجلة، وصول مدى الحياة.

⚠️ تحذير أمني للمعلومات · هذا الرمز (Token) بمثابة شيك على بياض. لا ترمِ به في محادثة Claude! لا تحفظه في ملف عادي! لا ترسله بالبريد الإلكتروني! الطريقة الصحيحة: ضعه فقط في Terminal (مرة واحدة) أو في ملف .env الذي ينشئه Claude لأجلك. إذا تسرب الرمز · ادخل فوراً إلى Settings → Security → Revoke.

الخطوة 4 · ربط MCP · الجسر بين Claude وFigma

أمر MCP للإدخال في الTerminal (مثال · ستحصل على نسختك الخاصة من Figma)

claude mcp add figma-developer-mcp -- npx -y figma-developer-mcp --figma-api-key=YOUR_TOKEN_HERE --stdio

كيفية تشغيل الأمر دون كشف الرمز (Token)

• في Claude Desktop · افتح Terminal الداخلي (Cmd+J على نظام Mac، أو Ctrl+J على نظام Windows)
• انسخ الأمر من Figma. استبدل YOUR_TOKEN_HERE بالرمز الذي أنشأته في الخطوة 3
• الصق الأمر في Terminal. اضغط Enter
• انتظر حتى يظهر السطر: 'Installed', 'Registered', 'Connected'
• إذا فشل شيء ما · التقط صورة شاشة للرسالة وأرسلها في المحادثة إلى Claude. سي Sيعرف كيف يصلحها
• تأكد من أن الأمور تعمل · اسأل Claude: 'اشرح لي حالة الـ MCP'. إذا كان قادراً على سرد جميع أدوات figma-developer-mcp · فهذا يعمل بنجاح

🔒 الفرق بين Connector وMCP · يوجد في Claude موصلات جاهزة لـ Figma (عبر خيار Customize). وهي تمنح وصولاً أساسياً. أما MCP الرسمية من Figma فتمنح وصولاً أوسع بكثير: قراءة كاملة لهيكل الملف، والمتغيرات Variables، والمكونات Components. إذا كنت جاداً في عملك · فاستخدم MCP. أما إذا كنت تتصفح فقط · فالـ Connector يكفي.

الخطوة 5 · التحويل الأول · من ملف Figma إلى موقع حي

العملية من البداية إلى النهاية

• Figma · افتح الملف الذي تريد تحويله. انتقل إلى Dev Mode. انقر على Share → Copy Link
• Claude · أنشئ مجلد مشروع جديد (مثل 'portfolio')، وافتح جلسة جديدة (session)
• الصق رابط Figma واشرح باللغة العبرية: 'أريد تحويل هذا الشيء الجميل إلى موقع حي. عمل مع وكيل Figma Implement Design'
• يقرأ Claude الملف، يفحص الطبقات، ويبني شجرة الكود · React/HTML/CSS
• يفتح Localhost · يمنحك رابطاً (غالباً http://localhost:3000) ويفتح نافذة معاينة (preview) على الجانب
• سترى الموقع حياً. متجاوباً مع الهواتف (responsive)، مع حالات التمرير (hover states)، وكل التفاصيل الدقيقة. خلال 20 إلى 30 دقيقة

🎯 بدون وكيل · سيقوم Claude ببناء موقع، ولكنه سيكون عاماً وعادياً. الوكلاء المحترفون (في الخطوة التالية من الدليل) هم الفارق بين 'موقع يبدو وكأن الذكاء الاصطناعي بناه' وبين 'موقع يبدو وكأن مصمماً محترفاً صممه'.

الخطوة 6 · الوكلاء الأربعة الذين يجعلون العملية احترافية

Copywriter

يكتب بصوتك · وليس بصوت الذكاء الاصطناعي

وكيل يعرف نبرة صوتك · كيف تكتب العناوين، ما هي الكلمات التي تتجنبها، كيف يبدو زر الحث على اتخاذ القرار (CTA) النموذجي في موقعك. ديناميكي · يتحسن في كل جلسة. يمكنك إنشاء نسخة مختلفة لكل مشروع · نسخة للعلامة التجارية الشخصية (Personal Brand) ونسخة للشركة.

نصيحة للوكلاء: يتم تحديث هذا الوكيل بعد كل جلسة. عندما تنتهي من مشروع أعجبك فيه الـ microcopy، قل لـ Claude: 'احفظ هذه النبرة في Copywriter Agent'.

ورشة عمل Claude Code الكاملة تجمع كل شيء في مكان واحد: التثبيت، المهارات، الوكلاء، وبناء المواقع. 4 جلسات مسجلة مدى الحياة.

Critic

مراجعة تلقائية للتصميم قبل إطلاقه على الهواء

بعد أن يصبح الموقع جاهزاً، يمر هذا الوكيل عليه ويتحقق من: التسلسل الهرمي البصري، التجاوب، سهولة الوصول، التوافق مع نظام التصميم (Design System)، والتباين وفق معايير WCAG. بدلاً من أن تقوم بالفحص يدوياً، يخبرك Claude بدقة بما يجب إصلاحه وأين.

Developer (Figma Implement Design)

تحويل التصميم إلى كود، وهو عقل العملية

الوكيل الرئيسي. يتلقى رابطاً لـ Figma، يفحص الملف، ويبني الكود عنصراً تلو الآخر، مع كود CSS دقيق يتطابق بنسبة 1:1 مع التصميم. يدعم أتمتة التجاوب إذا تم بناء الملف باستخدام Auto Layout بشكل صحيح.

نصيحة للوكلاء: ستمنح أفيفيت هذا الوكيل كهدية للمجتمع. سيتم إرساله عبر ملخص اللقاء إلى النادي.

Launcher

رفع الكود من Localhost إلى الهواء

هل أنهيت العمل على Local؟ يدفع هذا الوكيل الكود إلى GitHub، ويربطه تلقائياً بـ Vercel، وينشره على الهواء، ويعيد رابطاً عاماً (URL). كل ذلك دون أن تلمس عمليات التطوير (DevOps). بدلاً من 5 عمليات يدوية، جملة واحدة.

🤖 مكافأة · Design Sync. وكيل خامس تذكره أفيفيت. بعد أن يصبح الموقع حياً، وتغير شيئاً في Figma (طلب العميل تحديث اللون)، يقوم هذا الوكيل بمزامنة التغيير في الكود. اتجاهين (ثنائي الاتجاه). لا يموت Figma بعد التحول الأول، بل يستمر في العيش جنباً إلى جنب مع الكود.

المرحلة 7 · 5 قواعد ذهبية في تصميم Figma

القواعد بلا تنازلات

• **Auto Layout في كل مكان** · بدلاً من وضع العناصر يدوياً، استخدِم Auto Layout. بهذه الطريقة يعرف Claude كيفية إنشاء تجاوب تلقائي. في الهواتف المحمولة، ستتطابق العناصر تحت بعضها البعض دون إفساد التصميم.
• **أسماء منطقية للطبقات (Layers)** · لا تستخدم 'Frame 1' ولا 'Group 2'. يُسمى الزر 'Button-Primary'، ومنطقة Hero تُسمى 'Section-Hero'.رار الأسماء العامة يربك Claude ويعطي الكود أسماء مربكة.
• **المتغيرات (Variables) للألوان، الخطوط، والتباعد** · بدلاً من كتابة #FF6B00 في كل مكان، أنشئ متغيراً باسم 'color/primary' واستخدمه. يترجم Claude ذلك إلى CSS Variables، مما يجعل الموقع قابلاً للتعديل بشكل عام في سطر واحد.
• **Frame وليس Group** · استخدِم دائماً Frames (بالضغط على حرف F). Group هو هيكل قديم ولا يقرأه Claude بشكل جيد. يمنحك Frame القوة الكاملة، المرونة، Auto Layout، والتجاوب.
• **الأيقونات كـ SVG أو Component** · إذا كانت أيقونة، إما أن تستوردها كـ SVG (صيغة متجهة لا تفقد دقتها)، أو تنشئ منها Component. أيقونة بصيغة PNG تعني أن Claude سيقوم بناء صورة وليس كوداً نظيفاً، وسيكون الموقع أثقل وأقل مرونة.

📚 لم يتم بناء الموقع باستخدام Auto Layout؟ لا بأس. توجد مهارة تُسمى 'Strap Grid Builder' تعرف كيف تترجم التصاميم غير المبنية بـ Auto Layout إلى تجاوب جيد. إنها نقطة بداية جيدة، لكن المصدر أفضل.

المرحلة 8 · ليس لديك تصميم جاهز؟ Figma Community

Figma Community

الآلاف من قوالب التصميم المجانية والمتاحة فوراً

مكتبة قوالب ضخمة · UI Kits، لوحات تحكم (Dashboards)، تطبيقات موبايل، صفوف هبوط (Landing Pages)، أيقونات، رسوم توضيحية. معظمها مجاني. انقر على قالب، ثم 'Open في Figma'، فيتم نسخ القالب إلى حسابك، وتقوم بتعديله، ومن هناك إلى Claude.

نصيحة للوكلاء: في البحث، قم بالتصفية حسب 'Free'. يجدر مراجعة تقييمات المجتمع، فالقالب الذي يحظى بـ 50 ألف عملية تحميل من المرجح أن يكون مبنياً بشكل جيد أيضاً.

هل تريد إتقان Claude Code من الصفر؟

منحك هذا الدليل الأساس. في ورشة عمل Claude Code الكاملة، نبني معاً خطوة بخطوة: التثبيت، CLAUDE.md، المهارات، الوكلاء، وموقع حقيقي على الهواء. 4 جلسات مسجلة، وصول مدى الحياة.

المرحلة 9 · من Localhost إلى الهواء · GitHub + Vercel

أوامر لـ Claude · نسخ لصق

• 'أنشئ لي مستودعاً خاصاً (private repo) على GitHub وادفع الكود إليه'
• 'اربط هذا المستودع بـ Vercel وانشره على Production'
• 'لدي نطاق avivit-portfolio.com اشتريته من Cloudflare. اربطه بالمشروع وقم بتحديث سجلات DNS'
• 'أضف إلى الموقع Google Analytics 4 واربط معرف الملكية الخاص بي (Property ID)'

💰 ادمج 3 أدوات معاً · GitHub مجاني، Vercel مجاني (حتى 100 جيجابايت من حركة المرور شهرياً)، وFigma Professional هو التكلفة الوحيدة. إذا كانت لديك الورشة والنادي، فإن العائد على الاستثمار (ROI) من الموقع الأول يسترد التكلفة 50 مضاعفة.

أسئلة شائعة من اللقاء

ليس قريباً. Claude Design هو واجهة تصميم على موقع Claude (وليس سطح المكتب). إنه جميل، سريع، و知道 يعرف كيف ينتج تصاميم أساسية، لكنه محدود للغاية. الرموز (Tokens) الخاصة به منفصلة عن Claude Code، ومكلفة، وتنفد بسرعة. وصلت أفيفيت إلى 300 دولار في حساب واحد. من يعمل مع Claude Code على سطح المكتب يمكنه الوصول إلى نفس النتائج دون تكلفة إضافية. تظل Figma المعيار المهني للتصميم المعقد.

نعم، ولكن مع فرق واحد · بدلاً من إنشاء التصميم بنفسك في Figma، تدخل إلى Figma Community، وتقوم تنزيل قالب جاهز (محفظة أعمال، لوحة تحكم، صفحة هبوط)، وتقوم بتعديل النصوص والصور، وربطه بـ Claude. تقترح أفيفيت أيضاً أن تطلب من Claude 'دعنا نبني نظام تصميم معاً'. تزوده بالصور، اللوحات المزاجية (Moodboards)، والأفكار، فينتج Claude الأساس.

المهارة (Skill) هي قدرة محددة · 'تحرير الفيديو'، 'الكتابة بالعبرية'، 'فحص سهولة الوصول'. يقوم Claude بتشغيلها عندما تكون ذات صلة. الوكيل (Sub-Agent) هو كيان له 'عقل' كامل · يعرف كيف ينفذ سلسلة من العمليات، ويتخذ القرارات، ويشغل مهارات أخرى. في Figma + Code، يمكن لوكيل 'Developer' تشغيل مهارات 'CSS Optimization' و'Accessibility' و'OKLCH Colors' في نفس الوقت. المبتدئ يستخدم المهارات، والمتقدم يبني الوكلاء.

قامت أفيفيت بالتجربة حتى بدون وكلاء، وكانت النتائج أقل جودة. تمنح الوكلاء قوى خارقة: كل واحد مدرَّب لمهمة محددة، يعرف كيف تريد منه أن يفكر، ويعمل بتنسيق مع الآخرين. يستحق الاستثمار الأولي لمدة 2-3 ساعات لإنشاء وكيل، لأنه يعمل من أجلك إلى الأبد بعد ذلك.

خطوة بخطوة · 1) تأكد من أن حساب Figma الخاص بك مدفوع. 2) تأكد من تثبيت Node.js · اكتب في الطرفية (Terminal) الأمر `node -v` وستحصل على رقم الإصدار. 3) تأكد من أن الرمز (Token) لا يزال صالحاً · إذا مر 90 يوماً، قم بإنشاء رمز جديد. 4) لقطة شاشة لخطأ الطرفية · أرسلها إلى دردشة Claude. فهو يعرف كيفية التعرف على 95% من الأعطال.

لا. هناك طريقتان · 1) تعديل التصميم مباشرة في Figma، وتشغيل وكيل Design Sync · يقوم Claude بمزامنة التغيير مع الكود. 2) ببساطة أخبر Claude 'غيّر الزر الرئيسي إلى اللون الأزرق' دون لمس Figma · سيقوم بتعديل الكود مباشرة. الطريقة الأولى أكثر احترافية، حيث يبقى كل من Figma والكود متزامنين.

Cursor و VS Code هما بيئات تطوير كلاسيكية (IDEs) مخصصة للمطورين. وهما تتطلبان معرفة تقنية أساسية. تم بناء Claude Code Desktop للمستخدمين الذين ليسوا مطورين · واجهة بديهية، اعتماد أقل على الطرفية (Terminal)، وتجربة أنظف. جميع إمكانيات Cursor موجودة أيضاً في Claude، ولكن الواجهة أكثر سهولة.

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

الموصل (Customize → Connectors → Figma) يمنح وصولاً أساسياً · يستطيع Claude قراءة أجزاء من الملف وإجراء تعديلات طفيفة. إنه لا يتعمق في الملف، ولا يرى جميع المتغيرات (Variables)، ولا يقرأ التسلسل الهرمي الكامل للمكونات (Components)، ولا يستطيع الكتابة والتحديث. يمنح الـ MCP الرسمي لـ Figma وصولاً كاملاً · قراءة متعمقة، وصولاً إلى نظام التصميم (Design System)، وقدرة على تنفيذ الإجراءات. إذا كنت جاداً بشأن العملية، فاستخدم MCP. وإذا كانت مجرد تجربة لمرة واحدة، يكفي الموصل.

لا تحتاج الطرفية (Terminal) إلى البقاء مفتوحة · يديرها Claude Desktop في الخلفية بعد الاتصال الأول. لكي لا يذهب Claude بعيداً في الخيال، استخدم Plan Mode (زر في أسفل شاشة Claude). يعرض فيه خطة عمل قبل الشروع في البناء، وأنت تقوم بالموافقة عليها. خدعة أخرى · أعطه تعليمات واضحة بقيم دقيقة ('العمود الأيمن، العرض 320px، الخلفية #FFFFFF') بدلاً من الصياغات المفتوحة ('عنوان جميل'). كلما كان الموجه (Prompt) أدق، كانت النتيجة أدق.

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

يقوم كلود بتحميل الوكلاء ذوي الصلة بالطلب المحدد فقط، وليس الجميع. الوكلاء غير النشطين لا يستهلكون رموز التوكن. ومع ذلك، إذا كان لديك 30 وكيلًا في المجلد، فقد يشعر كلود بالارتباك بشأن ما يجب اختياره. توصي أفيفيت بوضع ما بين 5 إلى 7 وكلاء في كل مجلد مشروع، والباقي في مجلدات منفصلة.

يعرف كلود كيف يتعامل مع الأمرين، ولكن يجب الطلب منه. بالنسبة لتحسين محركات البحث (SEO): 'أضف علامات Meta وفقًا لرموز Google، وsitemap.xml، وrobots.txt، والبيانات المهيكلة (structured data)'. بالنسبة للأمان: 'أضف HTTPS عبر Vercel، وتأكد من عدم وجود بيانات سرية (secrets) في الكود، وقم بتعيين رؤوس CSP (CSP headers)'. المهارات التي يوصى بتثبيتها: 'Israeli Privacy Shield' للخصوصية، و'Israeli Accessibility Compliance' لإمكانية الوصول. لقد ذكرنا كليهما في دليل 'Vibe Coding'.

يعتمد ذلك على الإعداد. عند إنشاء مستودع (repo) جديد في GitHub، يمكنك اختيار Public (مفتوح للجميع) أو Private (لك وحدك وللأشخاص الذين تدعوهم). قد تكون القيمة الافتراضية في الحساب المجاني هي Public. عندما تتحدث إلى كلود، اطلب منه دائمًا 'أنشئ لي مستودعًا خاصًا' أو 'Create a Private repository'. إذا أصبح عامًا (Public) بالخطأ، فانتقل إلى GitHub ثم Settings ثم General ثم Danger Zone ثم Change visibility.

هناك ثلاثة خيارات: 1) تقول لكلود 'قم بتحديث النص في قسم Hero إلى X' فيقوم بتحديث الكود والنشر مرة أخرى على Vercel، وهو أمر سريع للتعديلات المحددة. 2) حفظ المحتوى في ملف JSON أو MD منفصل داخل المشروع بحيث يمكن تحريره بسهولة دون المساس بالكود نفسه. 3) ربط نظام إدارة محتوى خارجي (CMS مثل Notion، أو Airtable، أو Sanity) حيث تقوم بالتحديث هناك، ويبني كلود بنية تحتية تسحب البيانات منه تلقائيًا. الخيار الأول هو الأبسط، والثالث هو الأكثر احترافية.

من الأجزاء الأساسية، نعم. كل من Lovable، وBolt، وReplit Agent هي أدوات 'Vibe Coding' تنتج مواقع الويب من خلال الوصف. الاختلاف هو أنها أدوات مغلقة، فأنت مقيد بما تسمح به، ولديهما اشتراكات منفصلة. أما Claude Code فيعمل على مواقع الويب، والأتمتة، والوكلاء، وتحرير الفيديو، وكل ذلك باشتراك واحد. بالإضافة إلى ذلك، يمنحك كلود إمكانية الوصول إلى الكود نفسه، وتكون أنت المالك، ويمكنك الانتقال إلى أي منصة. بينما يوجد في Lovable قيد الاحتكار المرتبط بالمورد (vendor lock-in).

Figma هي المعيار المهني لتصميم المنتجات الرقمية بفضل تواجدها في السوق منذ 16 عامًا، والنظام البيئي الضخم، وبروتوكول MCP الرسمي لكلود. أما Stitch AI فهو أداة أحدث تنتج التصميمات من النصوص، وهو لطيف للتجربة ولكنه أقل احترافية للمشاريع المعقدة. إذا كنت تبني مرة كل عقد من الزمن، فسوف يكفيك Stitch. أما إذا كنت تبني منتجات بشكل جاد، فعليك بـ Figma.

هناك ثلاث طرق: 1) يقوم كلود بنحته من أجلك، حيث تقوم بتحميل لوحة المزاج (moodboard)، ومواقع الويب التي أعجبتك، والصور التي تمثل العلامة التجارية، وتقول 'قم ببناء نظام تصميم (Design System) لي'. فيقوم بإنشاء لوحة الألوان، والخطوط، والمسافات، والتسلسل الهرمي. 2) شراء قالب جاهز من Figma Community وتعديل الألوان والخطوط حسب ذوقك. 3) استخدام مهارة 'UI/UX Pro Max' أو 'Web Design Guidelines' التي تحتوي على 50 نمطًا و161 لوحة ألوان جاهزة. لقد قدمت أفيفيت في السابق لقاءً كاملاً حول بناء نظام التصميم وقد تم تحميله على نظام النادي.

نعم. أمثلة من المجتمع: 1) يقوم كلود بإنشاء موقع الويب وإرسال تحديث إلى Slack. 2) التغيير في Figma يجعل كلود يقوم بالزام المزامنة (sync) والدفع إلى GitHub بينما يقوم Vercel بالنشر تلقائيًا. 3) يقوم كلود بإنشاء الموقع، ورفع لقطات الشاشة (screenshots) إلى Drive، وإرسال بريد إلكتروني إلى العميل مع الرابط. كل ذلك يتم عبر Make.com أو عبر بروتوكولات MCP إضافية يمكن إضافة كلود إليها.

🚀 الخطوة التالية: ورشة عمل Claude Code الكاملة

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

هل سيحل Claude Design محل Figma؟

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

لست مصممًا، فهل هذا الدليل مناسب لي؟

نعم، ولكن مع فرق واحد: بدلاً من أن تقوم بإنشاء التصميم بنفسك في Figma، يمكنك الدخول إلى Figma Community وتنزيل قالب جاهز (ملف تعريف أعمال، لوحة تحرير، صفحة هبوط)، وتعديل النصوص والصور، وربطه بكلود. تقترح أفيفيت أيضًا أن تطلب من كلود 'تعال لنبني نظام تصميم معًا'، حيث تمنحه الصور، ولوحة المزاج، والأفكار، ليقوم كلود بإنشاء الأساس.

ما الفرق بين الوكيل (Sub-Agent) والمهارة (Skill)؟

المهارة هي قدرة محددة مثل 'تحرير الفيديو'، 'الكتابة بالعبرية'، 'فحص إمكانية الوصول'. يقوم كلود بتفعيلها عندما تكون ذات صلة. أما الوكيل (Sub-Agent) فهو كيان يتمتع بـ 'عقل' كامل، ويعرف كيف ينفذ سلسلة من الإجراءات، ويتخذ القرارات، ويشغل مهارات أخرى. في دمج Figma مع Code، يمكن لـ 'وكيل المطور' (Developer) تشغيل مهارات مثل 'تحسين CSS' و'إمكانية الوصول' و'ألوان OKLCH' في نفس الوقت. المبتدئ يستخدم المهارات، بينما المتقدم يبني الوكلاء.

هل يجب بالضرورة بناء وكلاء للحصول على نتائج احترافية؟

قامت أفيفيت بالاختبار بدون وكلاء وكانت النتائج أقل جودة. يمنح الوكلاء قوى خارقة: كل واحد منهم مدرب لمهمة محددة، ويعرف كيف تريد منه أن يفكر، ويعمل بتنسيق مع الآخرين. يستحق الأمر الاستثمار الأولي لمدة تتراوح بين ساعتين إلى ثلاث ساعات لإنشاء وكيل، وبعد ذلك سيعمل من أجلك إلى الأبد.

فشل الاتصال عندي، فماذا أفعل؟

خطوة بخطوة: 1) تأكد من أن حساب Figma الخاص بك مدفوع. 2) تأكد من تثبيت Node.js عن طريق كتابة `node -v` في الطرفية (terminal) والحصول على رقم الإصدار. 3) تأكد من أن الرمز لا يزال ساري المفعول، فإذا مر 90 يومًا، قم بإنشاء رمز جديد. 4) التقط صورة لشاشة خطأ الطرفية وأرسلها إلى محادثة كلود، فهو يعرف كيف يتعرف على 95% من الأعطال.

ماذا يحدث عندما يكون لدي موقع ويب حي ويطلب العميل تغييرات، فهل نبدأ من الصفر في كل مرة؟

لا. هناك طريقتان: 1) تعديل التصميم مباشرة في Figma، وتشغيل وكيل Design Sync ليقوم كلود بمزامنة التغيير مع الكود. 2) إخبار كلود ببساطة 'اجعل الزر الرئيسي أزرق' دون لمس Figma، وسوف يقوم بتعديل الكود مباشرة. الطريقة الأولى أكثر احترافية حيث يظل كل من Figma والكود متزامنين.

ما الفرق بين هذا الاتصال وبين Cursor أو VS Code؟

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

لماذا البناء في Figma وليس مباشرة في كلود؟

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

لماذا لا يكفي موصل كلود العادي بـ Figma؟

يمنحك الموصل (Customize ثم Connectors ثم Figma) إمكانية الوصول الأساسي، حيث يمكن لكلود قراءة أجزاء من الملف وإجراء تعديلات طفيفة. إنه لا يتعمق في الملف، ولا يرى كافة المتغيرات، ولا يقرأ التسلسل الهرمي للمكونات بالكامل، ولا يمكنه الكتابة والتحديث. بينما يمنحك بروتوكول MCP الرسمي لـ Figma إمكانية الوصول الكامل: قراءة متعمقة، الوصول إلى نظام التصميم، والقدرة على تنفيذ الإجراءات. إذا كنت جادًا بشأن هذه العملية، فاستخدم MCP، أما إذا كانت تجربة لمرة واحدة، يكفي الموصل.

هل يجب أن تظل الطرفية مفتوحة طوال الوقت؟ كيف نمنع كلود من أن يكون مبدعًا أكثر من اللازم؟

لا تحتاج الطرفية إلى أن تبقى مفتوحة؛ حيث يديرها كلود ديسكتوب في الخلفية بعد الاتصال الأولي. لكي لا يجن جنون خيال كلود، يمكنك استخدام وضع التخطيط (Plan Mode عبر الزر الموجود في أسفل كلود)، حيث يعرض خطة عمل قبل الشروع في البناء وتقوم أنت بالموافقة عليها. وهناك حيلة أخرى تتمثل في إعطائه تعليمات واضحة بقيم دقيقة (مثل 'العمود الأيمن، العرض 320 بكسل، الخلفية #FFFFFF') بدلاً من الصياغات المفتوحة (مثل 'عنوان جميل'). وكلما كان الموجه (prompt) دقيقًا، كانت النتيجة دقيقة.

هل يتطلب كل مشروع وكيلًا خاصًا به؟ أم يمكن مشاركة وكيل واحد لعدة مشاريع؟

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

إذا أعطينا كلود جميع الوكلاء، ألا يكلف ذلك رموز توكن إضافية؟

يقوم كلود بتحميل الوكلاء ذوي الصلة بالطلب المحدد فقط، وليس الجميع. الوكلاء غير النشطين لا يستهلكون رموز التوكن. ومع ذلك، إذا كان لديك 30 وكيلًا في المجلد، فقد يشعر كلود بالارتباك بشأن ما يجب اختياره. توصي أفيفيت بوضع ما بين 5 إلى 7 وكلاء في كل مجلد مشروع، والباقي في مجلدات منفصلة.

ماذا عن اختبارات الأمان وتحسين محركات البحث لموقع صادر عن كلود؟

يعرف كلود كيف يتعامل مع الأمرين، ولكن يجب الطلب منه. بالنسبة لتحسين محركات البحث (SEO): 'أضف علامات Meta وفقًا لرموز Google، وsitemap.xml، وrobots.txt، والبيانات المهيكلة (structured data)'. بالنسبة للأمان: 'أضف HTTPS عبر Vercel، وتأكد من عدم وجود بيانات سرية (secrets) في الكود، وقم بتعيين رؤوس CSP (CSP headers)'. المهارات التي يوصى بتثبيتها: 'Israeli Privacy Shield' للخصوصية، و'Israeli Accessibility Compliance' لإمكانية الوصول. لقد ذكرنا كليهما في دليل 'Vibe Coding'.

هل ملفاتي في GitHub مفتوحة للجميع؟

يعتمد ذلك على الإعداد. عند إنشاء مستودع (repo) جديد في GitHub، يمكنك اختيار Public (مفتوح للجميع) أو Private (لك وحدك وللأشخاص الذين تدعوهم). قد تكون القيمة الافتراضية في الحساب المجاني هي Public. عندما تتحدث إلى كلود، اطلب منه دائمًا 'أنشئ لي مستودعًا خاصًا' أو 'Create a Private repository'. إذا أصبح عامًا (Public) بالخطأ، فانتقل إلى GitHub ثم Settings ثم General ثم Danger Zone ثم Change visibility.

ماذا يحدث عندما نريد تحديث المحتوى في الموقع الحي ولا يوجد لدينا نظام إدارة محتوى؟

هناك ثلاثة خيارات: 1) تقول لكلود 'قم بتحديث النص في قسم Hero إلى X' فيقوم بتحديث الكود والنشر مرة أخرى على Vercel، وهو أمر سريع للتعديلات المحددة. 2) حفظ المحتوى في ملف JSON أو MD منفصل داخل المشروع بحيث يمكن تحريره بسهولة دون المساس بالكود نفسه. 3) ربط نظام إدارة محتوى خارجي (CMS مثل Notion، أو Airtable، أو Sanity) حيث تقوم بالتحديث هناك، ويبني كلود بنية تحتية تسحب البيانات منه تلقائيًا. الخيار الأول هو الأبسط، والثالث هو الأكثر احترافية.

هل هذا يغني عن Lovable / Bolt / Replit؟

مبدئياً · نعم. Lovable، Bolt، Replit Agent · كلها أدوات Vibe Coding تنشئ مواقع إلكترونية بناءً على الوصف. الاختلاف · هي أدوات مغلقة، أنتم مقيدون بما تسمح به، ولديها اشتراكات منفصلة. Claude Code · يعمل على المواقع، الأتمتة، الوكلاء، وتعديل الفيديو أيضاً · اشتراك واحد. بالإضافة إلى ذلك · يمنحكم كلود إمكانية الوصول إلى الكود نفسه، أنتم المالكون، ويمكنكم الانتقال إلى أي منصة. في Lovable · يوجد تقييد بالمنظومة (vendor lock-in).

فيجما مقابل Stitch AI · أيهما أفضل؟

فيجما هي المعيار المهني لتصميم المنتجات الرقمية · 16 عاماً في السوق، نظام بيئي ضخم، وMCP رسمي لكلود. Stitch AI هو أداة أحدث · ينتج تصاميم من النصوص، جيد للتجربة، لكنه أقل مهنية للمشاريع المعقدة. إذا كنتم تبنون مرة كل عقد · فسيكفيكم Stitch. أما إذا كنتم تبنون منتجات بشكل جدي · ففيجما.

نحن رواد أعمال بلا خلفية في التصميم · كيف نبني نظام تصميم (Design System)؟

ثلاث طرق · 1) يقوم كلود بنائه لأجلكم · ترفعون له لوحة مزاجية (moodboard)، مواقع أحببتموها، صوراً تمثل العلامة التجارية، وتقولون 'ابنِ لي نظام تصميم'. إنه ينشئ لوحة ألوان، خطوطاً، مسافات، وتدرجاً هرمياً. 2) تشترون قالباً جاهزاً من Figma Community · تعدلون الألوان والخطوط حسب ذوقكم. 3) تستخدمون مهارة UI/UX Pro Max أو Web Design Guidelines · 50 نمطاً، 161 لوحة ألوان جاهزة. عرضت אביבית سابقاً لقاءً كاملاً حول بناء نظام تصميم · مرفوع على نظام النادي.

هل يمكن ربط هذا التدفق بأتمتة إضافية؟

نعم. أمثلة من المجتمع · 1) كلود ينشئ الموقع ← يرسل تحديثاً إلى سلاك. 2) تغيير في فيجما ← كلود يقوم بالزامنة ← يدفع إلى GitHub ← Vercel ينشر تلقائياً. 3) كلود ينشئ الموقع ← يرفع لقطات الشاشة إلى Drive ← يرسل بريداً إلكترونياً للعميل مع الرابط. كل ذلك عبر Make.com أو عبر MCPs إضافية يمكن إضافتها إلى كلود.