עורך ויזואלי
לחץ על אלמנטים כדי לערוך טקסט, צבעים, ריווח, גופנים ועוד. מתאים ביותר לשינויים קטנים; השתמש בצ’אט לשינויים גדולים יותר.
העורך הויזואלי מאפשר לך לשנות את ממשק המשתמש של האפליקציה שלך על ידי לחיצה על אלמנטים ועריכת המאפיינים שלהם ישירות. עבור למצב Visual בסרגל הכלים של ה-builder כדי להפעיל אותו.
איך זה עובד
Section titled “איך זה עובד”- עבור למצב Visual בסרגל הכלים (לצד Preview, Code ו-Dashboard)
- רחף מעל אלמנטים בתצוגה המקדימה — הם יסומנו עם שכבת הדגשה
- לחץ על אלמנט כדי לבחור אותו
- ערוך מאפיינים בלוח הצד: טקסט, צבעים, ריווח, גופנים, גבולות, תמונות, אפקטים
השינויים מיושמים מיידית בתצוגה המקדימה ונכתבים לקבצי המקור שלך. השתמש בכפתור 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)
- יישור טקסט — left, center, right, justify
- צבע טקסט — כל צבע 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 שלך ומבוצע לו commit כשה-AI או אתה יוצרים commit.
שאלות נפוצות
Section titled “שאלות נפוצות”האם אפשר לבטל עריכות ויזואליות?
כן. השתמש ב-Cmd+Z / Ctrl+Z לביטול. העורך הויזואלי מנהל stack ביטול/חזרה משלו.
למה אני יכול לערוך חלק מהאלמנטים אבל לא אחרים?
טקסט סטטי ומאפייני className ניתנים לעריכה ישירה. ערכים דינמיים או מחושבים (template literals, ביטויי ternary, קריאות פונקציות) עוברים אוטומטית לצ’אט ה-AI.
מה ההבדל בין העורך הויזואלי לבין עורך הקוד?
| כלי | מתאים ביותר ל |
|---|---|
| Visual Editor | שינויי מאפיינים מהירים (טקסט, צבעים, ריווח) בלחיצה |
| Code Editor | עריכת קוד מקור מלאה עם VS Code |
| AI Chat | שינויים מורכבים, פיצ’רים חדשים, דיבאג |