עורך ויזואלי
לחץ על אלמנטים כדי לערוך טקסט, צבעים, ריווח, פונטים ועוד. מתאים ביותר לשינויים קטנים; השתמש בצ׳אט לשינויים גדולים יותר.
העורך הויזואלי מאפשר לך לשנות את ממשק המשתמש של האפליקציה שלך על ידי לחיצה על אלמנטים ועריכת המאפיינים שלהם ישירות. עבור למצב Visual בסרגל הכלים של ה-builder כדי להפעילו.
איך זה עובד
Section titled “איך זה עובד”- עבור למצב Visual — זהו תת-מצב של Preview בסרגל הכלים (שני החלקים של סרגל הכלים הם Preview ו-Admin)
- רחף מעל אלמנטים בתצוגה המקדימה — הם יודגשו עם שכבת-על
- לחץ על אלמנט כדי לבחור אותו
- ערוך מאפיינים בלוח הצד: טקסט, צבעים, ריווח, פונטים, גבולות, תמונות, אפקטים
השינויים מוחלים מיד על התצוגה המקדימה ונכתבים לקבצי המקור שלך. השתמש בכפתור Reset last edit בלוח הצד כדי לבטל את שינוי המאפיין האחרון.
מה אפשר לערוך?
Section titled “מה אפשר לערוך?”- טקסט — ערוך תוכן ישירות
- גודל פונט — xs, sm, base, lg, xl וכו׳
- משקל פונט — thin, light, normal, medium, semibold, bold, extrabold
- משפחת פונט — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
- סגנון פונט — הפעלת/כיבוי נטייה (Italic)
- יישור טקסט — שמאל, מרכז, ימין, פיזור
- צבע טקסט — כל צבע Tailwind
- צבע רקע — כל צבע Tailwind
- ריווח — Padding ו-margin מכל הצדדים
- גבול — עובי, צבע ורדיוס (זמין באלמנטי מכולה ללא תוכן טקסט)
- תמונה — החלף בחיפוש תמונות מלאי או העלה תמונה משלך (חל על אלמנטי img ותמונות רקע)
- אפקטים — צל ושקיפות
ביטול / חזרה
Section titled “ביטול / חזרה”השתמש ב-Cmd+Z (Mac) או Ctrl+Z (Windows) כדי לבטל שינויים. Cmd+Shift+Z / Ctrl+Shift+Z לחזרה על פעולה מבוטלת.
פלטת הדף
Section titled “פלטת הדף”העורך הויזואלי סורק את הדף שלך ומציג כל צבע Tailwind ומאפיין CSS מותאם אישית שכבר נמצאים בשימוש. כשפותחים את בוחר הצבע עבור האלמנט הנבחר, ניתן לבחור מתוך פלטת הדף כדי לשמור על עקביות עם מערכת העיצוב הקיימת, במקום לנחש קודי hex.
שאל את ה-AI על אלמנט נבחר
Section titled “שאל את ה-AI על אלמנט נבחר”לשינויים שעורך המאפיינים אינו יכול לבטא, הקלד בקשה קצרה בשדה Ask AI בתחתית לוח הצד. האלמנט הנבחר מועבר כהקשר, כך שבקשות כמו “make this card more compact” או “add a hover state with a subtle lift” פועלות מבלי שתצטרך לתאר על איזה אלמנט מדובר.
אלמנטים סטטיים לעומת דינמיים
Section titled “אלמנטים סטטיים לעומת דינמיים”העורך הויזואלי עובד בצורה הטובה ביותר על אלמנטים סטטיים שבהם ה-className ותוכן הטקסט הם מחרוזות מילוליות ב-JSX. עבור אלמנטים דינמיים (classNames מחושבים, רינדור מותנה, ביטויים), העורך עובר אוטומטית לצ׳אט ה-AI עם בקשה מובנית.
מתי כדאי להשתמש בעורך הויזואלי?
Section titled “מתי כדאי להשתמש בעורך הויזואלי?”העורך הויזואלי מתאים ביותר לשינויים קטנים ומהירים:
- תיקון שגיאת כתיב
- כוונון ריווח
- שינוי צבע
- עדכון טקסט של כפתור
לשינויים גדולים יותר (קטעים חדשים, שינוי מבנה פריסה, פיצ׳רים חדשים), השתמש בצ׳אט ה-AI במקום.
איך שומרים שינויים?
Section titled “איך שומרים שינויים?”שינויים נשמרים אוטומטית בעת עריכת מאפיין. הקובץ נכתב ל-runtime שלך, והשינוי מתועד בהיסטוריית הגרסאות שלך בסבב ה-builder הבא שמבצע commit.
שאלות נפוצות
Section titled “שאלות נפוצות”האם אפשר לבטל עריכות ויזואליות?
כן. השתמש ב-Cmd+Z / Ctrl+Z לביטול. העורך הויזואלי שומר סטאק ביטול/חזרה משלו.
מדוע אפשר לערוך חלק מהאלמנטים אך לא אחרים?
ניתן לערוך ישירות טקסט סטטי ומאפייני className. ערכים דינמיים או מחושבים (template literals, ביטויים ternary, קריאות לפונקציות) עוברים אוטומטית לצ׳אט ה-AI.
מתי כדאי להשתמש בעורך הויזואלי במקום בצ׳אט ה-AI?
| כלי | מתאים ביותר ל |
|---|---|
| Visual Editor | שינויי מאפיינים מהירים (טקסט, צבעים, ריווח) על ידי לחיצה |
| AI Chat | שינויים מורכבים, פיצ׳רים חדשים, דיבאגינג |
אלו הם שתי הדרכים היחידות לשנות את האפליקציה שלך — אין עורך קוד. ראה עריכה וגישה לקוד שלך.