ينفتح الخبز. تظهر المخللات. أضف شريحة جبن أخرى ويتغير البرغر أمامك، مع ظهور الفاتورة أيضاً.وفي مكان آخر، يقوم مشتري بسحب رسم إلى سترة هودي، يرفعه قليلاً للأعلى، ثم يدير المنتج ليرى كيف يبدو. خلف هذه التفاعلات البسيطة، يكون البائع قد قرر بالفعل أين يمكن وضع العمل الفني وحجمه.هذان تجربتا تسوّق مختلفتان تماماً، لكنهما تشتركان في فكرة مفيدة: يمكن تشكيل المتجر حول ما تبيعه، حتى طريقة اختيار الزبون للمنتج.ضعنا نقطتي البداية هذه في مجموعة Modern Shop على GitHub: عينتان، واجهة متجر طعام سريعة ثلاثية الأبعاد، وأداة تصميم منتجات مخصصة. الشيفرة متاحة بموجب رخصة MIT، لذا يمكنك استعراضها وتكييفها والبناء عليها.أحضر فكرتك، علامتك التجارية، وأداة ترميز بالذكاء الصناعي مثل Codex أو Claude Code. هناك بالفعل شيء مثير لتبدأ منه.
An original editorial illustration of the two Modern Shop ideas. Interface shown is conceptual; actual demo screens follow.
لقمات جيلي: دع الزبائن يبنون وجبتهم
ابدأ من العرض الحي لـ Jelly Bites. اختر سندويتشاً، اسحبه لتدويره، وحاول تغيير مكوّن. يستجيب الطعام بهزة لطيفة. ظلّل طبقة فيفتح التكوين لتبرز ما في الداخل.التجربة مرِحة، لكن للتفاعل هدف عملي: يرى الزبون الخيارات التي يتخذها. تصبح المخللات، والصلصة، والجبن، والإضافات أجزاء مرئية من الطلب بدلاً من سلسلة خيارات يجب أن يتخيلها الزبون.مكوِّن بناء البيتزا يأخذ نفس الفكرة في اتجاه آخر: اختر المقاس، العجينة، الصلصة، والإضافات، ثم شاهد شكل البيتزا يتكوّن. فاتورة حية توضح عواقب هذه القرارات فوراً. يعرض النموذج أيضاً خيارات التوصيل أو الاستلام، ورموز العروض الترويجية، وعملية الدفع، وشاشة تتبع الطلب.
Actual Jelly Bites demo capture from the Modern Shop repository. Menu values and checkout behavior are sample data.
هناك تفصيل صغير مهم عندما يغيّر الناس رأيهم. العنصر على منصة البناء هو مسودة حتى يختار الزبون التأكيد. يمكن بعد ذلك إرجاع عنصر العربة إلى مُنشئ ثلاثي الأبعاد وتحريره. هذا النوع من التفاعل يمكن أن يتبناه مطعم ويجعله خاصّاً به.مصدر واجهة متجر الطعام السريع ثلاثي الأبعاد مبني بـ Vue وTypeScript وThree.js. لست بحاجة لمعرفة هذه الأسماء لتجربة العرض الحي. للمطوّر أو وكيل الترميز، تشير هذه الأسماء إلى مشروع متصفح مألوف يمكن تفحّصه وتوسيعه. أشكال الطعام مُولّدة برمجياً، ما يمنحك نقطة انطلاق واضحة لتغيير مظهرها وسلوكها.قد يكيّف مطعم برغر محلي قائمة طعامه بحسب وصفاته وتغليفاته الخاصة — في مصر مثلاً يمكن التركيز على وصفات الشاورما أو البرجر المحلي؛ أو قد تفضل سلسلة بيتزا محلية إبراز توليفاتها المميزة أولاً. يمكنك تغيير الألوان، اللغة، النصوص، خيارات المكونات، وتدفق الطلب ليتناسب مع نشاطك التجاري. العينات تتضمن تخطيطات بالإنجليزية والفارسية كنماذج.حد واحد يجب فهمه قبل الاستخدام في طلبات حقيقية: النسخة الحالية من العرض الحي تستخدم بيانات كتالوج تجريبية، والطلبات المخزنة في المتصفح، وعمليات دفع وتتبع مُحاكية. اتصالها بـ Selldone لم يُنفَّذ بعد. التجربة البصرية جاهزة للاستكشاف؛ لكن فحوصات الكتالوج والأسعار على الخادم، والدفع، والتنفيذ تحتاج إلى تكامل تجارة حقيقي. تجربة الثلاثي الأبعاد تتطلب متصفحاً يدعم WebGL 2، فاختبر التكييف على الهواتف والمتصفحات التي يستخدمها زبائنك.
Mockup Studio: تجربة للبائع وأخرى للمتسوق
متجر تيشيرتات مخصصة يواجه مشكلة مختلفة. يريد الزبون حرية التجربة، بينما يحتاج المطبعة لتصميم مناسب لمساحة الطباعة الفعلية.Mockup Studio يتعامل مع جانبي المشكلة. افتح العرض الحي لمُصمم المنتج وسترى وضعين محددين بوضوح: واحد لمسؤولي المتجر وآخر للمتسوقين.
البائع يحدد القواعد مرة واحدة
في مُنشئ القوالب، يختار البائع المنتج، يضيف صور المنتج، ويحدد منطقة الطباعة. تُخزّن هذه الأبعاد بالملليمتر، مع إعدادات للدقة والـ bleed، أي الأعمال الفنية الإضافية حول حافة القص.يقرر البائع بعد ذلك ما الذي يُسمَح للمتسوق بتغييره: نقل العمل الفني، تغيير حجمه، تدويره مثلاً. يمكن أن تكون لطباعة الصدر حدودها الخاصة، بينما يستخدم الكم مساحة مختلفة. يمكن اختبار القالب من منظور المتسوق قبل تسليمه للتطبيق المضيف.
Actual Mockup Studio seller editor. The merchant defines product views, physical print areas, and customer permissions in this local demo.
يجعل هذا الفصل الفكرة مفيدة لأكثر من تيشيرت واحد. تتضمن معرض العينات تيشيرت، هودي، سويتر، قبعة، كوب، وسادة، وعلامة تعليق. يمكن استخدام أصول ثلاثية الأبعاد مُحضّرة داخل صيغ النماذج المدعومة. لمنتج ذي شكل مختلف، خطّط لتحضير النموذج وخريطة منطقة الطباعة الخاصة به.يمكن للاستوديو أيضاً إنشاء صور منتج أولية من نموذج ثلاثي الأبعاد مُهيأ. هذا يمنح البائع طريقة إضافية لإعداد المشاهد للمحرر أثناء تطوير تجربة المنتج.
الزبون يحصل على مساحة للعب
محرر المتسوق أكثر تركيزاً. ارفع صورة، ضعها، عدّل حجمها، واعرضها على المنتج. قواعد التاجر تبقى سارية بينما يجرب الزبون.توجد عروض ثنائية الأبعاد مبنية على الصور، ورؤية ثلاثية الأبعاد اختيارية يمكن تدويرها. تظهر التغييرات على العمل الفني على النموذج. في المنتجات القابلة للطي المدعومة، تتيح أداة السحب رفع القماش وملاحظة استقراره ثانية. إنها تأثير للمعاينة؛ لا تُمد العمل الفني المُرسَل للطباعة.
Actual Mockup Studio shopper editor, showing uploaded artwork on a rotatable 3D hoodie. Orders and fulfillment still require host integration.
يمر مبدأ واضح عبر المشروع: أحد العروض يُظهر للعميل كيف قد يبدو العنصر. الآخر هو PNG شفاف لسطح الطباعة، باستخدام الأبعاد الفيزيائية والدقة المُعَدّة. يساعد مؤشر جودة الطباعة على شرح كيف ترتبط بكسلات الصورة المصدر بحجمها المختار.لتدفق إنتاج حقيقي، لا يزال المطبعة بحاجة إلى الموافقة على الأبعاد، والألوان، ومتطلبات الملف. التصدير الحالي هو PNG RGB مُعَبَّر عنه في المتصفح، بدون تحويل CMYK أو ملفات تعريف الألوان الخاصة بالمطبعة. الأشكال المولدة للمنتجات هي رسوم توضيحية وليست نسخاً مقاسة بدقة لكل قطعة ملابس قد تبيعها.يحفظ العرض التجريبي أيضاً القوالب والتصاميم محلياً. حفظها في متجر تجاري، إرفاق التصميم الدقيق بطلب، تحصيل الدفع، وإرسال العمل للإنتاج هي خطوات تكامل للمتجر النهائي. أدوات النص/الخطوط، متغيرات المنتج، والسحب المباشر للعمل الفني على السطح ثلاثي الأبعاد من بين الميزات التي لا تزال في خارطة طريق المشروع.
نقطة بداية تغيّر الحوار مع الذكاء الاصطناعي
طلب "ابنِ لي متجراً" يترك كثيراً لوكيل الذكاء الاصطناعي ليتخمينه. أما "استخدم محرر المنتجات هذا، طبّق علامتنا التجارية، واجعل تجربة الزبون تعمل لمطبعتنا" فيعطيه شيئاً ملموساً.
Original editorial illustration of personalized merchandise. Product styling and tablet interfaces are conceptual, not screenshots of Mockup Studio.
أين يناسب Selldone MCP
واجهة المتجر هي الجزء الذي يلمسه الزبائن. خلفها توجد المنتجات، المخزون، المدفوعات، الشحن، والطلبات التي يجب تنفيذها.Selldone MCP يمنح مساعداً ذكياً متكاملاً وصولاً منظَّماً إلى متجر Selldone مخوّل. أثناء عملية البناء، يساعد ذلك الوكيل على العمل مع كتالوج المتجر، المحتوى، والإعدادات المدعومة بدلاً من التخمين ببيانات تجريبية منفصلة. يظل الوصول ضمن المتجر والأذونات التي تختارها.واجهة المتجر المنشورة تحتاج بعد ذلك إلى تنفيذ واجهة Selldone API أو تكامل خدمة حقيقي. MCP يساعد المساعد على القيام بالتطوير والعمل المعتمد في المتجر؛ لكنه لا يحول زر الدفع في النموذج التجريبي تلقائياً إلى تدفق دفع حي.بالنسبة لـ Jelly Bites، يعني ذلك ربط القائمة وتدفق الطلب بخدمات التجارة الحقيقية. وبالنسبة إلى Mockup Studio، يعني ذلك حفظ قالب البائع والتصميم الذي اختاره الزبون بشكل موثوق، ثم الحفاظ على ذلك التصميم مع المنتج والطلب الصحيحين. يمكن أن تبقى تجربة واجهة العميل مميزة بينما توفر Selldone الأساس التجاري.هناك طرق مختلفة للبناء على هذا الأساس. يمكن تخصيص واجهة متجر كاملة عبر سير عمل Selldone Layout، بينما يمكن لتطبيق مخصص أكثر تخصصاً استخدام واجهة أمامية منفصلة. توضح نظرة عامة Selldone Genesis تلك المسارات. الاختيار الصحيح يعتمد على مقدار المتجر الحالي الذي تريد الاحتفاظ به ومدى تميز رحلة الزبون.
امنح ذكاءك الاصطناعي موجزاً أولياً أفضل
يمكنك البدء بالطلب التالي في بيئة الترميز. استبدل الأجزاء بين القوسين بتفاصيل نشاطك:
Inspect the two projects at https://github.com/Modern-Shop and recommend the better starting point for [نشاطي التجاري]. Read its documentation, then clone the chosen project into a new folder. Show which features work today and which need integration. Adapt the customer journey to [علامتي التجارية، منتجاتي، ومتطلباتي], keeping it usable on mobile.
بمجرد اختيار اتجاه، اطلب المرحلة التالية:
Connect the intended Selldone shop through MCP with the permissions this task needs. Plan and implement the real catalog, design-storage where relevant, cart, checkout, and order integration using supported Selldone services. Replace demo assumptions with actual shop data. Test the complete flow and show a preview for review before deployment.
تلك المطالبات هي بداية محادثة بناء. وكيل جيد سيفحص المشروع، يحدد الأجزاء المفقودة، ويعمل عليها معك.لمعلم أول لمطعم، قد تطلب إنجاز طلب واحد كامل: تخصيص عنصر واحد، رؤية السعر الصحيح، الدفع في تدفق الاختبار المدعوم، والتحقق من تلقي الطلب من قبل العمل. بالنسبة لمطبعة، تابع تصميماً واحداً من الرفع إلى المعاينة إلى حفظ العمل الفني الدقيق المرفق بالطلب.هنا أيضاً يمكن لواجهة متجر مخصصة أن تصبح مشروعاً أقل كلفة. يمكن لشيفرة التفاعل القائمة ومنصة التجارة تقليل ما عليك بناؤه من الصفر. تكلفة النهاية تعتمد على التصميم، والتكاملات، والأصول، والاستضافة، والاختبار الذي يحتاجه نشاطك. رخصة MIT تجعل الشيفرة النموذجية قابلة لإعادة الاستخدام؛ لكنها لا تشمل تلك الخدمات مجاناً.
ابنِه بنفسك، أو اعرض الفكرة على فريقنا
سنستمر في تحسين عينات Modern Shop وتطوير المجموعة. يمكنك البدء من النسخ المتاحة الآن، تعديل تجربة كاملة، أو استعارة الجزء الذي يحل مشكلتك الخاصة.إذا رغبت أن يشكّل أخصائيون النتيجة حول علامتك التجارية، يمكنك طلب تقدير واجهة مخصصة من فريق إعداد وتصميم Selldone الرسمي. أحضر العرض الذي تفضله، منتجاتك، والتجربة التي تريد أن يحصل عليها الزبائن. يمكننا تحديد نطاق التصميم والتنفيذ معك قبل بدء المشروع.ربما يبدأ متجرك بسندويتش يُفكّ على الشاشة. أو ربما يبدأ بصورة صغيرة على كوب. افتح العروض الحية، غيّر شيئاً، وانظر أي فكرة تشعر أنها أقرب لنشاطك.استكشف Modern Shop على GitHub · جرّب مُنشئ الطعام ثلاثي الأبعاد · جرّب Mockup Studio
FAQ
ما هو Modern Shop؟
Modern Shop مجموعة من واجهات المتاجر المفاهيمية مفتوحة المصدر صُممت لتعمل مع Selldone. العيّنتان الحاليتان هما Jelly Bites، واجهة متجر طعام سريعة ثلاثية الأبعاد، وMockup Studio، أداة تعديل المنتجات للبائعين والمتسوقين.
هل عينات Modern Shop مجانية للتخصيص؟
نعم. ينشر المشروعان شيفرتهما تحت رخصة MIT. يمكنك استخدام الشيفرة وتعديلها وفقاً لتلك الرخصة، بما في ذلك متطلبات إشعار الرخصة. قد تكون لأعمال التصميم، استخدام الذكاء الاصطناعي، خدمات التجارة، الاستضافة، وتكاملات الإنتاج تكاليف منفصلة.
هل أستطيع استخدام ChatGPT أو Codex لتكييف هذه الواجهات؟
نعم. يمكن لـ ChatGPT المساعدة في تطوير ملخص المشروع، ويمكن لبيئة ترميز مثل Codex فحص المستودع، تحرير المشروع، والمساعدة في اختبار التكاملات. قدّم متطلبات واضحة للمساعد وقم بمراجعة النتيجة قبل النشر.
هل العروض التجريبية مرتبطة فعلاً ببوابة Selldone للدفع؟
لا. يستخدم Jelly Bites بيانات تجارة مُحاكاة، ويعرض Mockup Studio مسارات قوالب وتصاميم محلية. يحتاج المتجر العامل فعلياً إلى التكامل المناسب مع Selldone للمنتجات الحقيقية، والسلات، والمدفوعات، والطلبات، وتخزين التصاميم بشكل دائم.
ما الذي يمكن للعملاء تخصيصه في Mockup Studio؟
يدعم النموذج رفع أعمال فنية على منتجات مثل التيشيرتات والهوديز والقبعات والأكواب ضمن مناطق طباعة يُعدها التاجر. يمكن للعملاء تعديل وضع العمل الفني وحجمه ومعاينته في عروض ثنائية الأبعاد أو في ثلاثي الأبعاد المدعوم. بعض ميزات التحرير المتقدمة لا تزال في خارطة الطريق.
هل يمكن لفريق Selldone تصميم واجهة متجر مخصصة لنشاطي؟
نعم. يمكنك طلب تقدير لإعداد واجهة مخصصة عبر خدمة الإعداد الرسمية لـ Selldone. يراجع الفريق التصميم المقترح، والوظائف المطلوبة، والنطاق، وشروط التسليم قبل بدء المشروع.
شارك أفكارك معنا