קורן בן עזרא
dominikmartnמה זה Nothing Design?
Nothing Design הוא סקיל שמלמד את Claude שפת עיצוב שלמה בהשראת החברה Nothing: מונוכרום, טיפוגרפיה שמובילה את ההיררכיה ופרטים בסגנון של מכשיר מדידה. במקום ממשק גנרי, מקבלים מסכים עם אופי ברור ועקבי, בקוד HTML ו-CSS, ב-React עם Tailwind או ב-SwiftUI.
אחת הבעיות הבולטות בממשקים שנוצרים עם AI היא שכולם נראים אותו דבר: כרטיסים מעוגלים, גרדיאנט סגול וצללים רכים. Nothing Design לוקח כיוון הפוך ומלמד את Claude שפת עיצוב מוגדרת היטב, בהשראת המותג Nothing הידוע בטלפונים ובאוזניות שלו: שחור עמוק או לבן חמים, טיפוגרפיה שוויצרית, מוטיבים של מטריצת נקודות ופסי התקדמות מחולקים למקטעים.
המפתח, Dominik Martin, כתב ב-README שהוא מצא את עצמו מסביר ל-Claude שוב ושוב את אותם כללים, ולכן ארז אותם לסקיל. הסקיל כולל קובץ SKILL.md עם פילוסופיה, כללי קומפוזיציה ורשימה של דברים אסורים, ושלושה קבצי ייחוס: טוקנים של צבע, גופנים ומרווחים, ספריית רכיבים (כפתורים, כרטיסים, טבלאות, גרפים), ומיפוי לפלטפורמות השונות.
חשוב לדעת שהסקיל לא מופעל אוטומטית בכל משימת עיצוב. הוא נכנס לפעולה רק כשכותבים במפורש Nothing style, Nothing design או /nothing-design, וזה בכוונה, כדי שלא ישתלט על פרויקטים אחרים. זה פרויקט קהילתי בהשראת המותג ואינו מוצר רשמי של Nothing.
למי זה מתאים
- בעלי עסקים שרוצים דשבורד פנימי או מסך ניהול עם מראה מקצועי ונקי
- מפתחים ופרילנסרים שבונים אפליקציות ורוצים שפה עיצובית עקבית בלי מעצב צמוד
- סטארטאפים ומותגי טכנולוגיה שמחפשים אסתטיקה מינימליסטית ותעשייתית
- מעצבים שרוצים לראות מהר כיוון מונוכרומי לפני שמתחילים לעבוד על מערכת עיצוב מלאה
מה הוא עושה
היררכיה של שלוש שכבות
כל מסך בנוי משלוש רמות חשיבות בלבד: דבר אחד גדול שבולט, מידע תומך, ומטא-דאטה קטנה בצדדים. כך העין יודעת מיד לאן להסתכל.
משמעת גופנים
Space Grotesk, Space Mono ו-Doto, עם תקציב קבוע: עד שתי משפחות גופנים, שלושה גדלים ושני משקלים לכל מסך, כדי שהמסך לא יהפוך לעמוס.
מצב כהה ומצב בהיר שווים
מערכת טוקנים מלאה לשחור עמוק שמתאים למסכי OLED וללבן חמים, כששני המצבים מקבלים אותה תשומת לב ולא אחד נגזר מהשני.
רכיבים בסגנון מכשיר
פסי התקדמות מחולקים למקטעים, מתגים מכניים, ווידג'טים שנראים כמו מכשירי מדידה ומוטיבים של מטריצת נקודות, לצד כפתורים, טבלאות וחלונות.
רשימת איסורים ברורה
בלי גרדיאנטים, בלי צללים, בלי מסכי שלד בטעינה, בלי הודעות קופצות ובלי אנימציות קפיציות. האדום שמור רק למשהו דחוף באמת.
פלט לכמה פלטפורמות
הסקיל ממפה את השפה ל-HTML ו-CSS, ל-React עם Tailwind ול-SwiftUI, כך שאותו עיצוב עובד באתר, באפליקציית ווב ובאפליקציית אייפון.
דוגמאות שימוש
מה כותבים ל-Claude אחרי ההתקנה, ומה מקבלים.
דשבורד תורים לקליניקה
Nothing style: בנה לי דשבורד ב-HTML ו-CSS לקליניקה, עם מספר התורים של היום כמספר ענק, רשימת המטופלים הבאים וסטטוס תשלום לכל אחד. התחל במצב כהה.מה מקבלים: עמוד HTML מוכן עם מספר מרכזי גדול, רשימה נקייה ותוויות קטנות באותיות גדולות בגופן מונו, בלי צללים ובלי גרדיאנטים.
מסך מעקב לאפליקציית כושר
/nothing-design צור מסך SwiftUI לאפליקציית מעקב אימונים: אחוז השלמת היעד השבועי כפס מקטעים, מספר האימונים החודש ורשימת האימונים האחרונים.מה מקבלים: קוד SwiftUI עם פס התקדמות מחולק, טיפוגרפיה בשלוש רמות ותמיכה במצב בהיר וכהה.
דף נחיתה למותג טכנולוגי
Nothing design: עצב דף נחיתה ב-React ו-Tailwind לחברת אוזניות קטנה, עם כותרת גדולה, מפרט טכני בטבלה ותגית מחיר.מה מקבלים: רכיבי React עם Tailwind בשפה מונוכרומית, כולל הגדרות גופנים שצריך לטעון מ-Google Fonts.
דוח חודשי ללקוח של סוכנות
Nothing style: עצב עמוד דוח ביצועים חודשי ללקוח, עם נתון מרכזי אחד של לידים, גרף פשוט ושלוש שורות תובנה. במצב בהיר.מה מקבלים: עמוד דוח נקי שבו הנתון החשוב בולט, והגרף מבדיל בין סדרות בעזרת שקיפות ודוגמה במקום צבעים.
מה צריך לפני שמתחילים
- Claude Code, או סוכן אחר שקורא סקילים מתיקייה
- git לצורך ההתקנה
- חיבור לאינטרנט בזמן הצפייה בעמודים, לטעינת הגופנים מ-Google Fonts
- אין צורך במפתח API ואין עלות
אין עדיין Claude Code? במדריך הזה יש התקנה צעד אחרי צעד.
איך מתקינים את Nothing Design.
יש 3 דרכים, ומספיקה אחת מהן. הראשונה הכי פשוטה, בלי קוד בכלל.
הכי פשוט: באפליקציה של Claude, בלי שום קוד
מתאים ל-Claude במחשב ובדפדפן. לוקח דקה, ועושים את זה פעם אחת.
- מורידים את הסקילהורדת nothing-design.zip (12 KB)לא פותחים את הקובץ, מעלים אותו כמו שהוא.
- מדליקים פעם אחת את היכולתב-Claude נכנסים ל-Settings, ואז Capabilities, ומדליקים את
Code execution and file creation. - מעלים את הקובץנכנסים ל-Customize, ואז Skills, לוחצים על הפלוס, בוחרים
Create skillואזUpload a skill, ובוחרים את הקובץ שהורדתם. - זהו, עובדיםמבקשים מ-Claude את המשימה במילים רגילות, והוא משתמש בסקיל לבד כשהוא רלוונטי.
ב-Claude Code: מדביקים הודעה אחת
פותחים שיחה חדשה ב-Claude Code, מעתיקים את ההודעה ומדביקים. כש-Claude מבקש אישור להריץ, לוחצים Allow.
התקן בבקשה את הסקיל Nothing Design ל-Claude Code. הרץ את הפקודה הבאה ותגיד לי אם ההתקנה הצליחה: D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/dominikmartn/nothing-design-skill "$D/repo" && mkdir -p ~/.claude/skills && cp -R "$D/repo/nothing-design" ~/.claude/skills/ && rm -rf "$D" && echo "הותקן ✓"
בטרמינל, ידנית
למי שמעדיף להריץ בעצמו. מעתיקים לטרמינל ומריצים.
git clone https://github.com/dominikmartn/nothing-design-skill.git mkdir -p ~/.claude/skills cp -r nothing-design-skill/nothing-design ~/.claude/skills/ rm -rf nothing-design-skill
אין הגדרות נוספות. צריך להפעיל מחדש את Claude Code כדי שהסקיל ייטען, כמו שכתוב גם ב-README.
- מריצים ls ~/.claude/skills ומוודאים שיש תיקייה בשם nothing-design
- מקלידים / בחלון של Claude Code ובודקים ש-nothing-design מופיע ברשימה
- כותבים בקשה קצרה שמתחילה ב-Nothing style ובודקים שהתוצאה מונוכרומית ומשתמשת בגופנים Space Grotesk ו-Space Mono
מוחקים את התיקייה הישנה ומריצים שוב את פקודת ההתקנה: rm -rf ~/.claude/skills/nothing-design ואחר כך את הפקודה המלאה.
rm -rf ~/.claude/skills/nothing-design
איך משתמשים ביום יום
- פותחים כל בקשה ב-Nothing style או ב-/nothing-design, אחרת הסקיל לא ייטען. זו התנהגות מכוונת שכתובה בהגדרות הסקיל.
- מציינים את הפלטפורמה: HTML ו-CSS, React עם Tailwind, או SwiftUI. הסקיל מתאים את הקוד לפי המיפוי שבקבצי הייחוס.
- הסקיל שואל או מחליט אם להתחיל במצב כהה או בהיר, וכדאי לענות מראש כדי לחסוך סבב.
- לפני שמתחילים, Claude יפרט אילו גופנים של Google Fonts צריך לטעון ואיך, וכדאי לוודא שהשורות האלה נכנסות לפרויקט.
טיפים שימושיים
- הגופנים Space Grotesk, Space Mono ו-Doto לא כוללים אותיות עבריות, ולכן לממשק בעברית בקשו מ-Claude לשמור על השפה העיצובית עם גופן עברי מקביל, למשל גופן גרוטסקי נקי לטקסט וגופן מונו לתוויות.
- נצלו את הכלל של "שבירה אחת בכל מסך": מספר ענק אחד, ווידג'ט עגול אחד או הדגשה אדומה אחת, ולא יותר.
- אם התוצאה נראית ריקה מדי, זה בדרך כלל בכוונה. במקום להוסיף מסגרות, בקשו להגדיל את הפער בין הרמות בהיררכיה.
- לדשבורדים עם הרבה נתונים, בקשו להבדיל בין סדרות בעזרת שקיפות או דוגמה (קו רציף, מקווקו, מנוקד) לפני שמכניסים צבע, כמו שהסקיל ממליץ.
תקלות נפוצות
הסקיל לא מופעל כשמבקשים לעצב מסך
הטקסט בעברית מופיע בגופן אחר
הגופנים לא נטענים בעמוד
הסקיל לא מופיע אחרי ההתקנה
שאלות ותשובות
האם זה סקיל רשמי של Nothing?
למה הסקיל לא עובד לבד כמו סקילים אחרים?
האם זה מתאים לאתר תדמית של עסק מקומי?
האם זה עולה כסף?
כמה פופולרי הפרויקט?
קרדיט ומקור. Nothing Design נכתב על ידי dominikmartn ונמצא ב-dominikmartn/nothing-design-skill ברישיון MIT. את העמוד כתב קורן בן עזרא אחרי בדיקה של המאגר ושל פקודות ההתקנה (29.09.2026). מאגרים מתעדכנים, ולכן אם משהו השתנה, המאגר הוא המקור הקובע.
Anthropic
leonxlnx
bergside