מקורות העיצוב שלי לעבודה עם Claude Code

1. קודם בוחרים מה מחפשים

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

• לדפי נחיתה: Lapa Ninja, Land-book ו-SaaSFrame.
• למסכי מוצר וזרימות: Mobbin, Page Flows ו-SaaSFrame.
• לכיוון חזותי: Awwwards, ואז בודקים שהרעיון עדיין שימושי ונגיש.
• לחוקי עבודה שהסוכן יכול לקרוא: Refero Styles.

2. תהליך של חמש דקות

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

3. Refero Styles

דוגמאות של קבצי DESIGN.md שמתרגמים כיוון חזותי לכללים שסוכן יכול ליישם שוב ושוב.

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

4. Mobbin

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

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

5. Page Flows

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

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

6. SaaSFrame

רפרנסים ממוקדים למוצרי SaaS, דפי שיווק, onboarding, תמחור ומיילים.

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

7. Land-book

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

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

8. Lapa Ninja

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

• מתאים לחיפוש מהיר של hero, social proof, pricing ו-CTA.
• בחר שניים או שלושה עקרונות בלבד מכל רפרנס.
• שמור על התוכן וההצעה שלך במרכז.

9. Awwwards

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

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

10. הפרומפט שאני נותן לסוכן

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

זה רפרנס חזותי, לא תבנית להעתקה:
[קישור או צילום מסך]

המשימה:
[איזה מסך או עמוד צריך לבנות]

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

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

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

11. בדיקת הצלחה

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

12. אם התוצאה עדיין גנרית

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

13. המקורות

• Refero Styles: קבצי DESIGN.md לסוכני עבודה.
• Mobbin: מסכי מוצר וזרימות.
• Page Flows: מסעות משתמש מוקלטים ומפורקים לשלבים.
• SaaSFrame: דוגמאות ממוקדות למוצרי SaaS.
• Land-book ו-Lapa Ninja: דפי נחיתה ואתרים.
• Awwwards: כיוון אמנותי, טיפוגרפיה ותנועה.