בניין · מערכת עיצוב DESIGN.md | Agent Skills IL | Skills IL

civic · quiet · authoritative · editorial

בניין

מודרניזם של העיר הלבנה. מבטא אחד בלבד, זולת זאת שטוחה לגמרי.

✓ lint-clean✓ WCAG AAv0.1.0Frank Ruhl LibrePublic SansHeebo

התקנה

npx skills-il add-design baniyan

תצוגה חיה · Kitchen Sink

תצוגה מקורית. התאמות נגישות משפיעות רק על העמוד עצמו, לא על התצוגה.

בניין · מודרניזם · שקט

מה שנבנה להישאר

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

פלטה

accent

#A13A2A

primary

#1A1A18

surface

#F3EEE3

on-accent

#F3EEE3

on-primary

#F3EEE3

on-surface

#1A1A18

surface-container

#EAE3D2

סקאלת טיפוגרפיה

תצוגה

בניין

כותרת ראשית

מערכות עיצוב בעברית

כותרת משנה

טיפוגרפיה עם כוונה

גוף גדול

פסקת פתיחה עם ריווח נדיב לקריאות בעברית.

גוף רגיל

הטקסט שנושא את רוב התוכן של הדף.

גוף קטן

מטא־דאטה, כיתובים, הערות שוליים.

כיתוב קטןקטגוריה · תגית · תגובה

רכיבים

כתובת דוא"ל

נשתמש בזה רק כדי לאשר את ההרשמה.

כרטיס לדוגמה

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

סקירה

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

טיפוגרפיה

שתי משפחות, נבחרו לשרוד את המעבר בין עברית ללטינית בלי לפגוע בקרנינג. - **תצוגה וכותרות** משלבות Frank Ruhl Libre בעברית עם Public Sans בלטינית. לשתיהן x-height גבוה ומשקל אופטי תואם, כך שהמערכת שורדת את המעבר בין כתבים בלי לפגוע בקרנינג. - **גוף טקסט** משתמש ב-Heebo לשתי השפות. Heebo מביאה גליפים עבריים ולטיניים איכותיים באותה משפחה, וחוסכת טעינה של משפחה שנייה לגוף הטקסט. ריווח שורות נדיב (1.55 עד 1.6 לגוף הטקסט) כדי להכיל יורדים בעברית מבלי להדק שורות לטיניות.

מה כן ומה לא

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

מדריך לוקליזציה

Stacked font families put Latin first in DESIGN.md and Hebrew first in DESIGN_HE.md, so each locale renders in its native script without browser glyph substitution. - **Digits**: use the Latin digit set for prices, dates, and phone numbers in both locales. Wrap mixed-language runs in `<bdi>` or set `unicode-bidi: plaintext` so "1,200 ₪" stays readable inside RTL flow. - **Nikkud**: Bauhaus is not designed to carry nikkud. If niqqud is required for religious or educational content, switch to the Kodesh system or override line-height to 1.9. - **Punctuation**: prefer Hebrew gershayim (״) and geresh (׳) over ASCII double/single quotes in HE copy. ASCII stays in EN. - **OpenType**: no special features required. Public Sans and Frank Ruhl ligate automatically at display sizes.

שאלות נפוצות

מתי נכון להשתמש ב-בניין?

מה זה בכלל קובץ DESIGN.md?

DESIGN.md הוא פורמט של Google Labs לתיאור זהות חזותית לסוכני קוד. הקובץ מכיל YAML front matter עם טוקני עיצוב (צבעים, טיפוגרפיה, רכיבים) ופרוזה שמסבירה למה כל ערך קיים. סוכני קוד כמו Claude Code או Cursor קוראים את הקובץ ומייצרים ממשק שמתאים למערכת.

איך מתקינים את המערכת בפרויקט?

מריצים `npx skills-il add-design בסלאג של המערכת` בשורש הפרויקט, והסקריפט כותב DESIGN.md ו-DESIGN_HE.md. אפשר גם להעתיק את התוכן ישירות מהעמוד או להדביק את הפרומפט שמופיע בלשונית "פרומפט לסוכן".

איך המערכת מתמודדת עם עברית ו-RTL?

יש שני קבצים: DESIGN.md מצמיד את הפונטים הלטיניים קודם, DESIGN_HE.md מצמיד את העבריים. הטוקנים זהים בכל השאר, כך שסוכן יכול לבחור את הגרסה שמתאימה לכל רכיב. הפרק "Localization" מפרט את ההבדלים (כיוון ספרות, ניקוד, מרכאות).