# بناء متجر لمنتجات يدوية باستخدام Claude Code > يعرض Abdul Osama (عبدول أسامة) كيف حوّل عرض منتجات فنانة تصنع مجسمات يدوية إلى تجربة متجر تتيح استكشاف القطع وطلب فكرة مخصصة. بدأ بفهم النشاط والهوية البصرية، ثم استخدم Claude Code لبناء الواجهة ولوحة لإدارة المنتجات والطلبات، مع مراجعة التصميم العربي واختبار مسار العميل. - عبدول أسامة (Abdul Osama) — الذكاء الاصطناعي والتسويق والأعمال بالعربي - 5 نوفمبر 2026 - URL: https://abdulosama.com/feed/ai-handmade-store-claude-code-workflow - Video: https://abdulosama.com/feed/video/314 - Instagram: https://www.instagram.com/reel/DfXCTX3NnEy/ - YouTube: https://youtu.be/6cYDmv8iv2Q ## أهم النقاط - ابدأ بفهم ما يميز المنتج اليدوي قبل تصميم المتجر. - استخدم نظامًا بصريًا موحدًا للواجهة وصور المنتجات. - انقل وصف المشروع وملفاته إلى Claude Code قبل البناء. - افصل بين طلب منتج موجود وطلب فكرة مخصصة. - اجعل لوحة الإدارة مناسبة لمن سيضيف المنتجات ويتابع الطلبات. - راجع حقوق الصور والشخصيات وموافقة العميل على حفظ بياناته. - اختبر تجربة الطلب ولا تفترض أن كل تعديل يولده الذكاء الاصطناعي تحسين. ## الفكرة والتحدي (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 واختار المجلد. 1. جهّز مجلدًا واحدًا يجمع وصف النشاط والهوية والمواد المتاحة. 2. افتح المجلد في بيئة Claude Code بدل افتراض أن المحادثة وحدها أنشأت موقعًا. 3. اطلب من الأداة قراءة الملفات وطرح الأسئلة التي قد تمنع التنفيذ. أوضح أنه كان يستطيع بدء المشروع من 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 صور لكل منتج عند تجهيز العرض. - وصف مدة صنع بعض القطع اليدوية بأنها نحو أسبوعين إلى ثلاثة أسابيع. - قدّم البناء كتحدٍ سريع، ثم قال إن العمل مع الاختبار استغرق نحو ساعة؛ لم يقدم توقيتًا واحدًا ثابتًا لجميع المراحل. ### ما الذي تطبقه على مشروعك؟ ابدأ بتعريف المنتج والجمهور وما ينقص طريقة عرضه. جهّز هوية وصورًا مرجعية، ثم اطلب من أداة البرمجة أسئلة العوائق قبل التنفيذ. اجعل للزائر مسارًا مفهومًا من الفكرة إلى الطلب، ولصاحب المشروع وسيلة لتحديث المنتجات ومتابعة العملاء. قبل النشر، راجع حقوق الشخصيات والصور، ودقة الأسعار، وموافقة العميل على استخدام بياناته، واختبر الطلب فعليًا. هذه قائمة عمل مستخلصة من المثال، لا ضمانة لزمن بناء أو نتيجة تسويقية محددة. ## أسئلة وأجوبة ### ما الأدوات الأساسية التي استخدمها في بناء المتجر؟ استخدم Claude لتخطيط الفكرة والهوية، ثم Claude Code للعمل على ملفات المتجر، مع إعداد قائم على Cloudflare. وناقش أدوات للصور مثل Magnific وHiggsfield وخدمة صور مرتبطة بـOpenAI، لكن لا يمكن تحديد الخدمة التي أنتجت كل صورة معروضة. ### كيف يطلب الزائر مجسمًا مخصصًا؟ يكتب فكرته أو يرفع صورة مرجعية، ثم يقدم اسمه ورقم WhatsApp قبل طلب توليد تصور بصري. تُحفظ بيانات الطلب لتتمكن الفنانة من متابعته. ### هل يستطيع صاحب المتجر إضافة المنتجات وتعديل أسعارها؟ طلب Abdul لوحة إدارة باللغة العربية تتيح للفنانة إضافة المنتجات وتعديل الأسماء والأسعار ومراجعة طلبات العملاء، وعرض لوحة أثناء الاختبار. ### هل كانت نسخ المتجر باللغات الثلاث جاهزة في الفيديو؟ خُطط للعربية والإنجليزية والتركية، لكن التنفيذ المعروض بدأ بالواجهة العربية ومراجعتها قبل الانتقال إلى النسخ الأخرى. ### هل أثبت الفيديو أن المتجر زاد المبيعات؟ لا. عرض تجربة بناء واختبارًا لمسار الطلب، ولم يقدم نتائج مبيعات أو مقارنة أداء. ### ما أهم مراجعة قبل نشر صور المجسمات وطلبات العملاء؟ ينبغي التحقق من حقوق الشخصيات المستخدمة، واستبعاد صور الأطفال غير المناسبة للنشر، وتوضيح كيفية حفظ بيانات التواصل والصور والحصول على موافقة العميل. ## المصادر والأدوات المذكورة - [Claude](https://claude.ai) - [Claude Code](https://www.anthropic.com/claude-code) - [Cloudflare](https://www.cloudflare.com) - [GitHub](https://github.com) - [OpenAI](https://openai.com) - [WhatsApp](https://www.whatsapp.com) ## النص الكامل للفيديو طيب بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته اول فيديو لي على اليوتيوب طويل من 4-5 سنين 6 سنين حاجة زي كده بقالي فترة على الانستجرام سنة سنة ونص الحمدلله مكسرين الدنيا وبقينا معروفين بالتسويق والذكاء الصناعي فرقيتش كتير كنا زمان بنتكلم عن التكنولوجيا ودلوقتي بنتكلم عن التكنولوجيا كنا بنتكلم عن الهاردوير بنتكلم عن السوفتوير عينة بقى بروجيكت وتحدي ان شاء الله بإذن الله في اقل من نص ساعة ده اعتبروه ميني كورس مجاني انا جاتلي احد المتابعات كانت عملتلي الدبدوب اللي ورا ده خلينا نورهلكو حاجة تحفة جميلة كده هاند ميد بصوا التفاصيل فانا طبعا بحب كلود جدا وهنعمل لنا دلوقتي شغلة بكلود فطلبتوا منها هاند ميد كوستمائزد وبعتلها الشخصية وعملت هولي تحفة سعر حلو قالتلي انا عايزك تساعدني في التسويق فقررت ان انا اساعدها واعلمكوا سريعا فابتديت وبعدين بعد ما ابتديت قلت والله طب مورني الناس طب مورني الناس فاحنا هنستخدم ايه هنستخدم كلود وكلود فلير والستاب بتاعي في النص فيه اسمه ايه دوات جيتهاب عشان خاطر بس يبقى فيه باكاب للكود طبعا انا عندي كورس التسويق بالذكاء الصناعي كامل 9 ساعات فيه البروسيس ده بالستاب من الاول الاخر الاخر بس هنا هنعمل كويك ترن اروند سريع مع بعض خلينا نمشي كده ايه نرجع انا فتحت الشات بسم الله الرحمن الرحيم ارى لكم اللي انا ابتديته انا خدت سكرينشوتس خدت اللوجو بتاعتها من على الصفحة بتاعتها خدت سكرينشوتس واه ارى لكم البارومت الاولاني اللي انا اديته لها امنتديته الانستجرام وقلت لها قلت له this is رومانا ستور she's an artist she creates these amazing handmade figures she targets customers in Turkey she lives in Turkey Arabic, English and Turkish I'm thinking we do a quick turnaround هنقلب المشروع ده سريعا what I think her problem is is that the page presents itself as a very personal page not necessarily a store that fact the fact that she is an artist and she makes everything handmade herself is amazing من وجهة نظري but still we need these products to stand out I think they can be presented so much better using Higgs field or Magnifique دول تولز بتا image generation طبعا لما اعرفش فيكو Higgs field حاجة عظيمة جدا المكان اللي بيجنريت معظم الارتست AI artist بيستخدموه وانا برضو عندي بديل ليه لذيذ قوي برضو باستخدموه فخلينا نقرأ بقية البرومت all the products need to be recreated and presented in studio environments with the zoomed in detail of the product زي ما كنتوا بقوليكو كده and the fact that these products are handmade and very high quality ideally what I have in mind is a simple store a website with the same domain اللي هو رمانا.store ودخلت اشتريت الدومين على طول هوريكو دلوقتي a person goes in and they understand that this is made with love one artist customized projects they can copy one of the existing figures يعني اختاروا مشروع تاني معمول نعايز زيه and ideas their way or they can go in write down what they would like to make and they upload the picture or they don't instantly they get an image of the figure they imagined or they attach the picture with our style with their style بصراحة I'll give you a picture of the product and its details من الاخر كده then the customer sees the image he likes it and he starts talking to the creator with image through WhatsApp or Instagram DMs I want this to be a quick turnaround quick project I'll buy the domain on Cloudflare it needs to finish within the hour انا حطت لنفسي دلوقتي timeline نص ساعة كمان معاكوا هنا على اليوتيوب او ممكن الفيديو ده ينزل على long form بتاع الانستجرام مش لازم يوتيوب use an API by my API Google login everything انا عندي setup كامل بصراحة مش هقدر اخش في الsetup بقى هنا ده دلوقتي لكن لو انتوا عايزين طبعا الsetup كامل والخطوات كلها موجودة على الكورس الكامل بزاكاء الصناعة التسوية بزاكاء الصناعة تسعة شابترات ماشي فيهم خطوة بخطوة anyway كده هنا فيه شوية حاجات هنضطر ان احنا نعمل لها skip عشان نضيق الوقت we're going to take all these images from Instagram and create المهم بتدى يسألني اسئلة the build علي one page store on Cloudflare pages for the site small worker that calls the API API key stayed on the server تمام catalog is on your top 24 pieces on her grid recreated as studio كذا صح a design your own box مظبوط زي ما قولنا the site runs Arabic, English and Turkish تمام بعدين قال لي three things to flag some pieces shouldn't go in the catalog based on studio owned characters so I'd love those out مش عارف هاصطيه بصراحة دول and كذا كذا دول are based on studio owned characters يعني فيه حاجات من اللي هي عملاهم ليهم حقوق فمش حابب ان هو يحطهم the course posts show children's faces I'd keep those girls' photos off the site صح the live generator needs an API key Higgs field or Magnific قلت له أحديك ال API key بتاعي بتاع OpenAI قال لي it's sore بس معرفتش اسحبها قلت له I'll pick the pieces هاختار لنا الصور مع الانستجرام can you start working on everything else؟ قال لي حاضر بعدين قلت له بقولك let's start with a quick design system بتكلم أنا في الكورس بتاعي الكامل عن أهمية الvisual design المهم رح هو عمل لنا design system ده مبدئياً كده عجبهم نين؟ اديتوا الimage دي يعني بمجرد ما اديتوا الprofile picture بتاعت رمانة.store رح هو carried رمانة handmade character pieces by an artist in Istanbul ابتدى عمل الdesign system بتاعنا اختار الألوان الدهبي بتاعنا شكله إيه الفونت أنا مش عاجبني الفونت ده بصراحة فأنا غالباً هقول لهم عايز handmade font design your own piece ابتدى الhandmade والأشكال والألوان اللي عملها عمل حاجة لذيذة مبدئياً لكن طبعاً أنا دايماً بقول كده مش هاخد الحاجة اللي هو عملها وأقول له خلاص شكراً الله ينور عليك لا هحسن عليها هحسن عليها أوكي so what I need you to do now is we need to enrich رمانة a bit more I feel that it's missing a handwritten font so the primary font can be something that is more handwritten because it will represent the fact that this brand and its products are handmade how about that and then also choose some icon set a nice icon set for the brand and then let me see the latest updates to the design system رمانة.store بعدنا رمانة.store بمعنى ان احنا دلوقتي انا طبعاً cloud بتاعي مربوط بcloudflare بتاعي هقول له الحاجة التانية اللي هقولها له هقول له ان احنا طبعاً أنا دلوقتي ابتديت الكلام فين ابتديت الكلام على cloud chat عايز انقل ده البروجيكت عشان انقل ده البروجيكت اللي هحتاج اعمله ان انا هاجي هنا على الdesktop وهعمل new folder وهسميه رمانة store تمام وهنقل البروجيكت ده من ان هو من ان هو chat هقول له سحبلي الكلام ده كله وحول هولي بقى ايه حول هولي لcloudcode project عشان نبتدي نبني الله عظمه font لذيذ جميل الوان حلو اصلاً هي مختراها فبقى عندنا ايه شكل لذيذ خلينا نبص هل فيه مثال عربي الله حلو قوي الكلام ده حلو قوي الكلام ده صنع يدوياً جميل وعمل حاجة جميلة قبل شوية ايكونات لذيذة لما نحتاجها انا عشان خاطر دي الوقت برضو عشان ما نطولش عليكم هنقول له بسم الله فهقول له ايه good job now let's move this to a cloudcode project I've created a desktop file for the project so go ahead and start a codex هلأ انا قلت له جده والله اول مرة اجرب الحركة دي معاكم هلأ انا قلت له حول هولي لcloudcode وروح على الفايل الفليني هيعمل كده ولا وبقى لcloudcode folder قاله يا عم دخل وعمل كل المطلوب so far cloudmd design system photos كذا كذا كذا to start open the terminal I go start first ask build the site own work per cloudmd can start right away يعني هو معرفش ان هو يروح على cloud فهنروح احنا بنفسنا هنا بقى ونيجي على تشوز environment وهقوم أقول له new environment وهقول له local وهنسميه رمانة store تمام هنchoose the folder وهنقوم جايين له على الdesktop ونختار على رمانة store نقول له open كده احنا اخترنا create environment ترقيت يا سيدي طيب يبقى كده احنا شغالين في رمانة store أول حاجة هقولها له بما انه كده كده الchat بتاعنا اللي هو المبدئي كان على وعلى فكرة كانت الطريقة الأحسن ممكن نبتدي بيها ان انا على طول أكاريت الفايل ده وابتدي من Claude code مش لازم كنت اعمل خطوة بتاعة الchat دي بس انا عشان الحقيقة مكنش متأكد هعمل project ده ولا وبعدين قلت يلا هعمله هصوره ف anyway وصلنا هنا دلوقتي لClaude code وبقى عندنا file رمانة فهقول له okay go ahead and read the project and before you get started because I want this to be a quick turnaround ask me all the essential questions we're going to generate the images I'm gonna get you the images from Instagram we're going to generate the images using the Magnific API existing API I wanna see how the pictures will be recreated like in a studio environment every product needs 3-4 images for the product all the products are existing products that she already created تمام what I need you to do is I'm gonna give you 2-3 products now we need a style a fixed style for her image photography and inspire from the existing brand design colors and all of that so as if she has a studio of her own that's what I imagine and then read the rest of the website project let me know what's missing like I said people will be able to either generate their own product in the home page using a similar image or they can prompt what they'd like to create and then they create a request and send it on WhatsApp that's what I have in mind ask me any questions what could block this from going out in the next hour challenge me so we clean up anything that could block the project with the right questions not too many questions just the right ones please طبعا أنا بتعامل مع أنه هوا ايه ساحر وأننا بس عارفا نعايزيه فهيريض الproject هو خليه هو على ما يريض الproject هنختار حاجات عاجبانة ونعمل لها ايه لو مسكن ده كده وعملنا ازاي جماعة بنسيب الimage هنا طيب احنا هنريح دماغنا خالص ونقوم مسكين كده screenshot اللذيذ ده product جميل و جديد هي قريدي مكتهدة ومصورة أنا مشكلتي بس معاها دلوقتي أنه هو الناس بتشتري بعينيها الناس بتشتري بعينيها فالناس عشان تحس أن الحاجة لها قيمة عايزة تحس أنها معمولة في مكان professional وإحنا نقدر نعمل ده تعالوا نختار أكتر حاجات عاجبانية بصراحة كل شغلها حلو بجد كل شغلها حلو لكن تعالوا مثلا ناخد الكائن الجميل ده شكله لذيذ قوي وطبعا هنحط كلود بتاعنا أنا كلود بتاعي هي اللي عملها زي ما وردتكم في الأول حلو وابتدى يسأل أسئلة جميلة أول سؤال كان فيه أرقام التليفونات ففوتناه عشان نطلع أرقام خاصة تاني سؤال قال لي إيه رأيك what should the fourth image يعني احنا عندنا البرودكت ليه 3 صور على الأقل الرابعة اقترح هو the piece in a craft paper يعني اعتبر عشان نبيع فكرة الهدية اه طبعا الله ينور عليك the prices what should I do until Romana confirms the placeholder بتاع I'll give them now I'll give them now تمام وبعدين which whatsapp number هتردين عليه ماشي هيبتدي يسألني أسئلة تانية طيب مكملين بنرفع الصور هقول له شوية حاجات مهمة جدا في حبيتكم تسمعوها we are targeting not necessarily kids we are targeting adults who are thinking about creating a special lifetime gift for their kid in a birthday or because they like a figure from a cartoon and so on or we could be targeting an adult like myself Abdul Osama and I love the Claude Code figure so I requested it and it became a really interesting piece of my signature as a content creator so we're also targeting adults who want to create their own either a figure an imaginary figure of their own or something that exists that is not sold or they'd like to create a special one time piece for themselves for it so this is something important to keep in mind when you're writing the copy of the website when you're generally designing the user experience and interface to know about the user الcontext ده مهم جدا أنا في الكورس الكبير بتكلم عن موضوع الشخص اللي أنا بستهدفه أول حاجة لما بصيت على الستور بتاعتها بجد يعني وأنا بعمل الخطوة الأولية اللي هي افهم عميلك افهم البزنس بتاعك والعميلك البزنس ده اللي بيميزه مش الكم بيميزه فعلا ان هي حاجة معمولة يعني البروجيكت بياخد من الartist أو الفنانة أسبوعين تلت أسابيع تعمله على مهلها فبتعمله بكل حب فعلا وده يبين جدا في تقدمها للحاجة بعتهاولي في علبة استنى وريكوه كانت بعتالي الكلود ده في ورقة هدية وعلبة والعلبة دي كانت مقفولة بهدية وشغل عالي يعني فهي فعلا كشخص فهي فعلا كartist يعني بتتعب على حاجتها فأنا عايز أبين ده ضروري جدا عايز أبين ده في التقديم بتاع الموقع هو ده مش موقع دي صفحة هبوط وبيع وميني ستور فمهم جدا أن الشخص اللي لما يخش هناك يحس أن ده لا أنا مش دخل أشتري وأطلع أنا مهوس بحاجة بحبها عايز أعمل حاجة معمول عيال مش لعبة بلاستيك عايز حاجة معمولة hand made يفتكرها ابني ولا بنتي فالفكرة دي أنا لازم أقدمها بعد كده لما دخلت بصيت هنا حسيت أنه مشكلة دلوقتي البرزنتيشن أو الطريقة اللي هي مقدمة نفسي بيها أن هي personal قوي تحس أن حد مكتهد وخلاص لا أنا عايز أطلع من حتة أن أنا حد مكتهد لأن الرمانة store ده مكان مميز جدا وأنا بخش أطلب فيه حاجة customized وكمان أنا بساعده في experience ده أنه هو إلى حد ما يcustomize هو بال AI طبعا هنتكلم دلوقتي مع الكلود على أنه هو يطلب اللي هو عايزه وإحنا نطلعه له بشبه المنتجات اللي إحنا بنعملها وده طبعا هو يعمله إزاي هيحط في promptes بتاعة الجنريتور ده أنه لما العميل يطلب منك أي حاجة اديله مثال شبه رمانة في الستوديو environment بتاعة رمانة إلى آخره وهيكلفنا شوية API credit ده حاجات بسيطة قوي يعني سنتات معدودة بس على الجانب الآخر الزائر هيخش يحس أنه هو الله الفكرة دي حلوة قوي يلا طلبها منك فهنزود ما بيعتها كمان لما نيجي نقدم منتجاتها بدل ما تكون متقدمة في شكل personal قوي كده الناس للأسف بتشتري بعينيها هنا أنا بحس أنه آه بنتمكتهد لا أنا عايز أحس أنه واو أنا عايز أطلب دلوقتي البنتي أو ابني أو لنفسي حاجة بس فبديله الcontext بتاع العميل طبعا أنا دلوقتي بخليه حطت له كل الصور كلمته عن Claude كلمته عن الpersona yes so you know the generator in the first fold that is going to ask people to put an image they like of a figure or write down their imagination etc that image gets generated whatever they ask for gets generated like very similar to the figures we already create handmade and it needs to be presented to them in the same studio environment and the same presentation we present our products in that way they can imagine it we also take a record of every generated we keep all the generated user generated data also very important tip here also I want you if anyone wants to generate an image their imagination they start typing we let them type we let them upload image they want and after they type, right before they get it, we first, before we even do that API request, we first ask them for their phone number, their WhatsApp phone number, and name. That way, we have a record in the back end, and I want you to create a very simple back end dashboard for the artist so she can go in and see her customers' requests, either the requests they've requested. Every time someone tries to either talk to us directly on WhatsApp, that's one route. The other route would be they request the product as it is for its price. We ask them for their name and the phone number. Okay, and then that request goes in that back end, or they don't request an existing product. They start typing in what they imagined, or they upload a picture, and before we create that image for them, we ask them for the name and the phone number. That also goes in the back end. What I want is for the artist to be able to go into her back end dashboard and look at requests, either generated by their own imagination or existing products that they've requested. And then she follows up on that on WhatsApp and closes the deals, gets them to pay, etc., etc. زي ما أنتم شايفين، أنا بصراحة لما بجي أشتغل في مشروع، بمشي بالطريقة دي. أنا عرفت المشكلة. ابتديت، قلت للحل إن بقى فيه موقع، الناس بتكتب فيه اللي في خيالها، يطلع لها صورة. طب الشخص دلوقتي هيكتب اللي في خياله، ويطلع صورة ما تعجبوش ويمشي. أنا عايز بياناته. طب أطلب بياناته الأول، وبعدين أخليه يكتب هو متخيل إيه؟ لا، أخليه يكتب هو متخيل إيه الأول؟ وفي اللحظة اللي هو هيستلم فيها الصورة، أقوله الأول هترقمك وإسمك. لأنه في الوقت دي هو involved أكتر. في الوقت ده هو مش هيخلع لأنه حط شوية جهد. ده بقى شوية اسمه conversion optimization. وبعدين قلت لنفسي إيه؟ بدل ما الناس كلها تبعت لها على الواتساب وتسأل وهي تصدع، طب ما إحنا عندي المنتجات وأسعارها أخلي الشخص يrequest. لما يجي يrequest إيه اللي يحصل؟ أقوله بس هترقمك وإسمك وأنا أتواصل معاك. فبالتالي طب الحاجة البيانات دي هتروح فين؟ يبقى البيانات دي هتروح في back end مكان هي تخش عليه داشبورد تشوف كل العملة اللي طلبوا وتتابع معاهم على الواتساب بأرقامهم وأسميهم والمنتجات. بس كده. أنا هوقف عند كده ومش عايز الscope يجبر عن كده عشان ما تفرهضوش مني. وعشان البروجيكت ده المفروض إحنا خصصنا له ساعة. بسم الله. بصراحة الصور اللي طلعها من الأول عبقرية. بجد بجد عبقرية. حاطت رموانة وراء. والbackground البيج بتاعها اللي هي الستايل بتاعتها. شكرا من أول مرة. أنا ولا بعرف أكتب image prompts. أنا بس عارف إحنا عايزين إيه. أنا عايزين نقدم حاجتها بشكل professional أكتر قبل ما هي من الصورة في البيت وشكلها حاجات شخصية قوي. بقى منتج. كلام ده لما يتحط دلوقتي على صفحة وكل product ليه سعره وبتاع الدنيا هتحلو قوي. والزائر لما يخش من هنا ورايح على الصفحة بتاعتها أو على الموقع هيحس إن دي حاجة تانية. والمنتجات دي منتجات بتاعتها فعلا الحقيقة تخيلوا. بس كانت مظلومة أو مدفونة من وجهة نظرية. التسويق بيعمل إيه؟ بيقدم الحاجة حلوة. بعد كده نصرف أدز ورا الكلام ده وتعالى الجمهور المستهدف بتاعنا وبإذن الله بإذن الله نجح بيها. دلوقتي أنا بتديت أشتغل على إن هي فكرة الأدمن بتاعتها فدخلت في شوية technicalities أنو سموقداوات. طبعاً الستاب بليه تفاصيل كتير فعايزين نعمل لها login with Google. عايزين API key بتاع OpenAI عشان الimage generation. وعايز لها database بسيطة على Cloudflare اللي احنا بنشتغل بيه دايماً ونحط عليها حاجتي. فأنا الكلام ده ما عنديش ليه وقت دلوقتي فاستخدمت infrastructure قائم عندي اللي هو عبدالأسماء الwebsite بتاعي. فطبعاً الحتة دي كلها معلومات شخصية فمش هيمفع أطلعها لكم. هنتلع دلوقتي على الجزء more fun في الproject اللي هو إنو خلاص الموقع مرفوع في مكان. هنربطه على الdomain بتاعنا على Cloudflare ونبتدي نحنطف فيه وبكده الproject تخلص ونطلعه بقى إعلانت. فيلا بينا. طيب دخلنا في الحتة بتاعت الwebsite design أنا طلبت منه إنو أنا مش عايزة design على Cloudflare على طول مش عايز أرفع هو بيتطمن إنو طبعاً أنا connected لCloudflare واشتريت رمانة اشتريت رمانة dot store على Cloudflare فأنا دلوقتي عايزة أشوف شكل التصميم طلبت منه قلت له أوكي the next thing I want is المستخدمة الفنانة she prefers Arabic هتستخدم الbackend بتاعها يبقى عربي the website the storefront هيبقى Turkish Arabic and English the backend should be in Arabic the storefront let's start with Arabic storefront ده اللي هو واجهة المتجر هيبقى عربي الأول after we finish the Arabic design and it's approved يعني بعد ما يعمل لي الصفحة العربية وتعجبني وكل حاجة تمام هنخش بقى على إن احنا إيه هنخش على إن احنا نعمل منه النسخة الإنجليزية والتركي ونطلعه رقم الناس تتواصل بالواتساب المش عارف إيه وخلاص خلصت هو دلوقتي بيبتدي بقى إن هو هيعمل لي التصميم وبص عليهم بص عليهم مع بعض نزبط شوية في الصفحة أنا متوقع عشان إحنا ابتدينا صح واخترنا ألوان صح ومشينا الprocess وحضرنا الصور فأنا متوقع إن الخطوة دي the most fun part the building part مش هاخد مننا وقت كبير ولا حاجة وإن شاء الله يطلع حلو من أول مرة وهنستمتع ببناءه عايزة أقول لكم إن هو شغال أنا قاعد بتفرج على تحف بتتعمل بيتست الجيرني كل اللي إحنا قلناه حد زي رمانة ما كتش هتلاقي حد يعمل لها في ساعة ستور زي ده واللي أنا بحاول أعمله كمان في كرسي الماركتينج والAI بتاعي يعلم الناس تعمل الكلام ده لنفسها from A to Z فبصراحة إحنا في زمن جميل بصوا الخط بقى اليدوي العربي والقطع الله الله الله صمم قطعتك القطعة كيف نعمل أسئلة أدي الموقع أنا بس الفرست فولد ده مش عاجبني قوي بفكر كمان أني أنا أحط كلود كhero figure فهقوله الحاجات دي you know the clod figure I gave you in the attached image I want the first fold to yeah say design your own image upload blah blah blah but I want to show one hero product like clod can we do that تعالى بقى نحطه بقى كمان الشخص الجميل ده مش عارف بقى أنا بعمل كده تطلع عظمة دي شوية بقى تفاصيل صغيرة كده أنا دخل بحنتف حاجات زي مثلاً إيه أني الأدمين نفسها تقدر أن هي بعد كده تضيف منتجات عملتها على الموقع بتاعها من غير ما ترجع لي دي حاجة الحاجة التانية ودي حاجة أنا بعملها في كل مواقعي أو الprojects بتاعتي في مكتبة شهيرة مجانية اسمها GSAP فأنت لو عايز الموقع بتاعك يبقى كمان مميز أكتر تقدر تقول للAI خد الجيسب دوت كوم استخدم منه animation الanimation بتاعهم خفيف راقي وفري زمان كان بفلوس في زمن الAI بقى free فجمد جداً جداً جداً free for everyone هون فهيخلي الموقع حي أكتر مكملين في التكناء ما عايزكم بصراحة تفوتوا حاجة مهمة بس دي الحتة في البناء أنا قلت أني عايزها في الأدمين تعرف تلعب في المنتجات تغير في أسعارها تغير في مسمياتها دلوقتي أنا الأدمين بتاع حدها تحول إلى المكان اللي هي هتنشر فيه المنتجات اللي هي عملتها بتنشر المنتجات إزاي؟ أنها هتحط صور المنتجات والAPI بيروح يعيد صناعة المنتج أو يعيد تقديم المنتج يديها صور تنشرها على الإنستجرام وينشر هو على الموقع ويكون ده جاهز للطلب كمان قلت إيه طب ما هي لو عندها أفكار لسه ما عملتهاش تعملها ترسمها بيديها وتقدمها كفكرة عشان لو حد عايزها تعملها له وبرضه في نفس الوقت في الأدمين عندها تقدر أن هي اللهم صلي على سيدنا محمد تقدر أن هي تنشر الفكرة على الإنستجرام وعلى موقعها فلما حد يطلبها تعملها له فتستخدم الباك أند بتاع حدها كأداة إبداعية وتسويقية وطبعاً قلت له أنه هو يلتزم بطريقة التقديم السبطة بتاعتنا في الصور عشان خاطر في الأخر يبليها هوية سبطة في التقديم على الإنستجرام وعلى الموقع بكلم أنا برضه في كورسي بتاعي كتير جداً على الconsistency بت إن شاء الله الصور وهو بيبني الموقع فطبعا إن شاء الله بإذن الله يفرق كتير كتير جدا مع الموقع ده خلاص بيحنا كده في التفنيش يعني أنا دلوقتي بزبط لها في الباك اند وهو يخلص التسكتات دي اللاندينج بيج تعالوا نبص عليها مع بعض سريعا اللاندينج بيج بقت حاجة تفرح كمشروع بسيط خلص في ساعة يعني برضو فيه أحسن طبعا وممكن واحدة واحدة نطور بس احنا دلوقتي الحمد لله نقلناها من صفحة بسيطة جدا إلى موقع لطيف نضيف بس كل المنتجات اللي عندها ومعملش كل المنتجات ونرجع الادمين ونشوف شكله ايه تعالوا نتست أي فكرة هنا كده كائن فضائي جاي يحارب الـ AI أيوة حلو أوي فلما جي هيقولك أين أرسل قطعتك اسمك رقم واتسابك حلو وافق على أن تحتفظ رموني باسمي ورقمي وفكرتي الصورة التواصل معي بشأن هذه القطعة كلام كبير وجميل طب لو فتحنا أي منتج هذه صفحة المنتج الجميلة هذه صفحة المنتج الجميلة واو واو أنا نفسي منبهر يلا احنا كده خلاص بنخلص شغل عالي قوي وحاجة تبسط عايزين نبص على الباك اند مع بعض برضو والجزء ده كان معمول أحلى من شوية وبعدين بوازه برضو الـ AI ساعات بيعمل حاجات حلو وبعدين يبوازها دي مشكلة ممكن ناخد سكرينشوت ده نجي هنا ونقول له this part was done so much better and then you changed it I want the progress I want a moving line cutted line you know with dots possibly not in a straight line something interesting on mobile and desktop so people know what to expect and the process also create a nice footer instead of this empty footer and add the instagram account in the footer what else that's pretty much it for now بس كده لو دوست command enter دايماً في حركة أنه انت تحط حاجة في الكيو لما يخلص اللي بيعمل وياخد الأمر ده بعد كده على فكرة project معمول على sonet 5.5 على tokens دقيقة قليلة قوي ومعمول حلو طيب عملنا login with google للadmin وصلنا للحاجات اللذيذة قوي طبعاً في جزئية ما بتباش حماسية قوي بس مهمة جداً أن انت تtest ودي آخر مرحلة هوريكو دلوقتي هعمل الreveal بس أنا دخلت على الموقع وابتديت اديله تعديلاتي زي ما انتوا شايفين هوا كده الموقع ما شاء الله طلع لذيذ أو بالنسبة لي عجبني عجبني ممكن ما يعجبكوش بس عجبني وعملنا زي process شرح للي هيحصل بعمل بقى تعديلات على التكست مدة التوصيل مش عارف ايه والادمين بتاعها طلع خلاص بقى شغال وبتيست وخلاص كده نقدر أن احنا نقول الحمدلله عملنا لها موقع في خلال نص ساعة ساعة لربع ساعة بالتفاصيل كلها بصراحة ساعة بالتستنج وان شاء الله بإذن الله كده رمانة وضعها بقى احسن هتاخد الصور دي كمان تنشرها على الانستجرام وهتاخد الصور دي تحطها لصحتها كمان سوشيال ميديا شوية ان هي تستخدم الكاروسيلز وتستخدم مؤسرات صوت او غيره عشان الناس تستمتع بان هي تتفرج على المنتجات وتحط اللينك طبعاً بتاع رومانا دوت ستور عندها على الانستجرام فوق في البايو وربنا يفتح عليها وعليكم كلكم يارب تكونوا استفدتوا من هذه الحلقة القصيرة السريعة تابعوني على الانستجرام ولو حبين بقى intense شرح خش على الفول كورس بتاعي عندي كمان كراش كورس كل يوم اول جمعة في كل شهر او تاني جمعة بحددها ساعات يعني لو اول جمعة عريبة قوي بعمل live course 90 دقيقة كراش كورس كده عن marketing with AI وبنعمل بنتكلم في كل المراحل اللي المفروض نمشي فيها طبعاً ده very quick build كل واحد على حسب طبعاً مشروعه وطبيعة شغله ممكن يضطر يبني تفاصيل اكتر بكتير وده طبعاً اللي بنتكلم فيه في الكورس الكامل التسويق بالزكاء الصناعي master course master course التسويق بالزكاء الصناعي من عبدالأسامة انا عبدالأسامة تابعوني عشان تعرفوا كل جديد في الزكاء الصناعي والتسويق اه نسيت اوريكو لصفحة المنتج قبل ما اقفل بس حاجة تحفة اسألني اي سؤال اريد هذه القطعة بياخد رقم تليفونه شكراً بيروح على الادمين عملنا business السلام عليكم --- كُتب هذا النص بمساعدة الذكاء الاصطناعي من الفيديو.