קורן בן עזרא
skills-ilמה זה מערכת עיצוב ישראלית?
israeli-ui-design-system הוא סקיל של הארגון הישראלי skills-il, שבונה מערכת עיצוב לאפליקציות ישראליות כשהכיוון מימין לשמאל הוא ברירת המחדל ולא תוספת. הוא מגדיר זוגות של גופן עברי וגופן לטיני, סולם טיפוגרפי שמותאם לעברית, רכיבים בנויים על מאפיינים לוגיים, טוקנים של צבע ומרווח, וטפסים ישראליים עם תעודת זהות, טלפון ומיקוד. בנוסף הוא מקודד מוסכמות מקומיות: שקל, תאריך עם היום קודם, שעון של 24 שעות ושבוע שמתחיל ביום ראשון.
מערכות עיצוב פופולריות נבנו לאנגלית, ולכן כשמעבירים אותן לעברית מתגלים פערים קטנים שמצטברים: הטקסט העברי נראה קטן מדי באותו גודל גופן, השבוע בלוח השנה מתחיל ביום שני, שדה תעודת הזהות מוחק את האפס בהתחלה, והמחיר מופיע בפורמט אמריקאי. israeli-ui-design-system מתחיל מהצד הישראלי ובונה את המערכת סביבו.
הסקיל עובד בשמונה שלבים. הוא בוחר זוג גופנים מתוך חמישה, למשל Heebo עם Inter לדשבורדים או Rubik עם Source Sans 3 לאתרים שיווקיים, וקובע סולם טיפוגרפי עם גוף טקסט של 16 פיקסלים לפחות וגובה שורה של 1.7. אחר כך הוא בונה רכיבים על מאפיינים לוגיים, מגדיר טוקנים בשלוש שכבות כולל מצב כהה ובדיקת ניגודיות, נותן תבנית מוסדית בסגנון gov.il, טפסים ישראליים, פורמט של שקל, תאריך ושעה, ובדיקה ויזואלית בשני הכיוונים.
למשל, סטארטאפ קטן ברעננה שבונה מערכת לניהול תורים לקליניקות יכול לבקש מ-Claude מערכת עיצוב לפי הסקיל. הוא יקבל את Heebo עם Inter, סולם טיפוגרפי לעברית, כפתורים, כרטיסים ותפריט צד שמתהפכים לבד, טופס עם בדיקת ספרת ביקורת לתעודת זהות, תאריכים בפורמט 20.04.2026 ולוח שנה שמתחיל ביום ראשון ומסמן את שישי ושבת כסוף שבוע.
למי זה מתאים
- סטארטאפים וחברות תוכנה שבונים מוצר SaaS או אפליקציית ווב לקהל ישראלי
- בוני אתרים שרוצים ספריית רכיבים אחידה לכל הפרויקטים בעברית
- גופים ציבוריים ומוסדות שצריכים מראה מוסדי ונקודת פתיחה לפני העבודה עם IGDS
- מעצבים שעובדים עם מפתחים ורוצים טוקנים משותפים ומוסכמות כתובות
מה הוא עושה
חמישה זוגות גופנים
Heebo עם Inter לעסקים ודשבורדים, Rubik עם Source Sans 3 לאתרים צרכניים, Assistant עם Roboto למוסדות, Frank Ruhl Libre עם Merriweather לתוכן, ו-Secular One עם Montserrat לדפי נחיתה.
סולם טיפוגרפי לעברית
גדלים מ-13 עד 36 פיקסלים, גוף טקסט של לפחות 16 פיקסלים, גובה שורה של 1.4 עד 1.9 ומרווח מילים קל, כי אותיות עבריות נראות קטנות יותר מלטיניות באותו גודל.
רכיבים מימין לשמאל
כפתורים, כרטיסים, תפריט צד, פירורי לחם, חלונות, תפריטים נפתחים, סליידרים, פסי התקדמות והודעות צפות, עם התנהגות מוגדרת לכל אחד בעברית.
טוקנים בשלוש שכבות
ערכי בסיס, תפקידים ורכיבים, מצב כהה עם אותם שמות טוקנים, בדיקת ניגודיות מובנית, והמלצה לכתוב את הטוקנים בפורמט של קבוצת W3C Design Tokens.
טפסים ישראליים
טופס כתובת עם מיקוד של 7 ספרות, שדה תעודת זהות שלא מוחק אפסים עם פונקציה לבדיקת ספרת הביקורת, ושדה טלפון שמקבל 05X, מקפים ו-+972.
פורמטים מקומיים
סכום בשקלים עם Intl.NumberFormat, תאריך עם היום קודם ונקודות כמו 20.04.2026, שעון של 24 שעות, ושבוע שמתחיל ביום ראשון עם סוף שבוע בשישי ושבת.
תבנית מוסדית
מפנה למערכת העיצוב הממשלתית IGDS בקובץ Figma, ומוסיפה תבנית כללית של כותרת, טופס ושלבים, שמסומנת במפורש כלא רשמית.
מה יש בפנים
SKILL.mdשמונת השלבים, שלוש דוגמאות, מלכודות נפוצות וטבלת מקורות.SKILL_HE.mdגרסה עברית של ההוראות.references/hebrew-typography.mdקטלוג גופנים עבריים עם מדדים, זוגות לכל סוג אתר, אסטרטגיות טעינה וחיתוך, כללי CSS לעברית וטיפוגרפיה דו-לשונית.references/domain-checklist.mdמה הסקיל חייב לכסות, מה רצוי ומה מחוץ לתחום, עם המקור לכל נושא.דוגמאות שימוש
מה כותבים ל-Claude אחרי ההתקנה, ומה מקבלים.
מערכת עיצוב למוצר SaaS
תשתמש בסקיל israeli-ui-design-system ותבנה מערכת עיצוב למערכת ניהול תורים לקליניקות, עם Tailwind v4. אני צריך גופנים, טוקנים, מצב כהה וכפתור, כרטיס ותפריט צד.מה מקבלים: זוג גופנים Heebo ו-Inter, סולם טיפוגרפי לעברית, טוקנים בשלוש שכבות עם מצב כהה, ורכיבים בסיסיים בנויים על מאפיינים לוגיים.
טופס הרשמה ישראלי
תשתמש ב-israeli-ui-design-system ותבנה טופס הרשמה בעברית עם שם, תעודת זהות, טלפון נייד, מייל וכתובת מלאה כולל מיקוד.מה מקבלים: טופס מימין לשמאל עם שדות מספר ומייל בכיוון משמאל לימין, בדיקת ספרת ביקורת לתעודת זהות, בדיקת טלפון אחרי ניקוי רווחים ומקפים, ומיקוד של 7 ספרות.
מחירים ותאריכים באתר
תשתמש ב-israeli-ui-design-system ותתקן את הצגת המחירים והתאריכים באתר ההזמנות שלי, שמציג כרגע $ ותאריכים בפורמט אמריקאי.מה מקבלים: מחירים בשקלים עם Intl.NumberFormat של he-IL ובידוד עם bdi, תאריכים בפורמט 20.04.2026, שעון של 24 שעות ולוח שנה שמתחיל ביום ראשון.
אתר בסגנון מוסדי
תשתמש ב-israeli-ui-design-system ותבנה כותרת, טופס וסרגל שלבים בסגנון מוסדי לאתר של מועצה מקומית.מה מקבלים: תבנית מוסדית כללית מהסקיל, עם הבהרה שהיא לא מערכת העיצוב הממשלתית הרשמית והפניה לקובץ IGDS ב-Figma כדי להחליף בערכים הרשמיים.
מה צריך לפני שמתחילים
- Claude Code או כל סוכן שקורא SKILL.md. לפי הסקיל הוא מתאים ל-React, Vue, Angular ול-HTML ו-CSS רגילים
- git להתקנה בפקודה, ואופציונלית Node.js בגרסה 20 ומעלה להתקנה עם ה-CLI של skills-il
- בלי מפתח API ובלי עלות, רישיון MIT. הדפוסים הבסיסיים לא דורשים חיבור לרשת
- אופציונלי: Storybook לפיתוח רכיבים ו-Playwright לבדיקת צילומי מסך, כפי שהסקיל ממליץ
- ההוראות ב-SKILL.md באנגלית, ויש לצידן גרסה עברית ב-SKILL_HE.md
אין עדיין Claude Code? במדריך הזה יש התקנה צעד אחרי צעד.
איך מתקינים את מערכת עיצוב ישראלית.
יש 3 דרכים, ומספיקה אחת מהן. הראשונה הכי פשוטה, בלי קוד בכלל.
הכי פשוט: באפליקציה של Claude, בלי שום קוד
מתאים ל-Claude במחשב ובדפדפן. לוקח דקה, ועושים את זה פעם אחת.
- מורידים את הסקילהורדת israeli-ui-design-system.zip (41 KB)לא פותחים את הקובץ, מעלים אותו כמו שהוא.
- מדליקים פעם אחת את היכולתב-Claude נכנסים ל-Settings, ואז Capabilities, ומדליקים את
Code execution and file creation. - מעלים את הקובץנכנסים ל-Customize, ואז Skills, לוחצים על הפלוס, בוחרים
Create skillואזUpload a skill, ובוחרים את הקובץ שהורדתם. - זהו, עובדיםמבקשים מ-Claude את המשימה במילים רגילות, והוא משתמש בסקיל לבד כשהוא רלוונטי.
ב-Claude Code: מדביקים הודעה אחת
פותחים שיחה חדשה ב-Claude Code, מעתיקים את ההודעה ומדביקים. כש-Claude מבקש אישור להריץ, לוחצים Allow.
תתקין לי בבקשה את הסקיל israeli-ui-design-system מהמאגר skills-il/localization לתיקיית הסקילים שלי. תריץ את הפקודה הזו בדיוק: D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/skills-il/localization "$D/repo" && mkdir -p ~/.claude/skills && cp -R "$D/repo/israeli-ui-design-system" ~/.claude/skills/ && rm -rf "$D" && echo "הותקן ✓"
בטרמינל, ידנית
למי שמעדיף להריץ בעצמו. מעתיקים לטרמינל ומריצים.
D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/skills-il/localization "$D/repo" && mkdir -p ~/.claude/skills && cp -R "$D/repo/israeli-ui-design-system" ~/.claude/skills/ && rm -rf "$D" && echo "הותקן ✓" אופציה ב, CLI רשמי, דורש Node.js 20 ומעלה: npx skills-il add skills-il/localization@v1.5.0-israeli-ui-design-system --skill israeli-ui-design-system -a claude-code -y -g
מפעילים מחדש את Claude Code כדי שהסקיל ייטען. אין צורך במפתח API או בהגדרה נוספת.
- מריצים ls ~/.claude/skills/israeli-ui-design-system ומוודאים שמופיעים SKILL.md ו-SKILL_HE.md
- בשיחה חדשה מקלידים / ומחפשים israeli-ui-design-system
- שואלים את Claude איזה זוג גופנים מתאים לדשבורד בעברית, ומצפים לתשובה Heebo עם Inter
מריצים שוב את אותה פקודת התקנה, והיא מעתיקה את הגרסה העדכנית מעל הקיימת. מי שהתקין עם ה-CLI יכול להריץ npx skills-il update.
rm -rf ~/.claude/skills/israeli-ui-design-system
איך משתמשים ביום יום
- כותבים בבקשה תשתמש בסקיל israeli-ui-design-system, ומציינים את סוג המוצר ואת הקהל
- מציינים את הטכנולוגיה, למשל Tailwind v4, React או shadcn/ui, כדי לקבל קוד שמתאים לה
- מבקשים קודם גופנים, סולם טיפוגרפי וטוקנים, ורק אחריהם רכיבים ועמודים
- בסוף מבקשים בדיקה בשני הכיוונים ובשני המצבים, בהיר וכהה
טיפים שימושיים
- אם יש לכם צבעי מותג, נותנים אותם במקום הפלטה הכחולה לדוגמה שבסקיל, ומבקשים לבדוק להם ניגודיות
- הסקיל מזהיר שחלק מצבעי הדוגמה, כמו הכתום של אזהרה, לא עוברים ניגודיות לטקסט קטן על רקע לבן, ולכן משתמשים בגוון כהה יותר לטקסט
- לניסוח של כפתורים והודעות כדאי לבחור סגנון אחד ניטרלי מגדרית, כמו לחצו או הרשמה, ולכתוב אותו בהנחיות התוכן
- לאתר ממשלתי אמיתי עובדים עם קובץ IGDS הרשמי, כי התבנית המוסדית בסקיל היא רק נקודת פתיחה
- לבעיות RTL נקודתיות בקוד שאינו חלק ממערכת העיצוב, משתמשים ב-hebrew-rtl-best-practices
תקלות נפוצות
הטקסט העברי נראה צפוף וקטן
האנגלית מופיעה בגופן העברי ו-Inter לא נטען
בדיקת טלפון נכשלת על מספרים תקינים
בדיקות snapshot נכשלות על מחירים
שאלות ותשובות
זה עולה כסף?
זה עובד בעברית?
זו מערכת העיצוב הרשמית של gov.il?
הוא עושה גם בדיקת נגישות?
כמה פופולרי הסקיל?
קרדיט ומקור. מערכת עיצוב ישראלית נכתב על ידי skills-il ונמצא ב-skills-il/localization ברישיון MIT. skills-il הוא פרויקט קוד פתוח ישראלי של סקילים ל-AI, ואפשר למצוא את כל הסקילים שלהם גם ב-agentskills.co.il. את העמוד כתב קורן בן עזרא אחרי בדיקה של המאגר ושל פקודות ההתקנה (08.10.2026). מאגרים מתעדכנים, ולכן אם משהו השתנה, המאגר הוא המקור הקובע.
nextlevelbuilder