ה-AI שלכם כותב קוד מעולה - אבל העיצובים יוצאים גנריים, כאלה שרואים עליהם מקילומטר שבוט בנה אותם. 5 הפלאגינים במדריך הזה סוגרים בדיוק את הפער הזה: טעם, כללים, מערכת עיצוב, נאמנות לרפרנס - ועיניים שבודקות את התוצאה. כל פקודות ההתקנה כאן מאומתות ומוכנות להעתקה.
אתם מכירים את הלוק: כרטיסים עם צל עדין, סגול-כחול גרדיאנט, פונט גנרי, הכל מרווח מדי או צפוף מדי. זה לא באג - ככה מודלים מאומנים. בלי הכוונה, קלוד מייצר את הממוצע של כל האתרים שהוא ראה. והממוצע הוא משעמם.
החדשות הטובות: קלוד יודע לעצב מעולה - הוא פשוט צריך שיגידו לו מה זה טוב. בדיוק בשביל זה קיימים סקילים (Skills) - קבצי ידע שנטענים לתוך Claude Code ומשנים איך הוא חושב על עיצוב.
הרעיון בגדול: שני פלאגינים נותנים לקלוד טעם (Taste Skill, Awesome Design), אחד הופך רפרנסים לקוד (Image to Code), אחד מבקר את התוצאה מול כללים מקצועיים (Web Design Guidelines), ואחד נותן לו עיניים לראות מה הוא בנה (Playwright CLI). ביחד - צוות עיצוב שלם.
הסקיל שהתפוצץ ברשת (מעל 75 אלף כוכבים). מזריק לקלוד "טעם" שנבנה מרפרנסים פרימיום - טיפוגרפיה חזקה, צבע אחד דומיננטי, מערכת פינות אחידה, מיקרו-אנימציות - וכולל שלב ביקורת עצמית שלא נותן לו להסתפק בטיוטה הראשונה. התוצאה: ממשקים שמרגישים מעוצבים, לא מורכבים.
איך הכי טוב להשתמש: תתקינו ותבקשו ממנו ממשק כרגיל - הסקיל נטען לבד ברגע שהמשימה עיצובית. אם יש לכם כיוון (מינימליסטי, editorial, brutalist) - תגידו את זה בפרומפט והוא יתיישר.
ללמוד עוד ←הסקיל הרשמי של Vercel - לוקח את הקוד שכבר כתבתם ובודק אותו מול יותר מ-100 כללי עיצוב, חוויית משתמש ונגישות: מצבי טעינה, פוקוס במקלדת, אנימציות שמכבדות reduced-motion, קונטרסט, טפסים. הוא מושך את הכללים העדכניים בכל ריצה - אז הביקורת תמיד מיושרת לסטנדרט של היום.
איך הכי טוב להשתמש: אחרי שבניתם - לא לפני. תבקשו "תבדוק את הדף מול ה-web design guidelines" והוא יחזיר רשימת ממצאים ממוקדת. תריצו את זה כשלב קבוע לפני כל דיפלוי.
ללמוד עוד ←ספרייה של יותר מ-70 קבצי DESIGN.md - כל אחד הוא ניתוח מלא של מערכת העיצוב של אתר מוביל (Stripe, Linear, Vercel, Notion ועוד): צבעים עם ערכי hex, היררכיית טיפוגרפיה, מרווחים, כפתורים, צללים. בוחרים סטייל, זורקים קובץ אחד לפרויקט - וקלוד בונה בשפה הוויזואלית הזאת.
איך הכי טוב להשתמש: בפרומפט תגידו במפורש "תבנה לפי ה-DESIGN.md". זה מנצח כל תיאור מילולי של "תעשה שזה ייראה כמו Stripe" - כי הקובץ מכיל את הערכים המדויקים, לא רושם כללי.
ללמוד עוד ←מאותם יוצרים של Taste Skill. זורקים לו רפרנס ויזואלי - צילום מסך, מוקאפ, עיצוב שאהבתם - והוא עובד בשיטת "קודם תמונה": מנתח לעומק את הלייאאוט, המרווחים והטיפוגרפיה לפני שהוא כותב שורת קוד. ככה הוא לא מחליק לתבניות הגנריות שלו, אלא נשאר נאמן למה שנתתם לו.
איך הכי טוב להשתמש: תצרפו את התמונה לצ'אט ותכתבו מה הסטאק שלכם (React, HTML, מה שלא יהיה). ככל שהרפרנס באיכות גבוהה יותר - התוצאה קרובה יותר. מעולה לעמודי נחיתה ודפי מוצר.
ללמוד עוד ←הכלי הרשמי של מיקרוסופט, בגרסה שנבנתה במיוחד לסוכני קוד. נותן לקלוד לפתוח דפדפן אמיתי, לגלוש לדף שהוא בנה, לצלם אותו, ללחוץ על כפתורים ולקרוא שגיאות קונסול - ואז לתקן את עצמו. זה הפלאגין שסוגר את הלולאה: בלעדיו קלוד בונה בעיוורון ומקווה לטוב.
איך הכי טוב להשתמש: אחרי כל שינוי ויזואלי תבקשו "תפתח את הדף, תצלם ותבדוק שהכל נראה כמו שצריך". שילוב קטלני עם Web Design Guidelines - אחד רואה, השני שופט.
ללמוד עוד ←כל אחד מהם טוב לבד. הקסם קורה כשמריצים אותם כצוות, בסדר הזה:
יש לכם רפרנס מדויק? תשתמשו ב-Image to Code. רוצים סטייל של מותג מוכר? תזרקו DESIGN.md מ-Awesome Design. אין כיוון? תנו ל-Taste Skill להוביל. אלה שלושת מקורות הטעם - בוחרים אחד מוביל, לא דוחפים את שלושתם ביחד.
קלוד עובד כרגיל - רק שעכשיו יש לו כללים ורפרנסים במקום ניחושים. תבקשו ממנו לבנות בשלבים (קודם לייאאוט, אחר כך פירוט) ותקבלו תוצאה מדויקת יותר.
"תבדוק את הדף מול הכללים." הוא יתפוס בעיות נגישות, מצבי טעינה חסרים ופרטים שקל לפספס - לפני שמשתמש אמיתי נתקל בהם.
"תפתח, תצלם, תשווה למה שהתבקשת, ותקן." קלוד רואה את התוצאה בעיניים - ומתקן לבד את מה שלא יושב. זה ההבדל בין לקוות שיצא טוב לבין לדעת.
הכלל הפשוט: טעם נכנס לפני הקוד, ביקורת רצה אחריו. מי שמדלג על שלב 4 חוזר לבנות בעיוורון.
Taste Skill + שני קבצי DESIGN.md ביחד = בלגן. מקור טעם אחד מוביל לכל פרויקט. את השאר שומרים לפרויקט הבא.
כל סקיל מותקן עולה לכם בקונטקסט. סיימתם פרויקט ואתם לא צריכים סקיל? תסירו. אפשר תמיד להתקין מחדש בפקודה אחת.
Image to Code טוב בדיוק כמו התמונה שנתתם לו. סקרינשוט מטושטש מהטלפון = תוצאה בינונית. רפרנס חד ומלא = קוד נאמן.
Guidelines + Playwright שווים הכי הרבה כהרגל קבוע לפני כל דיפלוי - לא כדבר שמריצים פעם אחת ושוכחים.
אם 5 פלאגינים משנים ככה את איך שקלוד מעצב בשבילכם - תדמיינו AI OS שלם שבנוי סביב העסק שלכם: תוכן, לידים, תפעול, הכל מסודר ורץ לבד. זה בדיוק מה שאנחנו בונים בליווי האישי.
15 דקות ייעוץ בחינם