בקשת מידע | איך Base44 מעצב כ"כ יפה?

[לאצי]

זה לא סוד שBase44 אלוף בעיצוב אתרים. אבל שמתי לב כי הוא משתמש גם בג'מיני פרו 2.5
הסיפור הוא שכשאני יוצר אתר עם ג'מיני פרו 2.5 הוא לא מעצב כל כך יפה כמו Base44. אז השאלה היא איך Base44 כן מצליח לעצב כל כך יפה? האם הוא נותן פרומפט מסוים לAI עם הוראות כיצד ומה לבנות או שהוא אומר לו בכללי 'תעצב לי עיצוב הכי מודרני' (ניסיתי לתת לג'מיני הוראת מערכת כזו ועדיין לא התחיל לגרד את העיצוב של Base44).
בקיצור, האם אני גם יכול לתת כזה פרומפט לג'מיני שהוא יעצב לי באותה רמה?

[ע"ה דכו"ע]

@לאצי
כשAI STUDIO כותב לך הוא משתמש בספריות עיצוב ולמרות זאת זה יוצא פחות טוב? או שהוא רק כותב לבד קצת CSS?

[לאצי]

@ע-ה-דכו-ע כשהוא כותב קוד בצ'אט הוא לכאו' משתמש רק עם CSS, השאלה היא מה קורה במצב Build, כי שם הוא בונה באמצעות קודי ריאקט. יש לך מושג מה קורה שם? (או איך אוכל לבדוק זאת בקוד?)

[ע"ה דכו"ע]

@לאצי כתב בבקשת מידע | איך Base44 מעצב כ"כ יפה?:

@ע-ה-דכו-ע כשהוא כותב קוד בצ'אט הוא לכאו' משתמש רק עם CSS, השאלה היא מה קורה במצב Build, כי שם הוא בונה באמצעות קודי ריאקט. יש לך מושג מה קורה שם? (או איך אוכל לבדוק זאת בקוד?)

אם הוא משתמש רק בCSS עצמאי זה הגיוני בהחלט שזה יהיה פחות מעוצב. במצב Build אין לי מושג מה הוא עושה.

אתה יכול לכתוב לו (בצ'אט) שאתה רוצה לעשות את זה מעוצב, ושימליץ לך עם איזה ספריה לעשות.

[לאצי]

@ע-ה-דכו-ע לטענתו זה מה שהוא עושה:
אני משתמש בשילוב של גישות כדי להשיג את התוצאה הטובה ביותר. בבסיס הפרויקט הזה אני משתמש ב-Tailwind CSS, ספריית Utility-First שמאפשרת לי לעצב רכיבים במהירות ובגמישות ישירות בתוך ה-HTML (או JSX במקרה שלנו). בנוסף, אני משלב ספריות אנימציה מתקדמות כמו Framer Motion כדי להוסיף תנועה אינטראקטיבית וחלקה שמעשירה את חוויית המשתמש. השילוב הזה מאפשר לי ליצור עיצובים מודרניים, רספונסיביים ומושכים ויזואלית, תוך שמירה על קוד נקי ומאורגן.

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

[oryadaniely]

@לאצי הוא משתמש בREACT. אין בזה כמעט בכלל CSS "ידני" הכל מבוסס על Tailwind ורכיבים שלה (כפתורים וכד')
והכל אצלו זה בJSX, ופשוט שבהנחיות מוגדר לו שיהיה מודרני...

[לאצי]

@oryadaniely זה ברור. השאלה היא אם ספריות אלה נחשבות למובילות בתחום העיצוב והאם הן אותן ספריות בהן משתמש Base44.

[ניסן ב]

מעניין האם בהגדרות מערכת הם הכניסו לו ידנית איך לעצב ולכן הם בעצם 'נועלים' את העיצוב שיתאים להם או שהכל הוא הנחיית AI

[מתכנת חובב]

@לאצי יש להם סגנונות עיצוב שהם תכננו והם כנראה מכניסים אותם בפרומפט או בסיסטם פרופמט (יש להם גם אופציה לבחור מראש סגנון)

[NH.LOCAL]

@לאצי כתב בבקשת מידע | איך Base44 מעצב כ"כ יפה?:

זה לא סוד שBase44 אלוף בעיצוב אתרים. אבל שמתי לב כי הוא משתמש גם בג'מיני פרו 2.5
הסיפור הוא שכשאני יוצר אתר עם ג'מיני פרו 2.5 הוא לא מעצב כל כך יפה כמו Base44. אז השאלה היא איך Base44 כן מצליח לעצב כל כך יפה? האם הוא נותן פרומפט מסוים לAI עם הוראות כיצד ומה לבנות או שהוא אומר לו בכללי 'תעצב לי עיצוב הכי מודרני' (ניסיתי לתת לג'מיני הוראת מערכת כזו ועדיין לא התחיל לגרד את העיצוב של Base44).
בקיצור, האם אני גם יכול לתת כזה פרומפט לג'מיני שהוא יעצב לי באותה רמה?

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

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

חוץ מזה הכל הנראה אין סודות גדולים.
הם לא משתמשים במודל מכוונן במיוחד או משהו שלא נגיש לציבור הרחב

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

Spoiler

אפשר להתרשם בחלק מהאתרים שלי מהעיצוב שפחות מסריח מ-ai, מאותה סיבה: ההנחיות שלי היו יותר מפורטות וברורות, ולא רק "תעשה עיצוב יפה"...

[נחמן פלח]

@לאצי אגב סתם ככה ממליץ לך לנסות את הכלי v0 של ורסל זה פשוט מטורף

אם אתה נרשם לנסות אשמח אם תרשם דרך הקישור

https://v0.app/ref/A5JU15

זה יתן לי 5 או 10 קרדיטים וגם לך

https://nf-teach.github.io/T.Z-GEN/ הנה דוגמה שבניתי שמה והעלתי

[2580]

@NH.LOCAL כתב בבקשת מידע | איך Base44 מעצב כ"כ יפה?:

אפשר להתרשם בחלק מהאתרים שלי מהעיצוב שפחות מסריח מ-ai, מאותה סיבה: ההנחיות שלי היו יותר מפורטות וברורות, ולא רק "תעשה עיצוב יפה"...

תוכל לתת דוגמא לפרומפט שאתה נותן למודל לגבי העיצוב?

[NH.LOCAL]

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

### עיצוב UI/UX

נתח לעומק את הקלט (קוד או רעיון) במטרה לחדד ולדייק את חווית המשתמש והממשק.

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

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

[לאצי]

@NH.LOCAL מילים של בית מרקחת... אפשר הסבר בבקשה?

[NH.LOCAL]

@לאצי כתב בבקשת מידע | איך Base44 מעצב כ"כ יפה?:

@NH.LOCAL מילים של בית מרקחת... אפשר הסבר בבקשה?

לא על רגל אחת. אולי אכתוב על זה בבלוג שלי בצורה יותר מפורטת

מה שחשוב להבין: "המילים של בית מרקחת" האלו עובדות בצורה חזקה מאוד

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

Spoiler

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

[2580]

@NH.LOCAL כתב בבקשת מידע | איך Base44 מעצב כ"כ יפה?:

לא על רגל אחת. אולי אכתוב על זה בבלוג שלי בצורה יותר מפורטת

מחכים ומצפים...

נשמח לקישור

[לאצי]

עכ"פ, זו תשובת גרוק בנושא:

Spoiler

איך Base44 מצליח לעצב כל כך יפה?

זה לא סתם "תעצב לי מודרני" – Base44 בנוי כפלטפורמה שמשלבת AI (כמו Gemini 2.5 Pro כמודל ראשי) עם כלים נוספים שמגבירים את האיכות. הנה המפתח:

• פרומפטים מתקדמים ומבניים: הם לא מסתפקים בהוראות כלליות. במקום "תעשה אתר יפה", הם נותנים ל-AI הוראות מפורטות על מטרה, קהל יעד, אלמנטים ויזואליים (צבעים, פריסה, אסתטיקה מודרנית כמו glassmorphism או minimalism), וגם מגבלות טכניות (כמו responsive design). זה כולל שיפור אוטומטי של הפרומפט שלך – למשל, הם חושבים להוסיף אופטימיזציה אוטומטית לפרומפטים כדי להפוך אותם ל"פי 2 טובים" וזה מוביל לעיצובים פי 10 טובים יותר.
• מצבי צ'אט מיוחדים:
  • Default Mode: יצירה מהירה מפרומפט – תאר רעיון, וה-AI בונה אותו עם עיצוב מותאם.
  • Discuss Mode: תכנון ובריינסטורמינג ללא שינויים, כדי לחדד את הפרומפט לפני בנייה.
  • Visual Edit Mode: התאמות ויזואליות ישירות (למשל, שינוי צבעים, מרווחים, טיפוגרפיה עם Tailwind CSS), כולל העתקת עיצובים מאתרים קיימים (כמו "העתק את הפריסה של Airbnb"). זה מה שהופך את העיצובים ל"מודרניים" – הם משלבים ספריות עיצוב מוכנות ומותאמות.
• אינטגרציה עם AI מתקדם: Gemini 2.5 Pro טוב במיוחד ב-reasoning ועיצוב, אבל Base44 מוסיף שכבות כמו גישה לנתונים חיצוניים (חיפושים, קבצים) כדי להעשיר את הפלט.

בקיצור, זה לא רק פרומפט כללי – זה שילוב של פרומפטים חכמים + כלים שמאפשרים איטרציה מהירה ודיוק ויזואלי.

האם אתה יכול לשכפל את זה בג'מיני פרו 2.5?

כן, בהחלט! Gemini 2.5 Pro חזק מאוד בעיצוב אתרים אם נותנים לו פרומפטים מבניים ומפורטים. הבעיה ב"תעצב לי מודרני" היא שהוא כללי מדי – ה-AI צריך הנחיות ספציפיות כדי להגיע לאסתטיקה מקצועית. Base44 פשוט עושה את זה אוטומטית, אבל אתה יכול להעתיק את המבנה שלהם. הנה איך:

טיפים מרכזיים לפרומפטים מנצחים (מבוסס על מדריך Base44 וטיפים של Gemini):

1. היה ספציפי: תאר מטרה, קהל, אלמנטים, צבעים וסגנון. אל תשאיר מקום לפרשנות.
2. חלק למשימות: אל תבקש אתר שלם בבת אחת – התחל ב-header, hero section, וכו', ואז אחה"ל.
3. הוסף דוגמאות (Few-Shot): תן 1-2 דוגמאות קוד HTML/CSS כדי להנחות את הסגנון.
4. ציין פורמט: בקש HTML + CSS נפרדים, responsive, ללא JS אם צריך.
5. איטרציה: אם לא יצא מושלם, שאל "שפר את זה עם glassmorphism וצבעים כהים יותר".
6. הוסף אסתטיקה מודרנית: מילים כמו "minimalist", "clean layout", "gradient backgrounds", "card-based design" עוזרות.

דוגמאות פרומפטים שתוכל להעתיק ולהתאים (מבוסס על Base44 ו-Gemini):

1. פרומפט בסיסי לאתר הום-פייג' מודרני (מתחיל פשוט, כמו ב-Base44):

   תכנן דף בית מודרני לאפליקציית כושר שמכוונת לצעירים עירוניים. השתמש בסגנון minimalist עם צבעים כחולים-לבנים (כמו #007BFF ו-#FFFFFF), פריסה נקייה עם flexbox. כולל: hero section עם כותרת גדולה "התחל את המסע שלך", כפתור CTA "הירשם עכשיו", וגלריית תמונות של אימונים. ודא responsive למובייל. פלט: HTML ו-CSS נפרדים.
   

   • זה ייתן לך משהו נקי ומודרני, דומה למה ש-Base44 מייצר.

2. פרומפט מתקדם עם דוגמה (Few-Shot, כמו בג'מיני):

   צור סקשן גלריה מודרנית לאתר אופנה. השתמש בסגנון card-based עם hover effects ו-gradient backgrounds. דוגמה:
   HTML:
   <div class="gallery-card">
     <img src="image.jpg" alt="Product">
     <h3>Product Name</h3>
   </div>
   CSS:
   .gallery-card { display: flex; flex-direction: column; background: linear-gradient(135deg, #f5f7fa, #c3cfe2); padding: 1rem; border-radius: 10px; transition: transform 0.3s; }
   .gallery-card:hover { transform: scale(1.05); }
   
   עכשיו צור 3 כרטיסים דומים לאתר שלי, עם תמונות מדומות, כותרת "קולקציה חדשה" ותג מחיר. ודא responsive.
   

   • זה יוצר עיצוב יפה ומקצועי, כי הדוגמה מלמדת את ה-AI את הסגנון.

3. פרומפט מלא לאתר שלם (חלקי, כמו ב-Discuss Mode של Base44):

   בנה אתר נחיתה מלא לאג'נסי שיווק דיגיטלי. קהל: בעלי עסקים קטנים. סגנון: מודרני, glassmorphism (שקיפות זכוכית), צבעים כהים עם מבטאים ירוקים (#2C3E50, #27AE60). מבנה: Header עם לוגו+ניווט, Hero עם וידאו רקע, סקשן שירותים (3 כרטיסים), Footer עם קישורים. השתמש Tailwind CSS classes. פלט: קוד HTML מלא + CSS.
   

   • התאם את זה לרעיון שלך, ותקבל משהו קרוב לרמה של Base44.

אם תנסה את אלה בג'מיני (בחר Gemini 2.5 Pro Exp אם זמין, והפעל Canvas לעריכה ויזואלית), תראה שיפור מיידי. אם עדיין לא מספיק יפה, שאל את Gemini "שפר את הפרומפט הזה לעיצוב טוב יותר כמו באתרי Dribbble". בסופו של דבר, Base44 נוח יותר כי הוא אוטומטי, אבל עם פרקטיקה, Gemini יכול להגיע קרוב. אם תשתף פרומפט ספציפי שלך, אוכל לעזור לשדרג אותו!

[י. פל.]

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

[נחמן פלח]

@NH.LOCAL שלחתי את זה לצ'אט ואני מתחרט על הרעיון

[NH.LOCAL]

@נחמן-פלח כתב בבקשת מידע | איך Base44 מעצב כ"כ יפה?:

@NH.LOCAL שלחתי את זה לצ'אט ואני מתחרט על הרעיון

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

@י.-פל. כתב בבקשת מידע | איך Base44 מעצב כ"כ יפה?:

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

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