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

למה כל אתר שקלוד בונה נראה אותו דבר?

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

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

צעד 1: איך בונים גלריית השראה מצילומי מסך?

לפני שכותבים מילה, אוספים עיניים. נכנסים ל-Dribbble או ל-Pinterest, מחפשים אתרים בתחום שלכם, וגם מחוץ לו, ושומרים 5 עד 10 צילומי מסך של מה שתופס לכם את העין.

שמים את התמונות בתיקייה בשם inspiration בפרויקט, ומבקשים מקלוד קוד:

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

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

צעד 2: הפרומפט לעיצוב אתר בארבעה חלקים

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

לפני שאתה כותב קוד, תקרא את הבריף הזה ותחזור אליו בכל החלטה.

1. סגנון: [3 עד 5 מילים שמתארות את התחושה. למשל: חם, ידני, הרבה אוויר, רגוע]
2. רפרנס: [הגלריה בתיקייה inspiration, ומה לקחת ממנה. למשל: הטיפוגרפיה מתמונה 2, הצבעים מתמונה 5]
3. למי ולמה: [מי הגולש, מה הוא מרגיש כשהוא נכנס, ומה הפעולה האחת שהוא צריך לעשות בעמוד]
4. איסורים: בלי גרדיאנט סגול. בלי תגיות "חדש" או "מופעל על ידי AI". בלי שלושה כרטיסים עם אייקונים. בלי כותרות כמו "הפתרון החכם" או "השלב הבא". [ועוד דבר אחד שאתם שונאים]

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

וככה מילאתי אותו לסטודיו לקרמיקה מהדוגמה:

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

מה כל חלק בפרומפט עושה?

1. סגנון

מילים של תחושה, לא של טכניקה. "חם וידני" אומר לקלוד הרבה יותר מ"מודרני ונקי", שזה בדיוק מה שהוא בוחר לבד.

2. רפרנס

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

3. למי ולמה

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

4. איסורים

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

צעד 3: למה משפרים בסבבים ולא מצפים לתוצאה בפעם הראשונה?

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

איך נראה סבב טוב:

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

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

אם אתם רוצים שזה יקרה בלי לכתוב בריף בכל פעם, יש כלים שעושים חלק מהעבודה: Impeccable 4 מציג לכם שבעה כיווני עיצוב, ו-Taste Skill נותן לקלוד כללי טעם. הפרומפט הזה עובד בלי להתקין כלום, גם בצ'אט רגיל של קלוד.

חשוב לדעת

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