English
תנועה
נגישותפרטיות
סיפור הפרויקט03 / 15יולי 2026 – היום

console-ui

מערכת עיצוב אחת, ספריית רכיבים משותפת, לכל מסך ניהול שאני בונה.

תפקיד
מעצב ומפתח יחיד
ארגון
פרויקט אישי
תקופה
יולי 2026 – היום
סטטוס
בפיתוח פעיל
שרטוט של המעטפת של console-ui ברוחב מחשב, טאבלט וטלפון, מעל סרגל של חמש נקודות השבירה ומה שכל אחת משנה.שרטוט של המעטפת של console-ui ברוחב מחשב, טאבלט וטלפון, מעל סרגל של חמש נקודות השבירה ומה שכל אחת משנה.
לוח 01המסגרת ונקודות השבירהמעטפת אחת ב-1440, 768 ו-390 פיקסלים: סרגל עליון של 56, סרגל צד של 252 שהופך למגירה מתחת ל-48em, ושוליים של 20 בכל רוחב.
להדגמה החיה

01 / האתגר

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

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

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

02 / מה בניתי

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

לכל מספר יש סיבה, והסיבות כתובות בקוד ובתיעוד: למה קו המתאר של שדה הוא בגוון האפור הזה, למה שורה מקוננת בסרגל הצד זזה פנימה 16 פיקסלים, ולמה הסבר יושב מתחת לשדה ולא מעליו. היא התחילה ביולי 2026 מפריסת ניהול בקוד פתוח, Gentelella של Colorlib, שהעברתי ל-React ול-Mantine; מאז בניתי אותה מחדש, כלל אחר כלל, למערכת עיצוב משלי.

איך זה נבנה

  1. 2026-07ספריית רכיבים ואתר תצוגהאני מעביר פריסת ניהול בקוד פתוח (Gentelella) ל-React ול-Mantine, כספריית רכיבים ואתר תצוגה.
  2. 2026-08ציר אחד, קטלוג אחדסרגל הצד מקבל ציר אייקונים קבוע, וקטלוג הרכיבים נכתב כך שאנשים וסוכני AI ישתמשו במה שקיים לפני שהם בונים.
  3. 2026-10נמדד לפי WCAG AAכל דרגת טקסט, קו מתאר, סדרה בגרף וסימון מצב נמדדים, ובדיקות הדפדפן סורקות כל שכבה כשהיא פתוחה.
  4. 2026-10שפת עיצוב שנייהאטלייה, בקרם וביין, יוצאת על אותו שלד, נמדדת לפי WCAG AA ומתחלפת בלי טעינה מחדש.
  5. 2026-10הגדרות שנכנסים לתוכןחלון ההגדרות הופך את הפס שלו לרשימה שנכנסים ממנה פנימה, כשהתיבה שלו צרה.

03 / דגשים

01

שלד אחד, שתי שפות עיצוב

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

02

כל צבע נמדד

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

03

צפיפות עם רצפות

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

04

מימין לשמאל מגיליון סגנון אחד

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

05

סרגל צד על ציר אחד

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

06

הגדרות בשביל הקורא

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

07

אתר תצוגה לכל רכיב

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

04 / לוחות

12 לוחות · כל לוח נפתח לקריאה בגודל מלא · נתוני דמה

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

שרטוט של סרגל הצד של console-ui, פתוח ברוחב 252 ומקופל לפס של 64, עם קווי מידה שמראים שכל אייקון, הלוגו והאווטאר ממורכזים על ציר אחד ב-32 פיקסלים.שרטוט של סרגל הצד של console-ui, פתוח ברוחב 252 ומקופל לפס של 64, עם קווי מידה שמראים שכל אייקון, הלוגו והאווטאר ממורכזים על ציר אחד ב-32 פיקסלים.
לוח 02ציר אחד לכל סימןסרגל הצד בנוי על ציר אחד: 8 + 13 + 11 = 32, מרכז הפס ברוחב 64, כך ששום דבר לא קופץ כשהוא מתקפל.
שרטוט של סולם הריווח ודרגות הצפיפות של console-ui: טבלת מקדמים, ואותו כפתור, שדה, כרטיס ושורת טבלה בדרגה דחוסה, רגילה ומרווחת.שרטוט של סולם הריווח ודרגות הצפיפות של console-ui: טבלת מקדמים, ואותו כפתור, שדה, כרטיס ושורת טבלה בדרגה דחוסה, רגילה ומרווחת.
לוח 03ריווח וצפיפותחמש מדרגות ריווח מ-8 עד 28, ושלוש דרגות צפיפות שמזיזות כפתורים מ-24 עד 40 פיקסלים בלי לרדת אף פעם מתחת לרצפה של 24.
שרטוט של סולם הטיפוגרפיה של console-ui: דוגמאות כותרות בתוך תיבות גובה שורה, גרף של גובה שורה מול גודל, סולם הטקסט והטקסט בפקדים.שרטוט של סולם הטיפוגרפיה של console-ui: דוגמאות כותרות בתוך תיבות גובה שורה, גרף של גובה שורה מול גודל, סולם הטקסט והטקסט בפקדים.
לוח 04סולם הטיפוגרפיהשש כותרות מ-28 עד 13 פיקסלים, כל אחת בערך פי 1.2 מהבאה; גובה השורה נפתח ב-0.05 בכל מדרגה כשהגודל יורד.
שרטוט של הכפתור של console-ui בהגדלה פי ארבעה, עם הריפוד מקווקו, טבעת הפוקוס, שלושת הגדלים וחמשת המצבים.שרטוט של הכפתור של console-ui בהגדלה פי ארבעה, עם הריפוד מקווקו, טבעת הפוקוס, שלושת הגדלים וחמשת המצבים.
לוח 05כפתור: אנטומיה ומצביםהכפתור, במידות: גובה 32 וריפוד 12, טבעת פוקוס של 2 פיקסלים במרחק 2, ודיו שחור או לבן לפי בהירות המילוי.
שרטוט של שדה הטופס של console-ui בהגדלה פי שלושה, ארבעת המצבים שלו, ולפני ואחרי של שני שדות באותה שורה.שרטוט של שדה הטופס של console-ui בהגדלה פי שלושה, ארבעת המצבים שלו, ולפני ואחרי של שני שדות באותה שורה.
לוח 06שדה בטופס: אנטומיה, פוקוס ושגיאותשדה הוא תווית של 12, רווח של 6, שדה בגובה 36 והסבר של 11.5 מתחתיו, כך שכל שדה בשורה מתחיל באותו קו.
שרטוט של טבלת הנתונים של console-ui עם שורה בריחוף, שורה נבחרת ושורה בפוקוס, תא אחד בהגדלה פי שלושה, והפריסות הצרות.שרטוט של טבלת הנתונים של console-ui עם שורה בריחוף, שורה נבחרת ושורה בפוקוס, תא אחד בהגדלה פי שלושה, והפריסות הצרות.
לוח 07טבלה: צפיפות, יישור ובחירהשורה של 40 פיקסלים מריפוד של 8 על 16; מספרים מיושרים לסוף; שורה נבחרת מקבלת קו מתאר מבפנים, וכפול כשיש לה פוקוס.
שרטוט של חלון ההגדרות של console-ui בחצי גודל, הניווט הצר שלו, מגירת צד בשני רוחבי חלון והידית של גיליון תחתון.שרטוט של חלון ההגדרות של console-ui בחצי גודל, הניווט הצר שלו, מגירת צד בשני רוחבי חלון והידית של גיליון תחתון.
לוח 08חלונות, ניווט פנימה ומגירותחלון ההגדרות בגודל 920 × 620, מוגבל לפי החלון; מתחת ל-40rem הפס שלו הופך לרשימה שנכנסת פנימה, ומגירה לא משאירה פס צר של עמוד.
שרטוט של טוקני הצבע של console-ui: המשטחים במצב בהיר ובמצב כהה, טבלת יחסי ניגודיות לכל דרגת טקסט, והדרגות הבהירות על סולם ניגודיות אחד.שרטוט של טוקני הצבע של console-ui: המשטחים במצב בהיר ובמצב כהה, טבלת יחסי ניגודיות לכל דרגת טקסט, והדרגות הבהירות על סולם ניגודיות אחד.
לוח 09משטחים, דרגות טקסט וניגודיותכל דרגת טקסט עומדת על 4.5:1 לפחות על כל משטח, כולל שורה בריחוף, וכל קו של פקד עומד על 3:1: היחסים מחושבים מתוך הטוקנים.
שרטוט של המעטפת של console-ui זו לצד זו משמאל לימין ומימין לשמאל, עם פרטים של ריפוד, אייקונים, ספרות ויישור בשני הכיוונים.שרטוט של המעטפת של console-ui זו לצד זו משמאל לימין ומימין לשמאל, עם פרטים של ריפוד, אייקונים, ספרות ויישור בשני הכיוונים.
לוח 10מימין לשמאל, מגיליון סגנון אחדגיליון סגנון אחד לשני הכיוונים: רק תכונות לוגיות, מספרים מיושרים לסוף, ספרות מבודדות, ואייקונים שמתהפכים רק כשיש להם כיוון.
שרטוט של הכללים הקטנים של console-ui: שתי עקומות התנועה וארבעת המשכים, שלושה גדלים של מטרות לחיצה, סרגל עליון צפוף לפני ואחרי שהוא יורד שורה, וסרגל הניווט בטלפון.שרטוט של הכללים הקטנים של console-ui: שתי עקומות התנועה וארבעת המשכים, שלושה גדלים של מטרות לחיצה, סרגל עליון צפוף לפני ואחרי שהוא יורד שורה, וסרגל הניווט בטלפון.
לוח 11הפרטים הקטניםארבעה משכים ושתי עקומות לכל התנועה, מטרות לחיצה של 24, 36 ו-44, כותרת שלא מתכווצת מתחת ל-6rem, וקו פוקוס שלא מונפש לעולם.
שרטוט של דשבורד של console-ui בחצי גודל, עם רשת של ארבע עמודות, רווחים של 20, כותרות פאנלים, אזור הגרף, שורות הטבלה והקו הדביק.שרטוט של דשבורד של console-ui בחצי גודל, עם רשת של ארבע עמודות, רווחים של 20, כותרות פאנלים, אזור הגרף, שורות הטבלה והקו הדביק.
לוח 12דשבורד, עם הכללים גלוייםדשבורד שלם על ארבע עמודות של 272 פיקסלים: כל רווח הוא אותו טוקן של 20, וחלקים דביקים נשארים 72 פיקסלים מלמעלה.

05 / איפה זה עומד

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

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

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

06 / התפקיד והטכנולוגיה

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

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

טכנולוגיות

  • React 19
  • TypeScript
  • Mantine
  • Vite
  • pnpm
  • Vitest
  • Playwright
  • טוקנים של עיצוב
  • Claude Code

איך זה בנוי

React 19 ו-TypeScript על Mantine 7, במאגר pnpm עם Vite; Vitest לבדיקות היחידה ו-Playwright עם בודק נגישות לבדיקות הדפדפן. בין יולי לאוקטובר 2026 נכתבו בו 327 קומיטים.

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

ככה אני אוהב לעצב.

פרקים