איך לבנות אתר מונפש ב-Claude Code בערב אחד

מידע נוסף על עבודה עם מודלים נמצא בתיעוד Ailoot.

למה ברור כבר מהמסך הראשון שאתר נבנה ב-AI?#

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

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

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

בינתיים, ה״מראה של AI״ השתנה. בתיעוד של מיומנות frontend-design שלה, Anthropic מתארת כיום מראות אחרים.

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

כאן, ״slop״ פירושו עבודה שנוצרה במכונה ומוזגה לממוצע גנרי ללא סגנון מובחן.

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

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

מה צריך כדי לבנות אתר מונפש ב-Claude Code?#

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

GSAP היא ספריית האנימציה שמאחורי חלק ניכר מהאתרים שזכו בפרסים. Webflow רכשה אותה באוקטובר 2024, וכמעט מיד החלו שמועות שהכול הפך לחינמי. זה לא ממש נכון: באותה עת Webflow אישרה שהתמחור הקיים יישאר. הספרייה הפכה לחינמית בסוף אפריל 2025, עם גרסה 3.13.

בגרסת 3.13 נכתב במפורש שגם תוספים שבעבר היו בתשלום, כגון SplitText ו-MorphSVG, הפכו לחינמיים, לרבות לשימוש מסחרי. הגרסה הנוכחית נכון ליולי 2026 היא gsap@3.15.0.

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

מיומנות frontend-design של Anthropic היא אוסף הוראות שמשנה את האופן שבו הסוכן עובד על ממשק. בתיאור המאגר שלה נכתב:

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

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

איך גורמים ל-Claude Code להפסיק לייצר תבניות?#

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

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

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

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

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

השלב הבא הוא המיומנות. את המיומנויות הרשמיות של Anthropic אפשר להתקין דרך התוסף:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

פרט אחד: אי אפשר להתקין מיומנויות עיצוב בנפרד; התוסף example-skills מתקין את שתים-עשרה המיומנויות יחד. אם רוצים רק אחת, מעתיקים את התיקייה ידנית—Claude Code יזהה אותה בלי צורך להפעיל מחדש את ההפעלה:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

מיומנויות נוספות באוסף שעשויות לעזור: theme-factory עם עשר ערכות נושא מוכנות ואישור אנושי חובה לפני החלתן, web-artifacts-builder לבנייה ב-React עם רכיבים מוכנים, ו-algorithmic-art לגרפיקה גנרטיבית. מאמר נפרד מסביר בפירוט איך לבחור מיומנויות למשימה: איך לבחור מיומנויות ל-Claude Code.

הכללים והמיומנות עובדים יחד: הכללים אוסרים בחירות גרועות, והמיומנות מכתיבה תהליך—קודם מערכת, אחר כך ביקורת, ולבסוף קוד.

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

איפה אפשר למצוא כיוונים חזותיים מוכנים והנחיות לאנימציה?#

טכניקות התנועה שכלולות בה הן: animation-on-scroll, gsap, gsap-scrolltrigger-storytelling, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, marquee-loop, masked-reveal, staggered-word-reveal, reveal-hover-effect, scroll-progress-timeline, scroll-scrubbed-visual-sequence, scroll-scrubbed-word-reveal, scroll-world-storytelling.

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

• clean-minimal-beige-light-mode - מינימליזם בהיר בגוני בז'
• dark-glass-clean-layout - זכוכית כהה
• documentary-brutalist-agency - סגנון תיעודי ברוטליסטי
• editorial-portfolio-chapters - תיק עבודות המחולק לפרקים כמו מגזין
• orange-clean-paper-saas - אתר שירות בסגנון נייר עם נגיעה כתומה
• solar-duotone-bold - עיצוב נועז בשני צבעים
• tech-green-dark-mode-modern - סגנון טכנולוגי כהה עם ירוק
• light-mode-paper-technical - מראה של נייר טכני בהיר

יש גם מיומנויות טכניות לגרפיקה ואפקטים תלת-ממדיים: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

אין במאגר פקודת התקנה—המחבר אומר במפורש במפת הדרכים שהוא יוסיף אחת לאחר ששיטת האינטגרציה תיקבע. ההנחיה היחידה ל-Claude Code היא:

להלן מוצגת אפשרות התקנה אחת. הפקודה הזאת אינה מופיעה במאגר; זו המלצת התקנה:

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

בקצרה, על ספריות הנחיות בתשלום, כי הנושא עולה. השירות motionsites.ai מוכר אוסף הנחיות מוכנות למקטעים: נכון ליולי 2026, מחירו 239 דולר לשנה או מחיר קידום חד-פעמי של 349 דולר במקום 759, ללא תוכנית חודשית. המחבר אינו מצוין ואין עמוד ״אודות״. יש גם אתר בשם כמעט זהה ביחיד, ורק באתר ההוא מופיעה הצהרה על תאימות ל-Claude Code. לא הייתי ממליץ על הרכישה, אך כדאי להכיר את האפשרות.

איך נותנים לסוכן תיעוד GSAP עדכני בשורה אחת?#

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

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

https://gsap.com/llms.txt

נכון להיום, גודל הקובץ הוא בערך 25 קילובייט. כל עמוד תיעוד זמין גם בגרסת Markdown—פשוט מוסיפים .md לכתובת ה-URL.

בפועל, זה נראה כך:

Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.

לספריית Motion (שנקראה בעבר Framer Motion) יש אותו קובץ, והוא אפילו גדול יותר. Motion מופצת ברישיון MIT ונשארת קוד פתוח באמת; הגרסה הנוכחית היא motion@12.42.2. אם הפרויקט משתמש ב-React וזקוק רק לחשיפות פשוטות, אפשר לבחור ב-Motion; לסצנות גלילה מורכבות, השתמשו ב-GSAP עם התוסף ScrollTrigger.

יש גם אפשרויות שפועלות בדפדפן בלבד ואינן משתמשות בספריות. מעברי מצב של דף דרך View Transitions API נכנסו לתמיכה בסיסית ב-14 באוקטובר 2025—אבל רק בתוך דף יחיד; הגרסה למעבר בין דפים אינה נתמכת כלל ב-Firefox. אנימציות גלילה ב-CSS עדיין לא נכנסו לתמיכה בסיסית: Chrome תומך בהן, Safari למד לתמוך בהן לאחרונה, אבל ב-Firefox צריך להפעיל אותן ידנית בהגדרות, ולכן הן פשוט לא יעבדו אצל קוראים רגילים. בקשו מהסוכן לבדוק תחילה אם הדפדפן בכלל תומך בהן, ואם לא, להשאיר את המעבר הסטנדרטי.

איך הופכים אתר שאוהבים להנחיה?#

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

מיומנות video-to-superprompt מגשרת על הפער. לפי תיאור המאגר שלה, היא הופכת סרטון לדוגמה להנחיה מפורטת לשחזור או לקבלת השראה. בתוכה היא מנתחת את ההקלטה בשכבות: נרטיב, פריסה, תנועה, טיפוגרפיה וגרפיקה תלת-ממדית. הפלט הוא הנחיה אחת מוכנה לשימוש.

הכלל העיקרי שלה מנוסח בתקיפות:

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

השלישית, stitched-full-page-capture, פותרת בעיה מעשית. צילום מסך רגיל של עמוד מלא באתרים עם טעינה עצלה וגרפיקה תלת-ממדית יוצא אפור וריק, כי הלכידה מתבצעת לפני הרינדור. המיומנות גוללת בעמוד מסך אחר מסך, ממתינה עד שהכול מתייצב ותופרת את התוצאה יחד.

אפשר גם בלי הקלטת מסך: לחבר את הסוכן לספרייה של דוגמאות ממשקים חיים באמצעות MCP. את השרת הרשמי של Mobbin אפשר להוסיף בפקודה אחת:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

אחר כך פותחים הפעלה חדשה, בוחרים את השרת מהרשימה ונכנסים דרך הדפדפן. הסוכן מקבל גישה לצילומי מסך של אפליקציות אמיתיות ופועלות: יותר מ-621,500 מסכים מופיעים ברשימה. אלה צילומי מסך של מוצרים גמורים, לא של רכיבים או קוד. הערה חשובה: שרת Mobbin אינו פועל בתוכנית החינמית; הוא זמין בתוכניות בתשלום (נכון ליולי 2026). יש מאמר נפרד על Google Stitch שמסביר איך לחבר שירותים חיצוניים לסוכן, ולהכניס מערכת עיצוב ל-Claude Code באותה שיטה.

צעד אחר צעד: אתר מונפש בערב אחד#

1. הגדירו פרויקט

   אם עדיין אין לכם פרויקט, התחילו בתיקייה ריקה. צרו אותה, פתחו אותה בטרמינל והריצו בה את claude. בהנחיה הראשונה בקשו שלד: “build a single-page website skeleton for my business (describe what it is), plain HTML and CSS, no libraries.” קבוצה של קבצים תופיע—זהו שורש הפרויקט, ומכאן ואילך הכול מתרחש שם.

2. הוסיפו את הכללים ל-CLAUDE.md

   העתיקו את מקבץ Anti-Generic Guardrails לקובץ CLAUDE.md בשורש הפרויקט. אם אין כזה, בקשו מהסוכן ליצור אותו. הכללים נכתבו עבור Tailwind; אם השלד שלכם משתמש ב-CSS רגיל, אמרו לסוכן, “apply these principles to regular CSS”—המשמעות של הכללים אינה משתנה. ראו הסבר על ארבעת הכללים של CLAUDE.md כדי להבין איך הקובץ עצמו עובד ומה עוד כדאי להכניס אליו.

3. התקינו את מיומנות frontend-design

   השתמשו בתוסף example-skills או העתיקו את תיקיית frontend-design, כפי שתואר לעיל. אפשר לבדוק שהמיומנות נטענה באמצעות הפקודה /doctor.

4. בחרו כיוון חזותי אחד

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

5. בנו דף סטטי

   בלי אנימציות בכלל. הטיפוגרפיה, המרווחים והגריד צריכים לבוא קודם. בקשו מהסוכן להפעיל תצוגה מקדימה מקומית ופתחו את הכתובת שייתן לכם. כדי לצפות בטלפון, אמרו: “run it so it opens on other devices on my network”, והסוכן ייתן לכם כתובת.

6. הוסיפו סצנת תנועה אחת

   רק אחת. בדרך כלל מדובר במסך הראשון: הכותרת מופיעה, ושכבת הרקע נעה לאט יותר מהקדמה. תנו לסוכן את הקובץ llms.txt של הספרייה ותארו את הסצנה במפורש—מה זז, היכן ובמשך כמה מילישניות. הימנעו משינוי אטימות במסך הראשון; יש בהמשך סעיף נפרד שמסביר מדוע.

7. הוסיפו כלל להפחתת תנועה

   החילו את כלל ה-CSS ואת הגדרת הפחתת התנועה ב-JavaScript ממקטע הנגישות. בדקו את העמוד עם הפחתת תנועה פעילה לפני הפרסום.

8. פרסמו ובדקו את המהירות

   פרסמו בשירות אחסון סטטי חינמי כלשהו—Vercel, Netlify או GitHub Pages. בקשו מהסוכן, “publish this project on Vercel and give me the link.” רק לאחר הפרסום, בדקו את כתובת ה-URL שהתקבלה ב-PageSpeed Insights: השירות עובד עם כתובות URL ציבוריות ואינו יכול לראות דף מקומי. בדקו את ״Largest Contentful Paint״—הזמן שנדרש לרינדור של האלמנט הגדול ביותר; האזור הירוק הוא עד 2.5 שניות. הסוכן יכול למדוד את הגרסה המקומית לפני הפרסום: Chrome DevTools MCP יפתח אותה ב-Chrome ויציג את אותו מדד.

שלב שש הוא המקום שבו הכי קל להרוס את העבודה של חמשת השלבים הקודמים.

למה עודף אנימציה גורם לאתר להיראות אפילו יותר כאילו נוצר ב-AI?#

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

זה כתוב באותה מיומנות frontend-design שהתקנתם כדי לשפר את העיצוב. Anthropic מזהירה מפני הגזמה בכלי שהסוכן משתמש בו כדי לקשט את הדף.

היא מונה גם טכניקות שחוקות אחרות: מספר גדול עם כיתוב קטן ונגיעה של גרדיאנט כתשובת ברירת מחדל לכל משימה; בלוקים ממוספרים כמו 01 / 02 / 03 שמתאימים רק כשבאמת יש רצף.

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

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

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

איך אנימציות הורגות את מהירות האתר?#

שלושת המדדים ש-Google משתמשת בהם להערכת דף הם: זמן לרינדור האלמנט הגדול ביותר—לא יותר מ-2.5 שניות; תגובתיות לאינטראקציה—לא יותר מ-200 מילישניות; ושינוי פריסה—לא יותר מ-0.1. הם נמדדים באחוזון ה-75 של ביקורים אמיתיים.

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

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

הבעיה השנייה היא ההבדל בין מה שזול להנפיש לבין מה שיקר.

במילים פשוטות: הדפדפן מרכיב את התמונה בשכבות, ושינויים במיקום ובאטימות מתרחשים בשלב האחרון והזול ביותר. כל דבר אחר מאלץ אותו לחשב מחדש את הדף. לפי המדידות באותו תיעוד: הנפשה באמצעות היסטים של top ו-left אורכת 37 מילישניות לפריסה ו-79 לרינדור; אותו אפקט חזותי באמצעות transform דורש אפס בשניהם.

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

עוד דבר אחד על המאפיין will-change, שסוכנים אוהבים לפזר ״לצורכי אופטימיזציה״. בתיעוד של MDN נאמר ההפך:

עוד נאמר שם שהמאפיין מיועד כמוצא אחרון לבעיות ביצועים קיימות. הוא לא נועד למניעה. שורה כגון will-change: transform, opacity על חמישים אלמנטים היא סימן היכר טיפוסי של קוד שנוצר אוטומטית.

הסיפור פשוט יותר כשמדובר בשינוי פריסה. בתיעוד של Google לא מאשימים אנימציות; להפך, מעברים זהירים עוזרים לעדכן תוכן בלי להבהיל את הקורא. המתכון זהה: שנו קנה מידה באמצעות transform במקום width ו-height, והזיזו באמצעות היסטים במקום קואורדינטות.

מה לגבי אנשים שתנועה גורמת להם נזק גופני?#

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

לפי קונסורציום W3C, הפרעות וסטיבולריות עלולות לגרום לבחילות ולמיגרנות, לפעמים בעוצמה שמחייבת לשכב.

הכלל הבא מטפל באנימציות CSS; יש להוסיף גם את ענף JavaScript שבהמשך לצירי זמן שמונעים בקוד:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

שלוש נקודות שכדאי לזכור.

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

המפרט אומר ״מסיר, מפחית או מחליף״—הסרה מוחלטת אפילו אינה האפשרות הראשונה. החלפת החלקה חדה פנימה בדעיכה קצרה עובדת טוב יותר מקטיעה מוחלטת: השבתה של כל האנימציות שוברת מחווני טעינה ופסי התקדמות.

אנימציות שמונעות ב-JavaScript דורשות טיפול משלהן בהעדפה; דריסת משך ב-CSS אינה מבטלת ציר זמן של GSAP. שמירת matchMedia(...).matches במשתנה אינה עושה דבר אם ההגדרה אינה מסתעפת לפיו. ב-GSAP השאירו את האלמנט גלוי ב-HTML/CSS הרגילים וצרו תנועה רק כשהמשתמש מתיר אותה:

// Run after GSAP and the page elements have loaded.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.

לכותרת אסור להיות סגנון בסיס מוסתר או מוזז. כשהפחתת תנועה פעילה היא נשארת גלויה וסטטית. אם ההעדפה משתנה כשהעמוד פתוח, GSAP מחזיר את מצב האנימציה כשהשאילתה מפסיקה להתאים. mm.revert() גם מסיר את האנימציה שנאספה בעת פירוק הרכיב. ב-Motion ממשו ענף מקביל בהגדרת הספרייה; כלל CSS לבדו אינו מספיק. ראו את תיעוד מחזור החיים והניקוי של GSAP matchMedia.

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

שבעה מקומות שבהם הכול מתפרק#

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

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

3. גלילה כפויה. מצב שבו אתר מחליף את ההתנהגות הרגילה של גלגלת העכבר בלוגיקה ״קולנועית״ משלו.

באותו מחקר, רוב המשתתפים חוו לפחות חוסר התמצאות קל.

4. מנפישים מאפייני פריסה. קואורדינטות וממדים במקום שינויי צורה. 37 ו-79 מילישניות לעומת אפס.

5. האנימציות ארוכות מדי. פייג' לאובהיימר, חוקר באותה קבוצה, כותב:

5. אנימציות ארוכות מדי. הטווח המועיל הוא 100 עד 400 מילישניות, כאשר 400 מילישניות הן כבר איטיות מאוד ומתאימות רק לתנועות גדולות. סוכנים נוטים להשתמש כברירת מחדל בשנייה שלמה.

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

6. אין כלל להפחתת תנועה. הסוכן לא יוסיף אותו בעצמו.

7. האתר נעשה איטי יותר עם כל אינטראקציה. הדבר ייחודי ל-React: אנימציה שנוצרת ללא הפניה לאלמנט וללא ניקוי מצטברת בכל עדכון של רכיב. הדף מתחיל בהדרגה להאט ללא סיבה נראית לעין.

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

כמה זה עולה, ואיך נמנעים מלשרוף את המכסה החודשית על אתר אחד?#

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

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

מה עוזר:

בנו סצנה אחת בכל פעם וקבעו את התוצאה. בקשה חד-פעמית ״להוסיף אנימציות לכל האתר״ מבטיחה הוצאות יתר. אפשר להשבית אימות באמצעות צילומי מסך לאלמנטים מונפשים ולבדוק אותם חזותית בעצמכם. השאירו את CLAUDE.md קצר כדי שהכללים לא יצרכו הקשר בכל בקשה. תנו לסוכן מראש את llms.txt של הספרייה, אחרת הוא ימציא שיטת חיבור מיושנת ואז ינסה לתקן את ההמצאה שלו.

המאמר למה Claude Code קורא מחדש את הפרויקט כולו מסביר לאן נעלמים האסימונים בזמן עבודה על פרויקט; המאמר איך לא לשרוף את המכסות של Claude Code עוסק בדרכים לשמור על שימוש מבוקר.

מה הלאה?#

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

לצעדים הבאים—Ailoot.