מה זה Design System? מדריך למי שאינו מעצב
Design System הוא 'תקן השרטוט' של המותג: צבעים, גופנים, לוגו ותבניות שכולם עובדים לפיהם. כשנותנים אותו ל-Claude, מצגות, דוחות ואתרים יוצאים נראים כמו החברה שלכם, בלי תיקונים.
01בקצרה: מה זה Design System
Design System (מערכת עיצוב) הוא סט משותף של כללים וחלקים שקובע איך המותג שלכם נראה ונשמע: צבעים, גופנים, ריווחים, לוגו, אייקונים, רכיבים כמו כפתורים, טבלאות וכרטיסים, טון הדיבור ותבניות למסמכים.
במקום להחליט מחדש בכל מצגת איזה כחול לבחור ואיזה גופן, ההחלטות כבר כתובות במקום אחד. כל מי שמייצר משהו בשם החברה, כולל Claude, עובד לפי אותם כללים.
המונח design tokens מתאר את הערכים הקטנים והמדויקים שבבסיס: למשל 'צבע ראשי = #003B71', 'גופן כותרות = Heebo Bold', 'ריווח בסיסי = 8 פיקסלים'. אלה ה'מספרים' של המערכת, כמו ערכי תכן בטבלה.
02כמו תקן שרטוט, רק לעיצוב
במשרד הנדסה יש תקן שרטוט: אילו שכבות, אילו סוגי קווים ועוביים, איך נראית חותמת השרטוט ואיפה עומדות ההערות. בזכותו כל שרטוט של המשרד נראה אותו דבר, לא משנה מי שרטט. Design System הוא בדיוק זה, אבל למצגות, דוחות, אתרים ופוסטרים.
03ממה בנוי Design System
צבעים
2–3 צבעי מותג עם קוד hex מדויק, ועוד צבעים לרקע, טקסט, אזהרה והצלחה.
גופנים
גופן לכותרות וגופן לטקסט, עם גדלים קבועים. בעברית חשוב לבחור גופן שתומך היטב גם בעברית וגם באנגלית.
ריווח ופריסה
שוליים, מרווחים ורשת קבועים, כך שהדפים נראים מסודרים ולא 'מפוזרים'.
לוגו ואייקונים
גרסאות הלוגו (צבע, לבן, שחור), גודל מינימלי, ומה אסור לעשות בו. סט אייקונים אחיד.
רכיבים
כפתורים, טבלאות, כרטיסים, כותרות עמוד, הערות. כל רכיב מוגדר פעם אחת ומשמש בכל מקום.
טון דיבור ותבניות
איך החברה כותבת (רשמי? ישיר?), ותבניות מוכנות לדוח, הצעת מחיר, מצגת ודף מוצר.
04איך זה עובד עם AI
- 1אוספיםלוגו, צבעים, גופנים ודוגמה של מסמך טוב
- 2מתעדיםקובץ הנחיות מותג אחד, מקור אמת יחיד
- 3נותנים ל-Claudeכקובץ, כ-Skill או כ-Design System ב-Claude Design
- 4מבקשיםמצגת, דוח, דף נחיתה או פוסטר
- 5מקבליםתוצר שנראה כמו החברה, בלי לתקן צבעים ידנית
05Design Systems ציבוריים מוכרים
Material Design
מערכת העיצוב של Google, משמשת באנדרואיד ובהרבה אפליקציות. דוגמה טובה לתיעוד מסודר.
Carbon
מערכת העיצוב של IBM, מתאימה במיוחד לממשקים עמוסי נתונים ודשבורדים.
Fluent
מערכת העיצוב של Microsoft, שעליה נשענים המראה של Windows ו-Office.
GOV.UK Design System
מערכת העיצוב של ממשלת בריטניה. מצוינת ללמוד ממנה על פשטות, נגישות וכתיבה ברורה.
06חברת הנדסה: דוח וחותמת שקופיות
07דף נחיתה באתר, בסגנון שלכם
08דף נתונים (Datasheet) למוצר
09Design System מיני ב-30 דקות
- 1
אספו את הלוגו
קובץ איכותי (SVG או PNG שקוף) בגרסה צבעונית ובגרסה לבנה.
- 2
קבעו 2–3 צבעים
רשמו לכל צבע קוד hex ותפקיד: ראשי, משני, הדגשה.
- 3
בחרו 2 גופנים
אחד לכותרות ואחד לטקסט, שתומכים בעברית ובאנגלית, ובדקו שהרישיון מאפשר שימוש מסחרי.
- 4
צרפו מסמך לדוגמה
דוח או מצגת שאתם הכי אוהבים. ממנו Claude ילמד פריסה, טבלאות וטון.
- 5
בקשו מ-Claude לכתוב את זה
'כתוב קובץ הנחיות מותג קצר מכל זה: צבעים, גופנים, ריווח, טבלאות, טון ודוגמאות'. בדקו ותקנו.
- 6
שמרו במקום אחד
הפכו אותו ל-Skill, העלו ל-Project או הגדירו ב-Claude Design, והשתמשו בו בכל בקשה.
10מה להשתמש בכל משימה
| משימה | איזה חלק של ה-Design System | כלי מומלץ |
|---|---|---|
| מצגת ללקוח | צבעים, גופנים, תבנית שקופית | Claude Design, או תבנית PowerPoint |
| דוח הנדסי ב-PDF או Word | עמוד שער, טבלאות, כותרות | Skill מותג ב-Claude, או תבנית Word |
| דף נחיתה או אתר | רכיבים, כפתורים, ריווח | Claude Design או Artifact |
| פוסט או פוסטר לרשתות | לוגו, צבעים, טון דיבור | Canva עם Brand Kit דרך ה-Connector |
| ממשק אפליקציה | רכיבים ו-design tokens | ספריית Figma דרך ה-Connector של Figma |
| דף נתונים למוצר | תבנית Datasheet, סגנון טבלאות | Skill מותג ב-Claude |
| מייל או הצעת מחיר | טון דיבור, חתימה, לוגו | Skill מותג או תבנית Word |
11מלכודות: מה כן ומה לא
כן
- מקור אמת אחד, עם תאריך גרסה
- גופנים עם רישיון מתאים (למשל Google Fonts)
- בדיקת ניגודיות: טקסט כהה על רקע בהיר, או להפך
- לעדכן את ה-Skill או ה-Design System כשמשהו משתנה
לא
- חמישה קבצי 'מיתוג סופי' בתיקיות שונות
- להעלות גופן מסחרי בלי לבדוק שמותר
- טקסט אפור בהיר על לבן שקשה לקרוא
- לסמוך על AI 'שיזכור' את הצבעים בלי לתת לו קובץ
12שאלות נפוצות
אני משרד קטן. זה לא מוגזם?
לא. גם עמוד אחד עם לוגו, 3 צבעים, 2 גופנים ודוגמת דוח הוא Design System. זה חוסך זמן כבר מהמסמך הראשון.
מה זה Claude Design ומי יכול להשתמש בו?
כלי של Anthropic (בשלב research preview) שבונה Design System מהקבצים שלכם, כמו קוד, מצגות, PDF ולוגו, ומשתמש בו בכל פרויקט. זמין בתוכניות בתשלום; בארגונים המנהל צריך לאשר. הפרטים משתנים, בדקו ב-support.claude.com.
אפשר בלי Claude Design?
כן. מספיק קובץ הנחיות מותג שמצרפים לשיחה או ל-Project, או Skill (ראו נהלי עבודה ל-AI). Claude יקרא אותו ויעבוד לפיו.
ומה עם Canva ו-Figma?
אם אתם עובדים שם, ה-Connectors (ראו Claude פוגש את הכלים שלכם) מאפשרים ל-Claude לעבוד מול החשבון שלכם, למשל להשתמש ב-Brand Kit של Canva או לחפש רכיבים בספריית Figma. היכולות תלויות בתוכנית שלכם בכל כלי.
איך אני יודע שהצבעים נגישים?
בדקו יחס ניגודיות בין טקסט לרקע. לפי WCAG היעד לטקסט רגיל הוא לפחות 4.5:1. אפשר פשוט לבקש מ-Claude לבדוק את זוגות הצבעים שלכם.