Teach Claude Your Brand || רוב האנשים מבקשים מהבינה המלאכותית מצגת, אחר כך אתר, אחר כך פוסט, ובכל פעם מתחילים מאפס. התוצאה מוכרת: כל תוצר נראה כאילו הוא שייך למותג אחר, ובכל שיחה חדשה חוזרים על אותו הסבר בדיוק: מה הצבעים שלנו, באיזה פונט אנחנו עובדים ואיך הדברים אמורים להיראות.
יש דרך אחרת, והיא משנה את כל התמונה. בונים פעם אחת מערכת עיצוב, Design System, ומאותו רגע כל בקשה יוצאת ממנה. אתר, מצגת, באנר לרשתות, מסמך ללקוח, הכל יוצא עקבי בלי שנבקש את זה שוב.
התהליך מורכב משני חלקים. בחלק הראשון אנחנו מפיקים את הפרוטוקול של המותג בתוך הצ׳אט, ובחלק השני מזינים אותו ל-Claude Design ומקבלים סיסטם חי. חמישה שלבים, וכל אחד מהם אפשרי כבר היום.
שלב ראשון, ניתוח המאפיינים הגרפיים של המותג 🧠
אנחנו מתחילים מהחומרים עצמם, עוד לפני כל הגדרה. אוספים לוגו, צילומי מסך מהאתר, מצגת אחרונה, פוסט מוצלח, כרטיס ביקור, כל דבר שמייצג את המותג כפי שהוא באמת נראה, ומעלים את הכל לצ׳אט. המשימה בשלב הזה היא אחת: להסתכל על החומרים ולזהות מה חוזר על עצמו.
כאן מותג לא מנוסח הופך למנוסח. במקום ״אנחנו אוהבים נקי ומודרני״ מקבלים קודי צבע מדויקים, יחס גדלים בין כותרת לטקסט, עובי קווים, רדיוס פינות וכמות אוויר בין הבלוקים. וזו כבר מערכת שאפשר לעבוד לפיה.
אני מעלה לך את נכסי המותג שלי: לוגו, צילומי מסך מהאתר, מצגת קיימת ודוגמאות לתוכן. תנתח את המאפיינים הגרפיים שחוזרים על עצמם: פלטת הצבעים המדויקת עם קוד הצבע המלא של כל גוון, ההיררכיה הטיפוגרפית, הריווחים, סגנון התמונות, צורת הכפתורים והכרטיסים והטון המילולי. אל תמציא כלום, תסתמך רק על מה שאתה רואה, ותגיד לי במפורש מה חסר לך.
שלב שני, בניית הפרוטוקול והורדת קובץ MD 🧠
ניתוח הוא עדיין לא מערכת. כדי שזה יהפוך לכלי עבודה צריך פרוטוקול, כלומר מסמך שמתרגם את הניתוח לחוקים. חוק טוב נשמע כך: ״האדום שמור לכותרות ולהדגשות בלבד, ואסור להשתמש בו כרקע לגוש טקסט ארוך״. ניסוח כללי כמו ״האדום הוא צבע מוביל״ נותן השראה, חוק מדויק נותן מערכת שעובדת.
אנחנו מבקשים את הפרוטוקול כקובץ MD ומורידים אותו למחשב. MD הוא הקיצור של Markdown, שפת סימון פשוטה לכתיבת טקסט, וזו גם הסיומת של הקובץ. למה דווקא MD? כי זה פורמט טקסט נקי, המודל קורא אותו במדויק, ואין בו שכבת עיצוב שמסיחה את הדעת מהתוכן.
עכשיו תכתוב קובץ design-system.md מלא, בששת הפרקים האלה: DNA של המותג, צבעים עם קודים מדויקים והיררכיית שימוש, טיפוגרפיה, רשת וריווחים, רכיבים (כפתור, כרטיס, טבלה, ציטוט, כותרת עמוד), וטון דיבור. בכל פרק תכתוב חוקי מותר ואסור חד משמעיים, ובסוף תוסיף פרק של טעויות נפוצות שאסור לחזור עליהן. תן לי אותו כקובץ להורדה.
שלב שלישי, פתיחת מערכת עיצוב חדשה 🧠
נכנסים ל-Claude Design, עוברים ללשונית של מערכות העיצוב ובוחרים ליצור מערכת חדשה. בבחירה שנפתחת לוחצים על האפשרות לבנות את המערכת כאן, בתוך Claude Design, וזה לוקח דקות.
במסך שנפתח כותבים בשתי שורות מי אנחנו, מה המותג עושה ולאילו תוצרים הסיסטם משרת אותנו, וכבר כאן כותבים מהם הצבעים, באילו פונטים רוצים להשתמש וכל דבר אחר שחייב להישמר. זה נשמע כמו שדה קטן, אבל זה ההקשר שמכוון את כל מה שייבנה אחריו.
שלב רביעי, הזנת הקובץ, הפונטים וההוראות 🧠
כאן מעלים את הכל. קובץ ה-MD שהורדנו, צילומי מסך של האתר ושל מצגות קיימות, הלוגו בקובץ וקטורי, ואם יש לנו רישיון לפונט המותג גם את קבצי הפונט עצמם.
בפונטים יש שתי דרכים לעבוד, ושתיהן טובות. אפשר להעלות את קבצי הפונט שלכם, או פונטים חינמיים שאתם ממילא עובדים איתם, ואז מקבלים בדיוק את הפונט של המותג. ואפשר לתת הוראה ברורה מאוד לאיזה פונט תרצו שהוא יתחקה, והוא ימצא את הפונט המדויק או משהו ממש דומה לו.
ועוד משהו ששווה מאוד לדעת: Claude Design ממש אוהב צילומי מסך. תנו לו כמה שיותר מהם, כי מה שהוא רואה בעיניים הוא יודע להתחקות אחריו הרבה יותר טוב מכל תיאור מילולי שננסה לכתוב.
בשדה ההערות מוסיפים את ההוראות שאין להן מקום אחר: שפה, כיווניות, מה אסור לעשות ומה תמיד חייב להופיע.
ואם אתם עובדים בעברית, זו ההוראה הכי חשובה שתיתנו לו: לבקש במפורש שהכל יהיה מיושר לימין, ושפסיקים ונקודות יישבו בצד שמאל של השורה כמו שצריך. בלי ההוראה הזאת הטקסט יוצא הפוך והתוצר נראה שבור.
הקובץ המצורף הוא פרוטוקול המותג המלא והוא גובר על כל החלטה עיצובית אחרת. כל הטקסטים בעברית ובכיווניות RTL, מיושרים לימין, עם פסיקים ונקודות בצד שמאל של השורה.
שלב חמישי, הסיסטם מוכן, ומכאן בונים הכל 🧠
אחרי כמה דקות מקבלים סיסטם חי: עמוד לכל צבע, היררכיה טיפוגרפית, ספריית רכיבים, חוקי מותג ואפילו כללי כיווניות לעברית. זו מערכת שאפשר לפתוח, לערוך, לתקן ולהרחיב, רחוק מאוד מהמסמך הסטטי שנשכח בדרייב.
מכאן והלאה כל פרויקט חדש נפתח כשהסיסטם כבר מחובר אליו, ומספיק לכתוב מה רוצים. עמוד נחיתה, מצגת לדירקטוריון, סדרת פוסטים לרשתות, מסמך אסטרטגיה, כולם יוצאים מאותו מקור אחד ולכן כולם נראים כמו אותו מותג.
תבנה לי סט שקפים שיעזור להתניע הרצאה חדשה, לפי מערכת העיצוב. שקף פתיחה עם שם ההרצאה, שקף עם שלוש הנקודות שהקהל ייקח מהיום, שקף ציטוט ושקף סיכום אחד. אל תמציא צבעים או פונטים שלא נמצאים במערכת.
הטיפ הכי חשוב שלי? כשמשהו יוצא לא מדויק, אל תתקנו את התוצר, תתקנו את הכלל בתוך הסיסטם. ככה התיקון עובד מכאן והלאה על כל מה שייבנה, והסיסטם נהיה חכם יותר בכל סבב.
מערכת עיצוב טובה היא כלי עבודה חי שהופך כל בקשה קטנה לתוצר מותגי וחוסך את כל הסבב של ההסברים מחדש, אז תבנו סיסטם אחד למותג שלכם ותגלו שכל מה שיבוא אחריו כבר יוצא נכון מהרגע הראשון!
