קוד מקור של אתר: איך קלוד קוד בונה לכם את האנימציה שראיתם

למה צילום מסך של אנימציה לא מספיק?

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

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

מה זה Ctrl+U ואיפה רואים את קוד המקור?

לכל עמוד אינטרנט יש קוד מקור: ה-HTML שהדפדפן מקבל מהשרת. לפי עמוד קיצורי המקלדת של Google Chrome, הקיצור שמציג את קוד ה-HTML של העמוד, בלי אפשרות לערוך, הוא:

נפתחת לשונית חדשה שהכתובת שלה מתחילה ב-view-source. לא צריך להבין אף שורה בה. מה שחשוב שתדעו: בתוך הקוד הזה יש שמות של פונטים, קודי צבע, מרווחים, ובעיקר קישורים לקבצי עיצוב (שמסתיימים ב-css) ולקבצי סקריפט (שמסתיימים ב-js). האנימציה כמעט תמיד יושבת בקבצי הסקריפט.

איך עושים את זה, שלב אחרי שלב?

1. פותחים את העמוד עם האנימציה בכרום, ומחכים שייטען עד הסוף.
2. לוחצים Ctrl+U (במק Cmd+Option+U). נפתחת לשונית עם קוד המקור.
3. מסמנים הכל ומעתיקים: Ctrl+A ואז Ctrl+C (במק Cmd+A ו-Cmd+C).
4. פותחים את קלוד קוד בתיקייה של האתר שלכם, ומדביקים את הפרומפט מהסעיף הבא, ומתחתיו את הקוד. אם הקוד ארוך מדי להדבקה, שומרים אותו לקובץ source.html בתיקייה, ומפנים אליו בפרומפט.
5. מתארים במילים את האפקט שאהבתם. "הכותרת הגדולה למעלה, שהאותיות שלה נכנסות מלמטה אחת אחת". כמה שיותר ספציפי.
6. בודקים בדפדפן ומשפרים בסבבים. "יותר לאט", "רק בפעם הראשונה שגוללים", "בלי ההבהוב בסוף".

דרך קצרה יותר: קלוד קוד יודע להוריד עמוד לבד. אפשר לתת לו את הכתובת ולבקש שיוריד את קוד המקור ואת קבצי ה-css וה-js שהוא מקשר אליהם. ההדבקה הידנית עוזרת באתרים שחוסמים הורדה אוטומטית.

הפרומפט המלא להעתקה

זה הפרומפט שאני משתמש בו. מדביקים, ממלאים את שתי השורות בסוגריים, ומדביקים את קוד המקור מתחת:

אני רוצה לבנות באתר שלי אפקט אחד שראיתי באתר אחר.
האתר: [הכתובת]
האפקט: [תיאור במילים, איפה בעמוד הוא נמצא ומה בדיוק זז]

מתחת יש את קוד המקור של העמוד (מ-Ctrl+U).

1. תמצא בקוד את הפונטים, הצבעים והמרווחים שקשורים לאזור של האפקט.
2. תמצא את קבצי ה-css וה-js שהעמוד מקשר אליהם, תוריד ותפתח אותם, כי האנימציה יושבת שם.
3. תגיד לי באיזו ספרייה או טכניקה האפקט בנוי (למשל GSAP, ScrollTrigger, CSS animation, canvas), ומה הרישיון שלה.
4. תסביר לי בשלוש שורות איך האפקט עובד: מה מפעיל אותו, מה זז, באיזה קצב.
5. רק אז תבנה אותו מחדש באתר שלי, בקוד שלך, עם הצבעים והפונטים שלי ולא של האתר המקורי.
6. אל תעתיק טקסטים, תמונות, לוגו או שם מותג מהאתר המקורי.
7. תדאג שהאפקט יכבד את ההגדרה prefers-reduced-motion, ושיעבוד גם בטלפון.
תתחיל מסעיפים 1 עד 4 ותחכה לאישור שלי לפני שאתה בונה.

הבקשה לחכות לאישור חשובה. ככה אתם רואים אם קלוד הבין נכון איזה אפקט אתם רוצים, לפני שהוא כותב קוד.

איך זה נראה על אתר אמיתי?

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

בקוד המקור של העמוד, כמו שהוא נראה ב-31 באוקטובר 2026, רואים בדיוק את מה שהפרומפט מחפש:

• הפונט: Mori, נטען בתוך העמוד
• הצבעים: משתנים עם שמות כמו shockingly-green (#0ae448) ו-surface-white (#fffce1)
• המרווחים: padding ו-gap של 1rem חוזרים שוב ושוב
• קבצי הסקריפט: בין היתר קבצים בשם SplitText ו-MorphSVGPlugin. השמות כבר מסגירים את הטכניקה: פירוק טקסט לאותיות, ושינוי צורה של גרפיקה

מצילום מסך אף אחד מהדברים האלה לא היה יוצא. עם קוד המקור, קלוד יודע שמדובר ב-GSAP עם התוספים האלה, ובונה לכם אפקט באותה טכניקה, בצבעים שלכם. לפי באנר באתר שלהם, GSAP חינמי לכולם, נכון לאוקטובר 2026.

מה מותר לקחת מאתר אחר ומה לא?

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

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

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

אם אתם רוצים לשכפל סקשן שלם, ולא אפקט אחד, יש לי מדריך לשכפול סקשן עם Playwright MCP ומדריך ל-AI Website Cloner. כאן המטרה הפוכה: לא להעתיק אתר, לקחת רעיון אחד.

חשוב לדעת

• קוד מקור זה לא תמיד מה שרואים. הרבה אתרים בונים את העמוד בדפדפן אחרי שהוא נטען. אז ב-Ctrl+U תראו מעט HTML והרבה קישורים לסקריפטים. זה בסדר, הפרומפט מבקש מקלוד לפתוח אותם.
• קבצי הסקריפט דחוסים. הם כתובים בלי רווחים ובשמות קצרים. קלוד קורא אותם, אבל באפקט מסובך הוא עשוי להחמיץ פרט, ולכן התיאור שלכם במילים חשוב.
• אנימציה בתוך וידאו או canvas. לפעמים "האנימציה" היא בכלל קובץ וידאו, או ציור בקוד WebGL. קלוד יגיד לכם, ותחליטו אם שווה לבנות.
• צריך קלוד קוד. הפרומפט עובד גם בצ'אט רגיל של קלוד, אבל רק קלוד קוד יכול להוריד את הקבצים ולכתוב לתוך האתר שלכם.
• ביצועים. אנימציה כבדה מאטה את הטעינה, בעיקר בטלפון. תבקשו מקלוד לבדוק.