أنشئ موقعًا سينمائيًا يتحكم فيه التمرير بالذكاء الاصطناعي
أنشئ موقعًا غامرًا يتحكم فيه التمرير باستخدام Claude Code و Higgsfield ومهارة Scroll World مع النشر المباشر على Hostinger.
خارطة الطريق والموارد
إعداد Claude والأدوات الإبداعية
نزّل Claude Desktop وثبّته
نزّل Claude Desktop
https://claude.com/download
أنشئ مجلد مشروع فارغًا
افتح المجلد في Claude Desktop
Claude Desktop Code Local Select the project folder Open Trust Workspace
ثبّت مهارة Scroll World
Scroll World
/plugin marketplace add oso95/scroll-world /plugin install scroll-world@scroll-world
اربط Higgsfield بـ Claude
افتح صفحة Higgsfield MCP
https://higgsfield.ai/mcp
انسخ رابط الموصّل.
Claude Desktop Customize Connectors Add custom connector
سمِّه “Higgsfield”، والصق الرابط، ثم اتصل وسجّل الدخول.
اربط Claude بـ Hostinger
افتح Hostinger وجهّز حسابك
افتح Hostinger
جهّز الاستضافة للنشر المباشر من Claude.
https://www.hostg.xyz/SHJoR
اربط Hostinger بـ Claude Code
الصق هذا الأمر في Terminal واضغط Enter.
claude mcp add hostinger -- npx -y hostinger-api-mcp
أكمل تسجيل الدخول عبر المتصفح
ارجع إلى Claude Code واستخدم اتصال Hostinger. سجّل الدخول ووافق على الوصول عند فتح المتصفح.
خصّص الموقع وابنِه
خصّص مشروع الموقع
ابنِ الموقع السينمائي بالتمرير
Use the installed Scroll World skill to plan and build a cinematic scroll-controlled website for {{PROJECT_NAME}}. Use the connected Higgsfield MCP for visual generation. Before beginning the production workflow, inspect the installed Scroll World skill and handle only the local dependencies that are genuinely required for this project. Do not ask the user to install optional tools or duplicate Higgsfield integrations. If a local CLI is absolutely required for a specific Scroll World operation that cannot be completed through the connected MCP, explain the reason before installing or using it. PROJECT - Niche: {{NICHE}} - Main visitor goal: {{PRIMARY_GOAL}} - Context or location: {{PROJECT_CONTEXT}} - Visual direction: {{VISUAL_DIRECTION}} - Number of main scenes: {{SCENE_COUNT}} - Scene journey: {{SCENE_JOURNEY}} - Main call to action: {{MAIN_CTA}} - Additional instructions: {{ADDITIONAL_INSTRUCTIONS}} VISUAL SOURCE {{VISUAL_SOURCE}} MOBILE {{MOBILE_STRATEGY}} Everything you decide — the scene ideas, the content sections, the wording, and the call to action — must fit this niche and move the visitor toward that one goal. Keep the real identity of any property, product, architecture, or brand exactly as it appears in the material I give you, and never present an invented room, feature, specification, or business claim as factual. FIRST, PRODUCE A PRODUCTION PLAN — do not generate any paid asset yet. Cover: 1. The art direction, and how you will hold visual consistency across every scene. 2. The ordered scene journey and the camera movement for each scene. 3. The transition strategy between neighbouring scenes. 4. The desktop assets, and the mobile assets if a dedicated sequence is required. 5. The estimated Higgsfield generation usage and cost. 6. The website content and the call to action. Stop there and wait for my explicit approval. AFTER I APPROVE Generate the scene images and camera clips through the authenticated Higgsfield account connected to Claude, and save or download every generated asset into the project as the website workflow requires. Extract or create the boundary frames and the connectors between neighbouring scenes, then integrate the finished sequence into the Scroll World website engine. Build the website around it with content this niche actually needs, working navigation and buttons, and a final call to action that matches the goal above. Then run the site locally and give me the preview address.
اسم المشروع أو العلامة التجارية
اسم المشروع أو العلامة التجارية
المجال
فئة النشاط التجاري أو المنتج أو ملف الأعمال
الهدف الأساسي للموقع
الإجراء الرئيسي الذي يقوم به الزائر
سياق المشروع
الموقع أو الخلفية المهمة
المصدر البصري الرئيسي
اختر خيارًا
الاتجاه البصري
الاتجاه الفني والتصميمي المطلوب
عدد المشاهد الرئيسية
عدد المشاهد البصرية الرئيسية
رحلة المشاهد
اختر خيارًا
استراتيجية العرض البصري على الهاتف
اختر خيارًا
الدعوة الرئيسية لاتخاذ إجراء
نص دعوة الإجراء النهائية
تعليمات إضافية
اختياري — أي قيود مطلوبة على الأسلوب أو المحتوى
أضف أصولاً مرجعية عند الحاجة
إذا اخترت استخدام وسائطك الخاصة، أضفها هنا قبل إرسال الأمر.
Project folder reference-assets
أضف الصور والفيديوهات والشعارات والرندرات ووثائق العلامة التجارية.
أرسل الأمر الناتج إلى Claude Code
راجع خطة الإنتاج ووافق عليها
تحقق من ترتيب المشاهد والاتساق البصري وانسياب الكاميرا واستراتيجية الهاتف والتكلفة التقديرية للتوليد، ثم وافق على الخطة.
افتح المعاينة المحلية
افتح عنوان المعاينة الذي يوفره Claude عند اكتمال البناء.
راجع وجهّز للنشر
افحص الانتقالات بين المشاهد
ابحث عن الومضات أو القفزات أو تغيّرات الاتجاه المفاجئة أو الإطارات غير المتسقة أو القطعات الظاهرة.
راجع الإيقاع والمحتوى
تحقق من سرعة التمرير وموضع النصوص وأقسام المحتوى والأزرار ودعوة الإجراء النهائية.
اختبر التخطيط على الهاتف
تأكد من عرض الصور والنصوص والأزرار بشكل صحيح على الشاشات الضيقة.
اطلب التصحيحات النهائية
اطلب تصحيحات موجّهة
Apply only these corrections: [YOUR_CORRECTIONS] Change nothing else. Keep every unrelated scene, approved visual asset, transition, and content section exactly as it is, including anything I did not mention, and keep the responsive behaviour unchanged. Then run the website locally again and tell me precisely what changed.
انشر الموقع وحدّثه
انشر الموقع على Hostinger
انشر الموقع على Hostinger
Deploy this project to my connected Hostinger account. Preserve the approved cinematic experience exactly as it is, and do not regenerate any approved visual asset. First confirm that every required asset exists and that the desktop and mobile asset references resolve correctly. Then optimize the site for production, run the production build, and inspect and fix any build error that would block deployment. Choose the deployment method that fits this project through the connected Hostinger account, and publish to a temporary live URL first when that is supported. Report the build result, the deployment result, and the live URL.
راجع الموقع المباشر
تحقق من التسلسل السينمائي والمحتوى والأزرار ودعوة الإجراء وتخطيط الهاتف.
اربط النطاق النهائي
بعد اعتماد الموقع، اطلب من Claude ربط النطاق الذي اخترته عبر Hostinger.
انشر التحديثات المستقبلية
صف التغيير المطلوب، ثم اطلب من Claude إعادة بناء الموقع ونشره من جديد.