מישהו לקח את הרצאות העיצוב של אפל מ-WWDC והפך אותן לסקיל אחד ל-Claude Code. במקום להגיד לקלוד "תעשה את זה יותר פרימיום" - אתם נותנים לו חוקים אמיתיים לעבוד לפיהם. הנה איך מתקינים, ומה השימוש הכי חזק שלו.
סקיל זה תיקיית ידע שקלוד טוען לעצמו כשהוא צריך אותה. קובץ הוראות אחד (SKILL.md) עם כותרת ותיאור - וקלוד מזהה לבד מתי המשימה שלכם מתאימה לו ומושך אותו פנימה. אתם לא צריכים להפעיל כלום.
ההבדל מפרומפט רגיל: פרומפט נעלם אחרי הודעה. סקיל יושב על הדיסק ועובד בכל פרויקט, בכל שיחה, בלי שתזכירו אותו.
למה זה משנה פה: "עיצוב טוב" זו לא הרגשה - זה סט החלטות. ברגע שההחלטות האלה כתובות בקובץ, קלוד מפסיק לנחש ומתחיל לעבוד לפי כללים.
הסקיל נבנה על ידי אמיל קובלסקי - דיזיין אנג'ינר בלינאר, בעבר בצוות העיצוב של ורסל, והבן אדם שמאחורי הספריות Sonner ו-Vaul. הוא זיקק את הרצאות העיצוב של אפל - בעיקר Designing Fluid Interfaces (WWDC 2018) ו-The Details of UI Typography (WWDC 2020) - לכללים שעובדים על ווב. ארבעה תחומים:
ספרינגים במקום משכי זמן, המשכיות מהירות בין גרירה לאנימציה, ופרויקציה של תנופה - איפה האצבע "זורקת" את האלמנט.
ריווח אותיות שמשתנה לפי גודל הטקסט, גובה שורה שמתהפך מולו, והיררכיה שנבנית ממשקל ולא רק מגודל.
שכבות שקופות עם טשטוש שמעבירות היררכיה, צל שמותאם לרקע, ומעברי קצה בגלילה במקום קו מפריד.
שמונה העקרונות של אפל - מטרה, שליטה, אחריות, היכרות, גמישות, פשטות, מלאכה ועונג - כשפה לדבר בה על החלטות.
הסקיל גם מכסה נגישות כמו שצריך: prefers-reduced-motion, prefers-reduced-transparency ו-prefers-contrast - כדי שהאתר לא ישבור לאף אחד את הראש.
apple-design יושב בריפו של אמיל יחד עם עוד תשעה סקילים (אנימציה, ביקורת אנימציות, בחירת ספריית UI, פרוטוטייפים ועוד). מתקינים את כולם בבת אחת:
בתוך תיקיית הפרויקט שאתם רוצים לעבוד עליו.
ה-CLI מזהה לבד איזה סוכן מותקן אצלכם ושואל לאיפה להתקין ואיך (קיצור דרך או העתקה). בברירת מחדל זה נכנס לפרויקט - לתיקייה .claude/skills/.
מציג את כל הסקילים המותקנים, בדיוק כמו npm ls.
רוצים את זה בכל הפרויקטים? תוסיפו -g לפקודה. אז הסקילים נוחתים ב-~/.claude/skills/ וזמינים לכם מכל מקום, בלי להתקין מחדש בכל פרויקט.
ה-CLI הזה (skills, של Vercel Labs) תומך ב-Claude Code ובעוד עשרות סוכנים - Cursor, Codex, Windsurf ואחרים. אותה פקודה, כל אחד וההגדרות שלו.
רוב האנשים יתקינו את זה כדי לבנות משהו מאפס. השימוש הרבה יותר שווה: להפנות את הסקיל על אתר שכבר קיים לכם ולבקש ביקורת עיצוב. הוא יתפוס המון פרטים קטנים שלא יושבים - ריווחים לא עקביים, ריווח אותיות שנשאר קבוע בכל הגדלים, היררכיה שנשענת רק על גודל, אנימציות שאי אפשר לעצור באמצע, שכבות שקופות שמונחות אחת על השנייה. דברים שאתם עוברים לידם כל יום ולא רואים.
שלושה פרומפטים להעתקה - פותחים Claude Code בתיקיית האתר ומדביקים:
עצה מהשטח: תריצו את הביקורת לפני התיקון, תמיד. תנו לו לתת רשימה, תבחרו 3-5 דברים, ורק אז תגידו לו לתקן. אחרת הוא ישכתב לכם חצי אתר בשביל דברים שלא הפריעו לאף אחד.
אלה החוקים הכי חזקים בקובץ - גם אם לא תתקינו כלום, הם ישנו לכם את הממשק. לחצו כדי לפתוח:
אם משתמש תופס אלמנט שנמצא באמצע תנועה, הוא צריך להידבק לאצבע מיד - לא לסיים את האנימציה ואז להגיב. הכלל המעשי: תמיד להנפיש מהערך שנמצא עכשיו על המסך, לא מערך היעד הלוגי. אחרת רואים קפיצה.
מכאן נגזר החוק שהכי הרבה אנשים שוברים: לא להשתמש ב-CSS transition או keyframes לשום דבר שהמשתמש גורר או מזיז. אי אפשר לתפוס אותם באמצע ולהפוך כיוון. ספרינג כן.
אפל החליפה את הפיזיקה המסובכת בשני פרמטרים: דעיכה (כמה זה קופץ - 1.0 זה בלי קפיצה בכלל) ו-תגובה (כמה מהר זה מגיע ליעד, בשניות). זה לא "משך" - לספרינג אין משך קבוע, הוא נגמר כשהוא נגמר.
הערכים שאפל עצמה משתמשת בהם: הזזה של אלמנט - דעיכה 1.0, תגובה 0.4. סיבוב - 0.8 / 0.4. מגירה או sheet - 0.8 / 0.3. הכלל: ברירת מחדל בלי קפיצה, קפיצה רק כשלמחווה עצמה הייתה תנופה (זריקה, החלקה).
אין ערך אחד שנכון לכל הגדלים. ככל שהטקסט גדל, האותיות נראות רחוקות מדי - אז כותרות גדולות צריכות ריווח שלילי (בערך -0.02em), וטקסט רץ נשאר קרוב לאפס. אם יש לכם letter-spacing קבוע אחד ב-CSS - הוא שגוי באחד המקומות, מובטח.
אותו היגיון בגובה שורה: הפוך לגודל. צפוף בכותרות גדולות, נדיב בטקסט קטן. ואת ההיררכיה בונים ממשקל ביחד עם גודל - משקל מוסיף נוכחות בלי לתפוס עוד מקום.
ברגע שיש עיכוב, ההרגשה של "אני נוגע בזה" נופלת. הכפתור צריך להגיב ברגע שלוחצים, לא כשמשחררים. וכשגוררים משהו - העדכון צריך להיות רציף לאורך כל הדרך, לא רק כשמשחררים את האצבע.
רוצים לקרוא את הקובץ המלא לפני שאתם מתקינים? הריפו בגיטהאב ←
אם קובץ כללים אחד משנה ככה איך קלוד מעצב - תדמיינו AI OS שלם שבנוי סביב העסק שלכם: תוכן, לידים, תפעול. זה מה שאנחנו בונים בליווי האישי.
15 דקות ייעוץ בחינם