สร้างเว็บไซต์สไตล์ภาพยนตร์ที่ควบคุมด้วยการเลื่อนด้วย AI

ดาวน์โหลดและติดตั้ง 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

คัดลอก URL ของคอนเนกเตอร์

Claude Desktop Customize Connectors Add custom connector

ตั้งชื่อว่า “Higgsfield” วาง URL แล้วเชื่อมต่อและเข้าสู่ระบบ

เปิด 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 สร้างและเผยแพร่เว็บไซต์ใหม่อีกครั้ง