האתר שלך יכול להיראות כמו סטודיו, בחינם

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

מה יש בפנים

• חמשת האתרים והתפקיד של כל אחד: Refero למבנה של מסכים שלמים, Motion Sites לתחושה וכיוון, Dribbble לרעיונות, Uiverse לרכיבים בקוד פתוח ו-21st.dev לרכיבים ברמה של מוצר אמיתי.
• למה 21st.dev הוא האתר שאני הכי משתמש בו, ולמה Dribbble טוב לרעיונות ולא להעתקה.
• הפרומפט שאני נותן ל-AI כדי להתאים רכיב לפרויקט: טקסטים בעברית מימין לשמאל, הצבע הראשי שלך, ושמירה על העיצוב והאנימציות בדיוק כמו שהם.
• סדר עבודה בארבעה שלבים: מתחילים ממסך ולא מרכיב, אוספים רכיבים, מתאימים אחד בכל פעם, ומרכיבים ובודקים בנייד לפני שממשיכים.
• איך בונים לעצמך ספרייה אישית של רכיבים ומסכים שאהבת, כדי לא להתחיל מדף לבן אף פעם.

למי זה מתאים

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

הסעיף שעושה את ההבדל

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

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

והסדר חשוב. קודם מסך שלם מ-Refero כדי להבין את המבנה, ורק אחר כך רכיבים מ-21st.dev או Uiverse. וכל פעם שאתה רואה רכיב או מסך שאהבת, תשמור לינק ושורה אחת למה. חמש שניות בכל פעם, וזה משתלם מהשבוע הראשון.

אם אתה רוצה לעצב מסכים שלמים מאפס, תמשיך להפרומפטים ל-Google Stitch.