בפרויקט אתר הפקולטה לרפואה ע״ש רפפורט בטכניון, שילוב AI לא היה רק תוספת של כלי חדש לתהליך העבודה, אלא הזדמנות לבחון ולפתח דרך עבודה חדשה.
לאורך שלבי האפיון הפונקציונלי והתיעוד לפיתוח נבנה תהליך ששילב AI בכמה נקודות משמעותיות — מאיסוף וארגון הידע שנצבר בפרויקט, דרך בניית שיטת עבודה סדורה ועד לניתוח המסכים וליצירת תיעוד ישירות בתוך Figma. התהליך הוביל לפריצות דרך באופן שבו אנחנו עובדים בסטודיו סלנט איי די, והראה כיצד AI יכול להוסיף ערך לא רק באמצעות חיסכון בזמן, אלא גם ביצירת עבודה עקבית, מפורטת ומבוקרת יותר. ישבנו עם יסמין, מעצבת מוצר בסטודיו שהצטרפה לפרויקט בשלב מתקדם והובילה את פיתוח השיטה, כדי שתספר בגוף ראשון איך התהליך נבנה, אילו אתגרים הוא פתר ומה למדנו מהשילוב בין AI, חשיבה מקצועית ותהליך UX/UI.
כשעיצוב סטטי אינו מספיק, AI יכול לעזור להפוך ידע מפוזר להנחיות פיתוח ברורות, עקביות ומבוקרות
זהו הפרויקט השני שלנו מול הטכניון, לאחר שהשלמנו בהצלחה את אתר הפקולטה למדעי הנתונים וההחלטות. בפרויקט הנוכחי עבד הסטודיו על אתר הפקולטה לרפואה ע״ש רפפורט.
זה היה פרויקט רחב וארוך, שעבר תהליך מלא של מחקר, ראיונות משתמשים, אפיון אסטרטגי ועיצוב. לאורך הדרך נאסף מידע רב, גובש מבנה האתר, עוצבו מסכים רבים, ונבנתה שפה עיצובית שמותאמת לצרכים של הפקולטה ושל המשתמשים שלה.
בשלב מתקדם יותר, כשהעיצוב כבר היה מגובש והפרויקט התקדם לשלב של אפיון פונקציונלי ותיעוד לפיתוח, נכנסתי לתהליך. חלק גדול מהמסכים כבר נבנה על ידי צוות המעצבים שעבד על הפרויקט לפניי והרבה החלטות מקצועיות כבר התקבלו.
במצב כזה, האתגר שלי לא היה רק להמשיך להשלים מסכים. הייתי צריכה להיכנס במהירות לעומק הפרויקט, להבין החלטות שכבר התקבלו במשך חודשים, לשמור על עקביות עם השפה העיצובית הקיימת, ולהכין תיעוד ברור ושימושי לצוות הפיתוח.
התיעוד נדרש להסביר לא רק איך המסכים נראים, אלא גם איך הם מתנהגים: מה קורה במצבים שונים, כיצד קומפוננטות משתנות לפי כמות וסוג התוכן, מהם ההבדלים בין דסקטופ למובייל, ומה משתנה בין עמודים בעברית ובאנגלית.
הצורך בתיעוד מדויק יותר התחזק מתוך הפקת לקחים מפרויקט קודם שנעשה עם הטכניון, שבו עלה שבחלק מהמקרים ההסברים לפיתוח לא היו מפורטים מספיק, היה חשוב לייצר הפעם תיעוד מדויק יותר, כזה שמצמצם מקום לפרשנות ומסביר גם את הלוגיקה שמאחורי המסך.
כאן החלטתי לשלב AI בתהליך, ככלי שעוזר לבנות שיטת עבודה חוזרת, מסודרת ועקבית. כזו שמאפשרת להיכנס לפרויקט מתקדם, ללמוד במהירות את ההקשר שנבנה לפניי, ולתרגם אותו לתיעוד ברור לפיתוח בתוך Figma.
כשמסך לא מספר את כל הסיפור
באתר רחב הכולל עמודים רבים, רכיבים חוזרים, תצוגות שונות ושתי שפות, עיצוב סטטי לא תמיד מספיק כדי להעביר את הכוונה לפיתוח.
לדוגמה, קומפוננטה מסוג 'קרוסלה' של קבוצת כתבות עשויה להציג עד שלושה פריטים כקבוצה בדסקטופ. כאשר יש ארבע כתבות או יותר, אותה קומפוננטה צריכה להפוך לקרוסלה. במובייל, לעומת זאת, היא יכולה להופיע תמיד כקרוסלה המציגה פריט אחד בכל פעם.
זהו מידע שלא תמיד אפשר להבין רק מתוך המסך המעוצב. אלה בדיוק המקומות שבהם חשוב לתעד התנהגות, תנאים ומצבי קצה, ולא להסתמך על פרשנות של מי שרואה את העיצוב בפעם הראשונה.
להפוך ידע מפוזר למאגר עבודה
השלב הראשון היה איסוף הקשר. עברתי על מסכים ב־Figma, הערות קיימות, סיכומי פגישות והקלטות מפגישות שהתקיימו עוד לפני שנכנסתי לפרויקט. את ההקלטות תמללתי, ובעזרת AI הפכתי אותן לסיכומים ולמידע שאפשר לעבוד איתו. המטרה הייתה לבנות מאגר ידע שמאפשר להבין במהירות החלטות שכבר התקבלו: מה עומד מאחורי מבנה העמודים, אילו קומפוננטות חוזרות על עצמן, מה חשוב לפקולטה, מה חשוב לצוות הפיתוח, ואילו נקודות עלולות להישאר לא ברורות ללא הסבר מפורש.
כדי לבנות את התהליך עצמו השתמשתי ב־ChatGPT ככלי לחשיבה ולפירוק הבעיה. באמצעות סדרה של שאלות ותשובות, ועל בסיס חומרי הפרויקט שאספתי, הגדרתי את התוצר הרצוי:
- למי מיועד התיעוד
- איזה מידע נדרש לצוות הפיתוח
- אילו מצבים אסור לפספס
- כיצד מתעדים התאמות למובייל
- כיצד מתייחסים לעברית ולאנגלית
- איך מתעדים קומפוננטות חוזרות ומצבי תוכן
- מה חשוב להבהיר ביחס למערכת הניהול
מתוך התהליך הזה נבנה מסמך הנחיות מפורט עבור Claude. המטרה לא הייתה לבקש ממנו לכתוב הסברים כלליים, אלא לתת לו הקשר מספק כדי שיוכל לזהות את מבנה המסכים, לפרק אותם לרכיבים, ולהצביע על מקומות שבהם הפיתוח עלול לפרש את העיצוב אחרת מהכוונה המקורית.
Skill ייעודי לפרויקט
את מסמך ההנחיות שהכנתי עם ChatGPT, העברתי ל־Claude, ושם נבנה Skill ייעודי לפרויקט. המטרה הייתה להפוך את המודל למעין חבר צוות שמכיר את היסטוריית העבודה, את צרכי הפקולטה, את ההקשר של המסכים, את שיטת העבודה ואת סוג התיעוד הנדרש לפיתוח.
ה־Skill הוגדר כך שכאשר מתקבלת בקשה כמו "הסבר לפיתוח", הוא יודע שמדובר בפרויקט אתר הפקולטה לרפואה ופועל לפי כללים קבועים:
- לזהות את הקומפוננטות ואת המצבים שלהן
- לבדוק שינויי התנהגות בין דסקטופ למובייל
- להתייחס לעברית ולאנגלית
- לזהות מצבים חסרים או נקודות לא ברורות
- לנסח הערות קצרות, מדויקות ושימושיות לפיתוח
במקביל, הוגדרו למודל גבולות ברורים. הוא לא אמור להמציא התנהגות שלא קיימת בעיצוב, לנחש החלטות שלא תועדו, למחוק רכיבים או מסכים, לבצע שינויים בקומפוננטות ראשיות, או לכתוב טקסט ארוך כשאין לכך ערך מעשי. כאשר חסר מידע, הוא הונחה לשאול שאלה ממוקדת ולהציע נקודה מקצועית לבדיקה, ולא להשלים את הפער בעצמו.
חיבור בין Claude ל־Figma
כדי שהעבודה לא תישאר ברמת הטקסט בלבד, חיברתי את Claude ל־Figma באמצעות MCP, פרוטוקול שמאפשר לכלי AI לגשת להקשר של מערכת חיצונית בצורה מבוקרת. החיבור אפשר לעבוד מתוך שיחת צ׳אט, אך מול ההקשר העיצובי של הקובץ עצמו. במקום לתאר ל־Claude מה מופיע במסך, יכולתי להפנות אותו לעמוד או למסך מסוים, ולאפשר לו לקרוא את המבנה, לזהות רכיבים, להבין מצבים שונים ולחבר בין מה שהוא רואה לבין מאגר הידע שכבר נבנה עבור הפרויקט ולייצר בעצמו את ההסברים בתוך העמוד בפיגמה.
בכל פעם העברתי לו קישור מדויק לעמוד או למסך שעליו רציתי לעבוד. לפני כל פעולה הוגדרו גבולות ברורים: לעבוד רק על העמוד שנשלח, לא לעבור לעמודים אחרים, לא לבצע שינוי או מחיקה במסכים, לא לערוך קומפוננטות ראשיות ולא לשנות את מבנה הקובץ. המטרה הייתה להשתמש ב־AI ככלי ניתוח ותיעוד, שמבצע את התיעוד באופן עצמאי.
לאחר קבלת הקישור, Claude עבר על המסך, זיהה את האזורים המרכזיים, פירק אותם לקומפוננטות, בחן את המצבים שלהן והתייחס להבדלים בין דסקטופ למובייל ובין עברית לאנגלית.
הוא הסתמך גם על הידע שכבר הוזן אליו מתוך סיכומי פגישות, תמלולים, הערות קיימות והנחיות הפרויקט. כך ניתן היה לייצר הסברים שמחוברים גם למה שרואים במסך וגם להקשר המקצועי שמאחוריו.
מודל עבודה מבוקר
בפועל, התהליך הפך את העבודה ליעילה יותר. במקום להתחיל את התיעוד של כל מסך מאפס, Claude יכול היה לנתח את חלקי המסך, להבין את תפקידם, לזהות מוקדים אפשריים של אי־בהירות ולהציע הסברים לפיתוח בתוך אותו עמוד ב־Figma.
בחלק מהמקרים ההסברים כללו גם התייחסות ויזואלית לאזורים הרלוונטיים, כך שהיה קל יותר להבין לאיזה רכיב או מצב כל הערה מתייחסת.
עם זאת, ה־AI לא היה הגורם המחליט. מודל העבודה היה קבוע וברור: Claude מנתח כותב ומציע ואני בודקת, מתקנת ומחדדת.
אם הסבר היה כללי מדי, דייקתי אותו. אם חסר מצב מסוים, ביקשתי לזהות את הפער ולעדכן. כאשר תיקון חזר על עצמו, הוא הפך לחלק מהידע וההנחיות להמשך העבודה. כך ה־AI לא נשאר ברמה של ניסוח טקסט, אלא הפך לחלק מתהליך תיעוד שמחבר בין המסך, ההקשר, הלוגיקה העיצובית והצרכים של צוות הפיתוח.
מהסבר מתומצת לתיעוד מפורט
בשלב הראשון ביקשתי מ־Claude להכין הסברים מתומצתים אך ברורים לכל חלק רלוונטי במסך. המטרה הייתה לתת לצוות הפיתוח שכבת מידע קצרה ומעשית, שמתמקדת בהתנהגות הרכיבים, התוכן, הקישורים, המובייל והשפות.
לאחר הכנת ההסברים קיימנו פגישה עם הפקולטה כדי לבחון האם רמת הפירוט מספיקה. בעקבות הפגישה החלטנו שבעמודים מרכזיים נדרשת התעמקות נוספת.
בשלב השני עבדתי עם Claude בצורה מפורטת יותר על כל קומפוננטה: המצבים הקיימים שלה, התאמות בין עברית לאנגלית, שינויי התנהגות בין דסקטופ למובייל, והתנהגות בתרחישי תוכן שונים.
בשלב הזה ביקשתי ממנו לעבוד גם בצורה ויזואלית יותר בתוך Figma. עבור כל קומפוננטה רלוונטית הוא יצר עותק לצורכי תיעוד, הציג לידו מצבים אפשריים וחיבר בין ההסבר הטקסטואלי לדוגמה הוויזואלית.
כאשר זוהה מצב חסר, ההנחיה הייתה ברורה: לא לגעת בקומפוננטה הראשית. במקום זאת, ליצור עותק נפרד ומנותק, ולהציע עליו את המצב החסר לפי השפה העיצובית של רכיבים דומים במסכים אחרים.
השלב הזה דרש יותר בדיקות ודיוקים מצידי. עברתי על ההסברים, על הדוגמאות הוויזואליות ועל המצבים שהוצעו, תיקנתי ניסוחים, דייקתי התנהגויות ובדקתי שההצעות אינן סותרות את מבנה הרכיבים הקיים. רק לאחר הבדיקה והאישור שלי, התיעוד נכנס לקובץ עבור צוות הפיתוח.
מה התהליך נתן
בסופו של דבר, התהליך יצר הרבה יותר מהערות לפיתוח. הוא יצר שיטת עבודה שאפשרה לי להיכנס לפרויקט מתקדם, להבין במהירות את ההקשר שנבנה לפניי, ולתרגם אותו לתיעוד ברור, עקבי ושימושי בתוך Figma.
Claude עבד מול המסכים עצמם, זיהה רכיבים, בחן מצבים והתנהגויות, והציע הסברים לפיתוח על בסיס הידע שהוזן אליו. התפקיד שלי היה לכוון את העבודה, לבדוק את ההסברים, לדייק את התנהגות הרכיבים ולוודא שכל דבר שנכנס לקובץ תואם להחלטות העיצוביות ולצרכים של הפיתוח.
זה הערך המרכזי שמצאתי בשילוב AI בתהליך UX/UI: לא רק חיסכון בזמן, אלא היכולת לבנות תהליך עבודה עקבי, מבוקר ומדויק יותר, גם בפרויקט מורכב שכבר התקדם זמן רב לפני שנכנסתי אליו.
