arielshemesh1999@gmail.com · ישראל
← כל המאמרים AI

UI UX Pro Max

סקיל של Claude Code שנותן לסוכן בינת עיצוב אמיתית — 67 סגנונות UI, 161 פלטות ענפיות, 57 צמדי גופנים, 99 כללי UX וגנרטור שמפיק design-system מלא לכל עמוד.

2026-05 · קריאה של 10 דקות

מה זה

UI UX Pro Max הוא Agent Skill שמספק לסוכן הקוד בינת עיצוב — מסד ידע מובנֶה של החלטות UI/UX, ומעליו מנוע הסקה שבוחר בשבילו את הסגנון, הפלטה והטיפוגרפיה לפי הבריף. הפער שהוא סוגר ספציפי: המודל הבסיסי יודע מה זה "glassmorphism", אבל אין לו דעה מנומקת על איזו מבין 161 הפלטות הענפיות מתאימה לספא wellness, או איזה מ-57 צמדי הגופנים משדר "fintech מרוסן" לעומת "B2C צעקני". במקום לסמוך על הניחוש של המודל, הסקיל מחזיר לו תשובה דטרמיניסטית מתוך טבלאות מאוצרות, ומדרג אותה לפי כללים בעלי עדיפות.

הריפו הוא nextlevelbuilder/ui-ux-pro-max-skill, רישיון MIT, גרסה נוכחית v2.5.0 (10 במרץ 2026, "Skills Expansion & i18n Cleanup"). חשוב להבין שזה לא תוסף ספציפי ל-Claude: הסקיל מותקן בפורמט המקורי של למעלה מעשרה סביבות סוכן — Claude Code, Cursor, Windsurf, Codex CLI, GitHub Copilot, Gemini CLI, Antigravity, Droid (Factory), Kiro, Qoder, CodeBuddy, KiloCode, Warp, Augment, Continue, Roo Code, Trae ו-OpenCode — ובכולן הוא נטען אוטומטית כשמזוהה כוונת עיצוב, בלי פקודה מפורשת.

איך זה עובד — ארכיטקטורה

בניגוד לרושם, אין כאן מודל מאומן ולא קריאת API. הכול קבצים מקומיים שהסוכן קורא בעצמו, על פני שלוש שכבות:

  • שכבת נתונים — CSV, לא JSON. הידע יושב בקובצי CSV תחת src/ui-ux-pro-max/data/: products.csv (161 סוגי מוצר עם תנאי הסקה), colors.csv (161 פלטות לפי ענף), typography.csv (57 צמדים עם "personality matching"), styles.csv (הסגנונות וכללי היישום שלהם), charts.csv (25 סוגי גרף), ו-ui-reasoning.csv — טבלת כללי ההסקה. הבחירה ב-CSV מכוונת: היא נותנת לסוכן לבצע grep ולטעון רק את השורות הרלוונטיות, במקום לשפוך אינדקס שלם לתוך ה-context window.
  • מנוע חיפוש והסקה — search.py. סקריפט Python רב-תחומי שמקבל מילות מפתח מרובות-ממד (סוג מוצר + ענף + טון + צפיפות) ומחפש במקביל על פני domains מוגדרים: product, style, color, typography, landing, chart, ux, google-fonts, react, web, prompt. הוא מחזיר תוצאות מדורגות אחרי שהחיל עליהן את כללי ה-CSV. מאז v2.3 גם בסיס של 1,923 גופני Google ניתן לחיפוש דרך אותו ערוץ.
  • מנוע ההסקה (תוסף v2.0) — מבוסס-עדיפות. ui-reasoning.csv מחזיק כללי condition-action מדורגים לפי עדיפות (Priority 1→10) וחומרה (CRITICAL → HIGH → MEDIUM → LOW) בקטגוריות כמו accessibility, touch, performance, layout, typography, forms ו-navigation. ביצירת design-system המנוע מעריך את סוג המוצר, התאמת הסגנון, דרישות הנגישות ומוסכמות הפלטפורמה, וקובע אילו המלצות עולות ראשונות.

ההוראה לסוכן (ב-SKILL.md) מגדירה לולאה בת ארבעה שלבים: (1) חילוץ הדרישות מהבקשה — סוג מוצר, קהל, מילות סגנון, stack; (2) הרצת --design-system כברירת מחדל לקבלת המלצה כוללת; (3) השלמה בחיפושי --domain נקודתיים (צבע, טיפוגרפיה, ux, chart); (4) סינתזה של הפלט לקוד או להנחיה. בפועל זה אומר שעל "build a landing page" או "review this component" הסוכן קורא ל-search.py --design-system עוד לפני שהוא כותב שורת קוד אחת.

התקנה והגדרה

אפשרות A — Claude Code marketplace, ברמת הפרויקט:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

אפשרות B — מתקין ה-CLI (מומלץ, ומשרת את כל הסביבות):

npm install -g uipro-cli
cd /path/to/your/project
uipro init --ai claude       # or: cursor, windsurf, copilot, codex, droid ...
uipro init --ai all          # register for every detected assistant at once

אפשרות C — התקנה גלובלית, זמינה בכל פרויקט על המכונה (תחת ~/.claude/skills/ וכד'):

uipro init --ai claude --global

פקודות תחזוקה — כולל מצב offline שמדלג על משיכה מ-GitHub, והסרה ממוקדת:

uipro versions               # list available releases
uipro update                 # pull latest release
uipro init --offline         # install without downloading from GitHub
uipro uninstall --ai claude  # remove from one assistant
uipro uninstall --global     # remove the global install

הדרישה היחידה מעבר ל-Node היא Python 3.x ב-PATH: גם מנוע החיפוש וגם גנרטור ה-design-system הם סקריפטי Python. בלי Python הסקיל יותקן אך לא יוכל להריץ הסקה.

יכולות מרכזיות

מה שנארז ב-v2.5.0, כל מספר ניתן לאימות בריפו:

  • 67 סגנונות UI — בפילוח של 49 כלליים (Minimalism, Glassmorphism, Brutalism, Neumorphism, Claymorphism, Aurora UI, Bento Grid, Liquid Glass …), 8 ארכיטיפים של landing-page (Hero-Centric, Conversion-Optimized, Trust & Authority, Storytelling-Driven …) ו-10 סגנונות dashboard ל-BI/analytics (Data-Dense, Heat Map, Executive, Predictive Analytics …). לכל סגנון נלווים כללי יישום, לא רק שם.
  • 161 פלטות צבע ממופות לפי קטגוריית ענף — לא גוונים אקראיים של Tailwind, אלא שילובים מכוונים לאנכי שהם משרתים, באינדקס מול 161 סוגי המוצר.
  • 57 צמדי גופנים — קומבינציות display + body שעובדות יחד, עם "personality matching" שמתאים את הצמד לטון הבריף, ועם גישה לבסיס 1,923 גופני Google.
  • 99 כללי UX — כללים קונקרטיים בעדיפות מדורגת (גודל touch-target, ניסוח מצב שגיאה, קצב טפסים, נגישות) שהסוכן מיישם מראש במקום בדיעבד.
  • 25 סוגי גרפים ל-dashboards, כל אחד עם המלצת ספרייה ואסטרטגיית קידוד לפי טיב הנתונים.
  • 15 tech stacks — React, Next.js, Astro, Vue, Nuxt, Svelte, HTML+Tailwind, shadcn/ui, Angular, Laravel, SwiftUI, React Native, Flutter, Jetpack Compose ועוד — לכל אחד קובץ הנחיות נפרד (react-native.csv, web.csv וכו').
  • 161 כללי הסקה ענפיים — המוח של הגנרטור: כל כלל ממפה רמז ענפי (fintech → רמזי אמון, gaming → ניגודיות גבוהה, wellness → ניטרלים חמים) לבחירות טוקן קונקרטיות.

הפלט: ה-design-system בפועל

הלב המעשי הוא הגנרטור (flagship של v2.0). הרצה בסיסית עם הדגלים השכיחים:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
    "beauty spa wellness" --design-system -p "Aurora Spa" --persist

דגלים שכדאי להכיר: --design-system מפעיל את הסינתזה הכוללת; --persist כותב את התוצאה לדיסק; -p / --project נותן שם; -f markdown קובע פורמט; --page "name" יוצר עקיפה ספציפית לעמוד; --domain style|typography|chart מגביל לחיפוש נקודתי; ו---stack react|html-tailwind מתאים את ההנחיות ל-stack שלך.

עם --persist נכתב design-system/MASTER.md — "Global Source of Truth" עם כל ההחלטות — ולצדו תיקיית pages/ שבה כל קובץ עמוד עוקף היררכית את ה-MASTER במקום לשכפל אותו. מפרט טיפוסי מכסה: palette tokens עם הקצאות תפקיד (--brand, --surface, --border, --accent, סמנטיים --success / --warning / --danger); סולם טיפוגרפי (display, h1–h6, body, mono) עם משקל, גודל ב-rem, line-height ו-tracking; מערכת ריווח על בסיס 4/8 px; תבניות קומפוננטים ככללי עשה/אל-תעשה; כללי תנועה (duration, easing); ו-anti-patterns מפורשים לכל אנכי (למשל: אין גרדיאנטים סקאומורפיים ב-fintech). מאותה נקודה כל קומפוננט שהסוכן מייצר מתיישר לטוקנים האלה — וזו הסיבה שהסטייה הצבעונית בין עמוד 3 לעמוד 12 פשוט נעלמת.

מבנה הקבצים אחרי ההתקנה

src/ui-ux-pro-max/            # source of truth (databases + scripts)
├── data/*.csv                # products, colors, typography, styles, ui-reasoning ...
├── scripts/*.py              # search.py + design-system generator
└── templates/                # per-platform component templates
.claude/  .cursor/  .factory/  # one loader dir per registered assistant
design-system/                # generated (gitignore optional)
├── MASTER.md                 # global tokens + rules
└── pages/<page>.md           # per-page overrides

שתי התיקיות שנוגעים בהן ביום-יום הן data/ (ניתנת לעריכה כדי להוסיף את פלטת המותג שלך כרשומה ה-162) ו-design-system/ (החוזה שהסוכן מכבד בכל בקשה עתידית).

מתי להשתמש — ומתי לא

ה-SKILL.md עצמו מתחם את התחום: השתמש בו לעיצוב עמודים חדשים, בנייה או refactor של קומפוננטים, בחירת צבע וטיפוגרפיה, סקירת קוד UI לנגישות/UX, ובמיוחד כשהפידבק העיצובי מעורפל או לפני launch. דלג עליו ללוגיקת backend, עיצוב API, תשתית או אוטומציה לא-חזותית — שם הוא רק רעש.

הערך האמיתי מתגלה כשהבריף המותגי רפוי: ברירת המחדל של סוכן ריק על "build a fintech landing page" היא אותו hero teal של Tailwind שראית 400 פעם. כאן הסוכן בוחר סגנון, פלטה וצמד גופנים מתוך קבוצה מאוצרת לפני שנכתב קומפוננט אחד, והפלט נקרא כמו עבודת מעצב ולא כמו תבנית. הרכיב בעל המינוף הגבוה ביותר הוא --persist: הוא ממיר "פשוט צור כפתור" ל"צור כפתור שמציית למערכת שעל הדיסק" — ההבדל בין עמוד בודד למוצר עקבי.

מגבלות וגוצ'אס

  • תלוי Python. אין Python 3.x ב-PATH — אין הסקה. בסביבות CI או קונטיינר מינימלי זו נקודת כשל שקטה שכדאי לוודא מראש.
  • זה מנוע אוצרות, לא מודל. הידע מכוסה עד גבול ה-CSV. צורך שלא נמצא ב-161 סוגי המוצר יחזיר את ההתאמה הקרובה ביותר, לא תשובה תפורה — כדאי אז לערוך את ה-data/ ידנית.
  • החוזה חזק רק אם שומרים אותו. בלי --persist ההמלצות חיות רק באותו turn; העקביות הרב-עמודית מגיעה דווקא מקובץ ה-MASTER.md שעל הדיסק.
  • שאילתה רב-ממדית = פלט טוב יותר. "dashboard" לבד מחזיר תוצאה גנרית; "healthcare analytics dashboard, dense, dark" מפעיל את כללי ההסקה כמו שצריך. איכות הפלט תלויה ישירות בעושר מילות המפתח.

למה זה חשוב בפועל

מנקודת מבט של שימוש יומיומי, המנוף הגדול הוא בדיוק התרחישים שבהם הבריף החזותי דליל. כשמגיע בריף wellness בלי אסמכתא ברורה, מנוע ההסקה מצמצם את מרחב הבחירה לפלטה ולצמד שמתאימים לטון כבר באיטרציה הראשונה, במקום סבב ניחושים. בעיני, היתרון המוחשי ביותר נראה ב-dashboards: ארכיטיפים כמו Data-Dense ו-Heat Map דוחפים את הסוכן לדחוס מדדים ולהבליט מצבי התראה, במקום פריסת ה-SaaS האוורירית שהיא ברירת המחדל העצלה של רוב המודלים. ובעבודה רב-עמודית, קובץ ה-MASTER.md השמור הוא מה שמונע את ההצטברות השקטה של "אפור חמישי" שמתגנב לעמוד מאוחר. בשורה התחתונה, מניסיון יומיומי הסקיל מחליף דקות ארוכות של פרומפטינג כיוון עיצובי בחיפוש CSV יחיד — וזה ההבדל בין אוסף עמודים לבין מוצר עקבי.

מקורות

AIClaude CodeDesignSkill