מדריך 1: בונים את האתר הראשון ב-Lovable

מרעיון בראש לאתר עובד על המסך, בלי שורת קוד אחת. סדרת Lovable, חלק 1 מתוך 8.

מה תלמדו

• לבנות אתר אינטרנט מלא ועובד תוך פחות מרבע שעה בלי לכתוב קוד
• להשתמש במצב Plan כדי לתכנן שינויים לפני הביצוע ולחסוך קרדיטים
• להעלות קובץ Excel או PDF ולהפוך אותו לאתר אינטראקטיבי עם חיפוש וסינון
• לערוך טקסטים ישירות על המסך עד 100 עריכות ביום ללא צריכת קרדיטים
• להגדיר כללי בית קבועים במסמך Knowledge כולל עברית מימין לשמאל
• לייצר תמונות
• אייקונים ורקעים ישירות בתוך הפלטפורמה בלי כלים חיצוניים
• להשתמש בתור פרומפטים ובדיקות דפדפן אוטומטיות להאצת העבודה
• לצאת מלולאות תקלות נכון עם Undo
• Revert וחזרה לגרסה יציבה

למי זה מתאים

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

מה אפשר לעשות עם זה בפועל

• בניית דף נחיתה למאמן כושר
• יועץ או נותן שירותים תוך שעה אחת
• המרת גיליון Excel של מחירון או מלאי לכלי חיפוש נוח ללקוחות
• יצירת מחשבון אינטראקטיבי להצעת מחיר או לחישוב ROI ללא תכנות
• בניית שאלון או טופס איסוף מידע עם היגיון פנימי וטפסים מתקדמים
• הפיכת מצגת שיווקית ל-landing page עובד עם כפתורי פעולה
• יצירת לוח בקרה פנימי לצוות עם גרפים ונתונים מעודכנים
• בניית כלי ניהול משימות או פרויקטים פשוט לצוות קטן
• הקמת אתר תדמית לעסק חדש מרעיון ראשוני ועד פרסום תוך יום אחד

מדריך 1: בונים את האתר הראשון ב-Lovable

מרעיון בראש לאתר עובד על המסך, בלי שורת קוד אחת. סדרת Lovable, חלק 1 מתוך 8.

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

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

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

אחרי המדריך הזה, אתם תדעו:

🎓 מה זה Lovable ומה אפשר לבנות איתו

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

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

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

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

הרשמה והכניסה הראשונה

כל מה שצריך זה כתובת מייל ורעיון אחד ברור.

 

1

היכנסו לכתובת lovable.dev ולחצו על Get started

2

בחרו שיטת הרשמה: מייל וסיסמה, או חשבון Google, GitHub או Apple

3

מיד אחרי ההרשמה מחכה לכם סביבת עבודה אישית במסלול החינמי, עם 5 קרדיטים ליום

4

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

בתיבת הפרומפט המרכזית יש שלושה דברים שכדאי להכיר כבר עכשיו: כפתור מיקרופון להכתבה, בורר המצב Build ו-Plan ליד כפתור השליחה, וכפתור + שפותח תפריט עם Attach לצירוף קבצים, Design לבחירת תבנית פתיחה, ו-Connectors לחיבורים חיצוניים.

תכנון מקדים: השלב שרוב האנשים מדלגים עליו

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

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

אלה חמש השאלות שכל תוכנית טובה עונה עליהן, גם אם אתם כותבים אותן על דף:

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

מה רואים על המסך

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

לוח הצ'אט

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

התצוגה וארבע הלשוניות

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

• הלשונית Preview: האתר החי
• הלשונית Files: קבצים שנוצרו וקבצים שהעליתם
• הלשונית Code: הקוד עצמו, למי שרוצה להציץ או לערוך ידנית
• הלשונית More: כל שאר הכלים של הפרויקט, ובהם Cloud, Security, SEO & AI search, Connectors ו-Payments

בשורה העליונה נמצאים גם:
כפתור Share לשיתוף קישור צפייה
כפתור Publish להעלאת האתר לאוויר.

שני מצבי העבודה: Build ו-Plan

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

מצב Plan

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

 

1

בבורר המצב בחרו Plan

2

כתבו את הפרומפט לפיצ'ר שאתם רוצים

3

קראו את התוכנית שהוצגה. משהו לא נכון? כתבו מה לשנות

4

מרוצים? עברו ל-Build ואשרו, ורק אז הבנייה מתחילה

מצב Build

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

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

הפרומפט הראשון, ואיך לא לשרוף אותו

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

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

בחירת כיוון עיצובי: Design guidance

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

 

1

כתבו פרומפט בלי הנחיות עיצוב מפורטות, למשל בנה דף נחיתה למאמן כושר

2

עברו על שלושת הכיוונים שמוצגים כקלפים עם תצוגה מקדימה

3

רוצים שינוי? כתבו מה לתקן בשדה Describe changes ולחצו Submit

4

בחרו כיוון, והבנייה מתחילה ממנו

עריכה ישירה על התצוגה: סרגל התצוגה

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

בסרגל יש ארבעה מצבים, וכל אחד מהם עולה אחרת:

• Select elements: בוחרים אלמנט ומשנים אותו | צורך קרדיטים
  
• Edit text inline: עורכים טקסט ישירות על הדף | חינם עד 100 עריכות ביום
  
• Draw annotation: מסמנים בציור על המסך מה לשנות | צורך קרדיטים
  
• Add a comment: משאירים הערה לצוות | חינם
  

כללי הבית של הפרויקט: Knowledge

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

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

הרמה הבאה: Skills, הנחיות רב-פעמיות

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

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

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

הפלטפורמה מגיעה עם כמה מוכנות, בלי שתעשו כלום:

איך מפעילים אותן:

ואיך יוצרים אחת משלכם, כשיש לכם תהליך שחוזר על עצמו. נכנסים ל-Settings ואז Skills, ולוחצים על Add:

 

1

Build with Lovable — הפלטפורמה בונה איתכם את ה-Skill בשיחה, שואלת מה היא צריכה לעשות ומתי להפעיל אותה. הדרך הכי נוחה למי שעושה את זה בפעם הראשונה.

2

Write manually — טופס עם שלושה שדות: שם, תיאור ותוכן. השם מוגבל ל-64 תווים, באותיות קטנות, ספרות ומקפים בלבד.

3

Import from GitHub או Upload ZIP — לייבוא הנחיות מוכנות מקובץ בשם SKILL.md.

4

והדרך הכי פשוטה מכולן, שלא נמצאת בתפריט הזה בכלל: אחרי שהפלטפורמה סיימה משימה שיצאה טוב, פשוט בקשו ממנה בצ'אט לשמור את זה כ-Skill.

אפשר גם לבקש מה-Skill המובנית skill-creator לבנות אתכם אחת חדשה, והיא תשאל אתכם את השאלות הנכונות בדרך:

מקובץ קיים לאתר עובד

אחד השימושים המהירים ביותר הוא להעלות משהו שכבר יש לכם ולתת לפלטפורמה להפוך אותו לאתר.

יצירת תמונות בתוך הפלטפורמה

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

לדבר במקום להקליד

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

תור פרומפטים ובדיקות אוטומטיות

שני פיצ'רים קטנים שמשנים את קצב העבודה.

תור הפרומפטים

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

בדיקות דפדפן

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

כשמשהו נשבר

זה יקרה, וזה בסדר. יש שלוש רשתות ביטחון, בסדר עולה של חומרה.

• כפתור Try to Fix: מופיע לצד שגיאה. הפלטפורמה קוראת את היומנים, מזהה את הבעיה ומנסה לתקן
  
• פעולת Undo latest edit: מבטלת את השינוי האחרון ומחזירה את המצב הקודם
  
• היסטוריית הגרסאות: חוזרים לכל נקודה יציבה קודמת. אפשר גם לערוך הודעה ישנה ולבחור Revert and resend
  

קרדיטים ומסלולים

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

עוד כמה כללים על קרדיטים:

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

להזמין אנשים לסביבת העבודה: People

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

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

חמש רמות ההרשאה:

שתי דרכים להזמין, וההבדל ביניהן מעשי:

• הזמנה במייל לאדם מסוים, עם בחירת תפקיד. תקפה 30 יום. יש מכסה יומית — 5 במסלול החינמי, 20 ב-Pro, 100 ב-Business.
• קישור הזמנה שאפשר לשלוח לכמה אנשים. קישור אחד פעיל לכל תפקיד, והוא פג אחרי 5 ימים. הצטרפות דרכו לא נספרת במכסה היומית.

איפה הפלטפורמה פחות חזקה

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

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

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

לסיכום

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

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

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