קורן בן עזרא
freshtechbroמה זה claudedesignskills (Claude Design Skillstack)?
claudedesignskills הוא אוסף סקילים ל-Claude Code שמלמד אותו לבנות אתרים עם תלת-ממד, אנימציות ואפקטים של גלילה, בעזרת הספריות הנפוצות בתחום. הוא מגיע כשוק פלאגינים עם 22 פלאגינים בודדים וחמש חבילות לפי נושא, כך שאפשר להתקין רק את מה שצריך.
אתרים שמרגישים יוקרתיים נשענים היום על תנועה: מוצר שמסתובב בתלת-ממד, כותרות שנחשפות בגלילה, מעבר חלק בין עמודים או אייקון מונפש שמגיב לעכבר. Claude יודע לכתוב קוד כזה גם בלי עזרה, אבל כשהוא עובד עם סקיל ייעודי הוא מכיר את הדפוסים הנכונים, את מלכודות הביצועים ואת ההבדלים בין הספריות.
האוסף כולל 22 סקילים, כל אחד לספרייה או לכלי אחד: Three.js ו-React Three Fiber לתלת-ממד, GSAP עם ScrollTrigger ו-Framer Motion לאנימציה, Lottie ו-Rive לאנימציות של מעצבים, AOS ו-Locomotive Scroll לגלילה, ועוד כלים כמו Babylon.js, PixiJS, Spline ו-Blender. בכל סקיל יש קובץ SKILL.md, מסמכי ייחוס, תבניות קוד וסקריפטים קטנים ב-Python שמייצרים קוד התחלתי.
הריפו בנוי כשוק פלאגינים של Claude Code. לפי ה-README כל פלאגין מביא איתו גם פקודות סלאש וסוכנים ייעודיים, ויש חמש חבילות שמאגדות כמה סקילים יחד. חשוב להבין שזה כלי למי שבונה אתרים בקוד (HTML, React, Next.js), ולא תוסף לאלמנטור או לוויקס. העדכון האחרון בריפו נעשה בנובמבר 2025, ולכן חלק מהמידע על גרסאות ורישוי של ספריות כבר לא עדכני.
למי זה מתאים
- מפתחים ופרילנסרים שבונים דפי נחיתה ואתרי תדמית בקוד ורוצים אנימציות ברמה גבוהה
- סוכנויות דיגיטל שמציעות ללקוחות אתרים עם תלת-ממד, גלילה חכמה ומעברי עמודים
- חנויות אונליין שרוצות להציג מוצר בתלת-ממד או קונפיגורטור מוצר באתר
- מעצבים שעובדים עם Lottie, Rive או Spline ורוצים ש-Claude יחבר את העבודה שלהם לאתר
- מי שלומד Three.js או GSAP ורוצה ש-Claude יסביר ויכתוב לפי הדפוסים המקובלים
מה הוא עושה
תלת-ממד באתר
סקילים ל-Three.js, React Three Fiber, Babylon.js ו-PlayCanvas, כולל חומרים, תאורה, טעינת מודלים ורשימת בדיקות לביצועים, כך שהסצנה לא תכביד על הטלפון של הלקוח.
אנימציה וגלילה
GSAP עם ScrollTrigger, Framer Motion, React Spring, Anime.js, AOS ו-Locomotive Scroll, עם הסבר מתי כל ספרייה מתאימה ומתי עדיף להשתמש בפתרון פשוט יותר.
אנימציות של מעצבים
Lottie מקבצי After Effects ו-Rive עם מכונות מצבים, כך ש-Claude יודע לשלב אנימציה שמעצב הכין באתר או באפליקציית React ולשלוט בה מהקוד.
רכיבים מונפשים מוכנים
סקיל שמכיר את Magic UI ואת React Bits, שתי ספריות של רכיבים מונפשים מוכנים, ועוזר לבחור רכיב מתאים במקום לבנות כל אנימציה מאפס.
מ-Blender ו-Spline לאתר
הנחיות לייצוא מודלים מ-Blender לפורמט glTF, דחיסה ואופטימיזציה, לעבודה עם Spline ולהכנת טקסטורות ב-Substance 3D, כדי שהמודל ייטען מהר.
פלאגינים עם פקודות וסוכנים
בהתקנה כפלאגין מקבלים לפי ה-README גם פקודות סלאש שמייצרות קוד התחלתי וסוכנים ייעודיים, למשל סוכן ארכיטקט ל-Three.js.
חבילות לפי נושא
חמש חבילות מוכנות: core-3d-animation, extended-3d-scroll, animation-components, authoring-motion ו-meta-skills, כך שלא צריך לבחור 22 פלאגינים אחד אחד.
מה יש בפנים
threejs-webglבניית סצנות תלת-ממד ב-Three.js: מצלמות, חומרים, תאורה, אנימציה ואופטימיזציה, כולל תבנית סצנה מוכנה.react-three-fiberתלת-ממד בתוך אפליקציית React, מתאים לקונפיגורטור מוצר, פורטפוליו והמחשות נתונים.gsap-scrolltriggerאנימציות עם GSAP וגלילה עם ScrollTrigger: הצמדה, פרלקסה, ציר זמן ואנימציה שמתקדמת עם הגלילה.motion-framerFramer Motion (היום Motion) ל-React: מעברים, מחוות, אנימציות פריסה ואנימציות יציאה.animated-component-librariesבחירה ושילוב של רכיבים מונפשים מוכנים מ-Magic UI ומ-React Bits בדפי נחיתה ובאתרי שיווק.lottie-animationsהטמעת אנימציות Lottie ו-dotLottie מקבצי After Effects, לאייקונים מונפשים, מיקרו-אינטראקציות ומסכי טעינה.scroll-reveal-librariesאנימציות חשיפה פשוטות בגלילה עם AOS, לאתרים שצריכים אפקט עדין בלי מורכבות.locomotive-scrollגלילה חלקה, פרלקסה, גלילה אופקית ואלמנטים דביקים, כולל שילוב עם GSAP.barba-jsמעברים חלקים בין עמודים באתר, שנותנים תחושה של אפליקציה ולא של טעינת עמוד מחדש.spline-interactiveעבודה עם Spline, כלי תלת-ממד ויזואלי בדפדפן, וייצוא הסצנה לאתר או ל-React בלי לכתוב תלת-ממד מאפס.modern-web-designעקרונות ומגמות בעיצוב אתרים: מיקרו-אינטראקציות, סיפור בגלילה, נגישות, ביצועים ומערכות עיצוב.web3d-integration-patternsסקיל-על שמסביר איך לשלב כמה ספריות תלת-ממד ואנימציה באותו פרויקט בלי להתנגש ובלי לפגוע בביצועים.עשרה סקילים נוספיםbabylonjs-engine, aframe-webxr (מציאות מדומה ורבודה), lightweight-3d-effects (Zdog, Vanta.js ו-Vanilla-Tilt), playcanvas-engine, pixijs-2d, react-spring-physics, animejs, blender-web-pipeline, rive-interactive ו-substance-3d-texturing.דוגמאות שימוש
מה כותבים ל-Claude אחרי ההתקנה, ומה מקבלים.
מוצר מסתובב בחנות אונליין
יש לי קובץ glTF של בקבוק שמן זית. בנה רכיב React Three Fiber שמציג אותו מסתובב בדף המוצר, עם תאורה נעימה, אפשרות לסובב עם העכבר, וטעינה שלא מכבידה בטלפון.מה מקבלים: רכיב React מוכן להדבקה, עם הסבר על התאורה, על האופטימיזציה שנעשתה ועל מה לבדוק לפני העלאה לאוויר.
דף נחיתה עם חשיפה בגלילה
בדף הנחיתה של הסוכנות שלי יש ארבעה חלקים. הוסף אנימציות GSAP ScrollTrigger: הכותרת נחשפת מילה אחרי מילה, התמונות נכנסות מהצד, ומספרי הלקוחות רצים כשמגיעים אליהם.מה מקבלים: קוד JavaScript ו-CSS עם ציר זמן מסודר, התאמה לטלפון ותמיכה בהגדרת הפחתת תנועה למי שביקש אותה במערכת.
אייקון מונפש מהמעצבת
המעצבת שלחה לי קובץ Lottie של אייקון עגלת קניות. תשלב אותו בכפתור ההוספה לסל, כך שהאנימציה תתנגן פעם אחת בלחיצה.מה מקבלים: קוד הטמעה עם lottie-web או lottie-react, שליטה בהפעלה מהקוד והמלצה על פורמט dotLottie לקובץ קטן יותר.
בחירת ספרייה מתאימה
אני בונה אתר לסטודיו לאדריכלות ורוצה גלילה חלקה עם פרלקסה ומעברים בין עמודים. איזה שילוב של ספריות מתאים, ולמה?מה מקבלים: השוואה בין Locomotive Scroll, GSAP, AOS ו-Barba.js לפי המקרה, והמלצה על ארכיטקטורה שמשלבת ביניהן בלי התנגשויות.
מה צריך לפני שמתחילים
- Claude Code (להתקנה כפלאגין) או כל סביבה שתומכת בסקילים, כולל אפליקציית Claude להעלאת קבצי ZIP
- פרויקט אתר בקוד: HTML ו-JavaScript, React או Next.js, והספריות עצמן מותקנות בפרויקט דרך npm
- Python 3 להרצת סקריפטי העזר שמייצרים קוד התחלתי (הם משתמשים רק בספרייה הסטנדרטית)
- חלק מהכלים שהסקילים מלמדים הם שירותים או תוכנות חיצוניות, כמו Spline, Rive, Blender ו-Adobe Substance 3D, עם תנאי שימוש ומחירים משלהם
- אין צורך במפתח API בשביל הסקילים עצמם
אין עדיין Claude Code? במדריך הזה יש התקנה צעד אחרי צעד.
איך מתקינים את claudedesignskills (Claude Design Skillstack).
יש 4 דרכים, ומספיקה אחת מהן. הראשונה הכי פשוטה.
הדרך הקלה: מדביקים בצ'אט של Claude Code
פותחים שיחה חדשה ב-Claude Code, מעתיקים את ההודעה ומדביקים. כש-Claude מבקש אישור להריץ, לוחצים Allow.
התקן בבקשה את כל 22 הסקילים מהאוסף claudedesignskills לתיקיית הסקילים של Claude Code (בלי הסקיל skill-creator של הריפו, כדי לא לדרוס סקיל קיים), והרץ את הפקודה הבאה: D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/freshtechbro/claudedesignskills "$D/repo" && mkdir -p ~/.claude/skills && find "$D/repo/.claude/skills" -mindepth 2 -maxdepth 2 -name SKILL.md -exec dirname {} \; | grep -v "/skill-creator$" | while read d; do cp -R "$d" ~/.claude/skills/; done && rm -rf "$D" && echo "הותקן ✓"
דרך הפלאגינים של Claude Code
מקלידים בצ'אט של Claude Code את שתי הפקודות, אחת אחרי השנייה. את שתי הפקודות מקלידים בעצמכם בחלון של Claude Code. שם השוק הוא claude-design-skillstack. במקום core-3d-animation אפשר להתקין חבילה אחרת (extended-3d-scroll, animation-components, authoring-motion, meta-skills) או פלאגין בודד בשם של הסקיל, למשל /plugin install gsap-scrolltrigger@claude-design-skillstack. לא כדאי להתקין גם חבילה וגם את הפלאגינים הבודדים שבתוכה, כי יתקבלו סקילים כפולים. להסרה: /plugin uninstall core-3d-animation@claude-design-skillstack.
/plugin marketplace add freshtechbro/claudedesignskills
/plugin install core-3d-animation@claude-design-skillstack
בטרמינל, ידנית
למי שמעדיף להריץ בעצמו. מעתיקים לטרמינל ומריצים.
git clone --depth 1 https://github.com/freshtechbro/claudedesignskills.git /tmp/claudedesignskills mkdir -p ~/.claude/skills cd /tmp/claudedesignskills/.claude/skills && cp -R threejs-webgl gsap-scrolltrigger react-three-fiber motion-framer babylonjs-engine aframe-webxr lightweight-3d-effects playcanvas-engine pixijs-2d locomotive-scroll barba-js react-spring-physics animated-component-libraries scroll-reveal-libraries animejs lottie-animations blender-web-pipeline spline-interactive rive-interactive substance-3d-texturing web3d-integration-patterns modern-web-design ~/.claude/skills/ rm -rf /tmp/claudedesignskills
באפליקציה של Claude (דסקטופ או דפדפן)
ה-README מציע גם העלאה לאתר או לאפליקציה של Claude: בתיקייה .claude/skills בריפו יש קובץ ZIP מוכן לכל סקיל (למשל threejs-webgl.zip). מורידים את הקובץ של הסקיל הרצוי, נכנסים ב-Claude להגדרות, Capabilities, Skills, בוחרים Upload ומעלים. כל סקיל מועלה בנפרד, והפקודות והסוכנים של הפלאגין לא עוברים בדרך הזו.
צריך להפעיל מחדש את Claude Code אחרי ההתקנה. אין מפתחות או הגדרות, אבל הספריות עצמן (למשל three, gsap או lottie-web) מותקנות בכל פרויקט בנפרד דרך npm, ו-Claude יציע את הפקודה המתאימה כשצריך.
- בהתקנה כפלאגין מריצים /plugin ובודקים שהחבילה מופיעה ברשימת המותקנים
- בהתקנה ידנית מריצים ls ~/.claude/skills ומחפשים תיקיות כמו threejs-webgl ו-gsap-scrolltrigger
- שואלים את Claude: אילו סקילים יש לך? ובודקים שסקילי התלת-ממד והאנימציה מופיעים
בהתקנה כפלאגין מריצים /plugin marketplace update claude-design-skillstack ואחר כך מתקינים מחדש לפי הצורך. בהתקנה ידנית מריצים שוב את פקודת ההתקנה, והיא מעתיקה את הגרסה העדכנית מעל הקיימת.
cd ~/.claude/skills && rm -rf threejs-webgl gsap-scrolltrigger react-three-fiber motion-framer babylonjs-engine aframe-webxr lightweight-3d-effects playcanvas-engine pixijs-2d locomotive-scroll barba-js react-spring-physics animated-component-libraries scroll-reveal-libraries animejs lottie-animations blender-web-pipeline spline-interactive rive-interactive substance-3d-texturing web3d-integration-patterns modern-web-design
איך משתמשים ביום יום
- הסקילים נטענים לבד לפי הנושא: בקשה שמזכירה Three.js, גלילה, Lottie או מעבר בין עמודים מפעילה את הסקיל המתאים.
- כדאי לציין באיזו טכנולוגיה האתר בנוי (HTML רגיל, React או Next.js), כי ההמלצות והקוד שונים בין הסביבות.
- בהתקנה כפלאגין אפשר להקליד / ולראות את הפקודות שנוספו, למשל פקודות שמייצרות סצנת Three.js התחלתית או ציר זמן של GSAP.
- כשלא בטוחים באיזו ספרייה לבחור, אפשר לשאול את Claude להשוות, כי הסקילים כוללים הסבר על חלופות ועל מתי כל אחת מתאימה.
טיפים שימושיים
- התחילו מהחבילה core-3d-animation או animation-components, ולא מכל 27 הפלאגינים. פחות סקילים פעילים משאירים ל-Claude יותר מקום לעבודה עצמה.
- בקשו תמיד בדיקה בטלפון ותמיכה בהגדרת הפחתת תנועה, כי אנימציות כבדות הן סיבה נפוצה לאתר איטי ולנטישה.
- המידע על רישוי GSAP בסקיל כבר לא עדכני, ולפי דיווח פתוח בריפו התוספים שהיו בתשלום זמינים היום בחינם, ולכן כדאי לבדוק את תנאי הרישוי העדכניים באתר של GSAP.
- למודלים בתלת-ממד, בקשו מ-Claude דחיסה ואופטימיזציה של קובץ ה-glTF לפני ההטמעה, כדי שדף המוצר ייטען מהר.
תקלות נפוצות
הפקודה /plugin install threejs-webgl לא מוצאת את הפלאגין
Claude מפנה לתיקיית examples שלא קיימת
הסקילים לא מופיעים אחרי ההתקנה הידנית
האתר נהיה איטי אחרי הוספת האנימציות
שאלות ותשובות
מה ההבדל בין 22 הסקילים ל-27 הפלאגינים?
האם זה עובד עם אלמנטור, וויקס או Shopify?
האם זה עולה כסף?
האם הפרויקט מתוחזק?
אפשר להתקין רק סקיל אחד?
קרדיט ומקור. claudedesignskills (Claude Design Skillstack) נכתב על ידי freshtechbro ונמצא ב-freshtechbro/claudedesignskills ברישיון MIT. את העמוד כתב קורן בן עזרא אחרי בדיקה של המאגר ושל פקודות ההתקנה (29.09.2026). מאגרים מתעדכנים, ולכן אם משהו השתנה, המאגר הוא המקור הקובע.
Anthropic
leonxlnx
Remotion