Custom Hub Studio متجر طباعة وتطريز مخصّص داخل مركز CambridgeSide في كامبريدج بولاية ماساتشوستس. يطبعون ويطرّزون التي شيرت والهوديز والقبعات والأكمام الطويلة وقمصان الفرق حسب الطلب، ويُستلم كل طلب من المتجر — في اليوم نفسه إذا وصل الطلب قبل الثامنة مساءً.

جاءونا ولديهم متجر وشعار ورقم هاتف، وبلا موقع إلكتروني. صمّمنا وبنينا كل شيء: موقع العلامة التجارية، وتصوير المنتجات، ومسار الطلبات الذي يغذّي المتجر.

التحدي

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

الحل

بنينا موقعًا تعريفيًا بمسار استفسار بدل المتجر: بلا سلة، بلا دفع، بلا حسابات، بلا قاعدة بيانات. يختار الزائر فئة الملابس، ويرفق تصميمه، فيصل الطلب إلى بريد صاحب المتجر الذي يسعّر ويؤكّد بالرد. وتُغلق كل صفقة داخل المتجر، وهي الطريقة التي يعمل بها هذا النشاط فعلًا.

نموذج المحتوى يعكس ذلك. وحدة المحتوى هي فئة الملابس لا المنتج — سبعة ملفات Markdown يتحقق منها مخطط Zod أثناء البناء، فيؤدي أي خطأ إملائي إلى فشل البناء بدل نشر صفحة معطوبة. إضافة فئة تعني إضافة ملف واحد، دون تعديل أي مكوّن. وكل معلومة تخص النشاط — العنوان والهاتف وساعات العمل والشعار — تعيش في ملف مصدر واحد حتى لا يفترق الموقع عن بيانات JSON-LD عن ملف النشاط في جوجل.

جلسة تصوير المنتجات بالذكاء الاصطناعي

لم يستطع العميل تمويل جلسة تصوير حقيقية، فأنتجنا واحدة. أنشأنا الكتالوج بالكامل بـ طاقم متكرر من العارضين الافتراضيين — ثلاثة إلى أربعة أشخاص خياليين، كل منهم مثبّت على مرجع ثابت لتبقى الوجوه والبنية والملابس متطابقة عبر نحو 70 صورة.

• الاتساق هو المُنتَج: طاقم واحد عبر كل الفئات هو ما يجعل القوائم المنفصلة تُقرأ كعلامة واحدة لا كصور مخزنية متفرقة.
• مظهر ثابت — ضوء نهار غائم بارد على طوب نيو إنجلاند، وتأطير بعدسات 50mm و85mm، ولوحة ألوان خافتة — بحيث تبقى القطعة هي اللون القوي الوحيد في الكادر.
• اخترنا الطاقم بصدق ليمثّل كامبريدج: مدينة جامعية متنوعة فعلًا في الأعمار والخلفيات.
• أعمال فنية أصلية بالكامل على كل قطعة. بلا ملامح شخص حقيقي، وبلا شعارات فرق، وبلا أي ملكية فكرية لطرف ثالث قرب الإنتاج.
• المسار نفسه أنتج صور الصفحة الرئيسية، ومقطعًا متكررًا على كل بطاقة فئة، وفيلمًا ترويجيًا مدته 20 ثانية أُنتج بالكامل بالتوليد.

كما أعدنا بناء أصول العلامة برمجيًا، ففصلنا شعار العميل المسطّح (JPEG) إلى طبقتَي الذهبي والحبري، وأعدنا توليد عشرين نسخة شفافة نظيفة — الرمز والاسم والتركيبات — للاستخدام على الخلفيات الداكنة والفاتحة وباللون الواحد وفوق الصور.

الأداء

كانت السرعة بندًا في العقد، والموقع المُسلَّم يحقق درجة أداء 100 في Lighthouse مع صفر ميلي ثانية زمن حجب كلي وانزياح تخطيطي يكاد يكون صفرًا.

• بلا أي إطار عمل في المتصفح. لا React، ولا مكتبة مكوّنات، ولا حزمة أيقونات — أدرجنا رموز SVG القليلة التي يحتاجها الموقع مباشرة.
• كل صورة تمر عبر خط أصول Astro إلى صيغة AVIF، مُرمَّزة ومحفوظة قبل البناء بدل إعادة ترميزها مع كل نشر.
• خطوط متغيّرة مستضافة ذاتيًا ومحمّلة مسبقًا، بلا أي طلب خطوط من طرف ثالث.
• دالة خادم واحدة في المشروع كله: نقطة استقبال الطلبات.

الميزات الرئيسية

• صفحات فئات تضم معرض تصاميم وجداول مقاسات ونطاقات أسعار ونموذج طلب مدمج
• رفع التصاميم — PNG وJPG وPDF وPSD وAI وTIFF وWebP وZIP — مع تخزينها على Vercel Blob وربطها في بريد صاحب المتجر
• بريد الطلبات عبر Resend، مع رسالة تأكيد مقابلة تُرسَل للعميل
• حماية من الرسائل المزعجة دون كابتشا مرئية لمعظم الزوار: Cloudflare Turnstile ومصيدة حقول خفية وفخ زمن التعبئة وتحديد معدل لكل عنوان IP
• بيانات منظَّمة من نوع ClothingStore وProduct مع ساعات العمل ونطاق الخدمة ومسار التنقّل لتحسين البحث المحلي
• إبراز الاستلام في اليوم نفسه وساعات العمل في كل صفحة، انطلاقًا من ملف إعداد واحد
• فئات بحالة coming-soon تعرض بطاقة بشارة دون توليد رابط فعلي

النتائج

• متجر لم يكن له أي حضور على الويب صار لديه موقع سريع وقابل للفهرسة بالكامل تسنده بيانات منظَّمة محلية
• كتالوج منتجات كامل ومتّسق مع العلامة، أُنتج بلا كاميرا ولا استوديو ولا أجر عارضين
• تصل الطلبات ومعها التصاميم وتفاصيل كافية للتسعير، بدل أن تأتي كمكالمة هاتفية
• أداء 100/100 على موقع معظمه صور — ويبقى كذلك لأن ميزانية الأداء مفروضة داخل عملية البناء

حزمة التقنيات

Astro 5 (ثابت)، Tailwind CSS 4، TypeScript، مخططات محتوى Zod، Vercel، Resend، Vercel Blob، Cloudflare Turnstile، خط معالجة الصور sharp