الفكرة والتحدي (00:00)
يوضح Abdul Osama (عبدول أسامة) أن بناء متجر صغير للمنتجات اليدوية يبدأ بفهم ما يميز الفنانة، لا بمجرد نقل صور حسابها إلى صفحة جديدة. في هذا المشروع، أراد تقديم مجسمات تصنعها فنانة بنفسها بصورة احترافية، وإتاحة طريق واضح لمن يريد قطعة موجودة أو فكرة مخصصة. عرض العمل بوصفه بناءً سريعًا، لا قالبًا يضمن النتيجة نفسها لكل مشروع.
بدأت الفكرة بعد أن صنعت له الفنانة مجسمًا مخصصًا أعجبه، وطلبت مساعدته في التسويق. رأى أن الطابع الشخصي في عرض أعمالها ميزة من حيث القصة، لكنه قد يجعل الزائر لا يرى القطع بوصفها منتجات يمكن طلبها. لذلك جمع بين تحسين الصور، ومتجر مصغر، وتجربة تساعد العميل على تصور طلبه.
ذكر Claude، وهو مساعد ذكاء اصطناعي للمحادثة وصياغة الخطط، وCloudflare، وهي منصة لخدمات استضافة المواقع وتشغيلها، وGitHub، وهي خدمة لحفظ نسخ مشروعات البرمجة وتتبع تغييراتها. وضع GitHub ضمن إعداده للاحتفاظ بنسخة من الكود، لكنه لم يعرض إعداد النسخ الاحتياطي بالتفصيل.
فهم المشروع وكتابة أول طلب (01:43)
كانت نقطة البداية صورًا التقطها من حساب الفنانة، مع شعارها. في طلبه الأول إلى Claude، وصف الفنانة ومنتجاتها اليدوية، وذكر أنها تعيش في تركيا وتستهدف عملاء هناك، وأن المتجر المقترح ينبغي أن يدعم العربية والإنجليزية والتركية. شرح المشكلة كما يراها: الصفحة تبدو شخصية أكثر من كونها متجرًا، بينما تستحق المنتجات صورًا تُظهر تفاصيلها وجودة تنفيذها.
طلب مسارين للشراء: يختار الزائر مجسمًا سبق صنعه ويطلب شيئًا مشابهًا، أو يكتب فكرته ويرفع صورة إن أراد، ثم يرى تصورًا لها قبل التواصل مع الفنانة عبر WhatsApp، وهو تطبيق مراسلة، أو رسائل Instagram، وهي منصة لمشاركة الصور والمحتوى. طلب أيضًا أن تكون التجربة بسيطة وسريعة البناء.
راجع معه Claude حدود الفكرة قبل التنفيذ. أشار إلى أن بعض المجسمات المستوحاة من شخصيات مملوكة لأطراف أخرى قد لا تصلح لعرضها في الكتالوج، وإلى ضرورة استبعاد صور الأطفال الظاهرة في بعض المنشورات. كما أوضح أن توليد الصور يحتاج إلى واجهة برمجية ومفتاح يُحفظ بعيدًا عن واجهة الزائر. كانت هذه ملاحظات للتعامل معها، وليست تأكيدًا بأن مراجعة الحقوق أو الصور اكتملت.
بناء الهوية البصرية (06:08)
قبل كتابة المتجر، طلب نظامًا بصريًا: ألوانًا وخطوطًا وأسلوبًا للعناوين والأزرار والعناصر الصغيرة. استند Claude إلى الصورة التعريفية والشعار اللذين قدمهما له. أعجبته بداية الألوان، لكنه لم يقبل الاقتراح الأول كما هو؛ طلب خطًا يوحي بالكتابة اليدوية لأن المنتجات مصنوعة يدويًا، ومجموعة أيقونات مناسبة، ثم راجع مثالًا عربيًا من التصميم.
الدرس هنا ليس اختيار خط زخرفي لمجرد الزينة. أراد أن تشير الكتابة والألوان والصور إلى الفكرة نفسها: قطعة يصنعها شخص بعناية. لذلك عاد إلى النظام البصري بطلب تعديل محدد بدل أن يطلب إعادة التصميم من الصفر. هذا النظام أصبح مرجعًا للصور والواجهة في المراحل التالية.
الانتقال إلى Claude Code (07:44)
Claude Code أداة برمجة تعمل على ملفات المشروع ويمكنها قراءة التعليمات وتعديل الكود. بدأ Abdul المحادثة في Claude، ثم احتاج إلى نقل سياقها إلى مشروع فعلي على جهازه. أنشأ مجلدًا للمشروع، وطلب إعداد الملفات التي تلخص العمل السابق، بما فيها تعليمات المشروع والنظام البصري والصور. لم ينجح الانتقال التلقائي إلى بيئة العمل بالطريقة التي تخيلها، ففتح بنفسه بيئة محلية في Claude Code واختار المجلد.
- جهّز مجلدًا واحدًا يجمع وصف النشاط والهوية والمواد المتاحة.
- افتح المجلد في بيئة Claude Code بدل افتراض أن المحادثة وحدها أنشأت موقعًا.
- اطلب من الأداة قراءة الملفات وطرح الأسئلة التي قد تمنع التنفيذ.
أوضح أنه كان يستطيع بدء المشروع من Claude Code مباشرة. انتقاله عبر المحادثة كان نتيجة تطور الفكرة أثناء العمل، لا خطوة إلزامية لكل شخص يبني متجرًا.
صور المنتجات وتجهيز التنفيذ (11:05)
بعد فتح المشروع، طلب من Claude Code مراجعة ما ينقصه، بينما يجهز صورًا لعدد من المنتجات الموجودة. خطته كانت إعادة تقديم القطع في بيئة تصوير استوديو موحدة، بألوان مستمدة من الهوية، مع صور تقرب تفاصيل كل منتج. ذكر Magnific بوصفه أداة مرتبطة بتحسين الصور وتوليدها، وذكر Higgsfield ضمن خيارات العمل على صور المنتجات. كما ناقش استخدام واجهة برمجية للصور، لكن التسجيل لا يحدد بوضوح أي خدمة أنتجت كل صورة معروضة.
طلب صورًا متعددة للقطعة الواحدة، مع احتمال أن تُظهر صورة إضافية التغليف بوصفها هدية. في المقابل، كان لا يزال يحتاج إلى أسعار المنتجات وبيانات التواصل المناسبة، فلم يعامل المحتوى الناقص كأنه جاهز للنشر. اختار أمثلة من أعمال الفنانة كي يختبر أسلوب التصوير أولًا، ثم يبني عليه بقية العرض.
الناس بتشتري بعينيها. — عبدول أسامة
قصده في سياق الفيديو أن صورة المنتج تؤثر في كيفية إدراك قيمته. لكنه لم يطلب تغيير شكل المجسم الحقيقي أو إخفاء طبيعته اليدوية؛ أراد تقديم العمل الموجود بإضاءة وخلفية وتفاصيل أوضح.
تحديد الجمهور وتجربة العميل (14:47)
شرح لـClaude Code أن الجمهور ليس الأطفال وحدهم. قد يطلب بالغ هدية لطفل، وقد يطلب شخص بالغ مجسمًا يعبر عن اهتمامه الشخصي. استخدم المجسم الذي صُنع له مثالًا على قطعة مخصصة أصبحت جزءًا من حضوره كصانع محتوى. هذا التفريق مهم للنصوص والصور ومسار الطلب: الزائر لا يبحث بالضرورة عن لعبة جاهزة، بل عن قطعة لها معنى لديه.
وصف العمل اليدوي بأنه يستغرق من الفنانة وقتًا وعناية، وأراد أن يشعر الزائر بذلك في التغليف والعرض وصفحة المنتج. لذلك فضّل صفحة هبوط ومتجرًا صغيرًا يشرحان التجربة بوضوح، بدل موقع واسع الأقسام لا يحتاجه المشروع في هذه المرحلة. بقي السؤال العملي: كيف ينتقل الزائر من الإعجاب بفكرة مجسم إلى إرسال طلب تستطيع الفنانة متابعته؟
توليد الأفكار واستقبال الطلبات (18:55)
اقترح تجربة يكتب فيها الزائر ما يتخيله أو يرفع صورة مرجعية، ثم يرى صورة تصور الفكرة بأسلوب قريب من منتجات الفنانة وفي بيئة العرض نفسها. لم يرد أن تكون النتيجة صورة منفصلة عن بقية المتجر. وطلب حفظ بيانات الطلبات والتصورات في لوحة تستطيع الفنانة الرجوع إليها.
حدد ثلاثة مسارات واضحة:
| مسار الزائر | ما يفعله | ما يصل إلى الفنانة | | --- | --- | --- | | التواصل المباشر | يختار الحديث عبر WhatsApp | محادثة تحتاج إلى متابعة | | طلب قطعة موجودة | يختار المنتج ويقدم بيانات التواصل | طلب مرتبط بالقطعة المختارة | | فكرة مخصصة | يكتب الوصف أو يرفع صورة، ثم يطلب تصورًا | بياناته وفكرته والتصور الناتج |
في المسار المخصص، طلب الاسم ورقم WhatsApp قبل إرسال طلب توليد الصورة، بعد أن يكون الزائر قد كتب فكرته. رأى أن هذه اللحظة أنسب من طلب البيانات فور دخول الصفحة. وأراد لوحة خلفية بسيطة تجمع الطلبات لتتابع الفنانة أصحابها بنفسها. عرض ذلك كتصميم لمسار التحويل، ولم يقدم أرقامًا تثبت زيادة الطلبات أو المبيعات.
نتيجة صور المنتجات (22:50)
عرض نتائج أولية لصور منتجات بخلفية وألوان متسقة مع الهوية، وأعجبه أنها جعلت القطع تبدو أقرب إلى كتالوج منظم. أكد أن القطع نفسها من أعمال الفنانة؛ التغيير المقصود هو طريقة تقديمها. بالنسبة إليه، أصبحت الصور مادة مناسبة لصفحات المنتجات ويمكن أيضًا الاستفادة منها في منشورات Instagram.
أنا بس عارف إحنا عايزين إيه. — عبدول أسامة
جاءت العبارة وهو يشرح أنه لم يحتج إلى كتابة أوامر تصوير معقدة؛ حدّد الهدف، وراجع الناتج في ضوء هوية المتجر. ومع ذلك، لم يعرض في هذه المرحلة كتالوجًا مكتملًا لكل أعمال الفنانة. الصور الأولية كانت اختبارًا للأسلوب الذي يريد تعميمه.
بناء المتجر واللغات (24:43)
انتقل إلى البنية اللازمة للمتجر: تسجيل دخول الفنانة باستخدام Google، وهي خدمة حسابات يمكن استخدامها للمصادقة؛ ومفتاح لخدمة صور مرتبطة بـOpenAI، وهي شركة تقدم نماذج وواجهات ذكاء اصطناعي؛ وقاعدة بيانات بسيطة ضمن إعداد Cloudflare لحفظ الطلبات. أوضح أن لديه بنية قائمة استخدم أجزاء منها، ولم يعرض إعدادها لأنها تتضمن معلومات شخصية. لذا فالفيديو يشرح قرارات البناء أكثر مما يقدم تعليمات جاهزة لنسخ هذا الإعداد التقني.
طلب واجهة إدارة باللغة العربية لأن الفنانة تفضل استخدامها. أما واجهة المتجر للزوار فخطط لها بالعربية والتركية والإنجليزية، على أن يبدأ بتصميم النسخة العربية ويوافق عليها قبل نقلها إلى اللغتين الأخريين. كما أراد رؤية التصميم ومراجعته قبل إكمال النشر. هذه الأولوية تقلل احتمال ترجمة واجهة ما زالت تتغير.
مراجعة التصميم العربي (26:08)
راجع الصفحة العربية وهي تُبنى: الخط اليدوي، والألوان، وصور القطع، ومنطقة البداية التي تظهر للزائر أولًا. أعجبه اتجاه التصميم، لكنه لم يقتنع تمامًا بالقسم الأول. طلب إبقاء دعوة الزائر إلى وصف فكرته أو رفع صورة، مع إبراز مجسم واحد بوصفه المنتج الرئيسي المعروض في هذا القسم.
كانت المراجعة محددة: ما الذي يجب أن يفهمه الزائر من أول نظرة، وأين يرى مثالًا حقيقيًا على مستوى العمل؟ لم يكتفِ بالقول إن التصميم جميل أو غير جميل. أوضح كذلك أن البناء السريع لا يمنع التحسين المتدرج؛ قبول اتجاه الصفحة لا يعني أن نصوصها ومسارها انتهيا.
إدارة المنتجات وتحسين التجربة (27:30)
وسّع لوحة الإدارة حتى تستطيع الفنانة إضافة منتجاتها وتغيير أسمائها وأسعارها من دون العودة إليه مع كل تحديث. تصور مسارًا ترفع فيه صور القطعة الحقيقية، ثم تُجهز لها صور عرض متسقة مع الهوية، لتستخدمها في المتجر وفي محتوى Instagram. وطرح مسارًا آخر للأفكار التي لم تُنفذ بعد: يمكن تقديم الفكرة للزوار ثم صنعها إذا طلبها أحد، مع إبقاء الفرق واضحًا بين نموذج الفكرة والقطعة المصنوعة.
ذكر GSAP، وهي مكتبة لتحريك عناصر صفحات الويب، بوصفها خيارًا لإضافة حركة خفيفة إلى التصميم. لم يجعل الحركة الهدف الأساسي؛ بقي التركيز على وضوح المنتج وسهولة الطلب. وأعاد التأكيد على اتساق طريقة تقديم الصور، لأن تبديل الأسلوب البصري بين منتج وآخر يضعف إحساس الزائر بأنه داخل متجر واحد.
اختبار الطلب وصفحات المنتجات (30:46)
بعد بناء الصفحة، جرّب وصف فكرة لمجسم ليتحقق من التسلسل الذي يراه الزائر. ظهر طلب الاسم ورقم WhatsApp، مع نص للموافقة على الاحتفاظ بالبيانات والفكرة والصورة من أجل التواصل بشأن القطعة. كما فتح صفحة أحد المنتجات وراجع شكلها، ثم عاد إلى لوحة الإدارة وتسجيل الدخول باستخدام Google.
لاحظ أن تعديلًا أثناء البناء أضعف جزءًا من الصفحة كان أفضل سابقًا. بدل قبول التراجع، طلب إعادة عرض خطوات العملية بصورة أوضح، مع تحسين الجزء السفلي من الصفحة وإضافة حساب Instagram. هذه مرحلة مهمة في استخدام أدوات البرمجة بالذكاء الاصطناعي: الناتج الجديد ليس دائمًا أفضل من السابق، ويحتاج إلى مراجعة على الهاتف وسطح المكتب وإلى اختبار مسار الطلب نفسه، لا الاكتفاء بصورة للواجهة.
الإطلاق والنتيجة النهائية (32:34)
في الختام، عرض متجرًا مصغرًا وصفحة منتج ولوحة إدارة، وقال إنه اختبر مسار الطلب ويواصل تعديل النصوص والتفاصيل. رأى أن العرض أصبح أنظف من الصفحة الأولية، مع إقراره بأن المنتجات لم تُضف كلها وأن التطوير يمكن أن يستمر. ذكر استخدام الصور الناتجة في Instagram، وتحسين عرض المنتجات بمحتوى متتابع، ثم توجيه الجمهور إلى المتجر.
بالأرقام
- خطط لإتاحة واجهة المتجر بثلاث لغات: العربية والإنجليزية والتركية.
- طلب نحو 3 إلى 4 صور لكل منتج عند تجهيز العرض.
- وصف مدة صنع بعض القطع اليدوية بأنها نحو أسبوعين إلى ثلاثة أسابيع.
- قدّم البناء كتحدٍ سريع، ثم قال إن العمل مع الاختبار استغرق نحو ساعة؛ لم يقدم توقيتًا واحدًا ثابتًا لجميع المراحل.
ما الذي تطبقه على مشروعك؟
ابدأ بتعريف المنتج والجمهور وما ينقص طريقة عرضه. جهّز هوية وصورًا مرجعية، ثم اطلب من أداة البرمجة أسئلة العوائق قبل التنفيذ. اجعل للزائر مسارًا مفهومًا من الفكرة إلى الطلب، ولصاحب المشروع وسيلة لتحديث المنتجات ومتابعة العملاء. قبل النشر، راجع حقوق الشخصيات والصور، ودقة الأسعار، وموافقة العميل على استخدام بياناته، واختبر الطلب فعليًا. هذه قائمة عمل مستخلصة من المثال، لا ضمانة لزمن بناء أو نتيجة تسويقية محددة.