קורן בן עזרא
bergsideמה זה Awesome Design Skills?
Awesome Design Skills הוא מאגר פתוח של 67 סגנונות עיצוב, שכל אחד מהם ארוז כתיקייה עם קובץ SKILL.md לסוכן וקובץ DESIGN.md לבני אדם. מתקינים את הסגנונות שמתאימים לכם, ו-Claude מקבל כללים ברורים של צבעים, טיפוגרפיה, מרווחים ונגישות במקום לנחש.
מי שביקש מ-Claude לבנות דף נחיתה מכיר את התוצאה: דף שנראה סביר, אבל דומה מאוד לאלפי דפים אחרים. הסיבה פשוטה, כי בלי הנחיות עיצוביות ברורות המודל חוזר לברירות המחדל שלו. המאגר של Bergside נותן 67 שפות עיצוב מוכנות, מ-minimal ו-clean ועד neon, glassmorphism, brutalism ו-retro. כל אחת מהן כתובה כהוראות שהסוכן יודע לקרוא ולבצע.
כל סגנון יושב בתיקייה משלו תחת skills. הקובץ SKILL.md מכיל את מה שהסוכן צריך בזמן העבודה: טוקנים של צבע, סולם טיפוגרפיה, סולם מרווחים, כללי נגישות לפי WCAG 2.2 AA, טון כתיבה, רשימת עשה ואל תעשה ובדיקות איכות לסוף העבודה. הקובץ DESIGN.md הוא מסמך נלווה שמסביר את הרציונל. כך גם אתם מבינים למה הכללים נראים כך, ויכולים לשמור עליהם לאורך זמן.
בפועל זה מתאים לבעלי עסקים ולסוכנויות שבונים עם Claude Code דפי נחיתה, אתרי תדמית או דשבורדים, ורוצים לבחור כיוון עיצובי מראש. בית קפה יכול לבקש את הסגנון cafe, משרד רואי חשבון יבחר professional או corporate, וחנות אופנה צעירה תלך על vibrant או neobrutalism. כדאי לדעת שהמאגר כתוב באנגלית, ושהוא נותן שפה עיצובית ולא מחליף את המיתוג שלכם.
למי זה מתאים
- בעלי עסקים שבונים דף נחיתה או אתר עם Claude Code ורוצים שייראה מעוצב ולא גנרי
- סוכנויות ופרילנסרים שצריכים להציג ללקוח כמה כיווני עיצוב במהירות, לפני שבונים את כל האתר
- מפתחים שרוצים כללים ברורים לצבע, טיפוגרפיה ומרווחים בלי לכתוב מערכת עיצוב מאפס
- מי שעובד במקביל גם עם Cursor או Codex ורוצה את אותם קבצי עיצוב בכל הכלים
מה הוא עושה
67 שפות עיצוב במקום אחד
מסגנונות שקטים כמו minimal, clean ו-spacious ועד סגנונות חזקים כמו neon, dramatic ו-brutalism. יש גם סגנונות בהשראת מערכות מוכרות כמו material, shadcn ו-ant, שמתאימים לממשקי מוצר ודשבורדים.
שני קבצים לכל סגנון
SKILL.md נכתב לסוכן, עם טוקנים, כללי קומפוננטות ובדיקות איכות. DESIGN.md נכתב לכם, ומסביר את הכוונה העיצובית ואיך לתחזק אותה כשהאתר גדל.
טוקנים מוגדרים מראש
כל סגנון מגדיר צבע ראשי ומשני, צבעים להצלחה, אזהרה ושגיאה, גופנים, משקלים וסולם מרווחים. למשל הסגנון minimal מגדיר סולם של 4, 8, 12, 16, 24 ו-32 פיקסלים וגופן ראשי Open Sans.
נגישות מובנית
הכללים מחייבים WCAG 2.2 AA, עבודה נוחה עם מקלדת ומצבי פוקוס גלויים, כך שהממשק לא רק נראה טוב אלא גם שמיש לכל הגולשים.
רשימות עשה ואל תעשה
לכל סגנון יש דפוסים מומלצים ודפוסים אסורים, למשל להעדיף טוקנים סמנטיים על פני ערכים קשיחים ולהימנע מטקסט בניגודיות נמוכה או מקצב מרווחים לא עקבי.
תצוגה מקדימה לפני בחירה
לכל סגנון יש תמונת דוגמה בתיקייה registry-examples ועמוד תצוגה באתר TypeUI, כך שאפשר לראות איך הוא נראה לפני שמתקינים ומשתמשים בו.
עובד בכמה כלים
הקבצים הם Markdown רגיל, ולכן אותו סגנון עובד ב-Claude Code, ב-Cursor, ב-Codex ובכל סוכן אחר שקורא קבצי SKILL.md.
מה יש בפנים
minimalעיצוב מצומצם עם הרבה רווח לבן, טיפוגרפיה נקייה וצבע מאופק, לבהירות ולמיקוד.cleanפשטות עם רווח לבן נדיב, טקסט קריא ופלטה מוגבלת שמפחיתה עומס חזותי.professionalעיצוב מלוטש ומוכן לעסקים, עם טיפוגרפיה מודרנית, פריסה מסודרת וזהות שמשדרת אמינות.premiumאסתטיקה בהשראת Apple, עם מרווחים מדויקים, טיפוגרפיה מודרנית ושפה חזותית מעודנת.editorialפריסה בהשראת מגזין, עם גופני סריף מעודנים, גריד מובנה וחוויית קריאה נעימה.levelsעיצוב שמכוון להמרה: מסיר חיכוך ומוביל את הגולש לפעולה דרך בהירות, אמון ומהירות.cafeממשק חמים בהשראת בית קפה, עם גוונים חמים, טיפוגרפיה רכה ופריסה נקייה.friendlyעיצוב נגיש ואינטואיטיבי עם פינות מעוגלות, הרבה רווח לבן ופלטת פסטל רכה.bentoגריד מודולרי של כרטיסים עם היררכיה ברורה ומרווחים רכים, לממשקים שקל לסרוק במבט.glassmorphismאפקט זכוכית חלבית עם שכבות שקופות, טשטוש עדין ומסגרות זוהרות שיוצרות עומק.neonזוהר ניאון עם צמדי צבעים בניגודיות גבוהה, לממשקים שנועדו לתפוס את העין.shadcnהשראה מ-shadcn/ui: קומפוננטות נקיות, פלטה מונוכרומטית ודפוסי utility-first.ועוד 55 סגנונותביניהם brutalism, neobrutalism, retro, vintage, material, ant, corporate, enterprise, cosmic, doodle, sketch ו-terracotta, וגם סגנונות בהשראת ממשקים מוכרים כמו claude ו-codex. הרשימה המלאה נמצאת בתיקייה skills במאגר.דוגמאות שימוש
מה כותבים ל-Claude אחרי ההתקנה, ומה מקבלים.
דף נחיתה לבית קפה
תשתמש בסקיל cafe ותבנה לי דף נחיתה בעברית, מימין לשמאל, לבית קפה שכונתי בחיפה, עם תפריט בוקר, שעות פתיחה וכפתור להזמנת שולחן.מה מקבלים: דף HTML מלא בגוונים חמים ובטיפוגרפיה רכה לפי הטוקנים של הסגנון, עם מצבי פוקוס וניגודיות תקינה.
שלושה כיווני עיצוב ללקוח
תבנה את אותו hero section למשרד עורכי דין בשלוש גרסאות: אחת לפי professional, אחת לפי editorial ואחת לפי premium. תשים כל גרסה בקובץ נפרד.מה מקבלים: שלושה קבצים להשוואה, שאפשר להציג ללקוח ולבחור איתו כיוון לפני שבונים את שאר האתר.
דשבורד לחנות אונליין
תשתמש בסקיל bento ותעצב לי דשבורד מכירות לחנות Shopify: הכנסות היום, הזמנות פתוחות, מוצרים מובילים ומלאי נמוך.מה מקבלים: דשבורד בגריד של כרטיסים עם היררכיה ברורה, שבעל החנות קורא במבט אחד בבוקר.
רענון עיצובי לדף קיים
תקרא את index.html ותעביר אותו לסגנון clean. תשמור על כל הטקסטים והקישורים, ותשנה רק צבעים, גופנים ומרווחים.מה מקבלים: אותו דף עם שפה עיצובית אחידה ונקייה, בלי לשבור תוכן, קישורים או טפסים.
מה צריך לפני שמתחילים
- Claude Code, או כל סוכן אחר שיודע לקרוא קבצי SKILL.md
- git מותקן במחשב, כדי להוריד את המאגר
- אין צורך במפתח API ואין עלות. הרישיון הוא MIT
- הקבצים כתובים באנגלית. Claude יבנה ממשק בעברית אם תבקשו, אבל כללי RTL לא כלולים בסגנונות עצמם
אין עדיין Claude Code? במדריך הזה יש התקנה צעד אחרי צעד.
איך מתקינים את Awesome Design Skills.
יש 3 דרכים, ומספיקה אחת מהן. הראשונה הכי פשוטה.
הדרך הקלה: מדביקים בצ'אט של Claude Code
פותחים שיחה חדשה ב-Claude Code, מעתיקים את ההודעה ומדביקים. כש-Claude מבקש אישור להריץ, לוחצים Allow.
תתקין לי את כל 67 סקילי העיצוב מהמאגר bergside/awesome-design-skills לתיקיית הסקילים שלי. תריץ את הפקודה הזו בדיוק: D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/bergside/awesome-design-skills "$D/repo" && mkdir -p ~/.claude/skills && find "$D/repo/skills" -mindepth 2 -maxdepth 2 -name SKILL.md -exec dirname {} \; | while read d; do cp -R "$d" ~/.claude/skills/; done && rm -rf "$D" && echo "הותקן ✓"
בטרמינל, ידנית
למי שמעדיף להריץ בעצמו. מעתיקים לטרמינל ומריצים.
git clone --depth 1 https://github.com/bergside/awesome-design-skills /tmp/awesome-design-skills
mkdir -p ~/.claude/skills
for d in /tmp/awesome-design-skills/skills/*/; do cp -R "${d%/}" ~/.claude/skills/; done
rm -rf /tmp/awesome-design-skillsבאפליקציה של Claude (דסקטופ או דפדפן)
באפליקציית Claude (דסקטופ או דפדפן) מעלים כל סגנון בנפרד. נכנסים לעמוד המאגר ב-GitHub, לוחצים Code ואז Download ZIP ופותחים את הקובץ. בתוך התיקייה skills בוחרים סגנון, למשל minimal, ודוחסים רק את התיקייה שלו לקובץ ZIP. אחר כך נכנסים ל-Settings > Capabilities > Skills, לוחצים Upload ובוחרים את הקובץ.
צריך להפעיל מחדש את Claude Code כדי שהסקילים החדשים ייטענו. אין צורך במפתח או בהגדרה נוספת, ואפשר להתחיל לבקש סגנון בשמו כבר בשיחה הבאה.
- מריצים בטרמינל ls ~/.claude/skills ומוודאים שמופיעות תיקיות כמו minimal, neon ו-glassmorphism
- בשיחה חדשה של Claude Code מקלידים / ומחפשים שם של סגנון, למשל cafe
- שואלים את Claude: אילו סקילים של עיצוב יש לך? והוא אמור למנות את הסגנונות שהותקנו
מריצים שוב את אותה פקודת התקנה. היא מורידה את הגרסה העדכנית של המאגר ומעתיקה אותה מעל הקבצים הקיימים.
D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/bergside/awesome-design-skills "$D/repo" && for d in "$D"/repo/skills/*/; do rm -rf ~/.claude/skills/"$(basename "$d")"; done && rm -rf "$D" && echo "הוסר ✓"איך משתמשים ביום יום
- בוחרים סגנון לפני שמתחילים לבנות, ואומרים ל-Claude במפורש: תשתמש בסקיל minimal
- כדי לראות איך סגנון נראה לפני הבחירה, נכנסים לכתובת typeui.sh/design-skills ובוחרים אותו מהרשימה
- עובדים עם סגנון אחד לכל פרויקט, כי ערבוב של שניים או שלושה סגנונות מייצר חוסר עקביות
- אם רוצים סגנון רק בפרויקט מסוים ולא בכל המחשב, אפשר להשתמש ב-CLI של TypeUI מתוך תיקיית הפרויקט: npx typeui.sh pull minimal -p claude-code. הפקודה כותבת את הסגנון לקובץ .claude/skills/design-system/SKILL.md בפרויקט
- בסוף העבודה מבקשים מ-Claude לעבור על רשימת הבדיקות (Quality gates) של הסגנון ולוודא שהקוד עומד בהן
טיפים שימושיים
- לא חייבים להתקין את כל 67. אפשר להעתיק רק את התיקיות שבאמת צריך, וכך רשימת הסקילים של Claude נשארת קצרה וממוקדת
- לאתר בעברית מוסיפים לבקשה עברית, dir=rtl וגופן עברי כמו Heebo או Rubik, כי הסגנונות עצמם לא עוסקים בכיווניות
- אם יש לכם מיתוג קיים, תבקשו מ-Claude לשמור על הצבעים והלוגו שלכם ולקחת מהסגנון רק את הפריסה, המרווחים והטיפוגרפיה
- שמות כמו minimal, clean או modern נפוצים. אם כבר יש לכם סקיל בשם זהה, ההתקנה תכתוב מעליו, ולכן כדאי לבדוק קודם עם ls ~/.claude/skills
- הסגנונות claude ו-codex הם שפות עיצוב בהשראת הממשקים האלה, ולא כלים רשמיים של Anthropic או OpenAI
תקלות נפוצות
Claude לא משתמש בסגנון שביקשתי
הפקודה npx typeui.sh pull עם -p claude נכשלת
הדף יצא באנגלית או מיושר לשמאל
סקיל אחר שלי השתנה אחרי ההתקנה
שאלות ותשובות
זה עולה כסף?
מה ההבדל בין SKILL.md ל-DESIGN.md?
זה מתאים לאתר וורדפרס או שופיפיי?
כמה פופולרי ומתוחזק המאגר?
אפשר ליצור סגנון משלי?
קרדיט ומקור. Awesome Design Skills נכתב על ידי bergside ונמצא ב-bergside/awesome-design-skills ברישיון MIT. את העמוד כתב קורן בן עזרא אחרי בדיקה של המאגר ושל פקודות ההתקנה (29.09.2026). מאגרים מתעדכנים, ולכן אם משהו השתנה, המאגר הוא המקור הקובע.
leonxlnx
nextlevelbuilder
MohtashamMurshid