קורן בן עזרא
Ashutos1997מה זה Design Auditor?
Design Auditor הוא סקיל שהופך את Claude לבודק עיצוב מקצועי: מדביקים קוד, שולחים צילום מסך או קישור ל-Figma, ומקבלים דוח עם ציון מתוך 100, רשימת בעיות לפי חומרה והצעות תיקון. הוא נבנה במיוחד למי שאין לו רקע בעיצוב, ומסביר לא רק מה לא בסדר אלא גם למה.
הרבה בעלי עסקים מקבלים אתר או דף נחיתה ולא יודעים לשפוט אם הוא טוב. הטקסט האפור אולי נראה אלגנטי, אבל לא קריא לחצי מהלקוחות, הטופס לא מסמן שגיאות, והכפתור לדחיית עוגיות קטן בכוונה. Design Auditor בודק את כל אלה בשיטתיות ונותן תמונה ברורה של מצב העיצוב.
הסקיל בודק 19 קטגוריות (בגרסאות המוקדמות היו 17): טיפוגרפיה, צבע וניגודיות, מרווחים ופריסה, היררכיה ויזואלית, עקביות, נגישות לפי WCAG, טפסים, אנימציה, מצב כהה, התאמה למסכים, מצבי טעינה ושגיאה, מיקרו-קופי, בינלאומיות וכיווניות מימין לשמאל, צללים, אייקונים, ניווט, design tokens, דפוסים מניפולטיביים והיוריסטיקות השימושיות של Nielsen. לצד הציון הכללי יש ציון נפרד לנגישות, לאתיקה ולשימושיות.
הוא מקבל כמעט כל סוג קלט: קוד HTML, CSS, React, Vue או Tailwind, צילומי מסך, סקיצות, קישורים לאתרים חיים וקבצי Figma דרך Figma MCP. הסקיל רשמית דו-לשוני באנגלית ובקוריאנית, והוא מנחה את Claude לענות בשפה שבה כותבים אליו. הגרסה העדכנית היא 1.2.13 ממאי 2026.
למי זה מתאים
- בעלי עסקים שקיבלו אתר או דף נחיתה ורוצים חוות דעת מקצועית לפני שמשלמים או עולים לאוויר
- מפתחים ובוני אתרים בלי רקע בעיצוב שרוצים לתפוס בעיות נגישות וקריאות
- סוכנויות שרוצות בדיקת איכות קבועה לפני מסירת פרויקט ללקוח
- מעצבים שמחפשים דעה שנייה מהירה או בדיקת WCAG לפני מסירה לפיתוח
- מנהלי מוצר ומייסדים שרוצים לוודא שהממשק לא משתמש בדפוסים מטעים
מה הוא עושה
ציון מתוך 100 עם נוסחה גלויה
כל בעיה מורידה נקודות לפי חומרה: חוסם (12), קריטית (8), אזהרה (4) וטיפ (1). הנוסחה מופיעה בדוח, כך שרואים בדיוק מאיפה הגיע הציון.
ציונים נפרדים לנגישות, אתיקה ושימושיות
מעבר לציון הכללי יש ציון נגישות לפי WCAG, ציון אתיקה שבודק דפוסים מניפולטיביים, וציון שימושיות לפי ההיוריסטיקות של Nielsen.
בדיקת דפוסים מניפולטיביים
דחיפות מזויפת, הסכמה שמסומנת מראש, כפתור "דחה הכל" מוסתר, עלויות נסתרות ותמחור מטעה, כולל שכבת בדיקה של דרישות רגולציה כמו באנר עוגיות וגילוי של חידוש מנוי.
תיקונים בקוד לפני ואחרי
כשמזינים קוד, מקבלים הצגה של הקוד לפני ואחרי התיקון, והסקיל מזהה ספריות רכיבים כמו MUI, shadcn/ui, Chakra ו-Bootstrap כדי להציע תיקון שמתאים להן.
מצב "למד אותי"
הסקיל מסביר את העיקרון שמאחורי שלוש הבעיות החשובות, ולא רק את התיקון, כך שבפעם הבאה כבר יודעים להימנע מהן לבד.
בדיקת כיווניות ועברית
קטגוריה ייעודית בודקת היפוך פריסה מימין לשמאל, אייקונים כיווניים, תכונות CSS לוגיות ותמיכת גופנים, והיא מזכירה במפורש עברית וערבית.
דוחות למסירה
דוח מסירה למפתחים עם טבלת מפרט וצ'קליסט נגישות, הפיכת סקיצה למפרט מפורט, וייצוא הדוח כ-Markdown ל-Notion, GitHub או Jira.
דוגמאות שימוש
מה כותבים ל-Claude אחרי ההתקנה, ומה מקבלים.
בדיקה לפני עלייה לאוויר
תבדוק את העיצוב של דף הנחיתה הזה לפני שאני מעלה אותו. הנה הקוד: [הדבקת HTML ו-CSS]מה מקבלים: דוח עם ציון כללי, ציון נגישות ורשימת בעיות לפי חומרה, עם קוד מתוקן לכל בעיה חשובה.
האם הטופס נגיש
האם טופס ההרשמה בצילום המסך הזה נגיש? [צירוף צילום מסך]מה מקבלים: בדיקה ממוקדת של תוויות, גודל שדות, הודעות שגיאה וניגודיות, עם הערה שהביטחון נמוך יותר כשהקלט הוא תמונה ולא קוד.
חיפוש דפוסים מטעים בחנות
יש כאן דפוסים מניפולטיביים? זה עמוד התשלום של החנות שלי: [קישור או צילום מסך]מה מקבלים: ציון אתיקה, רשימה של דפוסים בעייתיים כמו הסכמה מסומנת מראש או ספירה לאחור מזויפת, והצעה לנוסח ולעיצוב הוגנים יותר.
מסקיצה למפרט
Wireframe to spec: תהפוך את הסקיצה הזו של עמוד שירותים למפרט מסודר למפתח. [צירוף סקיצה]מה מקבלים: מסמך מפרט עם מידות, מרווחים, טיפוגרפיה, רכיבים ומצביהם, דרישות נגישות ורשימת שאלות פתוחות, מוכן להורדה כקובץ Markdown.
מה צריך לפני שמתחילים
- Claude (אתר, אפליקציה או Claude Code), או סוכן אחר שתומך בסקילים מבוססי SKILL.md
- אופציונלי: Figma MCP לבדיקת קבצי Figma ולתיקון ישיר בהם, וחיבור Canva לייצוא דוח ויזואלי
- חלק מהגרפים והווידג'טים האינטראקטיביים בדוח מיועדים לאתר ולאפליקציה של Claude, ובמקום שהם לא זמינים הסקיל מציג טבלה
- קובץ SKILL.md גדול מאוד (כ-160KB), ולכן בדיקה מלאה צורכת לא מעט מההקשר של השיחה
- אין צורך במפתח API ואין עלות
אין עדיין Claude Code? במדריך הזה יש התקנה צעד אחרי צעד.
איך מתקינים את Design Auditor.
יש 3 דרכים, ומספיקה אחת מהן. הראשונה הכי פשוטה.
הדרך הקלה: מדביקים בצ'אט של Claude Code
פותחים שיחה חדשה ב-Claude Code, מעתיקים את ההודעה ומדביקים. כש-Claude מבקש אישור להריץ, לוחצים Allow.
התקן בבקשה את הסקיל Design Auditor ל-Claude Code. הרץ את הפקודה הבאה ותגיד לי אם ההתקנה הצליחה: D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/Ashutos1997/claude-design-auditor-skill "$D/repo" && rm -rf "$D/repo/.git" && mkdir -p ~/.claude/skills && rm -rf ~/.claude/skills/design-auditor && cp -R "$D/repo" ~/.claude/skills/design-auditor && rm -rf "$D" && echo "הותקן ✓"
בטרמינל, ידנית
למי שמעדיף להריץ בעצמו. מעתיקים לטרמינל ומריצים.
git clone --depth 1 https://github.com/Ashutos1997/claude-design-auditor-skill.git /tmp/design-auditor rm -rf /tmp/design-auditor/.git mkdir -p ~/.claude/skills cp -R /tmp/design-auditor ~/.claude/skills/design-auditor rm -rf /tmp/design-auditor
באפליקציה של Claude (דסקטופ או דפדפן)
זו דרך ההתקנה הרשמית לפי ה-README: נכנסים לעמוד ה-Releases של הריפו ומורידים את הקובץ העדכני (בגרסה הנוכחית design-auditor-v1.2.13.skill). ב-Claude.ai נכנסים ל-Customize ואז Skills (או בהגדרות, Capabilities, Skills), לוחצים Upload skill ובוחרים את הקובץ. הסקיל פעיל מיד בשיחות.
ב-Claude Code צריך להפעיל מחדש את התוכנה אחרי ההתקנה. אין מפתחות או הגדרות. מי שרוצה לבדוק קבצי Figma צריך לחבר את Figma MCP בנפרד.
- ב-Claude Code מריצים ls ~/.claude/skills ומוודאים שיש תיקייה בשם design-auditor
- באתר או באפליקציה של Claude בודקים שהסקיל מופיע ברשימת הסקילים בהגדרות
- כותבים "Check my design" או "תבדוק את העיצוב" עם קטע קוד קצר, ובודקים שמתקבל דוח עם ציון מתוך 100
ב-Claude Code מריצים שוב את פקודת ההתקנה, והיא מחליפה את התיקייה בגרסה העדכנית. באפליקציה של Claude מורידים את קובץ ה-skill החדש מעמוד ה-Releases, מוחקים את הגרסה הקודמת ומעלים את החדשה.
rm -rf ~/.claude/skills/design-auditor
איך משתמשים ביום יום
- מבקשים בדיקה במילים פשוטות, כמו "תבדוק את העיצוב", "האם זה נגיש?" או "יש כאן דפוסים מניפולטיביים?", והסקיל נטען לבד.
- בתחילת העבודה הסקיל מציע היקף: בדיקה מלאה של 19 קטגוריות, בדיקה מהירה של 5 הקטגוריות המסוכנות ביותר לסוג הקלט, או בחירה ידנית.
- קוד נותן את התוצאה המדויקת ביותר. בצילום מסך או בקישור לאתר הסקיל מסמן ביטחון בינוני ומפרט מה לא יכול היה לבדוק.
- אחרי הדוח אפשר לבקש "תקן את כל הבעיות הקריטיות", "למד אותי" או "דוח מסירה למפתח", ולהריץ בדיקה חוזרת כדי לראות את השינוי בציון.
טיפים שימושיים
- לאתר בעברית, ציינו את זה בבקשה כדי שהסקיל יריץ גם את קטגוריית הבינלאומיות והכיווניות, שנבדקת רק כשהמוצר פונה לשפות מימין לשמאל.
- רשימת הרגולציה בסקיל מתייחסת לחוקים באירופה, ארה"ב, בריטניה, קנדה, ברזיל ואוסטרליה, ולא לתקן הישראלי IS 5568, ולכן לבדיקת נגישות לפי החוק בישראל צריך בדיקה נוספת.
- כשהשיחה ארוכה, התחילו בבדיקה מהירה ורק אחר כך בדיקה מלאה, כי הסקיל גדול וצורך הרבה מההקשר.
- הציון עוזר להשוות גרסאות, אבל הוא לא תחליף לבדיקה עם משתמשים אמיתיים. השתמשו בו כרשימת תיקונים, לא כחותמת אישור.
תקלות נפוצות
Claude נותן ביקורת כללית בלי ציון
הווידג'טים והגרפים לא מופיעים
בדיקת Figma לא עובדת
ההעלאה לאפליקציה נכשלת
שאלות ותשובות
האם הסקיל עונה בעברית?
האם הציון מבטיח עמידה בחוק הנגישות?
מה ההבדל בין 17 ל-19 קטגוריות?
האם זה עולה כסף?
כמה פעיל הפרויקט?
קרדיט ומקור. Design Auditor נכתב על ידי Ashutos1997 ונמצא ב-Ashutos1997/claude-design-auditor-skill ברישיון MIT (stated in README; no LICENSE file in repo). את העמוד כתב קורן בן עזרא אחרי בדיקה של המאגר ושל פקודות ההתקנה (29.09.2026). מאגרים מתעדכנים, ולכן אם משהו השתנה, המאגר הוא המקור הקובע.
meodai
nextlevelbuilder
Anthropic