קורן בן עזרא
nextlevelbuilderמה זה Banner Design?
banner-design הוא סקיל מתוך המאגר של UI UX Pro Max, שמלמד את Claude לעצב באנרים לרשתות חברתיות, למודעות, ל-hero באתר ולדפוס. הוא אוסף קודם את הדרישות, בוחר שניים או שלושה כיווני עיצוב, בונה כל באנר ב-HTML ו-CSS במידות המדויקות של הפלטפורמה, ומייצא ל-PNG כשיש בסביבה כלי צילום מסך. הסקיל לא דורש סקילים נוספים או סקריפטים, ורשימת המידות והסגנונות המלאה נמצאת בקובץ ייחוס אחד שמגיע איתו.
באנר שנראה טוב על המסך של המעצב לא תמיד שורד את הפלטפורמה: הכותרת נחתכת בתמונת הכיסוי בפייסבוק, הלוגו נעלם מתחת לכפתורים של הסטורי, ומודעה עם יותר מדי טקסט מקבלת חשיפה נמוכה. banner-design נכתב כדי לעבוד מהמידות של הפלטפורמה ולא מהדמיון. לכל פורמט יש בו גודל בפיקסלים, יחס ואזור בטוח, ולפיהם נבנה כל עיצוב.
העבודה מתחלקת לחמישה שלבים. בשלב הראשון Claude שואל מה המטרה, איזו פלטפורמה, מה הכותרת והקריאה לפעולה, האם יש מיתוג קיים ואיזה סגנון רוצים, ובכמה אפשרויות מדובר (ברירת המחדל היא שלוש). אחר כך הוא בוחר כיווני עיצוב מתוך 22 סגנונות שמתוארים בקובץ הייחוס, בונה כל אפשרות ב-HTML ו-CSS, מייצא ל-PNG בתיקייה assets/banners לפי שם הקמפיין, ומציג את כל האפשרויות זו לצד זו עם הסבר קצר לכל אחת.
למשל, פיצרייה בחיפה שרוצה תמונת כיסוי לעמוד הפייסבוק ובאנר לסטורי לקראת מבצע חנוכה יכולה לבקש את שניהם בבקשה אחת. הסקיל יבנה כיסוי בגודל 820 על 312 וסטורי בגודל 1080 על 1920, ישמור את הטקסט החשוב במרכז כדי שלא ייחתך, וישתמש רק בצבעים ובלוגו שהפיצרייה סיפקה, כי הוא מונחה לא להמציא כללי מיתוג.
למי זה מתאים
- בעלי עסקים קטנים שצריכים תמונת כיסוי, באנר לסטורי או מודעה בלי לפתוח תוכנת עיצוב
- מנהלי קמפיינים שצריכים את אותו מסר בכמה מידות של Google Display ושל רשתות חברתיות
- בוני אתרים שרוצים כמה כיווני עיצוב ל-hero של דף הבית לפני שמתחילים לבנות
- מי שמכין רול אפ או שלט לכנס ורוצה טיוטה עם מפרט הדפוס הנכון
מה הוא עושה
מידות לכל פלטפורמה
טבלה של מידות לפייסבוק, X, לינקדאין, יוטיוב, אינסטגרם ופינטרסט, שמונה גדלים של Google Display, גדלים לאתר ולמייל, ומידות דפוס כמו רול אפ 850 על 2000 מ"מ.
22 כיווני עיצוב
מינימליסטי, טיפוגרפיה בולטת, גרדיאנט, צילום, איור, גיאומטרי, רטרו, זכוכית, תלת ממד, ניאון, דואוטון, מגזיני ועוד, עם התאמה לסוג העסק.
כמה אפשרויות בבת אחת
הסקיל בוחר שניים או שלושה כיוונים משלימים ומסביר איך כל אחד משרת את מטרת הבאנר, כך שאפשר לבחור ולא רק לתקן.
אזורים בטוחים
התוכן החשוב נשאר ב-70 עד 80 האחוזים המרכזיים של הקנבס, ויש התייחסות מיוחדת לאזור הבטוח של יוטיוב ולממשק של אינסטגרם.
כללי עיצוב קבועים
קריאה לפעולה אחת בכל באנר בגובה של לפחות 44 פיקסלים, עד שני גופנים, ניגודיות של לפחות 4.5:1, ופחות מ-20 אחוז טקסט במודעות.
ייצוא ל-PNG ושמות קבצים
כל באנר נשמר ב-assets/banners/<campaign>/ בשם שכולל סגנון ומידות. אם אין בסביבה כלי צילום מסך, הסקיל מוסר את קוד ה-HTML ומציין שהייצוא ממתין.
מפרט דפוס
לדפוס הסקיל מזכיר 300 DPI, מצב צבע CMYK ושוליים לחיתוך של 3 עד 5 מ"מ בכל צד.
מה יש בפנים
SKILL.mdתהליך העבודה בחמישה שלבים, טבלת מידות מקוצרת, עשרת הסגנונות המובילים וכללי העיצוב.references/banner-sizes-and-styles.mdרשימת המידות המלאה לרשתות, למודעות, לאתר ולדפוס, תיאור של 22 הסגנונות, כלל שלושת האזורים, כללי קריאה לפעולה וטיפוגרפיה, ושאילתות חיפוש בפינטרסט להשראה.דוגמאות שימוש
מה כותבים ל-Claude אחרי ההתקנה, ומה מקבלים.
כיסוי לפייסבוק וסטורי למבצע
תשתמש בסקיל banner-design ותעצב תמונת כיסוי לפייסבוק ובאנר לסטורי באינסטגרם לפיצרייה בחיפה, לקראת מבצע חנוכה. הטקסט בעברית, מימין לשמאל, והצבעים לפי הלוגו המצורף.מה מקבלים: שאלות קצרות על המטרה, התוכן והסגנון, ואחריהן שתיים או שלוש אפשרויות עיצוב לכל מידה, בנויות ב-HTML ו-CSS, עם קבצי PNG כשיש כלי צילום מסך בסביבה.
מודעות Google Display לקליניקה
תשתמש ב-banner-design ותכין לקליניקת פיזיותרפיה ברמת גן מודעות Google Display בגדלים 300 על 250, 728 על 90 ו-320 על 50, עם קריאה לפעולה אחת: קביעת תור.מה מקבלים: באנר בכל אחד מהגדלים לפי טבלת המידות, עם קריאה לפעולה אחת, עד שני גופנים ופחות מ-20 אחוז טקסט, ושמות קבצים שכוללים סגנון ומידות.
שלושה כיוונים ל-hero של אתר
תשתמש ב-banner-design ותציע שלושה כיווני עיצוב שונים ל-hero של אתר לסטודיו ליוגה בתל אביב, ברוחב 1920. הטקסט בעברית ומימין לשמאל.מה מקבלים: שלוש אפשרויות שמוצגות זו לצד זו, עם שם הסגנון, תצוגה מקדימה, הסבר קצר למה הכיוון מתאים, נתיב הקובץ והמידות.
רול אפ לכנס
תשתמש ב-banner-design ותכין טיוטה לרול אפ בגודל 850 על 2000 מ"מ למשרד רואי חשבון שמציג בכנס עסקים.מה מקבלים: עיצוב לפי מידות הדפוס בקובץ הייחוס, עם תזכורת ל-300 DPI, ל-CMYK ולשוליים לחיתוך, וכותרות גדולות שקריאות ממרחק.
מה צריך לפני שמתחילים
- Claude Code, או סוכן אחר שקורא קבצי SKILL.md
- git להתקנה בפקודה, בלי מפתח API ובלי עלות, רישיון MIT
- אופציונלי: כלי דפדפן או צילום מסך בסביבה כדי לייצא ל-PNG. בלעדיו מקבלים את קוד ה-HTML וה-CSS
- אופציונלי: כלי ליצירת תמונות לרקע או לאיור. הסקיל משתמש בו רק אם הוא זמין ומורשה, ועלותו תלויה בספק
- ההוראות באנגלית, והדוגמאות לא עוסקות בעברית או ב-RTL, ולכן מציינים בבקשה עברית ומימין לשמאל
אין עדיין Claude Code? במדריך הזה יש התקנה צעד אחרי צעד.
איך מתקינים את Banner Design.
יש 3 דרכים, ומספיקה אחת מהן. הראשונה הכי פשוטה, בלי קוד בכלל.
הכי פשוט: באפליקציה של Claude, בלי שום קוד
מתאים ל-Claude במחשב ובדפדפן. לוקח דקה, ועושים את זה פעם אחת.
- מורידים את הסקילהורדת banner-design.zip (7 KB)לא פותחים את הקובץ, מעלים אותו כמו שהוא.
- מדליקים פעם אחת את היכולתב-Claude נכנסים ל-Settings, ואז Capabilities, ומדליקים את
Code execution and file creation. - מעלים את הקובץנכנסים ל-Customize, ואז Skills, לוחצים על הפלוס, בוחרים
Create skillואזUpload a skill, ובוחרים את הקובץ שהורדתם. - זהו, עובדיםמבקשים מ-Claude את המשימה במילים רגילות, והוא משתמש בסקיל לבד כשהוא רלוונטי.
ב-Claude Code: מדביקים הודעה אחת
פותחים שיחה חדשה ב-Claude Code, מעתיקים את ההודעה ומדביקים. כש-Claude מבקש אישור להריץ, לוחצים Allow.
תתקין לי בבקשה את הסקיל banner-design מהמאגר nextlevelbuilder/ui-ux-pro-max-skill לתיקיית הסקילים שלי. תריץ את הפקודה הזו בדיוק: D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/nextlevelbuilder/ui-ux-pro-max-skill "$D/repo" && mkdir -p ~/.claude/skills && cp -R "$D/repo/cli/assets/skills/banner-design" ~/.claude/skills/ && rm -rf "$D" && echo "הותקן ✓"
בטרמינל, ידנית
למי שמעדיף להריץ בעצמו. מעתיקים לטרמינל ומריצים.
D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/nextlevelbuilder/ui-ux-pro-max-skill "$D/repo" && mkdir -p ~/.claude/skills && cp -R "$D/repo/cli/assets/skills/banner-design" ~/.claude/skills/ && rm -rf "$D" && echo "הותקן ✓"מפעילים מחדש את Claude Code כדי שהסקיל ייטען. אין צורך בסקילים נוספים, כי לפי ה-SKILL.md הסקיל עצמאי ולא מריץ סקריפטים. מי שהתקין את UI UX Pro Max המלא דרך ה-CLI או הפלאגין כבר קיבל את banner-design, ואין צורך להתקין שוב.
- מריצים ls ~/.claude/skills/banner-design ומוודאים שמופיעים SKILL.md והתיקייה references
- בשיחה חדשה מקלידים / ומחפשים banner-design
- מבקשים באנר לדוגמה ובודקים ש-Claude שואל קודם על המטרה, הפלטפורמה והתוכן לפני שהוא מעצב
מריצים שוב את אותה פקודת התקנה, והיא מעתיקה את הגרסה העדכנית מעל הקיימת.
rm -rf ~/.claude/skills/banner-design
איך משתמשים ביום יום
- כותבים בבקשה תשתמש בסקיל banner-design, כדי לוודא שהוא נכנס לפעולה
- מציינים פלטפורמה או מידות, את הכותרת והקריאה לפעולה, ומוסיפים עברית ומימין לשמאל
- מצרפים לוגו, צבעים וגופנים אם יש, כי הסקיל מונחה להשתמש רק במיתוג שסופק לו
- עוברים על האפשרויות שהוא מציג, בוחרים כיוון ומבקשים תיקונים עד שהבאנר מאושר
- לפני העלאה פותחים את קובץ ה-PNG ובודקים שהמידות והחיתוך נכונים
טיפים שימושיים
- בבאנר עברי מבקשים במפורש dir="rtl" וגופן עברי, כי ההנחיות בסקיל נכתבו לטקסט באנגלית
- מבקשים קודם שלוש אפשרויות שונות מאוד זו מזו, ורק אחרי הבחירה מלטשים פרטים
- כשמשתמשים ביצירת תמונות לרקע, הסקיל מונחה לבקש תמונה בלי טקסט ולהוסיף את הכותרת ב-HTML, וכך אפשר לתקן אותה בקלות
- לקמפיין עם תאריך כדאי לבקש תחילית תאריך בשם הקובץ, כפי שהסקיל מציע, כדי שלא יתבלבלו גרסאות
- לבחירת צבעים וגופנים לפי סוג העסק אפשר להיעזר ב-ui-ux-pro-max לפני העיצוב, ואם יש לכם מסמך מותג, ב-brand
תקלות נפוצות
קיבלתי קוד HTML ולא קובץ PNG
הטקסט העברי מופיע הפוך או מיושר לשמאל
הכותרת נחתכת אחרי העלאה לפלטפורמה
יש לי כבר סקיל אחר בשם banner-design
שאלות ותשובות
זה עולה כסף?
זה עובד בעברית?
מה ההבדל בינו לבין ui-ux-pro-max?
התקנתי כבר את UI UX Pro Max, צריך להתקין גם את זה?
מי כתב את הסקיל?
קרדיט ומקור. Banner Design נכתב על ידי nextlevelbuilder ונמצא ב-nextlevelbuilder/ui-ux-pro-max-skill ברישיון MIT. את העמוד כתב קורן בן עזרא אחרי בדיקה של המאגר ושל פקודות ההתקנה (08.10.2026). מאגרים מתעדכנים, ולכן אם משהו השתנה, המאגר הוא המקור הקובע.
coreyhaines31