> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# עיצוב עם AI

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

AI נמצא במרכז הדרך שבה אתה מעצב ב-Base44. תאר מה אתה רוצה בשפה טבעית, וה-AI מעדכן עבורך קוד, סגנונות וקומפוננטות. מצב **Edit** מאפשר לך לכוונן את מה שאתה רואה על המסך, ו-AI Controls עוזרים לך להגדיר גבולות. הדף הזה מכסה כל זרימת עבודה עם פרומפטים ודוגמאות שאפשר להשתמש בהם ישירות.

<Frame caption="עיצוב האפליקציה שלך עם AI">
  <img src="https://mintcdn.com/base44/gNqhe08ztVYN65Vj/images/ai-design.png?fit=max&auto=format&n=gNqhe08ztVYN65Vj&q=85&s=c2f468289953127087d025535fbf4dac" alt="The app editor chat making a design change to an app" width="2932" height="1594" data-path="images/ai-design.png" />
</Frame>

לפאנל ה-Theme, גופנים וסגנון גלובלי בתוך אפליקציה אחת, ראה [התאמה אישית של עיצוב האפליקציה שלך](/Building-your-app/Design).

***

## איך עיצוב עובד

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

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

| השינוי שאתה רוצה                                               | השתמש ב          |
| -------------------------------------------------------------- | ---------------- |
| צבעים או גופנים בכל האפליקציה                                  | פאנל ה-**Theme** |
| אלמנט אחד או מקטע אחד שאפשר להצביע עליו                        | מצב **Edit**     |
| כל דבר גדול יותר, כמו פריסות חדשות, עיצובים מחדש או תחושה שונה | הצ'אט של ה-AI    |

**סדר טוב לעיצוב מחדש מלא:**

1. קבע קודם את המראה הכללי: צבעים וגופנים ב[פאנל ה-Theme](/Building-your-app/Design#global-changes).
2. בקש מה-AI שינויים ברמת הדף, דף אחד בכל פעם.
3. לטש אלמנטים בודדים במצב **Edit**.

<Tip>
  שום דבר אינו סופי. אתה יכול ללחוץ על **Revert** בכל פרומפט כדי לבטל את השינוי, או לשחזר גרסה קודמת של האפליקציה שלך מהיסטוריית הגרסאות שלה, כך שתמיד בטוח להתנסות.
</Tip>

***

## עיצוב בצ'אט

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

```text theme={null}
אתה מעצב המוצר שלי לאפליקציה הזו.
תדריך עיצוב:
- מטרה: לעזור לצוותי תוכן לתכנן, לכתוב ולפרסם מאמרים מהר יותר.
- אנשים: מובילי תוכן וכותבים עסוקים על מחשבים ניידים במהלך יום העבודה.
- תחושה: רגועה, ממוקדת, מודרנית, אמינה.
השתמש בתדריך הזה כבסיס לכל הצעות והחלטות העיצוב.
```

אינך צריך גם אוצר מילים של עיצוב. תאר את התחושה שאתה רוצה, ציין שם של מוצר שהסגנון שלו מוצא חן בעיניך, או העלה צילום מסך של עיצוב שאתה מעריך ובקש מה-AI להתאים לסגנון שלו:

```text theme={null}
תגרום לדף הזה להרגיש רגוע ויוקרתי יותר. השתמש בצילום המסך המצורף כהפניה לסגנון הכללי.
```

דפוסים מועילים:

* בקש ביקורת לפני שאתה מבקש שינויים.
* בקש תוכנית במצב Discuss, אשר אותה, ואז בקש מה-AI ליישם אותה.
* הבהר תמיד את היקף העיצוב: כל האפליקציה, דף אחד או אלמנט אחד.

דוגמה:

```text theme={null}
בקר את העיצוב של הדשבורד הזה בלבד.
התמקד בפריסה, היררכיה, צבע, טיפוגרפיה וריווח.
אחר כך הצע תוכנית קצרה של שינויים קטנים.
המתן לאישור שלי לפני שאתה מיישם משהו.
```

אחרי שסקרת:

```text theme={null}
יישם את התוכנית שהצעת לדשבורד הזה.
בצע שינויים בקבוצות קטנות ותאר כל קבוצה בקצרה תוך כדי.
```

***

## בחירת אפשרות עיצוב

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

אתה יכול גם ללחוץ על סמל **Expand** באפשרות כדי לצפות בה במצב מלא ולשפר אותה לפני הבחירה.

<Frame caption="בחירה מבין אפשרויות עיצוב של AI">
  <img src="https://mintcdn.com/base44/zBp6CJNJi0RBD8_i/images/expand-design-option.png?fit=max&auto=format&n=zBp6CJNJi0RBD8_i&q=85&s=d02415c601cb60d9ed6a430f69fcdebd" alt="Design options in the chat, with the Expand icon shown on a mockup" width="1008" height="956" data-path="images/expand-design-option.png" />
</Frame>

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

<Frame caption="שיפור אפשרות עיצוב בתצוגה המורחבת">
  <img src="https://mintcdn.com/base44/gNqhe08ztVYN65Vj/images/adjust-design-options.png?fit=max&auto=format&n=gNqhe08ztVYN65Vj&q=85&s=ce2f7e3a21e5750f0ef83651ea3da0e8" alt="Expanded design option showing a mockup preview with a change request typed below it" width="1595" height="843" data-path="images/adjust-design-options.png" />
</Frame>

***

## חקירת כיווני עיצוב

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

לולאת ביקורת:

```text theme={null}
פעל כמעצב מוצר בכיר.
סקור את הדף הזה ותאר שלוש בעיות ויזואליות ספציפיות.
עבור כל בעיה, כתוב פרומפט Base44 שיתקן אותה.
אל תבצע שינויים עדיין.
```

כיוונים חלופיים:

```text theme={null}
צור שתי אפשרויות ויזואליות לדשבורד הזה:
- אפשרות A: מינימלית מאוד, בעיקר ניטרלית עם צבע הדגשה יחיד
- אפשרות B: אקספרסיבית יותר, עם צבע עשיר יותר וטיפוגרפיה מעט גדולה יותר
שמור על אותו תוכן ואותה פריסה.
תאר כל אפשרות בסיכום קצר והמתן שאבחר.
```

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

***

## שימוש במצב Edit

מצב **Edit** אידיאלי כשאתה רוצה להתאים את מה שאתה רואה בלי לכתוב הכל מחדש.

<Frame caption="סרגל הכלים של מצב Edit">
  <img src="https://mintcdn.com/base44/vTdb6SJP8P5_Enbe/images/visualedittoolbar.png?fit=max&auto=format&n=vTdb6SJP8P5_Enbe&q=85&s=9077deeb358626cfa8adfed6bec2ffda" alt="Visualedittoolbar" title="Visualedittoolbar" className="mx-auto" style={{ width:"79%" }} width="1444" height="412" data-path="images/visualedittoolbar.png" />
</Frame>

לחץ על **Edit** בצ'אט ואז בחר את האלמנט שאתה רוצה לשנות. אתה יכול:

* לבחור מקטע ולהתאים צבעים, ריווח ופריסה באופן ויזואלי.
* לבקש מה-AI לעצב מחדש רק מופע אחד של קומפוננטה.
* למחוק אלמנטים שאינך צריך יותר באמצעות סמל **Delete** <Icon icon="trash-can" />.
* להשתמש בו כסביבת ניסוי בטוחה לפני שאתה מפיץ דפוס לשאר האפליקציה שלך.

לחץ על **Edit Element** בסרגל הכלים של Edit כדי לבקש מה-AI לבצע שינויים. לדוגמה:

```text theme={null}
במקטע שנבחר:
- הבהר מעט את הרקע
- הגדל את הריווח האנכי בין הכותרת לתוכן
- השתמש בסגנון הכפתור הראשי לפעולה המרכזית ובסגנון המשני לשאר
```

```text theme={null}
לכרטיס הזה בלבד:
- הגדל את ה-padding
- הזז את האייקון לשמאל הכותרת
- השתמש בצל רך יותר שמתאים לכרטיסים אחרים באפליקציה
```

***

## שימוש ב-AI Controls

השתמש ב-[AI Controls](/Building-your-app/AI-chat-modes#customizing-your-ai-chat) בצ'אט כדי להנחות ולהגן על העיצוב שלך.

אתה יכול:

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

הנחיות לדוגמה:

```text theme={null}
הנחיות עיצוב גלובליות:
- העדף ויזואליה רגועה ומינימלית עם הרבה שטח לבן
- השתמש בפינות מעוגלות ברדיוס 12 בכרטיסים ובכפתורים
- הימנע מגרדיאנטים כבדים ומאפקטי זכוכית
- שמור על אנימציות עדינות וכבד העדפות reduced motion
```

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

```text theme={null}
עדכן את סגנון הכפתור הראשי והפץ אותו לכל המקומות שבהם קומפוננטת הכפתור הראשי בשימוש.
אל תשנה כפתורים משניים.
```

```text theme={null}
עדכן רק את מקטע ה-hero בדף הבית:
- שנה את הרקע לגרדיאנט רך
- הגדל את גודל הכותרת
- השתמש בסגנון הכפתור הראשי לקריאה המרכזית לפעולה
אל תשנה מקטעים או דפים אחרים.
```

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

* השתמש ב-AI Controls כדי להקפיא קבצים או דפים ספציפיים כך שה-AI לא ישנה אותם.
* השתמש באפשרות **Revert** בפרומפטים בודדים כדי לבטל שינוי יחיד.
* השתמש בהיסטוריית הגרסאות כדי לחזור למצב קודם.

***

## שאלות נפוצות

לחץ על שאלה למטה כדי ללמוד עוד על עיצוב עם AI.

<AccordionGroup>
  <Accordion title="האם שינויי עיצוב של AI צורכים קרדיטים?">
    כן. פרומפטים של עיצוב הם הודעות בצ'אט של ה-AI, ולכן הם צורכים את קרדיטי ההודעות שלך כמו כל בקשה אחרת בצ'אט.
  </Accordion>

  <Accordion title="מה ההבדל בין מצב Edit לפאנל ה-Theme?">
    מצב **Edit** מעצב אלמנט או מקטע אחד בכל פעם. פאנל ה-**Theme** משנה צבעים וגופנים בכל האפליקציה שלך בבת אחת. כדי ללמוד עוד על פאנל ה-Theme, ראה [התאמה אישית של עיצוב האפליקציה שלך](/Building-your-app/Design).
  </Accordion>
</AccordionGroup>

<Note>דף זה תורגם באמצעות AI. למידע המדויק והעדכני ביותר, עיין ב[גרסה האנגלית](/). </Note>
