ابنِ متجر أزياء فاخرًا بالذكاء الاصطناعي مع لوحة إدارة

Claude Desktop

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

نزّل Claude Desktop

https://claude.ai/download

حساب GitHub

مجاني. هنا توجد نسختك الخاصة من STILLFORM، ومنها ينشر Hostinger متجرك.

أنشئ حساب GitHub

https://github.com/signup

Node.js

نزّل إصدار LTS الحالي. يشغّل المتجر على جهازك.

نزّل Node.js

https://nodejs.org/en/download

حساب Supabase

الباقة المجانية تكفي. تحفظ منتجاتك وصورك وطلباتك وتسجيل دخول المالك.

أنشئ حساب Supabase

https://supabase.link/r4gdwhi

حساب Cloudflare

مجاني. يُبعد فحص Turnstile الروبوتات عن صفحة الدفع.

أنشئ حساب Cloudflare

https://dash.cloudflare.com/sign-up

استضافة Hostinger

STILLFORM مجاني؛ ومتجرك المباشر يعمل هنا.

اختر باقة Hostinger

استخدم باقة Unlimited أو إحدى باقات Cloud — يُنشر STILLFORM كتطبيق Node.js Web App.

أنشئ نسختك الخاصة

جرّب المتجر الجاهز أولًا في العرض التجريبي المباشر: مرّر المؤشر فوق راف الملابس، واسحبه، وافتح قطعة. الدفع وStudio معطّلان هناك.

افتح STILLFORM على GitHub

https://github.com/salhiworks/stillform-fashion-store

انقر على Use this template، ثم على Create a new repository سمِّه واختر Public أو Private انقر على Create repository وانسخ عنوانه

انقله إلى جهازك

Claude Desktop Code Local

ابدأ جلسة Local في مجلد مثل Documents، وأضف عنوان مستودعك أدناه، ثم أرسل:

استنسخ نسختك

ينزّل مستودع STILLFORM الخاص بك في مجلد فرعي جديد.

Clone {{REPOSITORY_URL}} into a NEW subfolder inside the folder I selected, named after the repository. Never clone directly into the selected folder and never overwrite existing files. If Git is missing, or GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

عنوان مستودعك الجديد

https://github.com/your-name/my-fashion-store

افتح مجلد STILLFORM

ابدأ جلسة Local جديدة افتح المجلد الذي أنشأه Claude للتو — المجلد الذي يحتوي على README.md إذا سألك Claude Desktop، فاختر الوثوق بالمجلد

شغّل المتجر على جهازك

في جلسة STILLFORM، أرسل:

جهّز STILLFORM وشغّله

يثبّت المشروع ويشغّل المتجر على جهازك في الوضع التجريبي.

This folder is my own copy of the STILLFORM fashion store. Read README.md and docs/SETUP.md before you start. 1. Check that Node.js 20 or newer is installed. If it isn't, stop and tell me how to install it. 2. Install the dependencies with npm install. 3. Start the development server with npm run dev and keep it running. 4. Give me the local address to open. Don't change any code, don't create .env.local and don't connect Supabase yet: I want to see the store in demo mode first.

افتح العنوان الذي يعطيك إياه Claude، وعادةً ما يكون http://localhost:5173. بدون Supabase يعمل المتجر في الوضع التجريبي على مجموعته المدمجة: الراف وصفحات المنتجات والحقيبة تعمل، ويبقى الدفع معطّلًا حتى الخطوة 3.

أنشئ مشروع Supabase

افتح لوحة تحكم Supabase

https://supabase.com/dashboard

انقر على New project — أي منطقة والباقة Free مناسبتان اترك Data API مفعّلًا احفظ كلمة مرور قاعدة البيانات في مكان آمن — لن يحتاج إليها Claude أبدًا عندما يصبح المشروع جاهزًا، انسخ Project ID الخاص به

Supabase Project Settings General

Project ID هو التفصيل الوحيد الذي يحتاجه Claude من مشروعك. أما Project URL وPublishable key فيقرؤهما بنفسه عبر Supabase CLI.

سجّل الدخول إلى Supabase CLI

يفتح هذا متصفحك، لذا شغّله بنفسك مرة واحدة:

انقر على زر Terminal أعلى جلسة STILLFORM شغّل الأمر أدناه وافِق على تسجيل الدخول في نافذة المتصفح التي تُفتح

npx supabase login

أنشئ ودجت Turnstile

افتح لوحة تحكم Cloudflare

https://dash.cloudflare.com/

Cloudflare Turnstile Add widget

سمِّ الودجت باسم متجرك أضف localhost ضمن أسماء المضيفين أضف أيضًا نطاق متجرك إذا كنت تعرفه — وإلا فستضيفه في الخطوة 5 اختر وضع Managed وأنشئ الودجت أبقِ الصفحة مفتوحة: تحتاج الخطوة 3 إلى مفتاح الموقع والمفتاح السري

اطلب من Claude ربط متجرك

في جلسة STILLFORM، أضف Project ID أدناه ثم أرسل:

اربط STILLFORM بـ Supabase

يربط Claude مشروعك، ويُعدّ قاعدة البيانات والمجموعة الأولية، وينشر دالة الدفع.

Connect this STILLFORM store to my Supabase project {{PROJECT_REF}}. Read docs/SETUP.md first and follow it exactly. Use only the migrations, seed and scripts this project already has: don't write new SQL, tables or setup steps, and don't change the store's code. I'm already signed in to the Supabase CLI. Do these yourself, and tell me what each one does before you run it: 1. Link this folder to my project. 2. Show me what the database push would apply, then apply the migrations with the starter collection (supabase db push --include-seed). 3. Write my Project URL and Publishable key to .env.local. Never read, use or write the secret or service_role key. 4. Deploy the place-order Edge Function with --no-verify-jwt. If any command needs my password or a secret key, stop and give me the command to run in my own terminal instead. Then tell me to run npm run setup in my own terminal: it asks for my Turnstile keys and my owner email and password in hidden prompts. Never ask me for them in this chat. When I tell you it's done, run npm run setup -- --check and npm run verify:remote, restart npm run dev, and tell me in plain words what passed and what is still left to do.

Project ID الخاص بمشروع Supabase

abcdefghijklmnopqrst

يسألك Claude قبل كل أمر — انقر على Allow. ويتوقف عندما يحين دورك.

أدخل بياناتك السرية في Terminal

عندما يطلب Claude ذلك، شغّل إعداد المتجر نفسه في Terminal. يتخطى كل ما أنجزه Claude ولا يسألك إلا عن البيانات الخاصة:

npm run setup

عند خطوة حماية الدفع، اختر 1، ثم الصق مفتاح الموقع والمفتاح السري الخاصين بـ Turnstile إذا عرض إعادة نشر دالة place-order، فاكتب n — فقد نشرها Claude بالفعل أدخل بريدك الإلكتروني وكلمة مرور من 12 حرفًا على الأقل لحساب المالك عندما يطلب ذلك، أوقف Allow new users to sign up في لوحة تحكم Supabase، ثم اضغط Enter — يتحقق الإعداد من أنه متوقف أخبر Claude أنك انتهيت

Supabase Authentication Sign In / Providers

أبقِ هذه البيانات سرية

اكتب المفتاح السري لـ Turnstile وكلمة مرورك في المطالبات المخفية في Terminal فقط. لا تلصقهما في المحادثة أبدًا.

تحقق من الإعداد وسجّل الدخول

يشغّل Claude فحوصات المتجر ويعيد تشغيله. عندما يقول إن كل شيء نجح:

أعد تحميل متجرك المحلي — أصبح الآن يحمّل مجموعته من قاعدة بياناتك افتح /admin وسجّل الدخول ببريد المالك وكلمة مروره

أنت الآن في Studio، لوحة تحكم متجرك. لا يفتحها إلا الحسابات المدرجة في قائمة مسؤولي المتجر، ولا يستطيع أحد إنشاء حساب جديد.

أضف منتجًا

كل ما تحفظه في Studio يذهب مباشرة إلى قاعدة بياناتك — دون أي تغيير في الكود.

Studio Products Add a product

املأ Name وCategory وOne-line summary في Photos، أضف صورة أمامية في Price, sizes and stock، اضبط Price واختر Sizes سمِّ اللون الأول، واختر عيّنته، وأدخل مخزونه لكل مقاس انقر على Add a colour لكل لون آخر انقر على Publish

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

اضبط الصورة على الراف

تؤدي إضافة صورة أمامية إلى فتح محرر الراف. أفضل نتيجة تأتي من صورة PNG مفرّغة بخلفية شفافة وخطّاف العلّاقة في الأعلى؛ وتصلح أيضًا صورة أمام جدار سادة فاتح.

فعّل Remove the plain background إذا لم تكن الصورة مفرّغة عدّل Size والموضع، أو اسحب الصورة في المعاينة صِف الصورة لقارئات الشاشة انقر على Use this photo

تحقق من Preview on the rail: مرّر المؤشر فوق القطعة لتدويرها وانقر عليها لفتح العرض المقرّب. تسمح الصور الخلفية والجانبية بدورانها بالكامل.

رتّب الراف

Studio Rail

في Add a piece، اختر منتجك الجديد ولونه اسحب القطع لترتيبها، أو استخدم الأسهم أزل أي قطعة لا تريدها على الصفحة الرئيسية انقر على Save rail

تناسب شاشة الكمبيوتر من ست إلى عشر قطع. وعلى الهواتف يتحول الراف إلى شريط دوّار يُمرَّر بالسحب.

شكّل المجموعات واللوك بوك

Studio Collections

في Homepage selection، اختر القطع التي تتصدّر الصفحة الرئيسية وانقر على Save انقر على New collection، أو عدّل مجموعة موجودة، وأضف قطعها

Studio Lookbook

عدّل العنوان والمقدمة ارفع صورك وتعليقاتك لكل صفحة عرض أخفِ صفحات العرض أو أعد ترتيبها، ثم انقر على Save lookbook

حدّث الإعدادات وافتح الدفع

Studio Settings

في Store، اضبط اسم متجرك وعملته في Contact وShipping وPolicies، أضف تفاصيلك الخاصة في Homepage، غيّر النصوص المحيطة بالراف في Checkout، فعّل Cash on delivery أو Bank transfer أو Pay at studio pickup، وعدّل تعليماته فعّل Open checkout انقر على Save settings

لا يأخذ STILLFORM أي بيانات بطاقات: يختار المتسوقون إحدى طرقك، وتعلّم كل طلب كمدفوع عند وصول المال.

قدّم طلبًا تجريبيًا

افتح متجرك المحلي، وضع قطعة في الحقيبة، وأكمل الدفع دوّن مرجع الطلب في صفحة التأكيد في Studio، افتح Orders وانقر على طلبك التجريبي انقر على Cancel order — يعود مخزونه إلى البيع

أنشئ Web App الخاص بك

لا توجد استضافة بعد؟ احصل على باقة من المتطلبات.

Hostinger Websites Create website Web App

اختر نطاقك الخاص، أو نطاقًا مؤقتًا للبدء اختر Import your Git repository تابع عبر Continue with GitHub وامنح Hostinger الوصول إلى مستودع STILLFORM اختر المستودع والفرع main

اضبط الإعدادات وانشر

أبقِ على إعداد إطار العمل Vite الذي يكتشفه Hostinger اختر Node.js 22 اضبط أمر البناء على npm run build — وليس build:demo أبدًا اضبط مجلد الإخراج على dist واترك ملف الدخول فارغًا

قبل البناء الأول، أضف هذه المتغيرات البيئية الثلاثة — بالقيم نفسها الموجودة في ملف .env.local، ويمكن لـ Claude عرضها عليك. تُدمج في المتجر أثناء البناء، لذا يحتاج تغيير أي منها لاحقًا إلى إعادة النشر.

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY VITE_TURNSTILE_SITE_KEY

VITE_SUPABASE_URL

Supabase Project URL

VITE_SUPABASE_ANON_KEY

Supabase Publishable key

VITE_TURNSTILE_SITE_KEY

مفتاح موقع Turnstile

قيم Supabase موجودة في Connect. ومفتاح الموقع موجود في ودجت Turnstile.

افتح Connect

https://supabase.com/dashboard/project/_?showConnect=true

قيم عامة فقط

لا تضف أبدًا المفتاح السري لـ Turnstile أو Secret key الخاص بـ Supabase أو مفتاح service_role إلى Hostinger. كل ما يبدأ بـ VITE_ يكون مرئيًا في المتصفح.

اطلب من Claude تشغيل npm run preflight، وهو فحص الإطلاق الخاص بالمتجر — ولا تنشر إلا عند اجتيازه انقر على Deploy وانتظر حتى ينتهي البناء افتح عنوانك المباشر

اربط نطاقك المباشر

Supabase Authentication URL Configuration

اضبط Site URL على عنوانك المباشر، بدءًا من https:// أضف العنوان نفسه إلى Redirect URLs انقر على Save

Cloudflare Turnstile

افتح ودجت STILLFORM أضف نطاقك المباشر إلى أسماء المضيفين واحفظ

يبقى Allow new users to sign up متوقفًا في Supabase.

اختبر متجرك المباشر

افتح إحدى صفحات منتجاتك مباشرة بعنوانها، ثم حدّثها سجّل الدخول عبر /admin على عنوانك المباشر ضع قطعة في الحقيبة وأكمل الدفع — فحص Turnstile غير مرئي أو مجرد مربع اختيار واحد ابحث عن طلبك التجريبي في Orders، ثم ألغِه

لم يتأكد بعد كيف يتعامل Hostinger مع الروابط المباشرة لهذا المتجر. إذا ظهرت صفحة 404 عند فتح صفحة منتج أو تحديثها، فاطلب من Claude مراجعة قسم Hostinger في docs/DEPLOY.md معك.

حدّث متجرك لاحقًا

المنتجات والصور والمخزون والطلبات والإعدادات: غيّرها في Studio — تظهر مباشرة

تغييرات التصميم أو الكود: اطلب من Claude إجراءها ودفعها إلى main — يعيد Hostinger بناء متجرك مع كل دفع