01101 רכיבים מוכחי ייצור
מפרימיטיבים ועד קומפוזיציות עמוד שלמות — 101 רכיבים, שכל אחד מהם נגזר ממוצר שאנחנו מספקים ולא עוצב בבידוד. רכיב שנמצא ב־PDS כבר עשה עבודה אמיתית: האתר הזה, דמואים של המוצרים ולוחות הבקרה של הלקוחות שלנו כולם מרונדרים עליו.
PDS · מערכת עיצוב
מערכת העיצוב שמאחורי כל מה שאנחנו משיקים.
PDS היא שפת העיצוב של Protocore, שחולצה מהמוצרים שאנחנו בונים ותוקנה בפרודקשן. Dark-first, מבוססת tokens ומתועדת מקצה לקצה — אותם רכיבים שמרנדרים את המוצרים שלנו ואת הדשבורדים של הלקוחות, ארוזים כך שצוות יכול לאמץ אותם בצהריים אחד.
יכולות
כל מה ש-Protocore Design System כולל.
- 01101 רכיבים מוכחי ייצור
- 02Design tokens
- 03שני ערכות נושא, חמישה צבעי הדגשה
- 04Dark-first
- 05רכיבי טפסים בסיסיים
- 06פריסה וקומפוזיציה
- 07ניווט
- 08שכבות עליונות
- 09הצגת נתונים
- 10משוב וסטטוס
- 11טיפוגרפיה
- 12תנועה
- 13נגיש כברירת מחדל
- 14Zero-runtime CSS
- 15שכבת CSS ללא תלות ב־framework
- 16ייצוא tokens לכל סטאק
- 17Theme provider ו־hooks
- 18Whitelabel theming
- 19מפת llms.txt
- 20שרת MCP
- 21מתועד מקצה לקצה
- 22גרסאות מנוהלות
- 23Private registry
- 24מפתחות רישיון offline
- 25רישיון לכל צוות
לכל 25 היכולות בפירוט
02Design tokens
צבע, טיפוגרפיה, ריווח ותנועה נגזרים משכבת tokens אחת. משנים token וכל הרכיבים מתעדכנים — בלי דריסות לכל רכיב, בלי סטייה בין מוצרים.
03שני ערכות נושא, חמישה צבעי הדגשה
ערכת נושא כהה ובהירה, חמישה צבעי הדגשה, וכולם מונעים על ידי אותם tokens. וריאציית מותג היא החלפת tokens, לא fork — כל מוצר במשפחה מרונדר מאותה מערכת.
04Dark-first
ניגודיות, גובה וצבע מתוכננים קודם בערכת הנושא הכהה; הבהירה נגזרת מאותם tokens. התוצאה היא מצב כהה שמרגיש טבעי, לא הפוך.
05רכיבי טפסים בסיסיים
כפתורים, שדות קלט, select, מתגים, סליידרים ותשתית שדות — כולל תוויות, רמזים והודעות שגיאה. המצבים כבר מעוצבים: focus, disabled, invalid ו־loading מתנהגים אותו דבר בכל מוצר.
06פריסה וקומפוזיציה
Stacks, גרידים, מפרידים ומעטפות עמוד מרכיבים מסכים בלי CSS אד־הוק. הרכיבים הגדולים ביותר הם קומפוזיציות עמוד שלמות — דפוסי hero, section ו־footer שנלקחו מדפים שאנחנו מספקים.
07ניווט
כותרות, טאבים, breadcrumbs ותפריטים עם התנהגות רספונסיבית ותמיכה במקלדת מובנות. הניווט באתר הזה הוא הרכיב עצמו, לא חיקוי שלו.
08שכבות עליונות
מודלים, sheets, drawers, popovers ו־tooltips על מודל שכבות אחד — לכידת פוקוס, סגירה וסידור שכבות מטופלים פעם אחת, באופן מרכזי. אף מוצר לא נושא חשבון z-index משלו.
09הצגת נתונים
טבלאות, רשימות, אריחי נתונים, badges ו־timelines למוצרים שחיים על מספרים. צפיפות המידע בקונסולות התפעול של המשפחה נבנית מהרכיבים האלה.
10משוב וסטטוס
Toasts, באנרים, מצבים ריקים, התקדמות ו־skeletons — המצבים הלא זוהרים, מתוכננים מראש. למוצר שנבנה על PDS יש תשובה מחושבת לטעינה, לריקנות ולכשל.
11טיפוגרפיה
סקאלת טיפוגרפיה בסגנון עריכתי עם תוויות mono לרישום הטכני — הקול שמלווה כל משטח של Protocore. הסקאלה בנויה מ־tokens, כך שמוצרים מכווננים אותה בלי לצאת מהמערכת.
12תנועה
משכים ו־easings מסופקים כ־tokens, והרכיבים כבר משתמשים בהם. הממשקים נעים באופן עקבי בין מוצרים כי אף אחד לא מכוונן אנימציה ידנית.
13נגיש כברירת מחדל
ניגודיות, מצבי פוקוס והתנהגות מקלדת מובנים ברכיבים, ולא נשארים כתרגיל לקורא. מספקים את ברירות המחדל והנגישות מגיעה איתן.
14Zero-runtime CSS
העיצוב הוא CSS סטטי שנפתר בזמן build — בלי runtime של CSS-in-JS, בלי חישובים בדפדפן. שכבת העיצוב לא מוסיפה אפס JavaScript לעמוד.
15שכבת CSS ללא תלות ב־framework
המערכת מסופקת גם כחבילת CSS רגילה — tokens ומחלקות עזר בלי צורך ב־React. דפי server-rendered, אימיילים וסטאקים שאינם React שואבים מאותו מקור אמת.
16ייצוא tokens לכל סטאק
ה־tokens מיוצאים לווב כמשתני CSS, כ־preset של Tailwind ובפורמטים נייטיב לפלטפורמות מובייל. הגדרה אחת של המותג, בשימוש בכל מקום שבו המוצר רץ.
17Theme provider ו־hooks
שכבת ה־React עוטפת אפליקציות ב־provider וחושפת tokens דרך hooks — רכיבים קוראים את ערכת הנושא וצבע ההדגשה הפעילים במקום לקבוע ערכים בקוד. החלפת ערכת נושא היא state, לא build מחדש.
18Whitelabel theming
אותו מנגנון שנותן ל־PDS חמישה צבעי הדגשה נותן למוצר whitelabel את המותג שלו: מחליפים את ערכי ה־tokens ושומרים על הרכיבים. כל אפליקציית whitelabel במשפחה היא הוכחה שזה עובד.
19מפת llms.txt
מפה קריאה למכונה של המערכת כולה — רכיבים, tokens, דפוסים — המתפרסמת כ־llms.txt. מכוונים אליה LLM, והקוד שנוצר משתמש ברכיבי PDS אמיתיים במקום להמציא רכיבים סבירים.
20שרת MCP
שרת MCP חושף את המערכת ישירות לסוכני קוד: רכיבים, props ו־tokens, זמינים לשאילתה בזמן שהסוכן בונה. מערכת העיצוב עונה על שאלות במקום להיות מודבקת בפרומפטים.
21מתועד מקצה לקצה
כל רכיב נמצא ב־pds.protocore.io עם דוגמאות חיות, props וקוד להעתקה. התיעוד מרונדר על PDS עצמה — מה שקוראים הוא מה שמשיקים.
22גרסאות מנוהלות
PDS מסופקת כחבילות עם גרסאות סמנטיות ו־changelogs. שדרוגים הם החלטה מודעת: צוות עובר כשהוא בוחר, וה־changelog אומר בדיוק מה השתנה.
23Private registry
החבילות מותקנות מ־npm registry פרטי של Protocore עם token לכל צוות ב־.npmrc — זרימת העבודה הסטנדרטית של npm, מוגבלת לצוותים מורשים. בלי קובצי zip, בלי התקנות של העתק־הדבק.
24מפתחות רישיון offline
מפתח רישיון חתום נבדק מקומית — בלי phone-home, בלי בדיקת רשת ב־build שלכם. בעיות רישוי מופיעות כאזהרות בזמן פיתוח ולעולם לא שוברות אפליקציית production.
25רישיון לכל צוות
PDS היא קניינית ומורשית לפי צוות. מבקשים גישה ואנחנו מגדירים הכול — חבילות, תיעוד ומקורות tokens — כך שצוות יכול לאמץ אותה תוך אחר צהריים.
FAQ
מערכת העיצוב, בשאלות ותשובות.
לפי צוות — לא לפי משתמש ולא לפי פרויקט. רישיון אחד מכסה את כל מי שבונה עם PDS בתוך צוות: טוקנים, רכיבים ותיעוד. העלות גדלה רק עם מספר הצוותים שמאמצים אותו, ומוצרי whitelabel שאנחנו בונים עבורכם כבר רצים עליו.
מה-registry הפרטי ב-npm.protocore.io. פרטי הגישה מאפשרים לבילד שלכם למשוך את חבילות @protocore, ומשם הטוקנים והרכיבים מותקנים כמו כל dependency.
הטוקנים מופקים ל-web, .NET ו-native, כך שצבע או רדיוס אחד משמעותו זהה בכל פלטפורמה שאתם מספקים. הרכיבים זמינים ל-React, ושכבת CSS שאינה תלויה בפריימוורק נושאת את אותם טוקנים ומחלקות לצוותים שאינם ב-React.
Dark-first ונגישה כברירת מחדל — שני ערכות נושא, חמישה צבעי הדגשה, הכול מבוסס טוקנים, עם CSS ללא runtime כך שהעיצוב לא עולה דבר בטעינה. אותם רכיבים מציגים את המוצרים שלנו ואת הדשבורדים של הלקוחות שלנו.
היא נבנתה בדיוק לזה: מפת llms.txt ושרת MCP מאפשרים לסוכנים לקרוא את המערכת ולבנות איתה נכון, וב-pds.protocore.io יש דוגמאות חיות, props וקוד להעתקה לכל רכיב וטוקן.
תמחור
איך מורשה PDS.
01
רישיון לכל צוות
PDS מורשה לפי צוות, לא לפי משתמש ולא לפי פרויקט — רישיון אחד מכסה את כל מי שבונה איתו בתוך הצוות: טוקנים, רכיבים ותיעוד.
02
גדל יחד עם הארגון
מתחילים עם צוות אחד ומרחיבים לצוותים נוספים ככל שהאימוץ גדל. העלות נקבעת לפי מספר הצוותים שבונים על PDS, ותו לא.
03
בתוך פרויקט של Protocore
מוצרי whitelabel שאנחנו בונים עבורכם כבר רצים על PDS — הרישיון העצמאי מיועד לצוותים שמאמצים אותו במוצרים שלהם.
הרישיון נקבע לפי צוותים, לא לפי מצבת עובדים או שימוש. בקשו גישה ונתאים אותו לצוותים שיבנו איתו.
הערכה
בונים מסך עם PDS.
01
תיעוד חי
אפשר לעיין במערכת המלאה ב-pds.protocore.io — דוגמאות חיות, props וקוד להעתקה לכל רכיב וטוקן.
02
חבילות טוקנים
הטוקנים מופקים ל-web, .NET ו-native, כך שצבע או רדיוס אחד משמעותו זהה בכל פלטפורמה שאתם מספקים.
03
רישיון לכל צוות
PDS מורשה לפי צוות — רישיון אחד מכסה את כל מי שבונה איתו: טוקנים, רכיבים ותיעוד.
04
גישה ל-registry
פרטי גישה ל-registry הפרטי ב-npm.protocore.io, להתקנת חבילות @protocore שהבילד שלכם משתמש בהן.
זמינות
PDS הוא קנייני ומורשה לפי צוות. בקשו גישה ונגדיר אתכם.
בוחרים מוצר. או לוקחים את הליבה.
כל מה שלמעלה רץ בדמואים בפרודקשן שנוכל להדריך אתכם בהם — standalone, whitelabel או כפלטפורמה אחת. ספרו לנו מה אתם בונים ונראה לכם את הדרך הקצרה ביותר.