איך לבנות אתר ששווה 10,000$ עם תלת-ממד וקלאוד קוד — מדריך מעשי

איך לבנות אתר ששווה 10,000$ עם תלת-ממד וקלאוד קוד – מדריך מעשי

במדריך הזה נראה לכם שלב-אחר-שלב איך ליצור אתר אינטרנט מעוצב עם תלת-ממדיות ואנימציות גלילה (Scroll-Driven Fly-Through), המבוסס על סרטון ההדרכה של Jason Lee. התהליך כולו מתבצע באמצעות שילוב של כלי בינה מלאכותית (Claude, Higgsfield , Hostinger) ללא צורך בכתיבת קוד ידנית.

כלים ודרישות מוקדמות

  1. Claude Design (claude.ai/design) – לעיצוב הממשק והחזות.
  2. Claude Code – להטמעת סקריפטים ואנימציות.
  3. מחבר Higgsfield MCP – ליצירת התמונות והסרטונים ברקע.
  4. סקיל Scroll World (מ-GitHub) – ליצירת אפקט התעופה הגרפית בגלילה.
  5. מחבר Hostinger MCP – להעלאת האתר לאוויר בפקודה אחת.

שלב 1: איסוף רפרנסים והכנת Claude Design

איכות העיצוב תלויה בדוגמאות שתספקו ל-AI.

  1. היכנסו ל-Pinterest או Dribbble וחפשו עיצוב שמוצא חן בעיניכם (למשל: סגנון Airbnb בטבע, צבעי כחול וכתום, טיפוגרפיה נקייה).
  2. קחו צילום מסך של פלטת הצבעים והפונטים שאהבתם.
  3. היכנסו ל-Claude Design והעלו את צילום המסך.
  4. כתבו פרופס מפורט המגדיר: סוג האתר, החדרים והאזורים שיהיו באתר, צבעים וסגנון טיפוגרפי. (יש אפשרות להורדת הפרומפט במדריך)

שלב 2: חיבור Higgsfield MCP ויצירת מבנה האתר

כדי ש-Claude יוכל לייצר תמונות וסרטונים באיכות גבוהה ישירות בתוך העיצוב:

  1. בהגדרות החשבון ב-Claude, עברו ל-Connectors והוסיפו את המחבר המותאם אישית של Higgsfield MCP (https://mcp.higgsfield.ai/mcp).
  2. הריצו את ה-Prompt ב-Claude Design.
  3. Claude יפנה ל-Higgsfield ברקע, יחול את כל תמונות החדרים והרקעים, ויבה את המבנה הסטטי של האתר (Hero Section, טופס הזמנה, תמונות חדרים, עדויות ופוטר).
  4. בגמר התהליך, לחצו על Share והורידו את כל פרויקט העיצוב כקובץ ZIP.

עכשיו שבניית האתר נגמרה אפשר להתחיל בהנפשה תלת מימד

שלב 3: הטמעת אנימציית התעופה התלת-ממדית (Scroll World)

  1. פתחו את קובץ ה-ZIP בתוך תיקייה עבודה ייעודית במחשב.
  2. פתחו את Claude Code והתחברו לתיקייה זו.
  3. התקינו את הסקיל Scroll World: /install-skill https://github.com/scroll-world-repo
  4. שלחו ל-Claude Code: תבחן את האתר בתיקייה הזו והשתמש בסקיל scrollworld/ כדי להפוך את חלק ה-Hero לאנימציית גלילה של תעופת רחפן בין כל החדרים.
  5. Claude Code ינתח את תמונות החדרים, יתכנן מסלול רציף ויחבר אותן לאנימציה המושפעת מגלילת העכבר.

שלב 4: פירסום האתר בלחיצת כפתור (Hostinger MCP)

  1. הוסיפו את Hostinger MCP (mcp.hostinger.com) בהגדרות ה-Connectors.
  2. בצעו אימות מול חשבון ה-Hostinger שלכם.
  3. שלחו: Hostinger MCP active. Deploy the site to Hostinger.
  4. Claude יבטל build, יעלה קבצים ויספק לכם קישור פעיל.

לרישום ולקבלת הנחה בשרת HOSTINGER של עד 30% תלחצו פה

טיפים לשידרוג האתר

  • צפו בתסריטים לפני חיבור והסרטון: מומלץ לבדוק את התמונות ש-Higgsfield מייצר בטרם שלב הצירוף.
  • הוסיפ אלמנטים מונפשים קלים: ניתן להעתיק אצות אנימציות חינמיים מ-LottieFiles או רכיבי UI מ-21st.dev, Awards.

התחברו / הורידו את המדריך

איך Biznova יכולה לעזור

Biznova מתמחה בבניית אתרים חכמים עם AI ואנימציות 3D. קראו עוד על בניית אתר עסקי, בניית אתר עם Claude Code, או צרו קשר.