Apple Design Skill: בדיקת עיצוב לפי החוקים של אפל

מה זה Apple Design Skill?

אתם מכירים את התחושה: האתר שבניתם עם AI עובד, יש בו את כל המידע, ובכל זאת משהו בו נראה זול. קשה לשים על זה את האצבע. רווחים לא אחידים, כפתור קטן מדי בטלפון, טקסט אפור על רקע אפור, כותרת שאומרת "גלו עוד" ולא אומרת כלום.

אפל פותרת את הבעיה הזו כבר שנים עם מסמך ציבורי ענק שנקרא Human Interface Guidelines, או בקיצור HIG. זה ספר החוקים שלפיו נבנות האפליקציות באייפון ובמק: כמה גדול צריך להיות כפתור, כמה ניגודיות צריך טקסט, איך כותבים הודעת שגיאה.

Apple Design Skill הוא פרויקט בגיטהאב שאסף 123 דפים מהמסמך הזה, במילים של אפל, וארז אותם כסקיל. כשאתם מבקשים בדיקה, הוא קורא קודם את הדפים הרלוונטיים, ורק אז כותב. לפי ה-README, הוא מוסיף גם עין של מעצב, כדי שהתוצאה תרגיש נכונה בלי להיראות כמו תבנית.

הסקיל לא ממציא את החוקים מהראש. כל דף בתוכו שומר את הניסוח, הכותרות והטבלאות של אפל, כולל תאריך העדכון האחרון. חשוב לדעת: זה לא פרויקט של אפל, ואפל לא מאשרת אותו. הטקסט של החוקים שייך לאפל ולקוח מהאתר הציבורי שלה, עם קישור למקור בראש כל קובץ.

איך מתקינים את הסקיל בקלוד קוד?

הדרך הקצרה היא פקודה אחת בטרמינל, מתוך התיקייה של הפרויקט שלכם. צריך Node.js:

העתקהnpx skills add dickwu/apple-design-skill -a claude-code

רוצים שהסקיל יהיה זמין בכל הפרויקטים ולא רק בזה? מוסיפים -g בסוף. ובלי -a claude-code, הפקודה מציעה להתקין גם ל-Codex, Cursor וסוכנים אחרים. דרך שנייה, בלי Node.js, היא להעתיק את המאגר ישר לתיקיית הסקילים:

העתקהgit clone https://github.com/dickwu/apple-design-skill.git ~/.claude/skills/apple-design

אחרי זה פותחים סשן חדש. הסקיל נטען לבד כשאתם מבקשים בדיקת עיצוב, וזמין גם כפקודה /apple-design. כדי לעדכן בהמשך: npx skills update apple-design.

מה הסקיל בודק בעיצוב שלכם?

לפי ה-README, כל בדיקה עוברת על שישה דברים, בסדר הזה:

1. שמונת עקרונות העיצוב של אפל, שפורסמו מחדש ביוני 2026: מטרה, שליטה, אחריות, מוכרות, גמישות, פשטות, אומנות והנאה.
2. נגישות, שנחשבת חוסמת: גודל טקסט, יחסי ניגודיות, גודל כפתורים, קוראי מסך, מקלדת, והגדרות של תנועה ושקיפות. עם המספרים עצמם.
3. מוסכמות של הפלטפורמה: סרגלי לשוניות, תפריטים, חלונות, מצב כהה.
4. עיצוב חזותי: צבע, טיפוגרפיה, פריסה, אייקונים, תנועה, והאם לעיצוב יש אופי משלו.
5. אינטראקציה: טעינה, משוב, התראות, פעולות הרסניות וביטול.
6. תוכן וכתיבה: כפתורים שאומרים מה יקרה, הודעות שגיאה ומסכים ריקים שמכוונים את המשתמש.

כל ממצא בנוי משלושה חלקים: מה הבעיה, למה (עם הפניה לקובץ ולכותרת בחוקים של אפל), ואיך לתקן, בשפה של הקוד שלכם. דוגמאות למספרים שמופיעים בדף הנגישות של אפל שבתוך הסקיל: ניגודיות של 4.5:1 לפחות לטקסט עד 17 נקודות, וכפתור בגודל 44 על 44 נקודות כברירת מחדל באייפון.

מה כותבים לקלוד קוד כדי לקבל בדיקה טובה?

הנה פרומפט שעובד טוב לאתר של עסק. הוא מבקש סדר עדיפויות, כדי שלא תקבלו רשימה של 60 הערות בלי לדעת מאיפה להתחיל:

העתקה/apple-design תעבור על דף הבית של האתר שלי (index.html והקבצים שהוא טוען). זה אתר, לא אפליקציה, אז תתמקד בעקרונות, בנגישות, בצבע, בטיפוגרפיה, בפריסה ובכתיבה. תחלק את הממצאים לשלוש קבוצות: מה פוגע הכי הרבה במראה ובאמינות, מה פוגע בנגישות, ומה ליטוש. לכל ממצא: מה, למה, ואיך לתקן בקוד. אל תשנה עדיין שום קובץ. בסוף תגיד לי מה הדבר האחד שהאתר הזה צריך כדי שיזכרו אותו, בלי לשנות את הצבעים והמותג שלי.

בונוס לאתרים בעברית

בין הדפים שבסקיל יש דף שלם של אפל על ממשקים מימין לשמאל, שמזכיר במפורש עברית וערבית. הוא מסביר למשל שפסקה של שלוש שורות ומעלה צריכה להיות מיושרת לפי השפה שלה ולא לפי הכיוון של הדף, ושרשימה צריכה יישור אחיד גם כשיש בה פריטים באנגלית. אם יש לכם אתר בעברית עם מילים באנגלית באמצע, תוסיפו לבקשה: "ותבדוק גם את כל מה שקשור לימין לשמאל, לפי הדף right-to-left".

אחרי שעברתם על הרשימה, מבקשים לתקן קבוצה אחת בכל פעם, ופותחים את האתר בטלפון אחרי כל סבב. עוד כמה בקשות שה-README מציע:

• "זה נראה גנרי. תן לזה אופי בלי לשבור את המוסכמות" (מצב שיפור, שמתכנן פלטת צבעים, טיפוגרפיה ואלמנט חתימה אחד).
• "תבדוק את הטופס הזה" או "תבדוק את תהליך ההרשמה ואיך הוא מבקש הרשאות".
• "תבדוק את האייקון של האפליקציה".
• "תעבור על הקוד ותמצא דברים שהחנות של אפל תדחה בתשלום עם Apple Pay".

איך הוא שומר שהאתר לא ייראה כמו עוד תבנית?

זה החלק שהכי מפתיע בסקיל. בתוך ההוראות שלו יש בדיקה שנקראת "האם זו תבנית?". היא מתארת את שלושת המראות שחוזרים שוב ושוב בעיצובים שנוצרו ב-AI: קרם חם עם גופן סריף בולט ונגיעות של כתום אדמדם, שחור כמעט מלא עם צבע הדגשה אחד ירוק חומצי או אדום, ועיתון של קווים דקים, פינות חדות ועמודות צפופות.

אם פלטת הצבעים או הגופן הגיעו בלי סיבה שקשורה למוצר, הסקיל מסמן את זה כברירת מחדל ולא כבחירה. אותו דבר לגבי כותרת ראשית של מספר ענק מעל תווית קטנה עם גרדיאנט, ומספור של 01, 02, 03 על תוכן שהוא בכלל לא רצף.

מה שהוא לא עושה: הוא לא מכריח אתכם להיראות כמו אפל. החוקים של אפל הם בסיס של נגישות וסדר, והאופי נשאר שלכם. בהוראות כתוב במפורש שטיפוגרפיה של המערכת מתאימה לניווט ולכפתורים, והמותג יכול לחיות בכותרות, בתוכן וברגעים.

מה חשוב לדעת לפני שבודקים אתר?

• מחיר: הסקיל חינמי. מה שעולה זה השימוש בקלוד קוד עצמו, ובדיקה טובה קוראת כמה דפי חוקים, אז היא לוקחת יותר מהמכסה מבקשה רגילה.
• נבנה לאפליקציות: הסקיל כתוב בעיקר לאפליקציות (SwiftUI, Flutter, React Native, Tauri, Electron). בהוראות שלו כתוב שאתר מקבל את העקרונות והיסודות (נגישות, צבע, טיפוגרפיה, פריסה וכתיבה), אבל לא את המוסכמות של אייפון ומק. וזה בדיוק מה שאתר צריך.
• רישיון: נכון לנובמבר 2026 אין במאגר קובץ רישיון, והטקסט של החוקים שייך לאפל. להשתמש לבדיקה של הפרויקטים שלכם זה בדיוק השימוש שהוא נבנה בשבילו. להפיץ אותו מחדש כמוצר שלכם, לא.

עוד דבר מההוראות: מצילום מסך הסקיל יכול להעריך פריסה, היררכיה וטקסט, אבל ניגודיות וגדלים צריכים ערכים אמיתיים. לכן עדיף לתת לו את הקוד של האתר ולא רק תמונה. ואם יש ממצא שנראה לכם מוזר, תבקשו לראות את הציטוט מהחוק. הוא אמור לדעת להראות מאיפה הוא הביא אותו.

ואם אחרי הבדיקה אתם רוצים עיצוב חדש לגמרי ולא תיקונים, יש סקילים שבנויים לזה: Hallmark ו-Taste Skill. ולאנימציות עדינות ברמה של אפל, הסקילים של אמיל.