עיצוב עם GPT

עיצוב מערכת עם AI

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

בעבר, הכלים שהשתמשו לעיצוב לא היו כלים חכמים (ai) וכל עיצוב היה צריך להעשות ידנית על ידי המפתח.

Ai כמו Chat GPT יכולים לעזור לנו בעיצוב כללי של המערכת – עדיין נצטרך לשלוט בקוד על מנת שנוכל לתקן, להוסיף ולשנות אבל GPT וכלי AI אחרים יכולים לעזור מאוד בעיצוב של המערכת.

בדוגמאות הבאות נראה איך נעזר בGPT לעיצוב של טופס (form) בסיסי.

נשלח לGPT את הקוד של הקומפוננטה ועכשיו נוכל לתת לו הוראות ספציפיות על מנת שיעזור לנו לעצב:

אפשר להיות ספציפיים וכללים, לדוגמא – ביקשתי מGPT עיצוב כללי לטופס, עיצוב מודרני וקיבלתי ממנו את קוד הCSS הבא:

והתוצאה:

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

נפנה לGPT ונתאר את הבעיה ככה:


the inputs are bigger then the form

והוא החזיר קוד CSS חדש ועכשיו הטופס נראה כך:

כפי שניתן לראות , GPT הבין מה הבעיה וסידר אותה ועכשיו הכל תקין.

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

עוד עיצובים שGPT ייצר לאחר שכתבנו לו שיוסיף צבעים:

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

עיצוב עם כלי AI נהיה פשוט,נוח ומהיר יותר למפתח\מעצב והשימוש בו גורם לתוצאות מקצועיות ומהירות.

תגיות פופולריות

  • CSS#
  •  HTML# ,
  • #Basic JavaScript  
  • #AdvanceDJavaScript 
  •  #TypeScript
  • #React
  • #AI 
  • #Full Stack
  • #Angular
  • #Secure Coding 
  • #VS Code
  • #SVG עיצוב
  • אנימציות
  •  JSON# 
  • #Wordpress
  • #Elemntor
  • #אבטחת טוקן
  • Python#