-BjC_FuvC.svg)
ומה אם פשוטהייתם מתקנים בעצמכם, בשנייה?
תארו לכם שבמקום לחפור ל-AI שוב ושוב איך לתקן את העיצוב – פשוט הייתם מסדרים את זה לבד בשנייה.
בפוסט הקודם הראיתי איך אני נעזר ב-AI כדי לייצר עיצובים שלא נראים כמו "AI Slop". אבל כולנו יודעים שאחרי שמגיעים לגרסה ראשונית טובה בקוד, מתחיל החלק המתיש באמת: הפינג-פונג של הפינישים.
שכבת העריכה צריכה עכבר ומקום לעבוד. פתחו את זה במחשב כדי לנסות בעצמכם.
חמש שניות עם עכבר.עשרים דקות של פרומפטים.
זה שורף המון זמן, טוקנים ועשרות פרומפטים - רק כדי להסביר משהו שלוקח בדיוק חמש שניות לעשות לבד עם העכבר.
שכבת העריכה צריכה עכבר ומקום לעבוד. פתחו את זה במחשב כדי לנסות בעצמכם.
כמו פיגמה,רק בתוך הדפדפן.
אז כדי לפתור את זה, כתבתי כמה Skills שעובדים יחד מאחורי הקלעים וסוגרים לי את הפינה של ה-Last Mile.
תחשבו על זה כמו פיגמה בתוך הדפדפן – רק שהיא מחוברת ישירות לקוד ומבינה לעומק איך המוצר בנוי.
זה לא איזה תוסף כרום חיצוני. זה יושב בתוך הפרויקט, ממש ליד הקוד.
שכבת העריכה צריכה עכבר ומקום לעבוד. פתחו את זה במחשב כדי לנסות בעצמכם.
אותו כרטיס, עריכה חיה.
שמונה ידיות בשביל הגודל, דאבל-קליק לטקסט, ופאנל שכבר יודע לאיזה Design System הכרטיס הזה שייך.
קודם הוא מחפש Design System.אין כזה? הוא מציע לבנות.
דבר ראשון, המערכת סורקת את הפרויקט ומחפשת Design System. אין לכם? הכל טוב – היא תציע לבנות אחד ממה שכבר יש. ואז היא ממפה הכל:
- קומפוננטות. אילו רכיבים חיים שם – כפתורים, כרטיסיות, פופאפים, שדות טקסט.
- צבעים. הפלטה המלאה והשימושים שלה – Primary, Secondary, States, רקעים.
- טיפוגרפיה. סקאלת הגדלים, המשקלים, והיררכיית הכותרות.
- גריד וריווחים. איך ה-Spacing scale עובד ומה ה-Breakpoints.
שכבת העריכה צריכה עכבר ומקום לעבוד. פתחו את זה במחשב כדי לנסות בעצמכם.
גדלים, ריווחים ורדיוסים.עם הידיים.
כאן נכנס לתמונה סקיל נוסף שמלביש שכבת עריכה ויזואלית על המוצר. דרכו אני יכול פשוט להקליק ולערוך מה שבא לי.
תנעלו אלמנט והוא יקבל שמונה ידיות. תגררו אחת מהן והוא ישנה גודל ממש מתחת ליד שלכם – על המסך האמיתי, והכל יסתדר מחדש סביבו.
שכבת העריכה צריכה עכבר ומקום לעבוד. פתחו את זה במחשב כדי לנסות בעצמכם.
תמתחו את הכותרת הזאת.
ריווחים, פינות ושקיפות — הכל נמצא בפאנל בצד, לפי הערכים שה-Design System כבר מכיר.
לכתוב מחדש את הטקסט.בדיוק במקום שבו הוא יושב.
דאבל קליק על כל טקסט יאפשר לכם להקליד עליו מחדש. צבע, פונט, משקל, גובה שורה וריווח נמצאים מרחק פאנל אחד מכם – והכל מחובר לטוקנים של הפרויקט.
לוחצים אנטר והמערכת שומרת גם את הטקסט הישן וגם את החדש, כי זה בדיוק מה שהמפתח צריך כדי להבין מה השתנה.
שכבת העריכה צריכה עכבר ומקום לעבוד. פתחו את זה במחשב כדי לנסות בעצמכם.
תגידו את זה טוב יותר.
לחצו פעמיים על המשפט הזה וכתבו מה הטקסט באמת צריך להגיד. המקור נשמר לצד הגרסה שלכם.
"לא, רק במובייל."בסדר. הנה מובייל.
גם בדיקה ותיקון של רספונסיביות קורים באותה שכבה. התצוגה היא המוצר האמיתי במידות של מכשיר אמיתי, וכל שינוי בפאנל קופץ מיד בתוך הטלפון.
אפשר בקלות לעבור בין תצוגות מובייל, טאבלט ודסקטופ כדי לוודא שהעיצוב נראה מושלם בכל גודל מסך.
ימין-לשמאל זה פשוט כפתור באותו סרגל, אז סוף סוף בודקים איך העברית נראית במקום רק לנחש.
שכבת העריכה צריכה עכבר ומקום לעבוד. פתחו את זה במחשב כדי לנסות בעצמכם.
אותו כרטיס, עולם קטן יותר.
אפשר לראות את העיצוב בתצוגת מובייל, טאבלט ודסקטופ כדי לוודא שזה נראה מושלם בכל המסכים.
כרטיס אחד,או כל המופעים שלו.
וזה החלק שהכי משנה: מעדכנים קומפוננטה רוחבית ורואים את התוצאה ישר על המסך האמיתי.
המערכת מבינה לבד אם שיניתי רק כרטיס אחד ספציפי, או שזה עדכון גלובלי שצריך לתפוס על כל שאר הכרטיסים.
ההבחנה הקטנה הזו היא ההבדל בין חפיף לשינוי מערכתי – וזה בול מה שרוב העיצובים מפספסים במסירה לפיתוח.
שכבת העריכה צריכה עכבר ומקום לעבוד. פתחו את זה במחשב כדי לנסות בעצמכם.
הפאנל כבר סופר לכם כמה מופעים כאלה קיימים עוד לפני שאתם מחליטים לשנות אותם.
הקסם האמיתיקורה בסוף.
המערכת שומרת כל שינוי שעשיתי, ומייצרת מסמך שינויים (Changelog) מפורט בטירוף: מה בדיוק השתנה, באיזו קומפוננטה, באיזה מסך, ומה הערכים החדשים שצריך לעדכן.
- הערך הישן והחדש. לא צילום מסך של התוצאה – הצמד עצמו.
- איזו קומפוננטה. עם הסלקטור, והאם זה היה גלובלי או נקודתי.
- CSS מוכן להדבקה. הגדרות טוקנים, כללים ישירים וכללי מצב.
שכבת העריכה צריכה עכבר ומקום לעבוד. פתחו את זה במחשב כדי לנסות בעצמכם.
תשנו אותי, ואז תקראו את היומן.
תשנו לכרטיס את הגודל, תצבעו אותו מחדש, תכתבו מחדש את המשפט – ואז תפתחו את היומן ותעתיקו את התוצאה.
מעבירים את המסמךחזרה לאייג׳נט.
את המסמך הזה אני פשוט זורק חזרה ל-Agent, שמטמיע את הכל בקוד נקי ומסודר.
- בלי עשרות סבבים מתסכלים של הלוך-חזור.
- בלי לשרוף טוקנים על "תעשה את זה טיפ-טיפה יותר קטן".
- ובעיקר – בלי לאבד שליטה על העיצוב דווקא בשלב שהכי משפיע על התוצאה הסופית.
שכבת העריכה צריכה עכבר ומקום לעבוד. פתחו את זה במחשב כדי לנסות בעצמכם.
תשחקו קצת.נסו בעצמכם.
בניתי את זה מקומית בתוך הפרויקט עצמו, לא בתור תוסף לדפדפן – היה לי קריטי שזה ישב בתוך הוורידים של ה-Design System. מעבר לדיוק המטורף שזה נותן היום, זה גם מכין את הקרקע להמון אוטומציות שעוד יגיעו.
אף שינוי שתעשו כאן לא יפגע בקבצי המקור, ושום דבר לא יוצא לכם מהדפדפן. אז תרגישו חופשי להרוס לחלוטין את העיצוב בצד ימין.
שכבת העריכה צריכה עכבר ומקום לעבוד. פתחו את זה במחשב כדי לנסות בעצמכם.
תתפרעו.
שום דבר כאן לא נוגע בקוד, ושום דבר ממה שתעשו לא יוצא מהדפדפן הזה.
קבלו את הסקיללפרויקטים שלכם
זה הסקיל שכתבתי לעצמי כדי לבנות כלי כזה. אתם לגמרי מוזמנים להעתיק, לשחק איתו, ולהטמיע אותו בפרויקטים שלכם.
פשוט תריצו את הפקודה למטה, או תקפצו למאגר ב-GitHub כדי לקרוא את הקוד ולראות איך לשלב את זה עם מערכת העיצוב שלכם.
שכבת העריכה צריכה עכבר ומקום לעבוד. פתחו את זה במחשב כדי לנסות בעצמכם.
npx skills add meraki/design-inspector