Yapay Zekâ ile Sinematik Kaydırmalı Web Sitesi Oluşturun

Claude Desktop'ı indirin ve kurun

Claude Desktop'ı İndirin

https://claude.com/download

Boş bir proje klasörü oluşturun

Klasörü Claude Desktop'ta açın

Claude Desktop Code Local Select the project folder Open Trust Workspace

Scroll World skill'ini kurun

Scroll World

/plugin marketplace add oso95/scroll-world /plugin install scroll-world@scroll-world

Higgsfield'ı Claude'a bağlayın

Higgsfield MCP sayfasını aç

https://higgsfield.ai/mcp

Bağlayıcı URL'sini kopyalayın.

Claude Desktop Customize Connectors Add custom connector

Adını “Higgsfield” koyun, URL'yi yapıştırın, ardından bağlanıp oturum açın.

Hostinger'ı açın ve hesabınızı hazırlayın

Hostinger'ı açın

Claude'dan doğrudan yayınlamak için hosting'i ayarlayın.

https://www.hostg.xyz/SHJoR

Hostinger'ı Claude Code'a bağlayın

Bu komutu Terminal'e yapıştırın ve Enter'a basın.

claude mcp add hostinger -- npx -y hostinger-api-mcp

Tarayıcıdaki oturum açma işlemini tamamlayın

Claude Code'a dönün ve Hostinger bağlantısını kullanın. Tarayıcı açıldığında oturum açın ve erişimi onaylayın.

Web sitesi projesini özelleştirin

Sinematik Kaydırmalı Web Sitesini Oluştur

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.

Proje veya Marka Adı

Proje veya marka adı

Niş

İşletme, ürün veya portföy kategorisi

Web Sitesinin Ana Hedefi

Ziyaretçinin yapması istenen ana işlem

Proje Bağlamı

Konum veya önemli arka plan

Ana Görsel Kaynağı

Bir seçenek seçin

Görsel Yön

İstenen sanat ve tasarım yönü

Ana Sahne Sayısı

Ana görsel sahnelerin sayısı

Sahne Yolculuğu

Bir seçenek seçin

Mobil Görsel Stratejisi

Bir seçenek seçin

Ana Harekete Geçirici Mesaj

Son eylem çağrısı metni

Ek Talimatlar

İsteğe bağlı — gerekli stil veya içerik kısıtlamaları

Gerekirse referans varlıkları ekleyin

Kendi medyanızı kullanmayı seçtiyseniz, prompt'u göndermeden önce buraya ekleyin.

Project folder reference-assets

Görseller, videolar, logolar, render'lar ve marka belgeleri ekleyin.

Oluşturulan prompt'u Claude Code'a gönderin

Üretim planını gözden geçirin ve onaylayın

Sahne sırasını, görsel tutarlılığı, kamera akışını, mobil stratejisini ve tahmini üretim maliyetini kontrol edin, ardından planı onaylayın.

Yerel önizlemeyi açın

Derleme tamamlandığında Claude'un verdiği önizleme adresini açın.

Sahne geçişlerini inceleyin

Parlamalar, sıçramalar, ani yön değişiklikleri, tutarsız kareler veya görünür kesmeler olup olmadığına bakın.

Akış hızını ve içeriği gözden geçirin

Kaydırma hızını, metin yerleşimini, içerik bölümlerini, düğmeleri ve son eylem çağrısını kontrol edin.

Mobil düzeni test edin

Görsellerin, metinlerin ve düğmelerin dar ekranda doğru göründüğünü doğrulayın.

Son düzeltmeleri isteyin

Hedefli Düzeltmeler İsteyin

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.

Web sitesini Hostinger'a yayınlayın

Web Sitesini Hostinger'a Yayınla

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.

Yayındaki web sitesini gözden geçirin

Sinematik akışı, içeriği, düğmeleri, eylem çağrısını ve mobil düzeni kontrol edin.

Nihai alan adını bağlayın

Web sitesi onaylandıktan sonra Claude'dan seçtiğiniz alan adını Hostinger üzerinden bağlamasını isteyin.

Sonraki güncellemeleri yayınlayın

Değişikliği açıklayın, ardından Claude'dan web sitesini yeniden derleyip yeniden yayınlamasını isteyin.