איפה למצוא השראה עיצובית לפני שאתם מנחים את Claude

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

אני משתמש בשישה סוגי מקורות הכי הרבה. הנה מה שבאמת יש בכל אחד.

גלריות פרסי עיצוב

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

ברגע שמוצאים פריסה ששווה להשתמש בה כרפרנס, כלי צילום מסך של דף מלא (GoFullPage הוא תוסף Chrome חינמי שעושה את זה טוב) גולל את כל הדף ותופר אותו לתמונה אחת. מכניסים את התמונה הזו ל-Claude וזה הופך לחלק מההקשר לכל מה שמבקשים ממנו לבנות. לקומפוננטה בודדת ולא פריסה שלמה, צילום מסך קטן וממוקד עובד יותר טוב מדף מלא.

עוד שתי גלריות ששווה להכיר: Site Inspire, שמסננת לפי סגנון, נושא, או פלטפורמה - שימושי כשמעצבים לקהל ספציפי; ו-Lapa Ninja, שמתמקדת ספציפית בדפי נחיתה, עם סינון לפי פלטת צבעים, תעשייה, ואפילו motion - נוח אם אנימציה היא בדיוק מה שמנסים לשחזר.

ספריות אפליקציות מהעולם האמיתי

גלריות פרסים מראות את הטוב מבין הטוב. ספריות אפליקציות מהעולם האמיתי מראות מה בפועל בייצור ורץ. Mobbin היא הגדולה שבהן שאני משתמש - מעל 600,000 מסכי UI אמיתיים מחברות אמיתיות, גם אפליקציות וגם אתרים מלאים, ניתן לדפדוף לפי קטגוריה או לפי סוג עמוד ספציפי, כמו עמודי תמחור, אם זה בדיוק החלק שמעצבים מחדש. רוב זה חינמי לדפדוף, אבל הסינון העמוק יותר נמצא מאחורי תוכנית בערך 10 דולר לחודש, ששווה את זה אפילו בשביל ספרינט עיצוב בודד.

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

ספריות קומפוננטות

שתי הקטגוריות הראשונות הן top-down: flows שלמים, מסכים שלמים. ספריות קומפוננטות הן ההפך. הן נותנות לזום פנימה על חלק בודד - hero section מונפש, כרטיס תמחור, תפריט ניווט - ולהכניס אותו ישר לפרויקט. 21st.dev היא זו שאני פונה אליה הכי הרבה: הרבה מהקומפוננטות שלה מגיעות עם הפרומפט כבר כתוב, אז מעתיקים, מדביקים ב-Claude, ויש לו כל מה שצריך כדי לשחזר את החלק הבודד הזה. React Bits היא עוד אחת, בנויה ספציפית סביב אנימציות רקע ואפקטים אינטראקטיביים קטנים שקשה לתאר במילים אבל מזוהים מיד ברגע שרואים אותם.

טיפוגרפיה

אחת הדרכים המהירות לזהות אתר שנוצר ב-AI היא הפונט. אם הכל מתברירת מחדל לאותו sans-serif בטוח (Inter צץ כל הזמן), זה נקרא גנרי מיד. להשקיע זמן בבחירת פונט שבאמת מתאים למה שבונים היא דרך זולה לגרום למשהו להרגיש מחושב במקום תבניתי.

רוב גלריות הפונטים, כולל Google Fonts, מראות את אותו טקסט לדוגמה על רקע פשוט, מה שמקשה לשפוט פונט באמת. Fonts In Use הולך בכיוון אחר: היא מראה פונטים בהקשר אמיתי ומיושם - על תווית בקבוק, על סמל, בפריסה אמיתית - כי פונט שנראה רגיל בבידוד יכול להיראות שונה לגמרי ברגע שרואים אותו בשימוש נכון. חלק ממה שתמצאו שם מסחרי ודורש רישיון, אבל ב-Google Fonts לבד יש הרבה אפשרויות חינמיות ואיכותיות שקלות להטמעה ישירות.

צבע

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

ארכיוני הנחיות מותג

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

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

כל מקום אחר

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

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