מדריך · Scrollcraft + קלוד קוד
בניית אתר עם קלוד קוד שזז כשגוללים
Scrollcraft הוא סקיל חינמי בקוד פתוח לקלוד קוד, שבונה אתרים שהגלילה מזיזה בהם את הדף: וידאו שמתקדם פריים אחרי פריים, כותרות שנבנות שורה אחרי שורה ושכבות שזזות בעומק. מתקינים אותו בשתי פקודות, והוא מגיע עם מנוע גלילה, חוקי עיצוב ודפדפן שבודק כל נקודה בגלילה לפני שאתם רואים את התוצאה.
מה זה Scrollcraft?
אתם מכירים את האתרים של אפל, שגוללים בהם והמוצר מסתובב, הכותרת נבנית מול העיניים והרקע מחליף צבע? כשמבקשים מקלוד קוד משהו דומה, בדרך כלל יוצא דף עם כמה אנימציות כניסה ואותם סקשנים שיש בכל אתר שה-AI בונה.
Scrollcraft (בגיטהאב הוא נקרא scroll-craft) הוא סקיל שמלמד את קלוד קוד לבנות אתרים מהסוג הזה. הוא מגיע כתוסף לקלוד קוד, ובתוכו יש מנוע גלילה מוכן, ספר חוקים של עיצוב, תהליך עבודה שמתחיל בשאלות אליכם וכלי בדיקה שגולל באתר אחרי שהוא נבנה.
ב-README הרשמי מתארים את הרעיון ככה: הגלילה היא ציר הזמן. וידאו מתקדם פריים אחרי פריים לפי הגלגלת, סקשנים נעצרים במקום בזמן שהתוכן שלהם ממשיך, פסים זזים הצידה, כותרות נבנות שורה אחרי שורה, צבע הרקע משתנה ככל שיורדים בדף, ויש דברים שזזים גם כשמזיזים את העכבר.
הסקיל עלה לגיטהאב ב-22 באוגוסט 2026, והעדכון האחרון שלו, גרסה 0.3.1, יצא ב-30 בספטמבר 2026.
למה אתרים שקלוד קוד בונה נראים אותו דבר?
ב-README של Scrollcraft כתוב שרוב האתרים שה-AI בונה נופלים לאחד משני כיוונים. או שהם נקיים ונשכחים, או שיש בהם אנימציית גלילה מרשימה עם טקסט שכמעט אי אפשר לקרוא, כותרת שנשברת לשש שורות בטלפון ואותם שישה סקשנים שיש בכל דף AI אחר. הסקיל בנוי כדי לא ליפול לאף אחד מהם, ולכן הוא מתייחס לתנועה ולעיצוב כאל עבודה אחת.
אם מה שמפריע לכם זה כפתורים, כרטיסים ותפריטים גנריים, כתבתי גם מדריך ל-21st.dev, ספרייה של רכיבים מוכנים. Scrollcraft עונה על שאלה אחרת: איך הדף כולו מתנהג כשגוללים בו.
איך מתקינים את Scrollcraft בקלוד קוד?
ההתקנה קורית בתוך קלוד קוד, עם פקודות שמתחילות בסלאש. עוד לא עבדתם איתו? תתחילו מההסבר על מה זה קלוד קוד.
שלב 1: אתם פותחים את קלוד קוד
פותחים טרמינל, נכנסים לתיקייה של הפרויקט ומקלידים:
claudeשלב 2: אתם מוסיפים את המאגר של Scrollcraft
בתוך קלוד קוד מקלידים את הפקודה הראשונה:
/plugin marketplace add nateherkai/scroll-craftהפקודה הזאת מחברת את המאגר בגיטהאב כמקור לתוספים. בשלב הזה עוד לא הותקן כלום.
שלב 3: אתם מתקינים את התוסף
עכשיו הפקודה השנייה:
/plugin install nateherk-designשימו לב ששם התוסף שונה משם המאגר. הסקיל scroll-craft יושב בתוך תוסף שנקרא nateherk-design, ולכן מתקינים אותו בשם הזה.
שלב 4: אתם מפעילים מחדש את התוספים
אם בסוף ההתקנה מופיעה השורה Run /reload-plugins to activate., מריצים:
/reload-pluginsשלב 5: אתם מתחילים לבנות
מעכשיו מספיק לתאר את האתר שאתם רוצים, וקלוד מפעיל את הסקיל לבד. אפשר גם לקרוא לו ישירות:
/nateherk-design:scroll-craftרוצים להבין איך תוספים עובדים בקלוד קוד ומה עוד שווה להתקין? כתבתי מדריך לפלאגינים של קלוד קוד.
מה צריך על המחשב לפני הבנייה הראשונה?
כדי לבנות ולבדוק אתר, הסקיל צריך כמה כלים על המחשב. זאת רשימת הדרישות מה-README:
| מה | בשביל מה | שימו לב |
|---|---|---|
| Node 18 ומעלה | מריץ את כל הסקריפטים | חובה |
| ffmpeg מלא | מקודד סרטונים כך שאפשר לגלול בהם קדימה ואחורה | גרסה מקוצרת של ffmpeg נותנת שגיאות מבלבלות |
| playwright-core ו-Chrome | הבדיקה בדפדפן אחרי הבנייה | מתקינים בתיקייה של האתר |
| KIE_AI_API_KEY | יצירת תמונות וסרטונים עם AI | לא חובה, ועולה כסף |
ב-README ממליצים להריץ לפני הכול את בדיקת doctor, כי שלוש התקלות הכי נפוצות בהתקנה צצות אחר כך כשגיאות שמטעות אתכם לחפש במקום הלא נכון. אם שכפלתם את המאגר מגיטהאב, מריצים מהתיקייה הראשית שלו:
node plugins/nateherk-design/skills/scroll-craft/scripts/doctor.mjs
node plugins/nateherk-design/skills/scroll-craft/scripts/workspace.mjs --ensureהתקנתם כתוסף? אז הסקריפטים יושבים בתיקייה של התוסף, והכי פשוט לבקש מקלוד שיריץ אותם בשבילכם:
תריץ את בדיקת doctor של הסקיל scroll-craft, תגיד לי מה חסר במחשב ותעזור לי להתקין את זה.
ובתיקייה של האתר מתקינים פעם אחת את הכלי שמריץ את הבדיקה בדפדפן:
npm i playwright-coreאיך מבקשים מקלוד קוד אתר עם אנימציית גלילה?
אחרי ההתקנה מבקשים בעברית, כמו שמבקשים מעובד. הנה שלוש בקשות שאפשר להתחיל מהן:
תבנה לי דף נחיתה שהגלילה מזיזה בו את התמונות כמו באתר של אפל.
תבנה דף מוצר לקפה הקר שלי. יש לי שש תמונות של המוצר בתיקייה photos, תשתמש בהן ואל תייצר חדשות.
תחליט אתה על הכיוון ותבנה דף לסטודיו לפילאטיס. אני סומך עליך.
מה קורה אחרי הבקשה
לפי קובץ ההוראות של הסקיל (SKILL.md), לפני שקלוד בונה משהו הוא שואל אתכם שמונה שאלות בבת אחת. למשל איזו אווירה אתם רוצים בשלוש עד חמש מילים, מה המבקר רואה ראשון ומה אחרון, איפה הדף רגוע ואיפה הוא חזק, מה הרגע האחד שאנשים צריכים לזכור, ואילו חומרים כבר יש לכם: תמונות, סרטונים או ערכת מיתוג.
את התשובות הוא כותב במילים שלכם לקובץ BRIEF.md, וכל השאר נבנה ממנו. ואם אמרתם לו במפורש שהוא מחליט, כמו בפרומפט השלישי, הוא כותב את הבריף בעצמו, מציין שככה זה נכתב וממשיך לבנות בלי לעצור אתכם בשאלות.
יש לכם תמונות וסרטונים משלכם? תנו אותם לקלוד. לפי ה-README, דף שנבנה מהחומרים שלכם לא עולה כלום ולא צריך שום מפתח.
בתיאור הסקיל כתוב שהוא נדלק מבקשות כמו scroll animation site או Apple-style landing page, אז קלוד אמור להפעיל אותו גם אם לא הזכרתם את השם.
איך Scrollcraft בודק את האתר לפני שאתם רואים אותו?
זה החלק שהכי שכנע אותי. באתר עם גלילה כל נקודה נראית אחרת, והתקלות מסתתרות בין שתי הנקודות שבדקתם. לכן אחרי הבנייה, דפדפן שרץ ברקע בלי מסך גולל את כל הדף, מחכה שהווידאו יתייצב ומדווח על ארבע בעיות:
- גלילה מתה. גוללים, ושום דבר על המסך לא משתנה.
- טקסט שלא מופיע עד הסוף. כיתוב שהקורא רואה רק חצי שקוף.
- ניגודיות על הדף האמיתי. כל שורה נמדדת ברגע הכי בהיר שעובר מאחוריה, גם טקסט בהיר על כהה וגם כהה על בהיר.
- סרטון שנתקע. קליפ שלא נטען, בלי שום הודעת שגיאה, ונראה בדיוק כמו סרט שעצר.
לפי ה-SKILL.md, הבדיקה עוברת על כל חלק בדף בשש נקודות שונות, וגם ברוחב של טלפון (390 פיקסלים) ובמצב של תנועה מופחתת, למי שכיבה אנימציות במכשיר. בסוף היא מייצרת גיליון של צילומי מסך, כי כמו שכתוב ב-README, מכונה יכולה להוכיח שהדף עובד אבל לא להגיד לכם אם יש בו משמעות.
ואז ההוראה לקלוד פשוטה: לתקן את מה שנמצא ולצלם שוב. אין פה סקריפט שמתקן לבד, זה קלוד שעובד לפי ההוראות של הסקיל, ובסוף הוא אמור לדווח מה הוא בדק ומה לא.
אילו חוקי עיצוב Scrollcraft נותן לקלוד?
הסקיל לא נותן לקלוד תבנית אחת להעתיק. הוא נותן לו חוקים, וחלק מהם נועדו בדיוק כדי ששני אתרים לא ייצאו דומים:
- שמונה סוגי דפים שלא מתערבבים. למשל סרט בצילום אחד, מגזין בפרקים, גלריה או במה מפוצלת. כל סוג אוסר את מה שהאחרים דורשים.
- תנועה אחת שהיא רק שלכם. כל אתר חייב להמציא אינטראקציה אחת שקיימת רק בו.
- בדיקת טביעת אצבע. אתר חדש צריך להיות שונה מכל אתר שכבר בניתם בלפחות 4 מתוך 6 דברים: סוג הדף, הניווט, החלק העליון, מבנה החלקים, הסיום והתנועה המיוחדת.
- רצפה לטיפוגרפיה ולריווח. מקסימום שני פונטים, שורות של 45 עד 75 תווים, ריווח שבנוי על יחידה של 4 פיקסלים ויותר מקום מעל כותרת מאשר מתחתיה.
- רשימת סירובים. הוא לא בונה רשתות של כרטיסים זהים, מונים בסגנון 01 / 06, טקסט בגרדיאנט, נתונים מומצאים, דשבורדים מזויפים, גרדיאנטים סגולים של AI ופלטת שמנת ונחושת שכל מותג בוטיק בוחר.
- ערכת המיתוג שלכם מנצחת. אם יש לכם ספר מותג, החוקים שלו קודמים לטעם של הסקיל, גם כשהם אוסרים משהו שהוא היה בוחר.
רוצים לראות איך זה נראה? ב-README יש סרטון של 50 שניות שעובר על כמה מאתרי הדוגמה.
מתי Scrollcraft שווה לכם?
- דף מוצר למותג שרוצה שהמוצר יהיה במרכז הבמה
- דף להשקה, כשיש לכם תמונות או סרטונים טובים של המוצר
- אתר תדמית ללקוח שלא רוצה משהו שנראה כמו תבנית
- תיק עבודות שבו הגלילה מספרת סיפור
ולא כל אתר צריך להיות סרט. לאתר של רואה חשבון עם טופס יצירת קשר זה כנראה יותר מדי, ושם עדיף לבקש מקלוד להשתמש רק בחוקי הטיפוגרפיה והריווח.
חשוב לדעת לפני שמתחילים
- נבדק רק על ווינדוס. לפי ה-README, אף אתר עוד לא נבנה איתו על מק. יכול להיות שזה יעבוד, אבל אתם תהיו מהראשונים לבדוק.
- הסקיל חינמי, יצירה עם AI לא. יצירת תמונות וסרטונים עוברת דרך kie.ai ודורשת מפתח בתשלום. ב-README כתוב שאתר שכולו וידאו שנוצר ב-AI הוא הוצאה של ממש, ושדף מהחומרים שלכם לא עולה כלום.
- הוא עקשן בכוונה. הוא יסרב לעיצובים ולצבעים שמסגירים אתרי AI, ויתווכח איתכם על רגע השיא. אם אתם רוצים דף שנראה כמו כולם, זה לא הכלי.
- טלפון אמיתי זה לא דפדפן. ה-SKILL.md עצמו מודה שבדיקה ירוקה לא מכסה אייפון: נגן הווידאו, מצב חיסכון בסוללה וגלילה עם האצבע מתנהגים אחרת. אתר עם הרבה אנימציה תמיד בודקים בטלפון לפני שעולים לאוויר.
- הדוגמאות נבנו עם Codex. ההוראות זהות לכל הסוכנים, אבל התוצאה בקלוד קוד תהיה שונה.
השורה התחתונה
קלוד קוד יודע לבנות אתר. עם Scrollcraft הוא מקבל מנוע גלילה, חוקים שמונעים ממנו לחזור על עצמו ודפדפן שתופס את מה שנשבר באמצע הגלילה.
שאלות נפוצות על Scrollcraft וקלוד קוד
האם Scrollcraft חינמי?
הסקיל עצמו חינמי ובקוד פתוח. מה שעולה כסף זה יצירת תמונות וסרטונים עם AI דרך kie.ai, שדורשת מפתח KIE_AI_API_KEY. אם בונים את האתר מתמונות וסרטונים משלכם, לפי ה-README זה לא עולה כלום. את קלוד קוד עצמו מריצים עם חשבון של קלוד, וכמה זה עולה פירטתי כאן.
Scrollcraft עובד על מק?
לפי ה-README, הסקיל רץ עד היום רק על ווינדוס. הסקריפטים מחפשים את ffmpeg ואת Chrome גם במקומות של מק ולינוקס, אבל אף אתר עוד לא נבנה איתו על מק. אם הוא לא מוצא אותם, כותבים את הנתיב הנכון במשתנים SCROLLCRAFT_FFMPEG ו-SCROLLCRAFT_CHROME.
מה ההבדל בין scroll-craft לבין nateherk-design?
scroll-craft הוא השם של הסקיל ושל המאגר בגיטהאב. nateherk-design הוא השם של התוסף שהסקיל יושב בתוכו. לכן מוסיפים את המאגר עם nateherkai/scroll-craft, מתקינים את nateherk-design, וקוראים לסקיל ישירות עם /nateherk-design:scroll-craft.
צריך לדעת לתכנת כדי להשתמש ב-Scrollcraft?
לא. אתם מתארים את האתר בעברית ועונים על השאלות של קלוד, והוא כותב את הקוד, מריץ את הבדיקות ומתקן. מה שכן צריך זה להתקין Node.js, ffmpeg ו-Chrome, וגם בזה קלוד יכול לעזור לכם.
האתר ייראה טוב גם בטלפון?
הסקיל מתכנן את הטלפון בנפרד ובודק את הדף ברוחב של 390 פיקסלים. אבל ה-SKILL.md עצמו אומר שבדיקה בדפדפן לא מחליפה טלפון אמיתי, אז תמיד תפתחו את האתר באייפון או באנדרואיד לפני שהוא עולה לאוויר.
עוד מדריכים לבנייה עם קלוד קוד
- 21st.dev: עיצוב אתר עם קלוד קוד מרכיבים של מעצבים
- Impeccable: סקיל שמשפר את העיצוב של מה שקלוד קוד בונה
- איך לשכפל סקשן מכל אתר עם Playwright MCP וקלוד קוד
- LottieFiles: אנימציות מוכנות לאתר עם קלוד קוד
- HyperFrames: סרטונים קצרים מ-HTML עם קלוד קוד
- Expo Skills: אפליקציה לאייפון ולאנדרואיד עם קלוד קוד
- 8 כלים חינמיים לקלוד קוד מגיטהאב, בעמוד אחד
- כל המדריכים החינמיים בעברית