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

נחמן פלח

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

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

זה יתן לי 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 מילים של בית מרקחת... אפשר הסבר בבקשה?

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

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

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

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

2580

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

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

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

נשמח לקישור

לאצי

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

איך 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):

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

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

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

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

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

פרומפט מתקדם עם דוגמה (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 את הסגנון.

פרומפט מלא לאתר שלם (חלקי, כמו ב-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 לעשות מה שהוא רוצה, אלא מגביל אותו בצורה מאוד מפורטת.

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

חובבן מקצועי

@לאצי מעניין האם מאז שיצא גמיני 3 - העיצוב של Base44 השתפר... לכאורה כן..
תנסה אולי את אותו הפרומט שניסית שוב..

NH.LOCAL

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

@לאצי מעניין האם מאז שיצא גמיני 3 - העיצוב של Base44 השתפר... לכאורה כן..
תנסה אולי את אותו הפרומט שניסית שוב..

ראיתי איפשהו שעם ג'מיני 3 הוא מעצב ממש טוב עם שיפור ניכר

נחמן פלח

@NH.LOCAL כן ראיתי במו עיניי את הפלא

לאצי

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

ראיה לכך מהאתר שלי, מי שזוכר אותו בעבר הוא עוצב עם בייס44 (הוא עדיין קיים כאן בגרסתו הישנה) ואתמול עיצבתי אותו מחדש בעזרת ג'מיני 3 עצמו. מה אומר ומה אדבר... שני עולמות...