לבנות אתר מותג בגלילה קולנועית — עם AI

איך בונים אתר תדמית יוקרתי בקובץ אחד, בעזרת Claude — בלי צוות פיתוח, בלי תבניות גנריות, בלי קוד שאתם כותבים.

מה הולכים לעשות

אתר אחד שנראה כמו קמפיין של מותג-על.

אתם מכירים את האתרים האלה שאתם גוללים בהם ופשוט נתקעים — וידאו שזז עם הגלילה, טיפוגרפיה נושמת, מעברים חלקים כמו חמאה. נראה כאילו צריך אולפן שלם ותקציב של חמש ספרות. זה לא נכון יותר.

במדריך הזה אני מראה את השיטה שבה בניתי את SOLIS — אתר מותג למיץ תפוזים סחוט — בקובץ HTML אחד, עם Claude. הסוד הוא לא "לבקש אתר יפה". הסוד הוא לתת ל-Claude מפרט הדוק שמכתיב בדיוק איך לבנות, וכך מקבלים תוצאה ברמת סטודיו במקום בלגן.

הסוד שגורם לזה לעבוד

מודל AI שמקבל "תבנה לי אתר יפה" יחזיר משהו בינוני וגנרי. אותו מודל, כשנותנים לו חוקים ברורים — קובץ אחד, פלטת צבעים מצומצמת, ספריית גלילה ספציפית, מבנה סקשנים — בונה משהו שנראה יקר. המפרט הוא כל ההבדל.

השיטה

5 שלבים מהרעיון לאתר חי

1פתחו פרויקט ב-Claude והדביקו את "חוקי הפרויקט" (המפרט בעמוד הבא). זה מלמד את Claude לבנות בקובץ אחד, עם גלילה חלקה ובדיסציפלינה עיצובית — לפני שביקשתם אפילו סקשן אחד.
2הכינו את הנכסים. 4–6 תמונות מוצר/מותג איכותיות (אפשר לייצר ב-AI), ואם רוצים אפקט וואו — סרטון הירו קצר. תנו לקבצים שמות ברורים (hero.mp4, product-1.png).
3תארו את הסקשנים בעברית פשוטה. "פתיחה עם וידאו תפוז על רקע שחור · סקשן אוסף מוצרים · סקשן 'מהפרי לכוס' · ניוזלטר · פוטר." Claude מתרגם את זה ל-index.html אחד.
4הגלילה החלקה זה הקסם. Claude מחבר שתי ספריות חינמיות — GSAP (אנימציות) ו-Lenis (גלילה רכה) — כך שהוידאו "נגלל" עם העכבר והאלמנטים נכנסים בעדינות. זה מה שמפריד בין "אתר" ל"חוויה".
5תצוגה מקדימה ואז לאוויר. מריצים מקומית לבדיקה, ואז מעלים בחינם ל-Vercel — תוך דקות יש לכם קישור חי לשתף (בדיוק כמו solis-orange.vercel.app).

חוקי הפרויקט

זה מה שמדביקים ב-Claude

הדביקו את הטקסט הבא כהנחיות הפרויקט. הוא באנגלית בכוונה — כך Claude מדייק יותר טכנית. התאימו את הצבעים והפונטים לזהות שלכם.

You are a senior front-end designer building a single-file luxury scroll website. // HARD RULES — never break - ONE FILE ONLY: everything lives in index.html. No build tools, no npm, no framework. - Use GSAP + ScrollTrigger for animation, and Lenis for smooth scrolling. - Scroll-driven video must use getBoundingClientRect() for progress, not window.scrollY alone. - Animate children inside a pinned container — never the pinned container itself. - Generous whitespace. Restraint over decoration. Let it breathe. // CDN imports (exact, in this order) - Lenis (CSS + JS), GSAP, GSAP ScrollTrigger, and your Google Fonts. // DESIGN SYSTEM (edit to your brand) - Palette: one background, one off-white for text, one muted body tone, one vivid accent. No more. - Fonts: a serif for all headings, a clean sans for all body text. - Assets: .png images; a short hero video for the opening. // STRUCTURE - Hero (scroll-scrubbed video) → Collection → "From grove to glass" story → Newsletter → Footer. - End every script with ScrollTrigger.refresh(). Restate the plan first, then output the complete index.html in one code block.

למה דווקא קובץ אחד

קובץ אחד = אפס סיבוכים. אין הגדרות, אין תלויות שנשברות, קל להעלות לאוויר ולתחזק. וזה מכריח את Claude להישאר ממוקד — מה שמשפר את התוצאה.

מה הופך אתר ל"יקר"

חמש הבחירות שעושות את ההבדל

דיסציפלינת צבע. רקע אחד, צבע טקסט אחד, גוון גוף אחד, אקסנט אחד. ריבוי צבעים = זול.
טיפוגרפיה נושמת. כותרות גדולות עם הרבה אוויר, פונט סריף לכותרות וסאנס נקי לגוף.
וידאו שנגלל. הוידאו מתקדם עם הגלילה במקום לרוץ לבד — זה הרגע שעוצר אנשים.
מעברים רכים. Lenis הופך כל גלילה לחלקה; אלמנטים נכנסים בעדינות, לא "קופצים".
פחות זה יותר. סקשן אחד, מסר אחד, פעולה אחת. אל תמלאו כל פיקסל.

טיפ זהב

תייצרו את כל תמונות המוצר באותו סגנון תאורה ורקע. אחידות חזותית היא מה שגורם לאתר להרגיש כמו מותג אחד גדול, ולא אוסף תמונות.

מהרעיון לכסף

איך הופכים את זה לשירות

אתר תדמית/מותג בישראל מתומחר היום בין ₪15,000 ל-₪30,000. כשהבנייה לוקחת ימים במקום חודשים, השוליים שלכם ענקיים — והלקוח מקבל תוצאה שנראית יוקרתית בלי תור של חודשיים.

בנו אתר-ראווה אחד לדוגמה (כמו SOLIS), פרסמו אותו כריל, ותנו לעבודה למכור בשבילכם. הזמן האמיתי שלכם הולך למציאת הלקוח, לא לכתיבת קוד.

טיפ שמצטבר

שמרו כל אתר שבניתם כתבנית-בסיס. הפרויקט הבא מתחיל מ-80% מוכן — אתם רק מחליפים נכסים, צבעים וטקסט.

רוצים שאבנה לכם אתר כזה?

אני בונה אתרי מותג בגלילה קולנועית — מהרעיון ועד שזה חי באוויר.

דברו איתי: WhatsApp · @shani.creates.ai