קורן בן עזרא
leonxlnxמה זה Taste Skill?
Taste Skill הוא אוסף של 13 סקילים שמלמדים את Claude לעצב ממשקים עם פריסה, טיפוגרפיה, תנועה ומרווחים ברמה גבוהה. הם מחליפים את ברירות המחדל שחוזרות כמעט בכל אתר שנבנה עם AI. הסקיל הראשי קורא את הבריף, מסיק כיוון עיצובי ומכוון שלושה פרמטרים: גיוון בפריסה, עוצמת אנימציה וצפיפות מידע.
רוב האתרים שנבנים עם AI נראים דומים: כותרת ממורכזת, שלושה כרטיסים סימטריים, גרדיאנט סגול וכפתור עגול. Taste Skill נכתב בדיוק נגד התבנית הזו. זה אוסף של הוראות עיצוב שנשענות על מחקר של הרגלי המודלים (הוא מתועד בתיקייה research במאגר), והמטרה שלו פשוטה: שהתוצאה תיראה כאילו מעצב אמיתי ישב עליה.
הסקיל הראשי, taste-skill, נמצא כרגע בגרסה 2 ניסיונית. לפני שהוא כותב שורת קוד הוא מנסח שורה אחת של קריאת עיצוב. אחר כך הוא קובע שלוש חוגות בסולם של 1 עד 10: DESIGN_VARIANCE לגיוון בפריסה, MOTION_INTENSITY לעומק האנימציה ו-VISUAL_DENSITY לכמות המידע במסך. הוא גם אוסר במפורש על סימנים מוכרים של AI. למשל קו מפריד ארוך (em dash) בטקסט, מספור סקשנים מקושט ותוויות גרסה מיותרות בראש הדף.
סביבו יש סקילים ממוקדים: redesign-skill לשדרוג אתר קיים, soft-skill למראה יוקרתי ורך, ו-minimalist-skill או brutalist-skill לכיוונים מוגדרים. יש גם output-skill שמונע קוד חתוך, ושלושה סקילים שמייצרים רק תמונות רפרנס לאתר, לאפליקציה ולערכת מותג. לעסק שמזמין דף נחיתה, למשל קליניקה לפיזיותרפיה, זה ההבדל בין דף שנראה כמו תבנית לבין דף שמרגיש מותאם אליו.
למי זה מתאים
- מי שבונה דפי נחיתה, אתרי תדמית או פורטפוליו עם Claude Code ורוצה תוצאה שלא נראית גנרית
- סוכנויות שמשדרגות אתרים קיימים של לקוחות ורוצות תהליך מסודר של ביקורת ואז תיקון
- מעצבים שעובדים עם כלי תמונות כמו ChatGPT Images ורוצים רפרנסים ויזואליים לפני שכותבים קוד
- מפתחים שנתקלים בקוד חתוך עם הערות placeholder ורוצים פלט מלא עד הסוף
מה הוא עושה
שלוש חוגות שליטה
DESIGN_VARIANCE קובע כמה הפריסה ניסיונית, MOTION_INTENSITY קובע אם יש רק hover או גם אנימציות גלילה, ו-VISUAL_DENSITY קובע אם המסך מרווח או צפוף. הסקיל מסיק את הערכים מהבריף, ואפשר גם לקבוע אותם ידנית.
קריאת הבריף לפני הקוד
הסקיל מזהה סוג עמוד, מילות אווירה, רפרנסים, קהל ואילוצים, ומנסח קריאת עיצוב בשורה אחת. אם הבריף עמום, הוא שואל שאלה אחת ולא מנחש.
רשימת סימני AI אסורים
סעיף שלם מפרט דפוסים שמסגירים עיצוב של מודל: קו מפריד ארוך בכל טקסט בעמוד, מספור סקשנים מקושט, תוויות גרסה ב-hero, כיתובי צילום מומצאים ושמות דמה כמו Jane Doe.
שלדי קוד לאנימציות GSAP
הגרסה החדשה כוללת שלדים מוכנים לאנימציות גלילה (sticky stack, horizontal pan ו-scroll reveal) ורשימה של דפוסי אנימציה שאסור להשתמש בהם.
פרוטוקול לשדרוג אתר קיים
לפני שנוגעים באתר קיים הסקיל קובע מצב עבודה ומבצע ביקורת. יש רשימה של דברים שלא משתנים בשקט: מבנה כתובות URL, תוויות בתפריט, שמות שדות בטפסים, הלוגו וטקסטים משפטיים.
בדיקה לפני מסירה
בסוף העבודה יש רשימת בדיקות קשיחה שכוללת נגישות, כיבוד של prefers-reduced-motion, מצב כהה ויעדים של Core Web Vitals.
סקילים לתמונות רפרנס
imagegen-frontend-web, imagegen-frontend-mobile ו-brandkit מייצרים רק תמונות: עיצובי אתר, מסכי אפליקציה ולוחות מותג, שאחר כך מעבירים לסוכן הקוד.
חבילה אחת לכמה סוכנים
הכללים לא תלויים ב-framework, ולכן הם עובדים עם React, Vue או Svelte, וב-Claude Code, Cursor ו-Codex.
מה יש בפנים
taste-skillהסקיל הראשי (שם פנימי design-taste-frontend), בגרסה 2 ניסיונית. קורא את הבריף, מסיק שפה עיצובית ומכוון שלוש חוגות.taste-skill-v1הגרסה המקורית של הסקיל, שנשמרה למי שתלוי בהתנהגות הקודמת בדיוק.gpt-tasteskillגרסה קשוחה יותר שנכתבה בעיקר ל-GPT ו-Codex, עם יותר גיוון בפריסה והכוונת GSAP חזקה.image-to-code-skillמייצר תמונות רפרנס לאתר, מנתח אותן ואז כותב קוד שתואם להן. נכתב בעיקר ל-Codex, שיש לו יצירת תמונות מובנית.redesign-skillלאתר קיים: ביקורת עיצובית קודם, ואחריה תיקון של פריסה, מרווחים, היררכיה וסגנון בלי לשבור פונקציונליות.soft-skillמראה יוקרתי ורגוע: ניגודיות רכה, הרבה רווח, גופנים איכותיים ותנועה קפיצית.output-skillמונע קוד חתוך והערות placeholder, ומחייב פלט מלא גם כשהעבודה ארוכה.minimalist-skillממשק בסגנון עריכתי בהשראת Notion ו-Linear, עם פלטה מאופקת ומבנה חד.brutalist-skillשפה מכנית קשוחה: טיפוגרפיה שוויצרית, ניגודיות חדה ופריסה ניסיונית. מסומן במאגר כבטא.stitch-skillכללים שתואמים ל-Google Stitch, כולל אפשרות לייצא קובץ DESIGN.md.imagegen-frontend-webמייצר תמונות רפרנס לאתר, תמונה נפרדת לכל סקשן. לא כותב קוד.imagegen-frontend-mobileמייצר מסכי אפליקציה ותהליכים ל-iOS ול-Android כתמונות רפרנס. לא כותב קוד.brandkitמייצר לוחות של ערכת מותג: כיווני לוגו, פלטות, טיפוגרפיה ויישומים. לא כותב קוד.דוגמאות שימוש
מה כותבים ל-Claude אחרי ההתקנה, ומה מקבלים.
דף נחיתה לקליניקה
תשתמש בסקיל taste-skill ותבנה דף נחיתה בעברית לקליניקה לפיזיותרפיה בתל אביב. קהל היעד הוא אנשים אחרי פציעת ספורט. אני רוצה תחושה רגועה ומקצועית, עם טופס לקביעת תור.מה מקבלים: שורת קריאת עיצוב, ערכי חוגות שנבחרו לפי הבריף, וקוד מלא של הדף עם אנימציות עדינות ובדיקות נגישות בסוף.
שדרוג אתר של לקוח
תשתמש ב-redesign-skill. תעבור על התיקייה של האתר, תכתוב לי קודם רשימה של מה נראה גנרי ולמה, ורק אחרי שאאשר תתקן. אל תשנה כתובות URL, תוויות בתפריט ושמות שדות בטפסים.מה מקבלים: דוח ביקורת מסודר, ואחריו שינויים בפריסה, בטיפוגרפיה ובמרווחים בלי לשבור את מה שכבר עובד.
כוונון ידני של החוגות
תבנה עמוד פורטפוליו לצלמת חתונות עם DESIGN_VARIANCE 8, MOTION_INTENSITY 6 ו-VISUAL_DENSITY 3.מה מקבלים: פריסה אסימטרית עם הרבה אוויר ואנימציות גלילה בעוצמה בינונית, שמתאימה לעבודה ויזואלית.
קוד מלא בלי קיצורים
תשתמש ב-output-skill ותכתוב את כל קובצי ה-CSS והקומפוננטות עד הסוף, בלי הערות שמדלגות על חלקים מהקוד.מה מקבלים: קבצים שלמים. אם התשובה ארוכה מדי, הסקיל מפצל אותה לחלקים מסודרים במקום לחתוך באמצע.
מה צריך לפני שמתחילים
- Claude Code, Cursor, Codex או כל סוכן אחר שקורא קבצי SKILL.md
- git להתקנה בפקודה, או Node.js אם מתקינים עם npx skills add
- בלי מפתח API ובלי עלות. הרישיון הוא MIT
- הסקילים לתמונות דורשים כלי שמייצר תמונות, כמו ChatGPT Images או Codex, כי Claude Code לא מייצר תמונות בעצמו
- ההוראות כתובות באנגלית. לפי סעיף Out of Scope, הסקיל הראשי לא מיועד לדשבורדים, טבלאות נתונים, טפסים מרובי שלבים ואפליקציות מובייל נייטיב
אין עדיין Claude Code? במדריך הזה יש התקנה צעד אחרי צעד.
איך מתקינים את Taste Skill.
יש 4 דרכים, ומספיקה אחת מהן. הראשונה הכי פשוטה.
הדרך הקלה: מדביקים בצ'אט של Claude Code
פותחים שיחה חדשה ב-Claude Code, מעתיקים את ההודעה ומדביקים. כש-Claude מבקש אישור להריץ, לוחצים Allow.
תתקין לי את כל 13 הסקילים של Taste Skill מהמאגר Leonxlnx/taste-skill לתיקיית הסקילים שלי. תריץ את הפקודה הזו בדיוק: D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/Leonxlnx/taste-skill "$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 "הותקן ✓"
דרך הפלאגינים של Claude Code
מקלידים בצ'אט של Claude Code את שתי הפקודות, אחת אחרי השנייה. את שתי הפקודות מקלידים בעצמכם בחלון של Claude Code, כי Claude לא מריץ פקודות סלאש בשבילכם. השמות לקוחים מהקובץ .claude-plugin/marketplace.json במאגר: שם המרקטפלייס taste-skill ושם הפלאגין taste-skill. בהתקנה כפלאגין כל 13 הסקילים נכנסים יחד. בוחרים דרך אחת, פלאגין או פקודת העתקה, ולא את שתיהן.
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill
בטרמינל, ידנית
למי שמעדיף להריץ בעצמו. מעתיקים לטרמינל ומריצים.
git clone --depth 1 https://github.com/Leonxlnx/taste-skill /tmp/taste-skill
mkdir -p ~/.claude/skills
for d in /tmp/taste-skill/skills/*/; do cp -R "${d%/}" ~/.claude/skills/; done
rm -rf /tmp/taste-skillבאפליקציה של Claude (דסקטופ או דפדפן)
כל סקיל הוא תיקייה עצמאית, ולכן אפשר להעלות אותו לאפליקציית Claude. מורידים את המאגר מ-GitHub דרך Code ואז Download ZIP, פותחים, ודוחסים לקובץ ZIP נפרד את התיקייה שרוצים, למשל skills/taste-skill. ב-Claude נכנסים ל-Settings > Capabilities > Skills, לוחצים Upload ובוחרים את הקובץ.
צריך להפעיל מחדש את Claude Code. אם רוצים לשנות את ערכי ברירת המחדל של החוגות, פותחים את ~/.claude/skills/taste-skill/SKILL.md ומשנים את המספרים בראש הקובץ, או פשוט כותבים את הערכים בבקשה עצמה.
- מריצים ls ~/.claude/skills ומוודאים שמופיעות התיקיות taste-skill, soft-skill ו-redesign-skill
- בשיחה חדשה מקלידים / ומחפשים taste-skill או את השם הפנימי design-taste-frontend
- שואלים את Claude: אילו סקילים של עיצוב יש לך? והוא אמור למנות את סקילי Taste Skill
בהתקנה בפקודה מריצים אותה שוב, והיא מעתיקה את הגרסה העדכנית מעל הקיימת. בהתקנה כפלאגין מריצים /plugin marketplace update taste-skill.
for n in taste-skill taste-skill-v1 gpt-tasteskill image-to-code-skill redesign-skill soft-skill output-skill minimalist-skill brutalist-skill stitch-skill imagegen-frontend-web imagegen-frontend-mobile brandkit; do rm -rf ~/.claude/skills/$n; done && echo "הוסר ✓" בהתקנה כפלאגין: /plugin uninstall taste-skill@taste-skill
איך משתמשים ביום יום
- מזכירים את הסקיל בשמו בתחילת הבקשה, למשל: תשתמש ב-taste-skill
- כותבים בריף עשיר: סוג העסק, הקהל, שלוש מילות אווירה ורפרנס אחד או שניים. ככל שהבריף ברור יותר, קריאת העיצוב מדויקת יותר
- משלבים לפי הצורך: taste-skill כבסיס, ואחד מ-soft-skill, minimalist-skill או brutalist-skill כשהכיוון כבר נבחר
- לאתר קיים מתחילים ב-redesign-skill ולא ב-taste-skill, כדי שתהיה ביקורת לפני שינויים
- כשהפלט נחתך באמצע, מוסיפים לבקשה את output-skill
טיפים שימושיים
- בהתקנה עם npx skills add מעבירים את השם הפנימי ולא את שם התיקייה, למשל: npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
- מי שתלוי בהתנהגות הישנה יכול להשתמש ב-taste-skill-v1 (שם פנימי design-taste-frontend-v1) במקום הגרסה הניסיונית
- הסקיל לא מגדיר כללי RTL, ולכן לאתר בעברית כותבים בבריף במפורש: עברית, dir=rtl וגופן עברי
- אם יש לכם מיתוג קבוע, כתבו אותו בבקשה. הסקיל מבחין בין בריף שמבקש מערכת עיצוב רשמית כמו Material או shadcn לבין בריף שמבקש אסתטיקה
- האיסור על קו מפריד ארוך חל על כל הטקסט בעמוד, וזה מתאים גם לכתיבה עברית נקייה
תקלות נפוצות
taste-skill לא מופיע ברשימת הסקילים
npx skills add לא מוצא את הסקיל שביקשתי
הסקילים של התמונות לא מייצרים תמונות
התוצאה עדיין נראית גנרית
שאלות ותשובות
מה ההבדל בין taste-skill ל-soft-skill?
זה עובד עם React, Vue או Svelte?
גרסה 2 יציבה?
זה בחינם?
ראיתי מטבע קריפטו על שם הפרויקט. זה קשור?
כמה פופולרי הפרויקט?
קרדיט ומקור. Taste Skill נכתב על ידי leonxlnx ונמצא ב-Leonxlnx/taste-skill ברישיון MIT. את העמוד כתב קורן בן עזרא אחרי בדיקה של המאגר ושל פקודות ההתקנה (29.09.2026). מאגרים מתעדכנים, ולכן אם משהו השתנה, המאגר הוא המקור הקובע.
bergside
nextlevelbuilder
Anthropic