מילון המונחים — 50+ מונחים שכל Vibe Coder חייב לדעת

1.1 למה מילה אחת משנה הכל

יש רגע שכל Vibe Coder עובר. אתה יושב מול Claude או v0, כותב "תעשה לי אתר יפה", ומקבל... משהו. גנרי. בסדר. לא WOW.

אחרי חודש של למידה, אותו Vibe Coder כותב:

"Build a hero section with a mesh gradient background, sans-serif display font at 72px with letter-spacing -0.02em, a CTA button with glassmorphism effect and spring animation on hover, and stagger fade-in for the subtitle text."

התוצאה? אתר שנראה כאילו מעצב מנוסה בנה אותו.

מה השתנה? לא הידע הטכני. לא היכולת לכתוב קוד ביד. המילים.

מה זה Vibe Coding?

Vibe Coding — מונח שטבע Andrej Karpathy בפברואר 2025. הרעיון פשוט: תתאר מה אתה רוצה בשפה טבעית, תן ל-AI לייצר קוד, ותתקן לפי התחושה (the "vibe"). אבל יש הבדל קריטי בין "שפה טבעית" ל"שפה עמומה".

ככל שהמילים שלך מדויקות יותר, ה-AI מבין בדיוק מה אתה רוצה — ומייצר תוצאה שקרובה בהרבה לחזון שלך. זה העיקרון של Term-Enhanced Prompting: שימוש במונח המקצועי הנכון במקום תיאור כללי.

לא "תעשה שזה יזוז" אלא "add a spring animation with stagger delay".

לא "תעשה צבעים יפים" אלא "use a mesh gradient with oklch color stops".

לא "תעשה לי כפתור נחמד" אלא "CTA button with glassmorphism, hover scale(1.05), spring easing".

שלוש דוגמאות שממחישות את ההבדל

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

זה לא עניין של "יותר מילים" — זה עניין של המילים הנכונות. פרומפט של 10 מילים מדויקות ינצח פרומפט של 50 מילים עמומות.

מה יש בפרק הזה

הפרק הזה הוא המילון שלכם. 50+ מונחים מ-9 קטגוריות שהופכים פרומפט עמום לפרומפט שמייצר WOW. לכל מונח תמצאו:

• שם באנגלית (זה מה שכותבים בפרומפט)
• הסבר ויזואלי בעברית (מה המונח עושה על המסך)
• Prompt snippet מוכן — משפט שאפשר להעתיק ישירות לכלי AI

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

1.2 קטגוריית Layout — איפה דברים יושבים

Layout הוא היסוד. לפני צבעים, אנימציות או אפקטים — צריך לדעת איפה דברים יושבים על המסך. 11 המונחים בקטגוריה הזו הם ההבדל בין "תעשה לי דף" (גנרי) ל-"hero section full-width, bento grid below, 8px spacing system" (מדויק).

Hero Section

Hero Section — הבאנר הרחב בראש העמוד. זה החלק הראשון שהגולש רואה: כותרת ראשית, תת-כותרת, כפתור CTA, ותמונה או וידאו ברקע. Hero section מגדיר את כל הטון של האתר. תחשבו על זה כמו חלון ראווה — אם הוא לא מושך, הגולש ממשיך הלאה.

בלי המונח: כותבים "make a nice top section" → AI מייצר div עם טקסט. עם המונח: כותבים "hero section" → AI מבין שזו קומפוננטה שלמה: full-width, prominent, עם היררכיה ויזואלית ברורה.

Prompt snippet: "Full-width hero section, 100dvh height, with headline, subtitle, and primary CTA button centered"

Above the Fold

Above the Fold — כל מה שנראה על המסך בלי לגלול. המונח מגיע מעולם העיתונות (מה שרואים מעל הקיפול של העיתון). באתרים, זה משתנה לפי גודל המסך — ולכן חשוב תמיד לציין "on both desktop and mobile" כשמבקשים מ-AI לשים משהו above the fold.

Prompt snippet: "Keep the CTA and key value proposition above the fold on both desktop (1440px) and mobile (390px)"

Viewport ויחידות dvh/svh/lvh

Viewport — האזור הנראה של חלון הדפדפן. בעבר השתמשנו ב-vh (viewport height), אבל במובייל התגלתה בעיה: שורת הכתובת של הדפדפן משנה את הגובה כשגוללים, מה שגורם לקפיצות.

הפתרון ב-2022-23: שלוש יחידות חדשות:

• dvh (dynamic) — מתעדכן בזמן אמת כשה-address bar מתכווץ/מתרחב. הכי נפוץ.
• svh (smallest) — הגובה המינימלי (כשה-address bar מופיע). בטוח מקפיצות.
• lvh (largest) — הגובה המקסימלי (כשה-address bar נעלם). שימוש נדיר.

Prompt snippet: "Hero section height: 100dvh (dynamic viewport height, accounts for mobile browser chrome)"

Whitespace (Negative Space)

Whitespace — הרווח הריק בין אלמנטים. רוב המתחילים חושבים ש-whitespace זה "בזבוז מקום". בפועל, whitespace הוא זה שיוצר נשימה, מבדיל בין סקשנים, ובונה היררכיה ויזואלית. אתרים כמו Apple, Linear ו-Notion משתמשים ב-whitespace אגרסיבי — וזה מה שגורם להם להרגיש premium.

כשאתם לא מציינים whitespace בפרומפט — AI דוחס הכל. כשאתם כותבים "generous whitespace" — פתאום העיצוב נושם.

Prompt snippet: "Generous whitespace between sections, minimum 120px vertical spacing, let the content breathe"

Visual Hierarchy

Visual Hierarchy — סידור אלמנטים לפי חשיבות באמצעות ארבעה כלים: גודל, צבע, קונטרסט ומיקום. העין נמשכת קודם לדברים גדולים, בהירים, ובעלי קונטרסט גבוה. כשאתם אומרים ל-AI "clear visual hierarchy" — הוא מבין שצריך הבחנה ברורה בין רמות תוכן (H1 > H2 > body).

Prompt snippet: "Clear visual hierarchy: 72px headline, 24px subtitle in lighter weight, 16px body text, CTA in accent color"

Grid System

Grid System — מערכת עמודות שמסדרת אלמנטים בשורות ועמודות. הסטנדרט היום הוא CSS Grid (החליף את Bootstrap float-based grid). 12 עמודות היא הקונבנציה הנפוצה, אבל CSS Grid מאפשר כל מבנה.

Prompt snippet: "12-column CSS grid layout, 3 columns on desktop, 1 column on mobile, 24px gap"

Bento Grid

Bento Grid — grid א-סימטרי עם כרטיסים בגדלים שונים, בהשראת קופסת בנטו יפנית. Apple פופולריזו את הסגנון ב-2023, ומאז הוא כבש את Notion, Framer ועשרות אתרי SaaS. ההבדל מ-grid רגיל: לא כל הכרטיסים באותו גודל — יש 1x1, 2x1, 2x2.

Prompt snippet: "Bento grid layout with 4 columns, cards of varying sizes (1x1, 2x1, 2x2), 16px gap, rounded-2xl corners"

8px Grid System

8px Grid System — כל ריווח בעיצוב הוא כפולה של 8: padding 8px, gap 16px, margin 24px, section spacing 32px, 40px, 48px. זה יוצר עקביות ויזואלית שהעין קולטת גם בלי לשים לב. Material Design הנהיגו את הגישה ב-2014 והיא הפכה לסטנדרט עולמי.

כשאתם מציינים "8px grid system" בפרומפט — ה-AI יוצר spacing עקבי במקום מספרים אקראיים.

Prompt snippet: "Use 8px grid system for all spacing: padding 24px, gap 16px, section margin-bottom 48px"

Z-index / Stacking Context

Z-index — שולט על שכבות של אלמנטים חופפים (מה "מעל" מה). מספר גבוה = מעל. אבל יש trap: Stacking Context חדש (נוצר מ-transform, opacity פחות מ-1, או position: fixed) מאפס את ה-scope. z-index: 9999 בתוך stacking context יכול להיות מתחת ל-z-index: 1 מחוצה לו.

Prompt snippet: "Fixed navigation z-index: 50, modal overlay z-index: 100, dropdown z-index: 60, no stacking context conflicts"

F-Pattern / Z-Pattern

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

Z-Pattern — לעמודים ויזואליים עם מעט טקסט. העין נעה: לוגו (שמאל למעלה) → ניווט (ימין למעלה) → אלכסון למרכז → CTA (ימין למטה). מושלם ל-landing pages.

כשאתם מציינים את ה-pattern — ה-AI ממקם אלמנטים בהתאם לכיוון העין.

Prompt snippet: "Z-pattern layout: logo top-left, navigation top-right, hero image center, CTA bottom-right of fold"

1.3 קטגוריית Typography — איך טקסט מרגיש

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

הנה הבעיה: כשכותבים "use a nice font" — ה-AI בוחר Inter (ברירת המחדל של חצי האינטרנט). כשכותבים "Playfair Display serif for headlines, paired with Inter sans-serif for body" — ה-AI מבין בדיוק את האווירה שאתם רוצים.

Serif ו-Sans-serif

Serif — גופנים עם קווים דקורטיביים (serifs) בקצוות האותיות. דוגמאות: Times New Roman, Playfair Display, Georgia. מעבירים תחושת קלאסיות, אלגנטיות, סמכות. תמצאו אותם באתרי עיתונות (NYT), מותגי יוקרה, ומשרדי עורכי דין.

Sans-serif — גופנים עם קצוות נקיים, בלי קישוטים. דוגמאות: Inter, Helvetica, SF Pro, Satoshi. מעבירים תחושת מודרניות, ניקיון, טכנולוגיה. כמעט כל אתר SaaS ב-2025-26 משתמש ב-sans-serif לגוף הטקסט.

Prompt snippet: "Serif heading font (Playfair Display) for elegance, paired with clean sans-serif body (Inter, 400 weight)"

Display Font

Display Font — גופן דקורטיבי שמיועד לכותרות בלבד, בגדלים גדולים (48px+). לעולם לא לטקסט רץ — בגדלים קטנים הוא לא קריא. דוגמאות: Clash Display, Cabinet Grotesk, Space Grotesk. הם מה שגורם לכותרת hero לבלוט.

Prompt snippet: "Bold display font (Clash Display) at 80px for hero headline only, sans-serif for everything else"

Font Pairing

Font Pairing — שילוב 2-3 גופנים משלימים בעיצוב. הכלל הזהב: קונטרסט בסגנון (serif + sans-serif) או במשקל (light + bold), אבל לא יותר מדי שונות. שלוש עצות מעשיות:

• לעולם לא יותר מ-3 גופנים באתר אחד
• גופן כותרת = דרמטי. גופן גוף = קריא. גופן קוד = monospace.
• אם לא בטוחים — Inter לגוף + כל display font לכותרת עובד כמעט תמיד

שלושה pairings מוכחים שאפשר לתת ישירות ל-AI:

Prompt snippet: "Font pairing: Playfair Display for headings, Inter for body text, JetBrains Mono for code blocks"

Line Height (Leading)

Line Height — המרחק בין שורות טקסט. ערכים מנחים:

• טקסט גוף: 1.5 עד 1.75 (נוח לקריאה ארוכה)
• כותרות: 1.1 עד 1.3 (מלוכד ודרמטי)
• כפתורים: 1 (שורה אחת, מרוכז אנכית)

Line-height נמוך מדי = טקסט "חנוק". גבוה מדי = מרגיש מפוזר. כשלא מציינים — AI בוחר ברירת מחדל (בדרך כלל 1.5 שזה סביר, אבל לכותרות זה רחב מדי).

Prompt snippet: "Body text: font-size 18px, line-height 1.65. Headings: line-height 1.15. Tight and impactful."

Letter Spacing (Tracking)

Letter Spacing — מרחק אחיד בין כל התווים בטקסט. שונה מ-Kerning שמתייחס לזוגות ספציפיים של אותיות (Kerning הוא אוטומטי בגופנים — לא צריך לציין אותו בפרומפט).

שני שימושים עיקריים:

• שלילי לכותרות: -0.02em עד -0.05em — גורם לכותרת להרגיש מלוכדת ומרשימה
• חיובי לטקסט קטן: 0.05em עד 0.1em — משפר קריאות של UPPERCASE קטן

Prompt snippet: "Headline: letter-spacing -0.03em for tight impactful look. Uppercase labels: letter-spacing 0.08em"

Font Weight

Font Weight — עובי הגופן. הסולם:

Prompt snippet: "Headline weight 800, subtitle weight 300 for dramatic contrast, body weight 400"

Variable Fonts

Variable Fonts — קובץ גופן אחד שמאפשר כל ערך weight (לא רק 100/200/300... אלא גם 350, 450, 650). גם ביצועים טובים יותר (קובץ אחד במקום 6) וגם אנימציות — אפשר לעשות animate ל-weight בהעברת עכבר.

Prompt snippet: "Use Inter Variable font. Weight 350 for body, 750 for headings. Animate weight 400→700 on hover."

Text Gradient

Text Gradient — gradient (מעבר צבע) שמופיע על הטקסט עצמו. הטכניקה: background gradient + background-clip: text + color: transparent. נפוץ מאוד ב-hero sections — Stripe, Linear, Vercel כולם משתמשים בזה לכותרות ראשיות.

Prompt snippet: "Hero headline with text gradient from #667eea to #764ba2, background-clip: text"

1.4 קטגוריית Color — צבע, gradient ואפקטים

צבע הוא לא רק "בחר כחול" — צבע הוא אווירה, תנועה ועומק. 12 המונחים בקטגוריה הזו מכסים הכל: מבנייה של color palette ועד אפקטי זכוכית שגורמים ל-UI להרגיש מרחף. כשאתם יודעים לבקש "mesh gradient" במקום "nice background" — התוצאה היא האתרים שגורמים לכם לעצור ולהתבונן.

Color Palette

Color Palette — סט של 4-8 צבעים שנבחרו יחד ומשתמשים בהם בעקביות לאורך כל האתר. palette מקצועי כולל תפקידים ברורים:

• Primary — הצבע הראשי של המותג (CTA, כותרות חשובות)
• Secondary — צבע תומך (רקעים, hover states)
• Accent — צבע בולט לאלמנטים קטנים (badges, notifications)
• Background — רקע ראשי + משני
• Text — צבע טקסט ראשי + משני (אפור)

כשכותבים "use nice colors" — AI בוחר מה שנוח לו. כשכותבים palette עם תפקידים — כל צבע בעיצוב יש לו סיבה.

Prompt snippet: "Color palette: primary #6366f1 (indigo), secondary #f1f5f9 (slate-100), accent #f59e0b (amber), background #0f172a (dark), text #e2e8f0 (light gray)"

Color Theory Basics

Color Theory — הכללים לשילוב צבעים הרמוניים. שלושה סכמות שצריך להכיר לפרומפטים:

• Complementary — צבעים מנוגדים על גלגל הצבעים (כחול + כתום). קונטרסט חזק.
• Analogous — צבעים שכנים (כחול + טורקיז + ירוק). הרמוניה רכה.
• Triadic — שלושה צבעים במרחקים שווים (אדום + צהוב + כחול). עשיר ומאוזן.

Prompt snippet: "Analogous color scheme: purple-to-blue range (#8b5cf6 through #3b82f6) for cohesive, calm feel"

Gradient Types

ב-CSS יש ארבעה סוגי gradient — כל אחד יוצר אפקט שונה לחלוטין:

mesh gradient הפך לטרנד דומיננטי ב-2024-26. אתרים כמו Linear, Vercel, ו-Stripe משתמשים בו לרקעים. כרגע אין לו syntax ב-CSS — מייצרים אותו ככמה radial gradients שחופפים, או כ-SVG.

Prompt snippet: "Mesh gradient background: 3 overlapping radial-gradients in purple, blue, and pink, positioned at different corners, with blur and opacity"

Glassmorphism

Glassmorphism — אפקט "זכוכית חלבית" שמטשטש את מה שמאחורי האלמנט. המרכיבים:

• backdrop-filter: blur(12px) — הטשטוש עצמו
• background: rgba(255, 255, 255, 0.1) — שקיפות חלקית
• border: 1px solid rgba(255, 255, 255, 0.2) — מסגרת דקה שמגדירה קצוות

Apple הפכו את הגישה הזו לשפה עיצובית שלמה ב-WWDC 2025 תחת השם Liquid Glass — גרסה מתקדמת עם שבירת אור (refraction) והחזרה (reflection). בעולם הווב, glassmorphism הוא הגרסה שעובדת כבר היום בכל הדפדפנים.

Prompt snippet: "Glassmorphism card: backdrop-filter blur(12px), bg rgba(255,255,255,0.08), border 1px solid rgba(255,255,255,0.15), rounded-2xl"

Glassmorphism vs Neumorphism vs Claymorphism

שלושה טרנדים עיצוביים שכדאי להבדיל ביניהם — כל אחד יוצר תחושה אחרת לגמרי:

Prompt snippet (neumorphism): "Neumorphic button: background #e0e5ec, box-shadow 6px 6px 12px #b8bec7, -6px -6px 12px #ffffff"

Dark / Light Mode

Dark Mode ו-Light Mode — ערכות נושא שמאפשרות למשתמש לבחור רקע כהה או בהיר. ב-CSS, prefers-color-scheme מזהה את העדפת המערכת אוטומטית. כשמבקשים "dark mode support" מ-AI — חשוב לציין את שני ה-modes, אחרת מקבלים רק אחד.

Prompt snippet: "Support dark and light mode via prefers-color-scheme. Dark: bg #0f172a, text #e2e8f0. Light: bg #ffffff, text #1e293b. Smooth transition between modes."

oklch ו-color-mix()

oklch — color space חדש ש-CSS תומך בו מ-2023. למה חשוב? כי בניגוד ל-RGB ו-HSL, oklch מייצג צבעים כפי שהעין האנושית רואה אותם — אותו lightness באמת נראה אותו דבר בכל הגוונים. מושלם ליצירת palettes עקביים.

color-mix() — פונקציית CSS שמערבבת שני צבעים: color-mix(in oklch, var(--primary) 70%, white). מאפשרת ליצור גוונים (tints/shades) בלי לחשב ידנית.

Prompt snippet: "Define colors in oklch for perceptual uniformity. Generate tints using color-mix(in oklch, var(--primary), white 30%)"

Backdrop-filter

Backdrop-filter — מאפיין CSS שמחיל אפקטים (blur, brightness, contrast, saturate) על מה שנמצא מאחורי האלמנט, לא על האלמנט עצמו. זה מה שמאפשר glassmorphism — בלי backdrop-filter, לא ניתן לטשטש את הרקע. נתמך בכל הדפדפנים המודרניים מ-2023.

Prompt snippet: "Navigation bar: backdrop-filter blur(16px) saturate(180%), bg rgba(15,23,42,0.8), sticky top-0"

1.5 קטגוריית Animation — תנועה עם כוונה

אנימציה היא הלב של WOW. אתר סטטי יכול להיות נקי, אבל אתר עם תנועה — מרגיש חי. הסכנה? אנימציות בלי כוונה — דברים שזזים בשביל לזוז — נראות חובבניות. 10 המונחים בקטגוריה הזו הם ההבדל בין "הכל זז" ל-"כל תנועה מעבירה מסר".

שני כללי זהב לפני שצוללים:

• כל אנימציה חייבת סיבה — מושכת תשומת לב? מספקת feedback? יוצרת continuity בין מסכים?
• Transform ו-opacity בלבד לביצועים — אנימציות על transform/opacity רצות ב-GPU (60fps). אנימציות על width/height/margin גורמות ל-layout recalculation בכל frame (janky).

Easing Functions

Easing Functions — עקומות שקובעות את מהירות האנימציה לאורך הזמן. במקום תנועה אחידה (linear), easing נותן תחושה טבעית: מאיץ בהתחלה, מאט בסוף, או קופץ.

הכלל הפשוט: enter = ease-out (מגיע מהר, מתייצב). Exit = ease-in (מתחיל לאט, נעלם מהר). תנועה במקום = ease-in-out.

Prompt snippet: "Fade-in cards on scroll: translateY(30px) to 0, opacity 0 to 1, duration 0.6s, ease-out. Exit: ease-in 0.3s."

Spring Animation

Spring Animation — אנימציה מבוססת פיזיקה של קפיץ: tension (כוח), friction (חיכוך), mass (מסה). בניגוד ל-cubic-bezier שהוא עקומה מתמטית — spring מדמה עולם אמיתי. התוצאה: האלמנט "עובר" את המיקום הסופי (overshoot) ואז "מתייצב" — כמו כדור שקופץ.

Spring animations הפכו לסטנדרט ב-2024-26 בזכות Framer Motion ו-CSS linear() function שמאפשר לדמות spring בלי JavaScript.

Prompt snippet: "Spring animation on button hover: scale 1.05, spring tension 300 friction 20 — slight overshoot then settle"

Stagger

Stagger — עיכוב מחושב בין אנימציות של אלמנטים ברצף. במקום שכל הכרטיסים יופיעו בבת אחת — כל אחד מתחיל 0.05-0.12 שניות אחרי הקודם. זה יוצר "אפקט גל" שהעין עוקבת אחריו.

Stagger הוא אחד המונחים שהכי משנים תוצאות: "animate cards" = הכל נכנס ביחד (משעמם). "Stagger cards with 0.05s delay" = גל אלגנטי שמרגיש מעוצב.

Prompt snippet: "Cards appear with stagger: 0.08s delay between each, fade-in + translateY(20px), duration 0.5s, ease-out"

Parallax

Parallax — שכבות שנעות במהירויות שונות בגלילה, מה שיוצר תחושת עומק (כמו נוף מחלון רכבת — עצים קרובים זזים מהר, הרים רחוקים זזים לאט). אפקטי parallax מוסיפים דרמה ל-landing pages אבל דורשים זהירות.

חשוב: להשתמש אך ורק ב-transform: translateY() או CSS 3D transforms. לעולם לא ב-background-attachment: fixed (שבור במובייל) או top/left (גורם ל-layout recalculation).

Prompt snippet: "Subtle parallax: background image moves at 0.5x scroll speed using transform translateY, foreground at 1x"

Transition vs Animation — ההבדל הגדול

זה נקודת הבלבול הכי גדולה בקטגוריה. בואו נפרק:

הכלל: אם צריך trigger ומצב אחד → transition. אם צריך ריצה אוטומטית, מצבים מרובים, או לולאה → animation.

Prompt snippet (transition): "Button hover: transition transform 0.2s ease-out, scale 1.05 on hover"

Prompt snippet (animation): "Pulsing notification dot: @keyframes pulse 0%{scale:1;opacity:1} 50%{scale:1.5;opacity:0.5} 100%{scale:1;opacity:1}, infinite 2s"

Keyframes

Keyframes — הגדרת מצבי אנימציה בנקודות אחוז לאורך ה-timeline. 0% = התחלה, 100% = סוף, ואפשר להוסיף כמה נקודות שרוצים ביניהם. Keyframes נותנים שליטה מלאה על כל שלב באנימציה.

Prompt snippet: "@keyframes slideUp: 0% {opacity:0; transform:translateY(40px)} 100% {opacity:1; transform:translateY(0)}. Apply to sections on scroll-in."

Scroll-Triggered Animation

Scroll-Triggered Animation — אנימציה שמתחילה כשהאלמנט נכנס לתוך ה-viewport בגלילה. נפוץ מאוד: כרטיסים שנכנסים, מספרים שעולים, תמונות שמתגלות. מבוסס על Intersection Observer API שמזהה מתי אלמנט חוצה את גבול ה-viewport.

Prompt snippet: "Scroll-triggered animation: cards fade-in and slide up when entering viewport, threshold 0.2, once (don't re-animate)"

Scroll-Driven Animations (CSS native)

Scroll-Driven Animations — ה-frontier החדש. API שמאפשר לקשור אנימציה ישירות ל-scroll position בלי שורת JavaScript. האנימציה מתקדמת ככל שגוללים — progress bar שמתמלא, תמונה שמתקרבת, טקסט שמשתנה — הכל ב-CSS בלבד.

נתמך ב-Chrome מ-2023, Firefox (flag), Safari בדרך. כולל שני סוגי timeline:

• scroll() — התקדמות לפי scroll position של העמוד כולו
• view() — התקדמות לפי מיקום האלמנט ב-viewport (נכנס → באמצע → יוצא)

Prompt snippet: "CSS scroll-driven animation: progress bar fills using animation-timeline: scroll(), from width 0% to 100% as page scrolls"

View Transitions API

View Transitions API — API מקורי בדפדפן שמאפשר מעברים חלקים בין דפים (או בין states באפליקציה) — בלי framework. הדפדפן "מצלם" את ה-DOM הנוכחי, עושה את השינוי, ו"מנפש" את ההבדל. תומך גם במעברי דפים (MPA) מ-Chrome 126 ו-Safari 18.

Prompt snippet: "Use View Transitions API for page navigation: morph hero image between pages, crossfade text content, 0.3s ease-out"

1.6 קטגוריית Interaction — מה קורה כשנוגעים

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

States — מצבי האינטראקציה

כל אלמנט אינטראקטיבי (כפתור, לינק, input) צריך ארבעה מצבים ויזואליים. כשאתם מציינים את כולם — ה-AI בונה כפתור שמרגיש professional:

Prompt snippet: "Button with 4 states: hover scale(1.05) + shadow-lg, active scale(0.97), focus-visible ring 2px offset-2px primary color, disabled opacity 50%"

Micro-interaction

Micro-interaction — אנימציית feedback קטנה שמאשרת פעולה: כפתור שקופץ בלחיצה, toggle שמחליק, checkbox שעושה "V" מונפש, לב שמתמלא. Dan Saffer הגדיר את המושג ב-2013 — היום זה אלמנט יסוד בכל UI מודרני.

ההבדל בין אתר "טוב" ל-"WOW" — זה לרוב 10-15 micro-interactions מדויקות בנקודות הנכונות.

Prompt snippet: "Add micro-interactions: button springs on click (scale 0.95→1.02→1), success checkmark draws itself with SVG stroke animation, toggle slides with spring easing"

Cursor Follower

Cursor Follower — אלמנט מותאם אישית שעוקב אחרי העכבר עם עיכוב קל (lerp/lag), מה שיוצר תחושת "זנב". נפוץ באתרי portfolio ו-creative agencies. יכול להיות עיגול, נקודה, או אפילו טקסט שמשתנה.

Prompt snippet: "Custom cursor follower: 24px circle, follows mouse with 0.1 lerp delay, grows to 48px on hovering clickable elements, blend-mode difference"

Magnetic Button

Magnetic Button — כפתור שנמשך לכיוון הסמן כשהעכבר בטווח קרוב (50-100px). כשהסמן מתקרב, הכפתור "נע" קלות לכיוונו. אפקט עדין שמרגיש קסום ומוסיף dimensionality לממשק.

Prompt snippet: "Magnetic button: moves 8px toward cursor when within 80px radius, spring back on mouse leave, translateX/Y based on cursor position"

Drag ו-Swipe

Drag — גרירה ישירה של אלמנט (desktop: mouse, mobile: touch). Swipe — תנועת אצבע מהירה לצד (בעיקר מובייל). שניהם "direct manipulation" — הגולש מרגיש שהוא זזז את הדבר עצמו, לא לוחץ על כפתור.

Prompt snippet: "Draggable cards with snap-to-grid on drop, swipe-to-dismiss on mobile with spring animation on release"

Haptic-feel Interactions

Haptic-feel Interactions — אינטראקציות שמרגישות "פיזיות" גם בלי vibration API — scale down בלחיצה (כפתור "נלחץ"), bounce back ב-release, resistance כשמגיעים לקצה של scroll. התחושה נוצרת מ-timing ו-easing מדויקים.

Prompt snippet: "Haptic-feel button: active scale(0.96) with 50ms duration, release spring back with overshoot, subtle box-shadow change for depth"

1.7 קטגוריית 3D ו-WebGL — עומק ופרספקטיבה

רוב האתרים חיים בעולם שטוח — שני ממדים. אבל ברגע שמוסיפים עומק, גם קצת, הכל מרגיש אחרת. כרטיס שמסתובב קלות ב-hover. רקע עם particles שצפים. סצנה תלת-ממדית שהגולש יכול לסובב. 7 המונחים בקטגוריה הזו מחולקים לשני עולמות: CSS 3D (פשוט, קל, כל אתר) ו-WebGL/Three.js (מתקדם, כבד, אתרי WOW מיוחדים).

Perspective

Perspective — מאפיין CSS שיוצר תחושת עומק על אלמנט-אב. הערך הוא "מרחק" מדומיין בין העין למסך: perspective(1000px) = עדין ורחוק, perspective(400px) = דרמטי וקרוב. בלי perspective, כל ה-3D transforms נראים שטוחים.

חשבו על perspective כמו עדשת מצלמה — wide angle (ערך נמוך) מגזים את העומק, telephoto (ערך גבוה) משטח אותו.

Prompt snippet: "Parent container with perspective(1000px). Child cards rotate on hover for subtle 3D depth effect."

CSS 3D Transforms (transform3d)

transform3d — קבוצת CSS transforms שמוסיפות ציר שלישי (Z): translateZ() מקרב/מרחיק אלמנט, rotateX() מסובב סביב הציר האופקי (כמו דלת מתהפכת), rotateY() סביב הציר האנכי (כמו קלף מסתובב). כל זה עובד ישירות ב-CSS בלי JavaScript, ברזולוציה מושלמת, ועם ביצועים מעולים כי רץ ב-GPU.

הטריק: transform-style: preserve-3d על האלמנט-אב, אחרת הילדים "מתיישרים" חזרה לשטוח.

Prompt snippet: "Card with transform-style: preserve-3d. On hover: rotateY(8deg) rotateX(-4deg) translateZ(20px), transition 0.4s ease-out. Backface hidden for flip animation."

WebGL

WebGL — טכנולוגיה שמאפשרת עיבוד תלת-ממדי מואץ-GPU בתוך הדפדפן. בניגוד ל-CSS 3D שעובד על אלמנטי HTML, WebGL מצייר על canvas — פיקסל אחרי פיקסל — באמצעות shaders (תוכניות קטנות שרצות על כרטיס המסך). מאפשר סצנות מורכבות: אלפי particles, תאורה דינמית, חומרים (materials), צללים.

החיסרון: WebGL הוא נמוך-רמה (low-level). כתיבת shader מאפס = מתמטיקה כבדה. לכן כמעט תמיד משתמשים בספרייה שעוטפת אותו.

Prompt snippet: "Full-screen WebGL canvas background with floating gradient spheres, subtle mouse parallax interaction"

Three.js

Three.js — הספרייה הפופולרית ביותר ל-3D ב-web. עוטפת את WebGL ונותנת API ברמה גבוהה: יוצרים scene, מוסיפים camera, שמים אובייקטים עם materials, מפעילים renderer — בלי לכתוב shader. עבור React, יש React Three Fiber (R3F) + Drei שהופכים 3D ל-JSX component רגיל.

כש-Vibe Coder כותב "3D background with particles" — סביר שה-AI ישתמש ב-Three.js מאחורי הקלעים.

Prompt snippet: "Three.js scene with React Three Fiber: rotating 3D torus knot, metallic material, ambient + point light, OrbitControls for user interaction"

Particle System

Particle System — מערכת של מאות או אלפי אלמנטים קטנים (נקודות, כוכבים, פתיתים, בועות) שזזים ביחד. כל particle הוא פשוט — אבל יחד הם יוצרים אפקט מרהיב: שמיים זרועי כוכבים, שדה particles שמגיב לעכבר, קונפטי באירוע.

ב-CSS אפשר particle system קטן (עם pseudo-elements ו-keyframes). particle system רציני עם אלפי אלמנטים דורש Canvas או Three.js.

Prompt snippet: "Particle system: 500 floating dots, slow random drift, connect particles within 100px distance with thin lines, subtle mouse repel effect"

Orbit Controls

Orbit Controls — component ב-Three.js שמאפשר לגולש לסובב, להתקרב (zoom), ולהזיז (pan) סצנה תלת-ממדית עם העכבר או מגע. בלי orbit controls, הסצנה סטטית — הגולש רק צופה. עם orbit controls, הגולש חוקר.

Prompt snippet: "3D product viewer: load GLB model, OrbitControls with autoRotate, damping enabled, zoom limited between 2-8"

Depth of Field

Depth of Field (DOF) — אפקט טשטוש שמדמה התמקדות מצלמה: האובייקט המרכזי חד, הרקע והקדמה מטושטשים. בצילום זה טבעי; ב-web זה אפקט post-processing שרץ ב-Three.js (דרך EffectComposer). מוסיף תחושת ריאליזם ומפנה תשומת לב.

Prompt snippet: "Three.js scene with depth of field: focus on center object, bokeh blur on background, aperture 0.025"

מתי להשתמש במה? CSS 3D לעומת WebGL לעומת Three.js

הכלל: 90% מאפקטי ה-3D שתרצו — CSS 3D מספיק. אם צריכים particles, תאורה, או אובייקטים 3D אמיתיים — Three.js. WebGL ישירות — רק למומחים.

1.8 קטגוריית Performance — מהירות וחוויה

אתר יפה שנטען 6 שניות — הוא אתר שאף אחד לא רואה. Google מדד ומצא שמעל 53% מהגולשים נוטשים אתר מובייל שלא נטען תוך 3 שניות. Performance הוא לא "בונוס" — הוא תנאי סף. 8 המונחים בקטגוריה הזו הם ההבדל בין אתר שמרגיש מהיר לאתר שמרגיש שבור.

בנוסף, מ-2021 Google משתמש ב-Core Web Vitals כפקטור דירוג. אתר איטי = דירוג נמוך יותר בתוצאות חיפוש. זה לא רק חוויה — זה ביזנס.

Core Web Vitals — שלושת המדדים הקריטיים

Google מודד שלושה דברים בכל דף. שלושת המדדים האלה נקראים Core Web Vitals — והם משפיעים ישירות על דירוג האתר ב-Google:

Lazy Loading

Lazy Loading — טעינת תוכן (בעיקר תמונות) רק כשהגולש מתקרב אליו, לא בטעינה הראשונית. ב-HTML מודרני זה פשוט: <img loading="lazy">. זה חוסך bandwidth ומזרז את הטעינה הראשונית — כי הדפדפן לא מוריד 20 תמונות below the fold בבת אחת.

חשוב: לעולם אל תשימו lazy loading על תמונת ה-hero או אלמנט ה-LCP — הם צריכים להיטען ראשונים!

Prompt snippet: "All images below the fold: loading='lazy'. Hero image: loading='eager' with fetchpriority='high'."

Skeleton Loading

Skeleton Loading — placeholder שמדמה את ה-layout הסופי בזמן הטעינה: קופסאות אפורות במקום תמונות, פסים במקום טקסט, הכל עם shimmer animation עדין. Facebook הציגו את הגישה הזו ב-2015 — היום זה סטנדרט. Skeleton טוב מ-spinner כי הוא מראה מבנה (הגולש "רואה" מה הולך לבוא) במקום סתם "מחכה".

הכלל: ה-skeleton חייב להתאים ל-layout הסופי. skeleton שונה מהתוכן הסופי = CLS גבוה + אובדן אמון.

Prompt snippet: "Skeleton loading state: gray rounded rectangles matching final card layout, shimmer animation left-to-right, 1.5s infinite loop"

Code Splitting

Code Splitting — חלוקת ה-JavaScript לחתיכות (chunks) שנטענות לפי הצורך. במקום לטעון 500KB של JS בבת אחת — טוענים 80KB שנחוצים לדף הנוכחי, והשאר נטען כשהגולש מנווט. כלים כמו Vite ו-Webpack עושים את זה אוטומטית לפי routes.

Prompt snippet: "Implement route-based code splitting. Lazy-load heavy components (charts, 3D, rich editor) only when needed."

Image Optimization

Image Optimization — סט טכניקות שמבטיח שתמונות נטענות מהר ובאיכות: פורמט WebP/AVIF (50-80% קטן יותר מ-JPEG), srcset ל-responsive sizes, width/height attributes (מונע CLS), ו-CDN שמגיש את הגרסה הנכונה לפי מכשיר.

Prompt snippet: "Images in WebP with AVIF fallback, srcset for 640/960/1280/1920w, explicit width and height attributes to prevent CLS"

Compositor Animations לעומת Layout Animations

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

הכלל הזהב: אנימציות על transform ו-opacity בלבד. רוצים להזיז? translateX(), לא left. רוצים לשנות גודל? scale(), לא width. רוצים להעלים? opacity, לא display.

Prompt snippet: "All animations must use compositor-friendly properties only: transform and opacity. No width/height/margin animations. Use will-change: transform on animated elements."

1.9 קטגוריית UX Patterns — דפוסים שעובדים

UX Patterns הם "מתכונים" מוכחים שעובדים כי אנשים התרגלו אליהם. כש-AI בונה landing page, הוא מסדר אלמנטים — אבל בלי לציין pattern ספציפי, הסידור יהיה גנרי. 6 המונחים בקטגוריה הזו הם דפוסים שכל landing page טוב משתמש בהם.

CTA (Call to Action)

CTA — Call to Action — הכפתור או הלינק שמבקש מהגולש לעשות משהו: "התחל עכשיו", "נסה חינם", "צור קשר". CTA טוב בולט ויזואלית (צבע מנוגד, גודל גדול, whitespace סביבו) ומשתמש בשפה פעילה ("Get Started", לא "Submit").

מתי: כל עמוד צריך CTA ראשי אחד ברור. עמוד עם 5 CTAs שווים = אף אחד לא בולט = אף אחד לא לוחץ.

Prompt snippet: "Primary CTA button: high-contrast color, large padding 16px 32px, rounded-lg, hover scale(1.02), centered in hero section with 48px margin-top"

Social Proof

Social Proof — אלמנטים שמראים שאנשים אחרים כבר סומכים עליך: לוגואים של חברות ("Trusted by..."), ביקורות של לקוחות, מספר משתמשים ("Join 10,000+ users"), דירוגים, testimonials עם תמונה ושם אמיתי. Robert Cialdini הגדיר את העיקרון ב-1984 — אנשים עוקבים אחרי מה שאחרים עושים.

מתי: מיד אחרי ה-hero section או ליד ה-CTA — ברגע שמישהו שוקל ללחוץ, social proof נותן את הדחיפה.

Prompt snippet: "Social proof section below hero: logo cloud of 5-6 company logos in grayscale, 'Trusted by 10,000+ teams' text, opacity 60% for subtle trust signal"

Above the Fold

Above the Fold — כל מה שנראה בלי גלילה. המונח מגיע מעולם העיתונות (מעל הקפל של העיתון). באינטרנט, זה משתנה לפי גודל מסך — אבל העיקרון קבוע: המסר הכי חשוב חייב להיות שם. Hero + headline + CTA + social proof — כל זה צריך להיות above the fold.

מתי: כשמתכננים landing page, שאלו: "מה הגולש רואה בלי לגלול?" אם התשובה היא רק לוגו וכותרת — חסר CTA.

Prompt snippet: "Ensure above the fold (first viewport) contains: headline, subtitle, primary CTA, and social proof logos. No scroll required for core message."

Progressive Disclosure

Progressive Disclosure — הצגת מידע שלב אחרי שלב: קודם העיקר, אחר כך הפרטים, ואז ה-edge cases. FAQ accordion הוא דוגמה קלאסית — רואים שאלה, לוחצים, רואים תשובה. זה מונע information overload ומאפשר לכל גולש לבחור כמה עומק הוא רוצה.

מתי: pricing page עם הרבה תכונות, form ארוך שנחלק לשלבים, documentation עם collapse sections.

Prompt snippet: "FAQ section with progressive disclosure: accordion items, only one open at a time, smooth height animation, chevron rotates on open"

Breadcrumbs

Breadcrumbs — ניווט שמראה את המיקום הנוכחי בהיררכיית האתר: Home > Products > Shoes > Running. עוזר לגולש להבין איפה הוא ולחזור אחורה בקלות. חשוב במיוחד ב-e-commerce ובאתרי תוכן עם היררכיה עמוקה. Google גם מציג breadcrumbs בתוצאות חיפוש.

מתי: כל אתר עם יותר משתי רמות היררכיה. blog עם קטגוריות, חנות עם departments, דוקומנטציה עם chapters.

Prompt snippet: "Breadcrumb navigation at top: Home > Category > Current Page. Subtle text, separator '/', last item not clickable, structured data for SEO"

Toast Notification

Toast Notification — הודעה קצרה שצצה בפינת המסך ונעלמת לבד אחרי 3-5 שניות: "נשמר בהצלחה", "הועתק ללוח", "שגיאה — נסה שוב". Toast לא חוסם את הגולש (non-blocking) — בניגוד ל-modal שדורש סגירה. שם מגיע מה-toaster — "קופץ" כמו טוסט.

מתי: feedback על פעולה שהושלמה, התראות זמניות, success/error messages.

Prompt snippet: "Toast notification system: slides in from bottom-right, success=green, error=red, auto-dismiss after 4s, progress bar showing remaining time, swipe to dismiss"

1.10 מונחים חדשים 2025-2026 — מה חם עכשיו

הטכנולוגיה זזה מהר. מונחים שלא היו קיימים לפני שנה — היום הם הסטנדרט. הקטגוריה הזו מכילה 10 מונחים שהפכו רלוונטיים ב-2025-2026. חלקם עדיין "חמים" ומתפתחים, חלקם כבר התבססו. הסיבה שהם כאן: אם תשתמשו בהם בפרומפט, ה-AI ידע שאתם מעודכנים — ויחזיר תוצאות שמתאימות ל-2026, לא ל-2020.

Liquid Glass

Liquid Glass — שפת העיצוב החדשה של Apple, שהוכרזה ב-WWDC יוני 2025. מדובר ב-material שקוף-למחצה עם שבירת אור (refraction) והשתקפות דינמית — כאילו הממשק עשוי מזכוכית נוזלית שמגיבה לתוכן שמתחתיה. זה האבולוציה הבאה של glassmorphism.

ב-web, אפשר לדמות Liquid Glass עם שילוב של backdrop-filter: blur(), SVG feTurbulence ו-feDisplacementMap ליצירת עיוות (distortion), ו-CSS mix-blend-mode. המימוש המלא של Apple הוא native — אבל web developers כבר יוצרים גרסאות מרשימות.

Prompt snippet: "Liquid Glass card: backdrop-blur(20px), SVG filter with feTurbulence for subtle refraction distortion, rgba(255,255,255,0.15) background, dynamic light reflection based on mouse position"

Skeleton Screen

Skeleton Screen — ראינו את skeleton loading בסעיף Performance, אבל ב-2025 זה הפך מ-"nice to have" ל-UX standard. כל אפליקציה רצינית (Notion, Linear, Figma, GitHub) משתמשת ב-skeleton screens. הציפייה של גולשים היום: אם אני רואה spinner — האתר מרגיש ישן.

סטטוס: Mainstream 2025. לא "טרנד" אלא "ברירת מחדל".

Prompt snippet: "Loading state: skeleton screen matching the exact final layout — no spinner. Gray rectangles with rounded corners, shimmer animation sweep from left to right."

Bento Grid

Bento Grid — grid מודולרי א-סימטרי שבו תאים בגדלים שונים — כמו קופסת בנטו יפנית. Apple הפופולריזו את הסגנון ב-keynote 2023, ומאז זה בכל מקום: Notion, Linear, Framer templates. Bento grid שונה מ-grid רגיל בכך שהוא מעודד מגוון גדלים — large hero card + small supporting cards ליד.

סטטוס: Mainstream 2024-26. מימוש דרך CSS Grid עם grid-template-areas או span columns/rows.

Prompt snippet: "Bento grid layout: 4 columns, hero card spans 2x2, three smaller cards in remaining cells, 16px gap, rounded-2xl corners, each card with different content type"

8px Grid System

8px Grid System — מערכת ריווח שבה כל המרווחים, padding, margins, וגדלים מבוססים על כפולות של 8px: 8, 16, 24, 32, 40, 48, 64, 80. Material Design של Google הציגו את הגישה ב-2014 — והיום זה הסטנדרט. למה 8? כי 8 מתחלק ב-2 ו-4 (responsive), נראה הרמוני, ויוצר consistency אוטומטית.

סטטוס: Stable standard. כל design system רציני מבוסס על 8px.

Prompt snippet: "Use 8px grid system for all spacing. Padding: 16px (small), 24px (medium), 32px (large). Gap between cards: 24px. Section margins: 64px or 80px."

Compositor Animation

Compositor Animation — הבנו את זה בסעיף Performance, אבל ב-2025-26 התפתח הכלי: Chrome DevTools מסמן בצהוב כל אנימציה שלא רצה ב-compositor. כלים כמו Lighthouse מזהירים ספציפית. זה הפך מ-"tip מתקדם" ל-"best practice שנאכף".

סטטוס: Standard 2025. הכלים אוכפים את זה.

Prompt snippet: "Ensure all animations are compositor-only: transform and opacity. Verify with Chrome Animations panel — no layout triggers."

dotLottie

dotLottie — פורמט אנימציה חדש מ-LottieFiles שמחליף Lottie JSON. הייתרון: דחיסה של 80-90%, תמיכה במספר אנימציות בקובץ אחד, state machines מובנות (interactive animations בלי קוד), ו-WASM player קטן (30KB). מעצבים יוצרים ב-After Effects או Figma, מייצאים .lottie, וה-web player מריץ.

סטטוס: Growing 2024-26. LottieFiles רואים 500M+ asset downloads לחודש.

Prompt snippet: "Use dotLottie player for icon animations. Load .lottie file (not .json), autoplay on scroll-trigger, loop for loading states, play-once for success confirmations."

State Machine (Rive / dotLottie)

State Machine — מנגנון שמגדיר states (מצבים) ו-transitions (מעברים) לאנימציות אינטראקטיביות. דוגמה: כפתור עם שלושה states — idle, hover, loading — עם transitions מוגדרים ביניהם. Rive הציגו את הגישה, dotLottie אימצו אותה ב-2025. במקום לכתוב JS שמחליף אנימציות — ה-state machine עושה את זה אוטומטית.

סטטוס: Growing 2025-26. גישה שמשנה את הצורה שבה מעצבים חושבים על אנימציה.

Prompt snippet: "Interactive button animation with state machine: idle state (subtle pulse), hover state (glow increase), click state (checkmark draws), error state (shake). Transitions auto-managed by Rive state machine."

Island Architecture (Astro)

Island Architecture — ארכיטקטורת web שבה הדף הוא HTML סטטי בברירת מחדל, ורק "איים" (islands) ספציפיים מקבלים JavaScript ואינטראקטיביות. Astro היו החלוצים ב-2021, וב-2026 הרעיון התפשט: fresh (Deno), Eleventy, ואחרים. הרווח: zero JS by default = טעינה מהירה מאוד.

סטטוס: Mainstream 2025-26. Astro מעל 60K stars ב-GitHub.

Prompt snippet: "Astro project with Island Architecture: static HTML for layout and content, React islands only for interactive components (search bar, carousel, form). Zero JS by default."

Container Queries

Container Queries — media queries שמגיבים לגודל של container ולא לגודל של viewport. עד 2023, CSS יכל לשאול רק "מה גודל המסך?" עכשיו אפשר לשאול "מה גודל ה-div שאני בתוכו?" זה הופך components ל-truly responsive — card שמשנה layout לפי המקום שהוא נמצא בו, לא לפי רוחב המסך.

סטטוס: Supported בכל הדפדפנים המודרניים מ-2023. Mainstream 2025.

Prompt snippet: "Card component with container queries: stacked layout when container < 300px, horizontal layout when > 300px. Use @container instead of @media for true component responsiveness."

Variable Fonts

Variable Fonts — קובץ פונט אחד שמכיל את כל ה-weights, widths, ו-slants. במקום לטעון 6 קבצי פונט (Light, Regular, Medium, Bold, ExtraBold, Black) — טוענים קובץ אחד ומשתמשים ב-CSS font-variation-settings לכל ערך. המפרט קיים מ-2016, אבל ב-2025 Google Fonts תומך ב-1,500+ variable fonts וזה הפך לסטנדרט.

סטטוס: Mainstream 2025. חוסך 40-60% מגודל הורדת פונטים.

Prompt snippet: "Use variable font (Inter or Geist). Single file load. font-weight ranges from 300-800 via font-variation-settings. Animate font-weight on hover for smooth bold transition."

מפת טרנדים — מה הסטטוס של כל מונח

1.11 מונחים שמבלבלים — שבע זוגות שחייבים להבדיל

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

1. Transition vs Animation

כלל אצבע: צריך תגובה ל-hover או click? transition. צריך משהו שרץ לבד, חוזר, או עובר יותר משני מצבים? animation עם keyframes.

Prompt snippet (transition): "Button with transition: background-color 0.3s ease, transform 0.2s ease on hover"

Prompt snippet (animation): "Pulsing glow ring around avatar: keyframes animation, scale 1→1.15→1, opacity 1→0.5→1, infinite loop 2s ease-in-out"

2. Margin vs Padding

כלל אצבע: רוצה רווח בין אלמנטים? margin (או gap ב-Flexbox/Grid). רוצה רווח בין הקצה של אלמנט לתוכן בפנים? padding.

Prompt snippet: "Card with padding: 24px inner spacing, margin-bottom: 16px gap between cards. Or better: cards in grid with gap: 16px."

3. Opacity vs Visibility

כלל אצבע: רוצה fade-in/out? opacity (ושילוב עם pointer-events: none כשנסתר). רוצה להסתיר בלי אנימציה ולמנוע interaction? visibility: hidden. רוצה להסתיר ולפנות מקום? display: none.

Prompt snippet: "Modal overlay: opacity 0 + pointer-events none when hidden, transition opacity 0.3s ease, opacity 1 + pointer-events auto when visible"

4. Position Fixed vs Sticky

כלל אצבע: אלמנט שצריך להיות נגיש תמיד (navbar, chat widget)? fixed. אלמנט שצריך להתחיל במקום ולהידבק בגלילה? sticky.

Prompt snippet: "Sticky table-of-contents sidebar: position sticky, top 80px (below fixed navbar), scrolls with page until reaching top offset"

5. vh vs dvh

כלל אצבע: ב-2026 אין סיבה להשתמש ב-vh ל-full-screen sections. תמיד dvh. הסיבה: במובייל, 100vh גורם ל-scroll מיותר כי הוא לא מחשיב את ה-address bar. 100dvh פותר את זה.

Prompt snippet: "Hero section: min-height 100dvh (not vh — avoid mobile address bar overflow)"

6. Gradient vs Mesh Gradient

כלל אצבע: אלמנט קטן ומדויק? linear/radial gradient. רקע גדול שצריך להרגיש premium ואורגני? mesh gradient.

Prompt snippet: "Background: mesh gradient with 4 color stops — purple top-left, blue center, pink bottom-right, teal top-right — organic blending, not linear"

7. Parallax vs Scroll-Triggered Animation

כלל אצבע: רוצה תחושת עומק רציפה בגלילה? parallax. רוצה שאלמנטים "יתגלו" כשגוללים אליהם? scroll-triggered. ברוב המקרים, scroll-triggered הוא הבחירה הנכונה — יותר קל לביצועים ופחות מטריד.

Prompt snippet (parallax): "Parallax hero: background image moves at 0.5x scroll speed, foreground text at 1x — creates depth illusion"

Prompt snippet (scroll-triggered): "Cards fade-in and translateY(30px→0) when entering viewport, IntersectionObserver threshold 0.2, once: true"

1.12 סיכום ופרויקט — המילון האישי שלך

בפרק הזה עברתם דרך ארוכה. התחלתם עם "Build me a nice website" וסיימתם עם אוצר מילים של 50+ מונחים מקצועיים ב-9 קטגוריות. עכשיו הזמן להוכיח את ההבדל — לעצמכם.

המבחן האמיתי: לפני ואחרי

ב-Do Now הראשון של הפרק כתבתם "Build me a nice website" ושמרתם את התוצאה. עכשיו אתם הולכים לכתוב את אותה בקשה מחדש — אבל הפעם, עם המונחים שלמדתם.

הפרומפט הגנרי (לפני):

"Build me a nice website"

הפרומפט המשודרג (אחרי) — דוגמה עם 18 מונחים:

"Build a landing page with a hero section (min-height 100dvh) featuring a mesh gradient background in purple-to-blue oklch tones. Use a serif display font for the heading at 64px with letter-spacing -0.02em, paired with a clean sans-serif (Inter variable font, weight 400) for body text at line-height 1.6. Add a glassmorphism CTA button with hover scale(1.05) spring easing, active scale(0.98), and focus-visible ring. Below the fold: a bento grid of feature cards with scroll-triggered stagger fade-in (0.08s delay between cards, translateY 30px→0). Use lazy loading for all images below the fold. Include dark mode support with prefers-color-scheme. Skeleton loading states for dynamic content."

ספרו: hero section, dvh, mesh gradient, oklch, serif, display font, letter-spacing, sans-serif, variable font, line-height, glassmorphism, spring easing, focus-visible, bento grid, scroll-triggered, stagger, lazy loading, dark mode, skeleton loading. 19 מונחים — כל אחד מהם אומר ל-AI בדיוק מה לעשות, במקום לנחש.

מה שכנראה השתנה בתוצאה

• Layout — hero בגובה מלא עם מבנה ברור, לא סתם מלל מרוכז
• Typography — font pairing מכוון עם היררכיה ויזואלית, לא ברירת מחדל של System UI
• Color — mesh gradient אורגני עם color palette מוגדר, לא "כחול עם לבן"
• Animation — stagger fade-in מתוזמן, לא bounce גנרי
• Interaction — כפתור עם 4 states מוגדרים, לא כפתור שטוח בלי hover
• Performance — lazy loading ו-skeleton כבר מובנים, לא afterthought

זה ההבדל של 50+ מונחים. לא קוד ביד. לא שנים של ניסיון. המילים הנכונות.

בניית המילון האישי שלך

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

פורמט מומלץ לכל מונח במילון האישי: