التصميم بالعلامة التجارية مع Claude Design · من نظام التصميم إلى موقع حي [اللقاء 25].

تنتج معظم أدوات التصميم بالذكاء الاصطناعي نتيجة واحدة جميلة، ثم عندما تطلب نتيجة أخرى، ستخرج بأسلوب مختلف تماماً. ألوان مختلفة، خط مختلف، شعور آخر. بالنسبة للعلامة التجارية، هذا كارثة، لأن العلامة التجارية تعتمد على الاتساق. في اللقاء 25 من AI Master Club، استعرضنا Claude Design، أداة التصميم الجديدة من Anthropic (نفس الشركة خلف Claude Code). ما يميزها هو هذه النقطة بالتحديد: تقوم ببناء Design System مرة واحدة (الشعار، الألوان، الطباعة، الأزرار، لغة التحدث)، وكل ما تنتجه بعد ذلك · عرض تقديمي، صفحة هبوط، دائرة عرض لانستغرام، نموذج أولي لتطبيق · يخرج محملاً بهوية العلامة التجارية وموحداً، كما لو أن مصمماً واحداً جلس للعمل على كل شيء. في اللقاء، رأينا ذلك قيد العمل: قمنا بنسخ اللغة التصميمية لعلامة تجارية كبرى بدقة مزعجة، وبنينا صفحة هبوط لمخبز من الصفر، وجلبنا عشرات الصور من موقع حقيقي باستخدام Firecrawl، وفي النهاية أخذنا نموذجاً أولياً وحولناه إلى موقع حي على الشبكة. كل ذلك بلغة طبيعية، دون كتابة سطر برمجي واحد. يجمع هذا الدليل كل ما مررنا به، خطوة بخطوة.

ما سيكون بحوزتك في نهاية الدليل

• ما هو Claude Design، أين يتم تسجيل الدخول إليه، وما الفرق בינו وبين أي أداة تصميم أخرى
• كيفية بناء Design System · قلب العملية بأكملها · بـ 3 طرق حسب مستوى الخبرة
• كيفية إنتاج عرض تقديمي، صفحة هبوط ودائرة عرض لانستغرام تحمل جميعها نفس اللغة التصميمية
• العرض الحي: بناء صفحة هبوط لمخبز من الصفر، بما في ذلك أسئلة الدقة التي يطرحها Claude
• تدفق الصور الحقيقية من أي موقع باستخدام Firecrawl، ودمجها تلقائياً في التصميم
• كيفية تحويل نموذج أولي إلى موقع حي على الشبكة · Claude Code و Vercel و Supabase
• أهم نصيحة في اللقاء: كيف لا تحرق حد الرموز (Tokens) خلال نصف ساعة

ما هو Claude Design وأين يتم الدخول إليه

انتبه إلى ثلاث نقاط قبل البدء: يتطلب Claude Design اشتراكاً مدفوعاً في Claude (لا توجد إمكانية وصول مجانية)، وهو يعمل حالياً في المتصفح فقط، ولديه عداد رموز منفصل ومحدود عن الاستخدام العادي لـ Claude. يتم إعادة تعيين هذا العداد كل 5 ساعات. يمكنك التحقق منه عبر الدائرة في الأعلى، ثم Settings وبعدها Usage. تم بناء الدليل بأكمله حول هذه النقطة: كيف تستخرج الحد الأقصى من الأداة دون إهدار الرموز.

Design System · قلب العملية بأكملها

3 طرق لبناء Design System

• عبر Claude Code (موصى به، يوفر أكبر عدد من الرموز): اطلب من Claude Code بناء Design System من موقع الويب الخاص بك، والصور، والشعار، والخطوط. عند الانتهاء، قم بتشغيل أمر الـ slash بكتابة /Design واختيار Design Sync، وسيقوم بسحب كافة الملفات ونقلها تلقائياً إلى Claude Design. سيظهر هناك نظام جديد أسفل مربع الدردشة، ومن ثم تمنحه اسماً.
• مباشرة داخل Claude Design: ادخل إلى Projects، ثم Design Systems، ثم Create Design System وبعدها Create Here. أدخل موقع الويب (إن وجد)، ارفع ملف Figma (للمصممين)، اضغط على Browse وألقِ بكل ما يخص التصميم لديك · الشعار، الصور، المنشورات من الشبكات الاجتماعية. في حقل Any other notes أعطِ توجيهاً لفظياً (على سبيل المثال، أنا أحب الأزرق، أريد أن يكون كل شيء بتدرجات اللون الأزرق). أعطِ اسماً واضغط على Generate. تستغرق المعالجة حوالي 5 دقائق.
• النسخة الاقتصادية، مع أي نموذج لغة: امنح ChatGPT موقعاً أو مرجعاً، واطلب منه صياغة Design System كملف PDF، وقم بإدخاله إلى Claude Design. أقل دقة من الطريقتين السبقيتين، لكنه يعمل عندما لا يكون لديك codebase.

موجه (Prompt) لبناء Design System في Claude Code

أريدك أن تبني لي Design System كاملاً لعلامتي التجارية. المصادر: [ألصق هنا رابط موقع الويب الخاص بك، أو اسحب الشعار، الخطوط، لقطات الشاشة والمنشورات من الشبكات الاجتماعية]. قم استخراج وتحديد: لوحة الألوان مع رموز دقيقة، الطباعة (الخطوط، الأحجام، السماكة، التسلسل الهرمي)، شكل وحجم الأزرار، لغة التحدث والنبرة (بما في ذلك استخدام اللغة العبرية)، عبارات الحث على اتخاذ إجراء، وسياسة الرموز التعبيرية (Emoji). عند الانتهاء، قم بتشغيل /Design واختر Design Sync لنقل كل شيء إلى Claude Design.

العرض التوضيحي الأول · نسخ اللغة التصميمية لعلامة تجارية كبرى

موجهات (Prompts) لإنتاج مخرجات تحمل هوية العلامة التجارية

عرض تقديمي: أنشئ عرضاً تقديميّاً حول [الموضوع، على سبيل المثال مجموعة عام 2026 الجديدة، بناءً على Design System الذي أرفقته والصور المرفقة]. صفحة هبوط للمنتج: أنشئ صفحة هبوط تشرح هذا المنتج [أرفق صور المنتج]، بناءً على Design System. دائرة عرض (Carousel) لانستغرام: أنشئ لي دائرة عرض لانستغرام حول [الموضوع]، بناءً على Design System. سلسلة من الشوائح بنفس اللغة التصميمية.

نصيحة محتوى تساوي ذهباً: دوائر العرض (Carousels) هي واحدة من أكثر التنسيقات انتشاراً ورواجاً اليوم. تروج منصتا انستغرام لينكد إن للمنشورات التي تحتوي على أكثر من صورة بكثير مقارنة بصورة واحدة. الآن بعد أن أصبح بإمكانك إنتاج دائرة عرض تحمل هوية العلامة التجارية في دقيقة واحدة، فلا توجد حجة لعدم رفع واحدة كل أسبوع.

التعديل اليدوي · سر توفير الرموز

العرض التوضيحي الثاني · صفحة هبوط لمخبز من الصفر

موجه صفحة هبوط من الصفر (مع أسئلة الدقة)

أنشئ لي صفحة هبوط لـ [نوع النشاط التجاري، على سبيل المثال مخبز بوتيك]. قبل أن تبدأ في التصميم، اطرح عليّ جميع الأسئلة التي تحتاجها للدقة: اسم النشاط التجاري، الأجواء والأسلوب المطلوب، لغة النص، المنتجات أو الخدمات، ما هو الإجراء الرئيسي الذي أريده من الزائر، وكم عدد النسخ المراد إنتاجها. بعد أن أرد، قم بنناء الصفحة. إذا كانت الصور ناقصة، أشر لي بمكانها، وسأقوم بوضعها داخلها عبر Browse Files.

تدفق الصور الحقيقية باستخدام Firecrawl

نادي AI Master يفتح لك الأبواب: لقاء حي كل أسبوع، تسجيلات ومجتمع. 47 شيكل شهرياً، الإلغاء في أي وقت.

موجهات Firecrawl + تضمين الصور

تنزيل الصور (في Claude Code): استخدم Firecrawl لتنزيل جميع الصور من هذا الموقع: [ألصق رابط الموقع]. احفظها في مجلد فرعي داخل المشروع. التضمين في التصميم (في Claude Design، بعد Browse Files): ضع الصور ذات الصلة على الموقع، في كل مكان تكون فيه الصورة ناقصة. اختر لكل مكان الصورة الأكثر ملاءمة.

الرسوم المتحركة، التعديلات الدقيقة (Tweaks) المؤثرات

من النموذج الأولي إلى موقع حي · Claude Code و Vercel و Supabase

موجه البناء والنشر (لـ Claude Code / Codex)

I want you to build this website from the attached HTML / project files. Match the design exactly. First run it locally so I can review it. Once I approve, upload it to Vercel and give me the live link. If the site needs to store data (emails, reviews), connect Supabase as the database.

لماذا هذا مهم للنشاط التجاري: صفحة هبوط مثل تلك التي بنيناها للمخبز تكلف لدى مصمم عادي حوالي 1,000 شيكل، ولدى مصمم متطور حوالي 3,000 شيكل. هنا قנית ببنائها بنفسك في غضون دقائق، محملة بهوية العلامة التجارية، ومع إمكانية النشر على شبكة الإنترنت. هذا لا يستبدل مصمماً محترفاً لكل مشروع، ولكنه لمعظم الاحتياجات الجارية للنشاط التجاري الصغير أكثر من كافٍ.

جميع الأدوات من اللقاء

موطن Claude Design و Claude Code. يتطلب اشتراكاً مدفوعاً. لوحة التصميم متوفرة حالياً في المتصفح فقط

وكيل يتصفح أي موقع وينزل الصور والنصوص. يتصل بـ Claude كـ Skill ويوفر الرموز. توجد خطة مجانية

نشر الموقع على شبكة الإنترنت ورابط للمشاركة. يتصل به Claude Code بنقرة واحدة. خطة مجانية سخية

قاعدة بيانات للموقع · تخزين رسائل البريد الإلكتروني، النماذج والآراء. يتصل بـ Claude Code. خطة مجانية سخية

أداة Google لتصميم النماذج الأولية، التي قارناها بها في اللقاء. نتائج عامة أكثر من Claude Design

الدليل الشامل لجميع إمكانيات Claude Design، بما يتجاوز ما تم تغطيته في هذا اللقاء

أسئلة طرحت في اللقاء

لا. يتطلب اشتراكاً مدفوعاً في Claude. كما أن رموزه منفصلة ومحدودة عن الاستخدام العادي، ويتم إعادة تعيينها كل 5 ساعات. في المقابل، تقدم Vercel و Supabase، اللتين يلزم توفيرهما لرفع موقع حي، خطة مجانية سخية.

إنه يشبه Brand Book ولكنه أكثر شمولاً. بالإضافة إلى الألوان والخطوط، فهو يتضمن أيضاً المكونات والرموز، مما يتيح ترجمة العلامة التجارية مباشرة إلى العالم الرقمي والتطبيقات. هذا هو أول شيء يتم بناؤه، وهو ما يضمن خروج كل منتج محاملاً بهوية العلامة التجارية وموحداً.

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

بالتأكيد. اضغط على Edit ليصبح النص قابلاً للنقر والتعديل اليدوي. يمكنك أيضاً التصدير إلى PDF، فيديو، PowerPoint أو HTML. التوصية هي التعديل يدويّاً داخل Claude Design بدلاً من طلب كل تغيير صغير من الوكيل، لأن التعديل اليدوي يوفر قدراً هائلاً من الرموز.

قم بتصدير التصميم كـ HTML أو ZIP، واصطحبه إلى Claude Code أو Codex، ليقوم ببناء الكود ورفعه إلى Vercel الذي يمنح رابطاً حياً. إذا لزم الأمر تخزين معلومات من الموقع، قم بربط Supabase كقاعدة بيانات. يمكنك أيضاً ربط نطاق (Domain) خاص بك.

يمكن ذلك، فهناك موصل وMCP لووردبريس. لكن التفضيل في اللقاء كان البناء بواسطة Claude والنشر على Vercel، لأن العمل مع ووردبريس أكثر تعقيداً مقارنة بالتدفق السلس لـ Claude Code وVercel.

من Firecrawl أنفسهم. فهي توفر مقطع برمجي يتم تثبيته مرة واحدة في Claude Code، ومن, ثم تصبح المهارة متاحة في كل جلسة. لديهم أيضاً مسار مجاني يكفي لمعظم الاحتياجات.

نعم، Claude Design هو أداة تعاونية. إذا كان لدى كل فرد في الفريق حساب في Anthropic، فيمكن للجميع العمل على نفس المشروع. يمكن تحديد نظام تصميم افتراضي للمؤسسة، فضلاً عن نظام تصميم منفصل لكل عميل.

وماذا في اللقاء القادم

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

أسئلة متكررة

هل Claude Design مجاني؟

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

ما هو نظام التصميم (Design System) وهل يشبه كتاب العلامة التجارية (Brand Book)؟

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

كيف يتم استخراج نظام تصميم من موقع ليس ملكاً لي، مثل علامة تجارية كبرى؟

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

هل العرض التقديمي والصحة قابلان للتعديل بعد إنشائهما؟

بالتأكيد. بالنقر على Edit يصبح كل النص قابلاً للنقر للتعديل اليدوي. يمكن أيضاً التصدير إلى PDF أو فيديو أو PowerPoint أو HTML. التوصية هي التعديل يدويًا داخل Claude Design بدلاً من طلب كل تغيير صغير من الوكيل، لأن التعديل اليدوي يوفر الكثير من الرموز.

كيف يتم تحويل النموذج الأولي (Mockup) إلى موقع حي مع نطاق واستضافة؟

يتم تصدير التصميم كـ HTML أو ZIP، وأخذه إلى Claude Code أو Codex، ليقوم ببناء الشيفرة ورفعها إلى Vercel الذي يمنح رابطاً حياً. إذا دعت الحاجة لحفظ معلومات من الموقع، يتم ربط Supabase كقاعدة بيانات. يمكن أيضاً ربط نطاق خاص بكم.

هل يمكن رفع ذلك إلى موقع ووردبريس قائم؟

يمكن ذلك، فهناك موصل وMCP لووردبريس. لكن التفضيل في اللقاء كان البناء بواسطة Claude والنشر على Vercel، لأن العمل مع ووردبريس أكثر تعقيداً مقارنة بالتدفق السلس لـ Claude Code وVercel.

من أين يتم جلب مهارة Firecrawl؟

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

هل يمكن العمل على ذلك ضمن فريق؟

نعم، Claude Design هو أداة تعاونية. إذا كان لدى كل فرد في الفريق حساب في Anthropic، فيمكن للجميع العمل على نفس المشروع. يمكن تحديد نظام تصميم افتراضي للمؤسسة، فضلاً عن نظام تصميم منفصل لكل عميل.