דילוג לתוכן הראשי
🌐

בניית אתרים עם AI — הפלואו הכי הפרקטי שיש!!

בן דסקלומאת בן דסקלו

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

  • Gemini — אפיון, קופי ובניית הפרומפט
  • Lovable — בניית האתר בפועל עם AI

שלב 1 — אפיון וקופי עם Gemini — נכנסים ל-Gemini ומדביקים:

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

המשימה: אפיין לי אתר מקצה לקצה כולל כל הקופי.

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

2. אחרי שיש לך את כל המידע הדרוש תגיד לי ולאחר מכן
 כתוב בריף מלא שכולל:

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

המטרה: בריף שמישהו יוכל לתת לעיצוב מחר ולקבל אתר מוכן.

💡 תענו על שאלות הג'ימני בפירוט — ככל שתתנו יותר מידע, הבריף יוצא מדויק יותר ו-Lovable יבנה טוב יותר.

שלב 2 — בניית הפרומפט ל-Lovable — נשארים באותו צ'אט בג'ימני ומדביקים:

פרומפט
לפני שאתה כותב — סגל לעצמך:
מפתח Full-Stack בכיר, מעצב UI/UX, מומחה אנימציות web.

בהתבסס על הבריף שבנינו — כתוב לי פרומפט מקיף ומדויק ל-Lovable
לבניית האתר מקצה לקצה.

הפרומפט חייב לכלול:
1. מבנה: כל הסקשנים לפי סדר הופעה
2. עיצוב: צבעים (hex), פונטים, spacing
3. אנימציות: כניסת אלמנטים, hover states, scroll animations
4. קופי: הטקסט המדויק לכל סקשן
5. רספונסיביות: הנחיות מובייל ספציפיות
6. CTA: מיקום, עיצוב וטקסט לכל כפתור

כתוב את הפרומפט כהוראות ישירות ל-AI —
לא כתיאור, אלא כפקודות.
התחל כל סקשן ב: "Build a [section name] section that..."

✅ ג'ימני יחזיר פרומפט ארוך ומפורט — זה תקין. ככל שהוא יותר ארוך, Lovable יבנה יותר מדויק.

שלב 3 — בניית האתר ב-Lovable

  1. נכנסים ל-Lovable
  2. לוחצים New Project
  3. מדביקים את כל הפרומפט שג'ימני כתב
  4. מחכים 2-4 דקות

[צילום מסך — Lovable אחרי הדבקת הפרומפט]

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

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

⏱️ כל שינוי לוקח 30-60 שניות. אפשר לעשות שינויים ללא הגבלה עד שהאתר מושלם.

אהבתם את המדריך? (color: blue) — לחצו כאן להצטרף →

רוצים את הכלים והמערכות שלי, מוכנים?

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

הצטרפו לקבוצת הוואטסאפ