בנייה עם AI
בניית אתר עם AI בעברית: מה נשבר, ומה לבקש מהכלי
כלי AI כותבים עברית לא רע בכלל. הבעיה היא כל מה שמסביב לה: חץ שמצביע הפוך, נקודה שקופצת לתחילת המשפט, פונט שאין לו עברית. אלה הדברים שאני בודק בכל אתר כזה, ומה כדאי לבקש מהכלי מראש.
מה נשבר כשבונים אתר בעברית
רוב התקלות חוזרות על עצמן, בלי קשר לכלי. אם תכירו אותן, תזהו אותן תוך שנייה:
הכיוון לא מוגדר
כשחסר dir="rtl" על הדף (dirתכונה ב־HTML שקובעת את כיוון הטקסט: rtl לעברית ולערבית, ltr לאנגלית.), הטקסט אולי מיושר לימין, אבל הדפדפן עדיין חושב שמאל לימין. ככה מקבלים נקודה שקופצת לצד הלא נכון של המשפט, וסוגריים שנפתחים הפוך. התיקון הוא שורה אחת, והיא צריכה להיות על תגית ה־html, עם lang="he" לידה.
ריווח שמוגדר לפי שמאל וימין
הרבה קוד שנוצר עם AI כותב ״רווח משמאל״ במקום ״רווח בסוף״. באנגלית זה אותו דבר. בעברית האייקון נדבק לטקסט מהצד הלא נכון. ב־Tailwindדרך לעצב אתר עם מחלקות קצרות בתוך הקוד, כמו ms-4 לרווח. הרבה כלי AI משתמשים בה., למשל, ms-4 ו־me-4 מתהפכים לבד, ו־ml-4 לא.
חצים ואייקונים כיווניים
בעברית ״הבא״ הוא שמאלה. קרוסלה עם חץ ימינה ל״הבא״, או אייקון של ״חזרה״ שמצביע קדימה, הם הסימן הכי מהיר לאתר שתורגם ולא נבנה בעברית.
פונט בלי עברית
הכלי בוחר פונט יפה באנגלית, ולפונט אין אותיות עבריות. הדפדפן משלים את העברית מפונט המערכת, ופתאום הכותרת בפונט אחד והמילה באנגלית בתוכה בפונט אחר. על בחירת פונט כתבתי במדריך לפונטים לאתרים בעברית.
טפסים, טלפונים ומיילים
כתובת מייל או כתובת אתר שמקלידים בשדה מימין לשמאל מתבלגנת בזמן ההקלדה. לשדות כאלה מגדירים dir="ltr", וגם לטקסט שמציג אותם.
עברית שנשמעת מתורגמת
״גלו את החוויה״, ״פתרונות מקיפים לעסק שלכם״. כשהטקסט נכתב באנגלית בראש של המודל ותורגם, זה מורגש. הסימנים המלאים של זה נמצאים במדריך על AI slop.
מה לבקש מהכלי, לפני שהוא מתחיל
הרבה יותר קל לבקש את זה בפרומפט הראשון מאשר לתקן אחר כך עמוד אחרי עמוד. זה הנוסח שאני מדביק בתחילת כל פרויקט בעברית, ב־Lovable, ב־Base44 או ב־Claude Code:
האתר כולו בעברית, מימין לשמאל.
הגדר lang="he" ו־dir="rtl" על תגית ה־html.
השתמש רק בתכונות כיוון לוגיות (start, end, ms, me, ps, pe) ולא ב־left ו־right.
חצים של ״הבא״ ו״המשך״ מצביעים שמאלה. חצים של ״חזרה״ מצביעים ימינה.
מספרי טלפון, כתובות מייל, כתובות אתר ושדות שמקלידים בהם באנגלית מקבלים dir="ltr".
בחר פונט שיש לו אותיות עבריות ולטיניות מאותה משפחה.
כתוב את כל הטקסטים בעברית טבעית, כמו שמדברים בישראל, ולא כתרגום מאנגלית.אם הכלי כבר בנה את האתר, אפשר להדביק את אותו פרומפט עם בקשה אחת בהתחלה: ״עבור על כל הקבצים ותקן לפי הכללים האלה״.
בדיקה של חמש דקות לפני שמעלים
לפני שאני שולח קישור למישהו, אני עובר על הרשימה הזאת, בטלפון ולא במחשב:
- קוראים את הכותרת הראשית בקול. אם היא נשמעת כמו פרסומת מתורגמת, משנים.
- עוברים על כל חץ ואייקון: ״הבא״ שמאלה, ״חזרה״ ימינה.
- מחפשים משפט שמסתיים במילה באנגלית ובודקים איפה יצאה הנקודה.
- ממלאים את הטופס עם מייל אמיתי, ומוודאים שהוא לא התהפך בזמן ההקלדה.
- מסתכלים על הטלפון והכתובת בתחתית הדף.
- בודקים את שם הלשונית בדפדפן. גם הוא צריך להיות בעברית.
- שולחים את הקישור לעצמכם בוואטסאפ ורואים איזו תצוגה מקדימה עולה: כותרת, תיאור ותמונה.
הבדיקה הזאת לא מחליפה עין של מעצב. היא כן תופסת את רוב מה שגורם לאתר להיראות ״לא מכאן״.
להתחיל מעיצוב שכבר עובד בעברית
הדרך הכי קצרה לאתר בעברית שנראה טוב היא לא לתקן אחרי ה־AI, אלא לתת לו נקודת התחלה שכבר נבנתה בעברית. לשם זה בנינו את Taster: רכיבים ואתרים שלמים שעוצבו מימין לשמאל מההתחלה, עם פונטים עבריים וטקסטים שנכתבו בעברית.
אפשר להעתיק רכיב לפרויקט, או לחבר את הספרייה לסוכן קודכלי AI שעובד בעצמו על הקבצים של הפרויקט: כותב, משנה ומריץ פקודות, ומבקש אישור בדרך. דרך MCP ולבקש במילים: ״תוסיף פתיח כהה לסטודיו״. מה זה MCP ואיך זה עובד, הסברתי במדריך נפרד.
