🎁 מתנה מקלימקס

ספריית הפרומפטים
לעסקים

רכיבי אתר שעובדים מול העיניים, מערכות חכמות ותמונות — ולכל אחד הפרומפט שבונה אותו. בוחרים לפי מה שרואים, לא לפי הטקסט.

209 פרומפטים · כל הדוגמאות נבנו ונוצרו על ידינו · העסקים בדוגמאות דמיוניים.

1בוחריםלפי מה שרואים
2מעתיקיםוממלאים את הסוגריים
3מדביקיםב-Claude או ChatGPT

🏗️ אתרים שלמים — חיים

דפי נחיתה ואתרים מלאים לעסקים, גוללים בהם כמו באתר אמיתי. לידם הפרומפט שבונה אותם.

🌐 רכיבי אתר — חיים

לוחצים ורואים את הרכיב עובד, במחשב ובטלפון. לידו הפרומפט שבונה אותו.

קאברים מיוחדים16

תלת-ממד6

אפקטי גלילה9

תנועה ואפקטים9

אזור פתיחה17

אודות ולמה אנחנו7

וידאו6

הוכחה חברתית19

הצגת עבודות5

קטלוגים5

שירותים ומחירים8

לידים15

קריאה לפעולה3

ניווט11

תוכן ומגזין11

תהליך5

כלים לכל אתר6

🛒 חנות אונליין — חיה

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

מוצר6

קטלוג5

עגלה ותשלום5

מבצעים והזמנות2

🤖 מערכות ואוטומציות

סימולציות חיות של מערכות שאנחנו בונים לעסקים — בוט וואטסאפ, התראות לידים, תורים, דוחות.

🎨 תמונות וגרפיקה

כל תמונה נוצרה ב-ChatGPT בדיוק מהפרומפט שמוצג, עם פרטי עסק לדוגמה.

רוצים את זה באתר שלכם — בלי לכתוב שורת קוד?

אנחנו Climax Digital: בונים את כל מה שראיתם כאן לעסקים — אתרים, מערכות וגרפיקה שמביאים פניות. כתבו לנו מה העסק שלכם.

© Climax Digital · climaxd.co.il

מסעדות ובתי קפה

אתר לבית קפה או מסעדה

תפריט, שעות, ביקורות והזמנת שולחן בוואטסאפ — אתר שמביא סועדים, לא רק מציג.

איפה זה עובד: מסעדות, בתי קפה, קייטרינג, בתי מאפה

מה צריך להכין

  • התפריט (מנות ומחירים)
  • שעות פתיחה וכתובת
  • 5–10 תמונות אוכל
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אתר של עמוד אחד ל-[שם המסעדה], [סוג האוכל] ב-[עיר]: אזור פתיחה עם כותרת ותמונה, תפריט עם לשוניות ([בוקר / צהריים / קינוחים]) וכרטיסי מנות עם מחירים, שעות פתיחה, גלריה, ביקורות, מפה וכפתור צף 'הזמינו שולחן' שפותח וואטסאפ. התפריט: [המנות והמחירים]. דרישות: אתר בקובץ HTML אחד מלא (HTML, CSS ו-JavaScript) שאפשר להעלות כמו שהוא או להעביר לאלמנטור. עברית מימין לשמאל, מובייל קודם ומושלם במחשב. תפריט דביק עם גלילה חלקה לסקשנים, כותרות H1 ו-H2 נכונות, תיאור מטא, וסכמת LocalBusiness ב-JSON-LD. צבעי המותג: [צבעי המותג]. פונט Heebo. תמונות: [קישורים לתמונות] ואם אין — מקומות מסומנים. אנימציות כניסה עדינות בגלילה. כפתור וואטסאפ צף למספר [מספר]. נגיש ומהיר: בלי ספריות חיצוניות. החזר את הקוד המלא בבלוק אחד.

פתיחת Claude ↗

💡 תמונות אוכל אמיתיות מהמסעדה מוכרות יותר מכל עיצוב. צלמו באור יום, ליד חלון.

קליניקות

אתר לקליניקה או רופא

אמון קודם: ביקורות, מספרים, שאלות נפוצות — ופס 'קביעת תור' שתמיד ביד.

איפה זה עובד: רופאי שיניים, קליניקות אסתטיקה, פיזיותרפיה, מטפלים

מה צריך להכין

  • שירותים עם שורת הסבר
  • דירוג ומספר ביקורות בגוגל
  • 4 מספרים אמיתיים (שנים, מטופלים…)
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אתר של עמוד אחד ל-[שם הקליניקה], [תחום] ב-[עיר], שבנוי על אמון: אזור פתיחה עם '[דירוג] ★ [מספר] ביקורות בגוגל', רשת שירותים עם אייקונים ([שירותים]), 4 מונים ([המספרים שלכם] — כתובים ב-HTML ומונפשים ב-JS), לפני/אחרי, שאלות נפוצות עם סכמת FAQ, ופס דביק במובייל 'קביעת תור' לוואטסאפ [מספר]. דרישות: אתר בקובץ HTML אחד מלא (HTML, CSS ו-JavaScript) שאפשר להעלות כמו שהוא או להעביר לאלמנטור. עברית מימין לשמאל, מובייל קודם ומושלם במחשב. תפריט דביק עם גלילה חלקה לסקשנים, כותרות H1 ו-H2 נכונות, תיאור מטא, וסכמת LocalBusiness ב-JSON-LD. צבעי המותג: [צבעי המותג]. פונט Heebo. תמונות: [קישורים לתמונות] ואם אין — מקומות מסומנים. אנימציות כניסה עדינות בגלילה. כפתור וואטסאפ צף למספר [מספר]. נגיש ומהיר: בלי ספריות חיצוניות. החזר את הקוד המלא בבלוק אחד.

פתיחת Claude ↗

💡 מספרים אמיתיים בלבד. 'מאות מטופלים מרוצים' בלי מספר — נראה כמו כולם.

נדל״ן

אתר למתווך נדל״ן

חיפוש נכסים, כרטיסי נכס עם תגיות 'חדש' ו'בלעדי', וסוכן זמין בוואטסאפ.

איפה זה עובד: מתווכים, משרדי תיווך, יזמים

מה צריך להכין

  • 5–8 נכסים (מחיר, חדרים, מ״ר, תמונה)
  • תמונה ופרטי הסוכן
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אתר ל-[שם המשרד], תיווך ב-[אזור]: אזור פתיחה עם שורת חיפוש (עיר, חדרים, תקציב), כרטיסי נכסים עם מחיר, חדרים, מ״ר ותגית 'חדש' או 'בלעדי' ([הנכסים]), כרטיס הסוכן עם וואטסאפ, פס 'נמכר לאחרונה' וטופס יצירת קשר. שהחיפוש יסנן את הכרטיסים בלי טעינה מחדש. דרישות: אתר בקובץ HTML אחד מלא (HTML, CSS ו-JavaScript) שאפשר להעלות כמו שהוא או להעביר לאלמנטור. עברית מימין לשמאל, מובייל קודם ומושלם במחשב. תפריט דביק עם גלילה חלקה לסקשנים, כותרות H1 ו-H2 נכונות, תיאור מטא, וסכמת LocalBusiness ב-JSON-LD. צבעי המותג: [צבעי המותג]. פונט Heebo. תמונות: [קישורים לתמונות] ואם אין — מקומות מסומנים. אנימציות כניסה עדינות בגלילה. כפתור וואטסאפ צף למספר [מספר]. נגיש ומהיר: בלי ספריות חיצוניות. החזר את הקוד המלא בבלוק אחד.

פתיחת Claude ↗

💡 תגית 'בלעדי' על 2–3 נכסים מעלה פניות. לא על כולם — אז זה מפסיק לעבוד.

משרדים ומקצועות חופשיים

אתר לעורך דין או יועץ

שקט, סמכותי ומדויק: תחומי עיסוק, תהליך ברור והמלצות — בלי רעש.

איפה זה עובד: עורכי דין, רואי חשבון, יועצים, מגשרים

מה צריך להכין

  • תחומי העיסוק
  • 3 שלבים בתהליך העבודה
  • 3 המלצות אמיתיות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אתר ל-[שם ותפקיד], [תחום] ב-[עיר], בסגנון שקט וסמכותי: כחול כהה וזהב, כותרות בפונט סריף (Frank Ruhl Libre) וגוף ב-Heebo. אזור פתיחה עם משפט אחד חזק, תחומי עיסוק ככרטיסים אלגנטיים ([תחומים]), 'איך זה עובד' ב-3 שלבים, המלצות, פס הסמכות, ואזור יצירת קשר דיסקרטי עם כפתור חיוג צף. דרישות: אתר בקובץ HTML אחד מלא (HTML, CSS ו-JavaScript) שאפשר להעלות כמו שהוא או להעביר לאלמנטור. עברית מימין לשמאל, מובייל קודם ומושלם במחשב. תפריט דביק עם גלילה חלקה לסקשנים, כותרות H1 ו-H2 נכונות, תיאור מטא, וסכמת LocalBusiness ב-JSON-LD. צבעי המותג: [צבעי המותג]. פונט Heebo. תמונות: [קישורים לתמונות] ואם אין — מקומות מסומנים. אנימציות כניסה עדינות בגלילה. כפתור וואטסאפ צף למספר [מספר]. נגיש ומהיר: בלי ספריות חיצוניות. החזר את הקוד המלא בבלוק אחד.

פתיחת Claude ↗

💡 בתחום הזה פחות זה יותר. משפט אחד בפתיחה, בלי סלוגנים.

ספורט ובריאות

אתר לסטודיו כושר או פילאטיס

מערכת שעות, מדריכים, מחירון ושיעור ניסיון — כל מה שצריך כדי להירשם.

איפה זה עובד: סטודיו פילאטיס, יוגה, חדרי כושר, מאמנים

מה צריך להכין

  • מערכת השעות
  • המדריכים
  • 3 מסלולי מחיר
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אתר ל-[שם הסטודיו], [סוג האימון] ב-[עיר], אנרגטי ונקי: אזור פתיחה עם תמונה גדולה, מערכת שעות כטבלה (ימים × שעות) שהופכת לכרטיסים במובייל ([המערכת]), שורת מדריכים, 3 מסלולי מחיר ([המסלולים]), כפתור 'שיעור ניסיון' לוואטסאפ ורשת תמונות בסגנון אינסטגרם. דרישות: אתר בקובץ HTML אחד מלא (HTML, CSS ו-JavaScript) שאפשר להעלות כמו שהוא או להעביר לאלמנטור. עברית מימין לשמאל, מובייל קודם ומושלם במחשב. תפריט דביק עם גלילה חלקה לסקשנים, כותרות H1 ו-H2 נכונות, תיאור מטא, וסכמת LocalBusiness ב-JSON-LD. צבעי המותג: [צבעי המותג]. פונט Heebo. תמונות: [קישורים לתמונות] ואם אין — מקומות מסומנים. אנימציות כניסה עדינות בגלילה. כפתור וואטסאפ צף למספר [מספר]. נגיש ומהיר: בלי ספריות חיצוניות. החזר את הקוד המלא בבלוק אחד.

פתיחת Claude ↗

💡 'שיעור ניסיון' הוא ההצעה שממירה. שימו אותו בפתיחה ובסוף.

חנויות

דף חנות עם סל קניות

מוצרים, הוספה לסל, יתרונות וביקורות — דף מכירה שמרגיש כמו אפליקציה.

איפה זה עובד: חנויות קטנות, מותגי טיפוח, אופנה, מזון

מה צריך להכין

  • 3–6 מוצרים עם תמונות ומחירים
  • רף למשלוח חינם
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי דף חנות ל-[שם המותג], [סוג המוצרים]: פס הודעה עליון 'משלוח חינם מעל ₪[סכום]', אזור פתיחה עם המוצר המוביל, רשת מוצרים עם 'הוספה לסל' ומונה סל שקופץ ([המוצרים והמחירים]), שורת יתרונות עם אייקונים, ביקורות והרשמה לרשימת תפוצה. מוכן לחיבור לווקומרס. דרישות: אתר בקובץ HTML אחד מלא (HTML, CSS ו-JavaScript) שאפשר להעלות כמו שהוא או להעביר לאלמנטור. עברית מימין לשמאל, מובייל קודם ומושלם במחשב. תפריט דביק עם גלילה חלקה לסקשנים, כותרות H1 ו-H2 נכונות, תיאור מטא, וסכמת LocalBusiness ב-JSON-LD. צבעי המותג: [צבעי המותג]. פונט Heebo. תמונות: [קישורים לתמונות] ואם אין — מקומות מסומנים. אנימציות כניסה עדינות בגלילה. כפתור וואטסאפ צף למספר [מספר]. נגיש ומהיר: בלי ספריות חיצוניות. החזר את הקוד המלא בבלוק אחד.

פתיחת Claude ↗

💡 פס 'משלוח חינם מעל' בראש הדף מגדיל את הסל הממוצע — קבעו אותו קצת מעל ההזמנה הממוצעת.

אזור פתיחה

הירו חלקיקים שמגיב לעכבר

רקע חי שמגיב לתנועה של הגולש — מרגיש טכנולוגי ויוקרתי.

איפה זה עובד: חברות טכנולוגיה, אפליקציות, יועצים, סטארטאפים

מה צריך להכין

  • כותרת ומשפט משנה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי הירו עם רקע חלקיקים ב-canvas לאתר של [שם העסק]: נקודות שמתחברות בקווים דקים ומגיבות לעכבר ולמגע (נדחפות הצידה ומתחברות מחדש), מאחורי כותרת גדולה '[הכותרת]' וכפתור. ביצועים: כמות החלקיקים לפי גודל המסך, requestAnimationFrame, עצירה כשהלשונית לא פעילה, ורקע גרדיאנט סטטי למי שביקש פחות תנועה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 פחות חלקיקים זה יותר יוקרתי. אם זה נראה עמוס — בקשו ממנו לחצות את הכמות.

אזור פתיחה

סטוריטלינג בגלילה

המוצר נשאר במקום והסיפור עובר לידו — הגולש קורא בלי להרגיש.

איפה זה עובד: מוצר דגל, שירות פרימיום, דף השקה

מה צריך להכין

  • תמונת מוצר על רקע נקי
  • 4 מסרים קצרים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן סטוריטלינג בגלילה ל-[המוצר] של [שם העסק]: התמונה [קישור] נשארת מקובעת במרכז, ו-4 פאנלים של טקסט ([המסרים]) עוברים לידה בגלילה, כשצבע הרקע משתנה בכל פאנל. עם animation-timeline: scroll() ונפילה ל-IntersectionObserver. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 מסר אחד לכל פאנל, עד 8 מילים. זה סיפור, לא עמוד מפרט.

אזור פתיחה

הירו עם כרטיס עולה וכותרת מתחדדת

הכותרת מתחדדת, כרטיס עולה מלמטה, והגולש מדפדף בין המסלולים שלכם כבר במסך הראשון.

איפה זה עובד: מכללות וקורסים, חוגים, חדרי כושר, קליניקות, כל עסק עם 3 מסלולים

מה צריך להכין

  • כותרת ראשית קצרה
  • 3 מסלולים: שם, תמונה ושלוש עובדות לכל אחד
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה לאתר של [שם העסק]: שורת מותג קטנה, כותרת ראשית '[כותרת]' שמתחדדת מטשטוש מילה אחרי מילה (filter: blur רק בכניסה), ומילה אחת בצבע המותג. אחריה עולה מלמטה כרטיס גדול: תמונה או איור, שם המסלול, שלוש עובדות (מספר גדול ותיאור קטן) וכפתור 'לפרטים והרשמה'. חיצים בצדי הכרטיס מחליפים בין שלושה מסלולים, והתוכן מחליק הצידה ומתחלף. מתחת לכרטיס שלושה פסים דקים: הפעיל מתמלא 5 שניות ואז הכרטיס מתחלף לבד, וריחוף עוצר את הסבב. ברקע קו אופק, חצי עיגול בצבע המשני ורצפת קווים בפרספקטיבה. במחשב כל הסצנה נוטה קלות בתלת-ממד לפי העכבר (perspective ו-rotateX/rotateY, שכבות ב-translateZ, ריכוך ב-requestAnimationFrame), וכשהעכבר נח היא מתנדנדת לאט לבד. במובייל ההטיה כבויה ומחליפים כרטיס בהחלקה באצבע. המסלולים: [3 מסלולים: שם, תמונה ושלוש עובדות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כותרת של 4 עד 6 מילים. כותרת ארוכה נשברת לשלוש שורות והחידוד מאבד את הקצב.

אזור פתיחה

הירו קונסטלציה של אנשי הצוות

במקום תמונת סטוק, הגולש פוגש מיד את האנשים שמאחורי העסק. אמון מהשנייה הראשונה.

איפה זה עובד: סוכנויות, משרדים, סטודיו, קליניקות, עמוד אודות

מה צריך להכין

  • תמונות פנים של 8 אנשי צוות
  • שם ותפקיד לכל אחד
  • כותרת ומשפט משנה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה בסגנון קונסטלציה לאתר של [שם העסק]: במרכז שורת מותג, כותרת '[הכותרת]', משפט משנה וכפתור. סביבם 8 עיגולי דיוקן של אנשי הצוות בגדלים שונים, מפוזרים כמו כוכבים ומחוברים בקווי SVG דקים שמתקמרים הרחק מהכותרת. בטעינה העיגולים מופיעים והקווים מצטיירים בהדרגה (stroke-dashoffset, החריג היחיד ל-transform ו-opacity). אחר כך העיגולים צפים לאט, הקווים עוקבים ב-requestAnimationFrame ונקודת אור נוסעת על כל קו. בריחוף או בהקשה על אדם: העיגול גדל עם טבעת זוהרת, הקווים שלו נדלקים בצבע המשני, מי שלא מחובר אליו מתעמעם, ולידו תווית עם שם ותפקיד. עד שהגולש נוגע, ההדגשה עוברת לבד מאדם לאדם כל 2.4 שניות. במובייל 5 עיגולים: 3 מעל הכותרת ו-2 מתחת לכפתור, והקווים עוקפים את הטקסט. הצוות: [8 אנשי צוות: תמונה, שם ותפקיד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 צלמו את כולם על אותו רקע ובאותה תאורה. תמונות בסגנונות שונים נראות כמו קולאז׳.

אזור פתיחה

פתיחת ניאון ללוגו

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

איפה זה עובד: בתי קפה, ברים, מסעדות, סטודיו, מועדונים, אולמות אירועים

מה צריך להכין

  • שם העסק ושורת תחום לשלט
  • כותרת, משפט ו-3 מנות עם מחיר
  • תמונת אווירה אחת
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מסך פתיחה בסגנון שלט ניאון לאתר של [שם העסק]: בטעינה מסך כהה מכסה את העמוד, ובמרכזו שלט כבוי ועמום: [שם העסק] באותיות ניאון ומתחתיו שורת [תחום]. נורות קטנות סביב מסגרת השלט נדלקות אחת אחת, אחר כך שתי המילים מהבהבות ומתייצבות זו אחרי זו עם הילה חמה, שורת התחום נדלקת ברכות והנורות ממשיכות לנצנץ לסירוגין. אחרי כ-3.5 שניות המסך מתפוגג, השלט גדל מעט, ואזור הפתיחה נכנס בעלייה מדורגת: לוגו קטן, שורת מיקום, כותרת, משפט, שלוש שורות תפריט עם מחיר, כפתור 'הזמינו שולחן' ותמונה. כפתור 'דילוג' ומקש Esc סוגרים מיד, וכפתור 'הפעלה מחדש' בראש העמוד מריץ שוב. הבהוב איטי, עד שני הבזקים בשנייה, ורק opacity משתנה. למי שביקש פחות תנועה השלט מוצג דלוק מיד ונעלם אחרי שנייה. התוכן: [כותרת ומשפט], [3 מנות ומחירים], [קישור לתמונה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הבהוב איטי נראה כמו ניאון אמיתי. הבהוב מהיר מעייף ועלול להפריע לרגישים לאור.

אזור פתיחה

אזור פתיחה עם רקע חי ב-WebGL

רקע נוזלי שזז לאט בצבעי המותג. האתר מרגיש חי ויוקרתי בלי וידאו כבד ובלי תמונה.

איפה זה עובד: חברות טכנולוגיה, סטארטאפים, סוכנויות, מותגי פרימיום, דפי נחיתה

מה צריך להכין

  • כותרת ושורת משנה
  • טקסט לשני כפתורים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה עם רקע חי ב-WebGL לאתר של [שם העסק]: canvas על כל האזור שמצייר ב-fragment shader גרדיאנט נוזלי שזורם לאט בצבעי המותג על בסיס כהה. בעכבר הזרימה נמשכת בעדינות אחרי הסמן וכתם אור רך עוקב אחריו, במגע רק הזרימה. מעליו, בגובה מסך מלא: שם העסק קטן למעלה, ובצד ימין שורת תחום, כותרת גדולה '[הכותרת]', שורת משנה ושני כפתורים שמתרוממים קלות בריחוף: ראשי מלא, ומשני עם מסגרת וחץ למטה שגולל ברכות לאזור הבא. הרקע כהה יותר מאחורי הטקסט, והטקסט נכנס בטעינה בדעיכה מלמטה, שורה אחרי שורה. במובייל הטקסט בתחתית, הכפתורים ברוחב מלא והנוזל בולט למעלה. הצבעים נקראים ממשתני CSS, הציור בחצי רזולוציה, והלולאה נעצרת עם IntersectionObserver כשהאזור מחוץ למסך. בלי WebGL, או למי שביקש פחות תנועה: גרדיאנט CSS סטטי באותם צבעים. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו שני צבעים קרובים על רקע כהה. שלושה צבעים עזים הופכים את הנוזל לקשת צעקנית.

אזור פתיחה

הירו דלת שנפתח בגלילה

הגולש גולל, והתמונה נפתחת כמו דלת עד שהיא ממלאת את המסך. כניסה שזוכרים.

איפה זה עובד: מעצבי פנים, אדריכלים, נדל״ן יוקרתי, מלונות בוטיק, אולמות אירועים

מה צריך להכין

  • תמונה רחבה ואיכותית אחת
  • כותרת, משפט משנה ושם פרויקט
  • 3 שירותים עם משפט לכל אחד
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי הירו דלת שנפתח בגלילה לאתר של [שם העסק]: מסך פתיחה מלא עם שורת מותג, כותרת, משפט משנה וכפתור 'היכנסו פנימה' שגולל ברכות עד שהדלת פתוחה, ולצידם (במובייל מתחתם) התמונה [קישור לתמונה] במסגרת קשת קטנה עם קו מתאר דק. בתחתית רמז 'גללו ופתחו את הדלת' עם חץ שמקפץ. בגלילה ההירו ננעל (position: sticky במסילה של 260vh), הטקסט דועך והקשת גדלה עד שהתמונה ממלאת את כל המסך. הקשת גדלה ב-translate ו-scale לפי scrollY, והתמונה מקבלת transform נגדי כדי שלא תימתח. בסוף התמונה מתכהה למטה ועולה הכיתוב 'ברוכים הבאים הביתה' ומתחתיו [שם הפרויקט]. המשך גלילה משחרר לתוכן הבא: [3 שירותים עם משפט לכל אחד]. בטעינה הדגמה אחת: העמוד גולל לבד עד שהדלת פתוחה, מחכה רגע וחוזר לראש, ונעצר כשהגולש נוגע. למי שביקש פחות תנועה: בלי נעילה והדגמה, והכיתוב מוצג על הקשת. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו תמונה שהמרכז שלה חזק. בקשת הקטנה רואים רק אותו, ובמסך מלא את כל החדר.

קאברים מיוחדים

קאבר אורורה עם רקע זוהר נוזלי

כתמי אור בצבעי המותג שנעים לאט מאחורי הכותרת. האתר נראה פרימיום כבר במסך הראשון.

איפה זה עובד: סטארטאפים, חברות תוכנה, סוכנויות, דפי נחיתה למוצר דיגיטלי

מה צריך להכין

  • כותרת ומשפט משנה
  • טקסט לתג ולשני כפתורים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר אורורה לאתר של [שם העסק]: אזור פתיחה כהה בגובה מסך מלא, וברקע 4 כתמי צבע גדולים בצבעי המותג שנעים לאט ומתמזגים. CSS בלבד: צורות עם mix-blend-mode: screen בתוך עטיפה עם filter: blur קבוע, והתנועה רק ב-transform. מעליהם שכבת גרעיניות עדינה (SVG feTurbulence) והחשכה רכה מאחורי הטקסט. בעכבר הכתמים זזים מעט עם הסמן, כל אחד בעומק אחר. במרכז: שם העסק קטן למעלה, תג עם נקודה פועמת, כותרת גדולה '[הכותרת]' שמילה אחת בה בגרדיאנט נע (background-position), משפט משנה ושני כפתורי זכוכית עם backdrop-filter שמתרוממים בריחוף: ראשי בגוון המותג, ומשני עם חץ למטה שגולל ברכות לאזור הבא. בטעינה הרקע נדלק בדעיכה והטקסט נכנס מלמטה, שורה אחרי שורה. במובייל 2 כתמים, תנועה איטית יותר וכפתורים ברוחב מלא. למי שביקש פחות תנועה הכול קפוא. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 סמנו בגרדיאנט את המילה הכי חשובה בכותרת, ורק אחת. שתיים כבר מתחרות זו בזו.

קאברים מיוחדים

קאבר מנורה: אור שמדליק את הכותרת

האתר נפתח כמו אור שנדלק מעל הכותרת. העין נמשכת ישר למסר הראשי ולכפתור.

איפה זה עובד: מוסכים, בעלי מקצוע, סטודיו, אולמות אירועים, דפי נחיתה כהים

מה צריך להכין

  • לוגו
  • כותרת קצרה בשתי שורות
  • משפט אחד וטקסט לכפתור
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר מנורה לאתר של [שם העסק]: מסך כהה בגובה מלא, ובראשו הלוגו וכפתור קטן 'הדלקה מחדש'. בטעינה קו אור דק נפתח מהמרכז לרוחב, וממנו יורדת אלומת אור בצורת חרוט שמתרחבת, בהירה ליד הקו ונמוגה בתחתית, עם הילה רכה סביב הקו וגרגרי אבק זעירים שמרחפים בתוכה. מתחת לקו עולים בזה אחר זה שורת [תחום] ו-[עיר], כותרת גדולה בגרדיאנט מלבן לצבע המותג, משפט וכפתור קריאה לפעולה. תזוזת העכבר מטה את האלומה מעט לצדדים בריכוך (lerp בתוך requestAnimationFrame, הקו לא זז), וכשהעכבר נח או במסך מגע היא מתנדנדת לאט לבד. לחיצה על 'הדלקה מחדש' מריצה את הרצף שוב. החרוט: שני טרפזים עם clip-path ו-filter: blur קבוע, והתנועה רק ב-transform ו-opacity. למי שביקש פחות תנועה הכול דלוק מראש, בלי נדנוד ובלי ריחוף. התוכן: [כותרת בשתי שורות], [משפט], [טקסט הכפתור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הכותרת צריכה להיות קצרה, עד שש מילים. האור מדגיש שורה אחת חזקה, לא פסקה.

קאברים מיוחדים

קאבר רשת נקודות עם זרקור

הרקע מגיב לעכבר ומאיר את הדרך לכותרת. פתיחה שמרגישה כמו מוצר טכנולוגי.

איפה זה עובד: ראש דף הבית, דפי נחיתה, סוכנויות, סטארטאפים, חברות תוכנה

מה צריך להכין

  • כותרת בשתי שורות ומשפט פתיחה
  • טקסט הכפתורים ומספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר כהה לאתר של [שם העסק] על רשת נקודות עדינה: זרקור רך עוקב אחרי העכבר בהשהיה קלה ומאיר את הנקודות שסביבו, גדולות ובצבע המותג, מעל הילה עמומה. כשהעכבר לא זז, ובמגע, הזרקור נע לבד במסלול איטי. משבצות אקראיות ברשת נדלקות ודועכות לבד, לא מאחורי הטקסט. בטעינה גל אור טבעתי עובר על הרשת מהמרכז החוצה, וכל לחיצה שולחת גל נוסף משם. במרכז, בכניסה מדורגת: שורת מותג קטנה, כותרת ענקית ששורתה השנייה בגרדיאנט, משפט אחד ושני כפתורים (במובייל ברוחב מלא): מלא לוואטסאפ ושקוף לעבודות. טכנית: שכבת נקודות בהירה שנחשפת דרך mask-image רדיאלי שמיקומו במשתני CSS, מעודכנים ב-requestAnimationFrame (חריגה מותרת מ-transform ו-opacity). פחות תנועה: זרקור קבוע על הכותרת וכמה משבצות דולקות, בלי גל. התוכן: [כותרת בשתי שורות], [משפט פתיחה], [שני כפתורים], [מספר בפורמט 972]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 עובד רק על רקע כהה. שמרו על נקודות קטנות ודלילות: רשת צפופה מתחרה בכותרת.

קאברים מיוחדים

קאבר עם גלובוס נקודות מסתובב

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

איפה זה עובד: סוכנויות נסיעות, יבוא ושילוח, חברות עם סניפים או לקוחות בעולם

מה צריך להכין

  • עיר מוצא ו-6 יעדים בעולם
  • כותרת ומשפט משנה
  • שלושה מספרים על העסק
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר כהה עם גלובוס נקודות לאתר של [שם העסק]: בצד אחד שורת מותג, כותרת '[הכותרת]', משפט משנה, שלושה מספרים וכפתור, שנכנסים בהדרגה. בצד השני גלובוס תלת-ממדי על canvas 2D שמסתובב לאט: יבשות בנקודות בהירות (מפה גסה בקוד: טווחי קו אורך לכל 5 מעלות רוחב), ים בנקודות עמומות, הצללת אור והילה. [עיר המוצא] ו-6 יעדים מסומנים בנקודה ובשם, ולכל יעד קשת: קו עמום קבוע, ועליו פס אור שנמתח מהמוצא, מפעים את נקודת היעד ודועך. מה שמאחורי הגלובוס מוסתר. גרירה מסובבת ומטה אותו, ובשחרור הוא ממשיך בתנופה וחוזר לקצב האיטי. במובייל הגלובוס עמום מאחורי הטקסט, בלי שמות, והחלקה אופקית מסובבת אותו (touch-action: pan-y). האנימציה נעצרת מחוץ למסך (IntersectionObserver), ובמצב פחות תנועה הגלובוס עומד עם כל הקשתות. היעדים: [6 ערים בעולם]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו יעדים שמפוזרים על פני העולם. שש ערים באירופה נדבקות זו לזו ולא רואים קשתות.

קאברים מיוחדים

קאבר עם גלים מונפשים

גלים רכים שנעים בתחתית המסך ומגיבים לעכבר. פתיחה רגועה שמרגישה חיה, בלי וידאו.

איפה זה עובד: קליניקות, ספא, מלונות, יועצים, דפי נחיתה, ראש עמוד הבית

מה צריך להכין

  • כותרת ומשפט פתיחה
  • טקסט לכפתור
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר עם גלים מונפשים לאתר של [שם העסק]: אזור פתיחה בגובה מסך על גרדיאנט בהיר ורגוע, ובתחתיתו canvas שמצייר ארבע שכבות גלים בצבעי המותג, משקופה מאחור עד אטומה מלפנים. כל שכבה נעה במהירות ובכיוון משלה, עם קו רכס בהיר ודק, והקדמית בצבע הרקע של האזור הבא ונשפכת אליו בלי קו מפריד. העכבר מגביה גבעה רכה בגל שמתחתיו, והשכבות האחוריות מגיעות באיחור קל. במגע, וכשהעכבר מחוץ לקאבר, הגבעה נודדת לבד מצד לצד. מעל הגלים, במרכז: שם העסק קטן, שורת תחום ועיר, כותרת '[הכותרת]', משפט אחד וכפתור '[טקסט הכפתור]' שמתרומם בריחוף. בטעינה הגלים עולים מלמטה והטקסט נכנס בדעיכה, שורה אחרי שורה. במובייל שלוש שכבות נמוכות יותר וכפתור ברוחב מלא. devicePixelRatio עד 2, והלולאה נעצרת עם IntersectionObserver מחוץ למסך. למי שביקש פחות תנועה: גלים קפואים. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הגלים עובדים הכי טוב על רקע בהיר ושקט. תמונה או דוגמה מאחוריהם הופכת הכול לרעש.

קאברים מיוחדים

קאבר עם קיר תמונות נטוי בתלת-ממד

העבודות שלכם זורמות ברקע מהשנייה הראשונה, והמסר נשאר נקי וקריא מעליהן.

איפה זה עובד: צלמים, אדריכלים, מעצבי פנים, סטודיו, תיק עבודות בדף הבית

מה צריך להכין

  • 12 עד 24 תמונות מהעבודות שלכם
  • כותרת, משפט ושני כפתורים עם קישורים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה עם קיר תמונות נטוי בתלת-ממד לאתר של [שם העסק]: ברקע ארבע עמודות של כרטיסי תמונה בגבהים שונים, על משטח שמוטה לאחור ובאלכסון (perspective, rotateX ו-rotateZ). כל עמודה נגללת לאט בלולאה אינסופית בכיוון הפוך מהשכנה ובקצב קצת שונה (סט משוכפל).הכרטיסים מעומעמים מעט, ושכבת גרדיאנט בצבע הרקע מעמעמת את הקיר לכיוון הטקסט שבצד ימין: שם העסק והעיר, כותרת גדולה, משפט ושני כפתורים, ראשי מלא ומשני עם מסגרת. ריחוף על כרטיס מקרב אותו (translateZ), מאיר אותו ועוצר את העמודה שלו, ובמגע נגיעה מרימה אותו לרגע. בטעינה העמודות עולות בדירוג והטקסט נכנס שורה אחרי שורה. במובייל: שתי עמודות, הטיה קלה יותר, הטקסט בתחתית והגרדיאנט עולה מלמטה. למי שביקש פחות תנועה הקיר עומד. התוכן: [12 עד 24 תמונות, כותרת, משפט ושני כפתורים עם קישורים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו תמונות בגוונים דומים. קיר צבעוני מדי מושך את העין מהכותרת אל הרקע.

קאברים מיוחדים

קאבר מסך שמתיישר בגלילה

הגולש גולל והמסך המוטה מתיישר מולו, עם הממשק שלכם בפנים. רואים את המוצר לפני שקוראים עליו.

איפה זה עובד: יועצים, אפליקציות ותוכנות, משרדים עם אזור לקוחות, דף הבית

מה צריך להכין

  • 3 נתונים מרכזיים לתוך המסך
  • נתון לאורך זמן ותמהיל באחוזים
  • 3 שירותים עם משפט לכל אחד
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר מסך שמתיישר בגלילה לאתר של [שם העסק]: שורת מותג, כותרת גדולה ומשפט משנה, ומתחתם מסך מחשב עם מסגרת דקה ורגל, מוטה לאחור (rotateX של 24 מעלות סביב הקצה התחתון, perspective על ההורה), השתקפות אור על הזכוכית ורמז 'גללו למטה' עם חץ מקפץ. בתוך המסך לוח נתונים ב-HTML ו-CSS: [3 נתונים מרכזיים], גרף עמודות של [נתון לאורך זמן] ופסי [תמהיל באחוזים]. בגלילה הקאבר ננעל (sticky במסילה של 250vh) והכול נגזר מערך התקדמות אחד: המסך מתיישר, גדל מעט ועולה למרכז, הצל מתחזק וההשתקפות נעלמת, הכותרת עולה ודועכת ועמודות הגרף צומחות בזו אחר זו. ואחר כך התוכן: [3 שירותים]. בטעינה גלילה אוטומטית עד שהמסך ישר וחזרה לראש, שנעצרת בנגיעה. במובייל טלפון בפרופורציה 9 על 19.5 עם פס סטטוס, הטיה של 14 מעלות והלוח בטור אחד. בפחות תנועה: מסך ישר ומלא, בלי נעילה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שימו במסך נתונים שהלקוח באמת מקבל מכם. ממשק אמיתי משכנע יותר מכל משפט שיווקי.

קאברים מיוחדים

קאבר עם שובל תמונות אחרי העכבר

כל תנועה של העכבר פורשת עוד פרויקט מהתיק. הגולש משחק, ורואה את העבודות בלי לגלול.

איפה זה עובד: מעצבי פנים, אדריכלים, צלמים, סטודיו ומותגי אופנה, דף הבית

מה צריך להכין

  • 8 תמונות מפרויקטים, רצוי לגובה
  • כותרת קצרה ושלושה שירותים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה עם שובל תמונות לאתר של [שם העסק]: רקע בהיר, למעלה שם העסק ושורה עם [תחום] ו[עיר], במרכז כותרת ענק '[כותרת]' שמילה אחת בה בצבע המותג, משפט משנה ורמז עם נקודה פועמת 'הזיזו את העכבר על המסך' (במגע: 'העבירו אצבע על המסך'), ובתחתית שלושת השירותים ממוספרים. כשהעכבר נע, כל כ-130 פיקסלים צצה במקומו תמונה קטנה במסגרת לבנה עם צל, בהטיה אקראית קלה, החדשה מעל הקודמת, ותוך שנייה היא שוקעת ונמוגה.במגע השובל עוקב אחרי האצבע. בטעינה הכותרת עולה, וסמן מדומה מקיף את הטקסט בלולאה בלי לעבור עליו (בטלפון נקודת אצבע מציירת אינסוף ברווח מעליו או מתחתיו), עד שהגולש זז או נוגע. בפחות תנועה: בלי שובל, ושלוש תמונות קבועות מוטות מתחת למשפט. מאגר אלמנטים ממוחזר ו-Web Animations API. התמונות: [8 תמונות מפרויקטים]. השירותים: [3 שירותים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו תמונות באותה תאורה ובאותו גוון. שובל של צילומים מעורבבים נראה כמו בלגן.

קאברים מיוחדים

קאבר כותרת ענק שנכנסים דרכה

הכותרת היא חלון: גוללים, ונכנסים דרך האותיות אל הסצנה שמאחוריהן. פתיחה שזוכרים.

איפה זה עובד: חנויות אופנה, מותגי לייף סטייל, השקות קולקציה, סטודיו ואירועים

מה צריך להכין

  • כותרת קצרה של 2 עד 3 מילים
  • שורת פתיח, כותרת משנה, משפט וטקסט לכפתור
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר כותרת ענק שנכנסים דרכה לאתר של [שם העסק]: מסך פתיחה בהיר עם שורת מותג למעלה, ובמרכז [2 עד 3 מילים] באותיות ענק שממלאות את הרוחב, ובמובייל בשתי שורות. האותיות חלולות: דרכן רואים סצנה בגווני טרקוטה עם כתמי צבע רכים שנעים לאט, וצל עדין בשולי החיתוך. בתחתית כפתור 'גללו פנימה' עם חץ מקפץ שגולל עד הסוף. בגלילה הקאבר ננעל (sticky במסילה של 300vh), שורת המותג דועכת והכותרת גדלה עד שנכנסים דרך אחת האותיות והסצנה ממלאת את המסך, ואז עולים בה בהדרגה התוכן והכפתור. הטכניקה: מסכת SVG שה-scale שלה נגזר מהגלילה, ונקודת הכניסה נבחרת על canvas בעובי האות. בטעינה גלילה אוטומטית קצרה שמגדילה את האותיות וחוזרת לראש, ונעצרת במגע. בפחות תנועה: בלי נעילה, והסצנה מוצגת מיד עם הכותרת והתוכן. התוכן: [שורת פתיח, כותרת משנה, משפט וטקסט לכפתור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כותרת קצרה במשקל הכי עבה של הפונט עובדת הכי טוב: אות עבה היא חלון רחב לסצנה.

הצגת עבודות

הגולש מסובב את העבודות שלכם במרחב — רושם של חברה גדולה תוך שנייה.

איפה זה עובד: דף הבית, עמוד תיק עבודות, דף נחיתה

מה צריך להכין

  • 8–12 צילומי מסך או תמונות של עבודות
  • שם קטגוריה לכל עבודה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

פתיחת Claude ↗

💡 תנו לו את הקישורים לתמונות מספריית המדיה של וורדפרס — הוא יכניס אותן ישר לקוד.

הצגת עבודות

קאברפלואו תלת-ממדי לגלריה

הגולש מדפדף בין הרגעים שלכם כמו באלבום במרחב. התמונה שבמרכז מקבלת את כל הבמה.

איפה זה עובד: גני אירועים, צלמים, מעצבים, מסעדות, תיק עבודות בדף הבית

מה צריך להכין

  • 7 עד 9 תמונות אנכיות באותו יחס
  • תגית, כותרת ושורת תיאור לכל תמונה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גלריית קאברפלואו תלת-ממדית לאתר של [שם העסק]: שורת כרטיסי תמונה אנכיים. הכרטיס המרכזי גדול ופונה קדימה, והשכנים מסתובבים הצידה (rotateY), קטנים, דוהים לצבע הרקע ומתרחקים בעומק (perspective ו-translateZ), עם צל רך מתחת לכל כרטיס. מביאים כרטיס למרכז בגרירה שהכרטיסים עוקבים אחריה ונצמדים לקרוב ביותר, בחיצים, במקשי החיצים או בלחיצה על כרטיס צדדי, והגלריה מעגלית. מתחת מתחלף בדעיכה הכיתוב של הכרטיס הפעיל: תגית, כותרת ושורת תיאור. מתחתיו חיצים ונקודות ניווט בצורת פסים קצרים, והפס הפעיל מתמלא עד המעבר הבא. בטעינה הכרטיסים נפרשים מהמרכז, ואז הגלריה מתקדמת לבד כל 3 שניות ועוצרת בריחוף. במובייל: שלושה כרטיסים גלויים והחלקה באצבע. התנועה ב-requestAnimationFrame לפי מיקום רציף. הכרטיסים: [7 תמונות אנכיות עם תגית, כותרת ושורת תיאור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 תמונות אנכיות באותו יחס גובה ורוחב. תמונה אחת לרוחב שוברת את כל השורה.

תלת-ממד

שש תמונות בקובייה אחת שמסתובבת לאט. הגולש גורר, בוחר פאה ומקבל מיד את הפרטים.

איפה זה עובד: קייטרינג, מסעדות, סטודיו, מוצר עם כמה צדדים, סקשן שירותים בדף הבית

מה צריך להכין

  • 6 תמונות מרובעות באותו סגנון
  • תגית, כותרת, תיאור, מחיר וכמות לכל פאה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

פתיחת Claude ↗

💡 השאירו את השליש התחתון של כל תמונה רגוע: שם יושבים התגית והכותרת של הפאה.

תלת-ממד

כרטיסי שירות שמתהפכים בתלת-ממד

בחזית רק העיקר, ובהיפוך הפרטים וכפתור הפנייה. עמוד שירותים נקי שמזמין לגעת.

איפה זה עובד: עמוד שירותים, דף הבית, משרדי עורכי דין, יועצים, קליניקות

מה צריך להכין

  • 6 שירותים עם תיאור קצר לכל אחד
  • קישור לתיאום פגישה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גריד של 6 כרטיסים שמתהפכים בתלת-ממד לאתר של [שם העסק]: בחזית כל כרטיס מספר סידורי גדול (01 עד 06), אייקון SVG בעיגול, כותרת ורמז קטן 'לפרטים' עם אייקון סיבוב. בריחוף עכבר, בהקשה או ב-Enter הכרטיס מסתובב 180 מעלות על ציר Y (perspective, preserve-3d, backface-visibility) ומגלה גב כהה עם המספר, כותרת, תיאור של 2 עד 3 שורות, כפתור 'לתיאום פגישה' אל [קישור לתיאום פגישה] וכפתור חזרה בפינה. בהיפוך הכרטיס מתרומם לעבר הגולש, הצל שמתחתיו מתכווץ ומתבהר, והפנים שמתרחקת מתכהה. בטעינה הכרטיסים מתהפכים פעם אחת בגל מימין לשמאל וחוזרים. Enter מעביר את הפוקוס לכפתור שבגב, ו-Esc מחזיר לחזית. במובייל שתי עמודות, הקשה מהפכת, ופתיחת כרטיס אחר סוגרת את הקודם. למי שביקש פחות תנועה אין סיבוב: הגב מופיע בדעיכה מעל החזית. השירותים: [6 שירותים עם תיאור קצר לכל אחד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שמרו את הגב קצר: עד שלוש שורות וכפתור אחד. מי שרוצה לקרוא עוד כבר ילחץ.

תלת-ממד

כרטיס חבר הולוגרפי עם ברק שנע

כרטיס מנוי שנוצץ בצבעי קשת כשמזיזים אותו. המנוי שלכם מרגיש כמו מועדון יוקרתי.

איפה זה עובד: סטודיו, חדר כושר, מועדון לקוחות, כרטיס מתנה, עמוד מנויים

מה צריך להכין

  • פרטי כרטיס החבר
  • 3 מסלולים עם מחיר
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי כרטיס חבר הולוגרפי לאתר של [שם העסק], עם כותרת קצרה מעליו: כרטיס כהה ביחס של כרטיס אשראי, עם לוגו, תג סוג המנוי, שם החבר, מספר, תוקף וחותם עגול בצבעי קשת. הכרטיס נוטה בתלת-ממד לפי העכבר (עד 16 מעלות, תנועה רכה ב-lerp), הטקסט מרחף מעליו (translateZ), ועליו שכבת ברק בצבעי קשת עם רשת קווים דקה שזזה עם הזווית (mix-blend-mode: color-dodge), כתם אור שעוקב אחרי הסמן, חותם שמסתובב וצל שזז מתחת. במגע הכרטיס מגיב לגרירת האצבע. לצידו 3 כרטיסים קטנים באותו אפקט עדין (נוטה רק הרקע, הטקסט ישר וחד), ומתחתיו שורת רמז 'הזיזו את העכבר' או 'גררו באצבע'. בטעינה כל הכרטיסים מתנדנדים לבד, נעצרים כשנוגעים, וחוזרים אחרי 3 שניות שקט. פחות תנועה: הכרטיס ישר והברק קבוע. התוכן: [פרטי כרטיס החבר: סוג מנוי, שם, מספר ותוקף], [3 מסלולים: שם, הסבר ומחיר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 ברק הקשת בולט רק על כרטיס כהה. על רקע בהיר הוא נשטף ונראה כמו כתם לבן.

תלת-ממד

מוצר שמתפרק לשכבות בגלילה

הגולש רואה ממה המוצר בנוי, חלק אחרי חלק. הסבר שמוכר את האיכות בלי פסקה אחת.

איפה זה עובד: חנויות עיצוב ומוצרי חשמל, יצרנים, עמוד מוצר ודף נחיתה למוצר אחד

מה צריך להכין

  • שם המוצר, משפט קצר ומחיר
  • 5 חלקים של המוצר, שם ותועלת לכל אחד
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן מוצר שמתפרק לשכבות בגלילה לחנות של [שם החנות]: המוצר מצויר ב-SVG כשכבות נפרדות עם צל רך מתחתיו, ולצידו שם, משפט, מחיר וכפתור 'הוסיפו לסל' שמתחלף ל'נוסף לסל'. עטיפה גבוהה עם במה sticky, ו-JS גוזר מהגלילה ערך התקדמות אחד (0 עד 1) שמניע הכול: השכבות נפרדות בזו אחר זו ומרחפות בתלת-ממד (perspective ו-translate3d), קו ציר מקווקו עובר ביניהן, החלק המאיר נדלק, ולכל שכבה צצה תווית עם מספר, שם, תועלת וקו מוביל. גלילה חזרה מרכיבה אותו. בצד פס התקדמות אנכי עם נקודה לכל שכבה, ולמטה רמז 'גללו כדי לפרק'. בטעינה המוצר מתפרק ונסגר פעם אחת לבד. במחשב השכבות נפרדות באלכסון, במובייל אנכית. למי שביקש פחות תנועה הוא מוצג מפורק. המוצר: [שם המוצר, משפט ומחיר]. השכבות: [5 חלקים, שם ותועלת לכל אחד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 לכל חלק כתבו תועלת ללקוח, לא מפרט: 'לא זז מהשולחן' מוכר יותר מ'משקל 1.2 ק״ג'.

תנועה ואפקטים

סצנת פתיחה עם עומק בגלילה

הנוף זז בשכבות כשגוללים, והפתיחה מרגישה תלת ממדית. סיבה להישאר עוד רגע.

איפה זה עובד: אזור פתיחה של גני אירועים, מלונות, צימרים, נדל״ן ומסעדות

מה צריך להכין

  • כותרת ומשפט פתיחה
  • 3 שירותים ומשפט לכל אחד
  • סמל המקום שיופיע בנוף (עץ, מבנה, חופה)
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן פתיחה עם עומק בגלילה (parallax) לאתר של [שם העסק]: סצנת נוף בגובה המסך, מצוירת ב-SVG וב-CSS, בשכבות מהרחוק לקרוב: שמיים ושמש, רכס הרים, הכותרת, שדה עם [סמל המקום] ושרשרת נורות מהבהבות, וצמחייה כהה בחזית. JS כותב על הסצנה משתנה CSS אחד של התקדמות הגלילה (0 עד 1), וכל שכבה זזה ב-translate3d לפי המשתנה כפול מקדם משלה: הרחוקות מפגרות, החזית מקדימה, השמש שוקעת מאחורי הרכס והכותרת נבלעת מאחורי השדה. מתג 'עומק בגלילה' ('דלוק' או 'כבוי') צף בתחתית: כבוי מאפס את המקדמים במעבר רך והכול נגלל שטוח. בטעינה, ובלחיצה על המתג בראש העמוד, הדף גולש לבד מעט למטה וחוזר. במובייל חצי מהעוצמה. למי שביקש פחות תנועה המתג מתחיל כבוי. מתחת, אזור תוכן מעוגל שעולה על תחתית הסצנה: כותרת ו-3 כרטיסים. הטקסטים: [כותרת ומשפט פתיחה], [3 שירותים ומשפט לכל אחד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 המתג נועד להשוואה. אחרי שבחרתם עוצמה, בקשו מ-Claude להסיר אותו מהקוד.

תנועה ואפקטים

מסילת פרויקטים אופקית בגלילה

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

איפה זה עובד: תיק עבודות, עמוד פרויקטים, דף בית של סטודיו, אדריכלים ומעצבים

מה צריך להכין

  • 5 פרויקטים: שם, עיר, שטח, שנה ומשפט אחד
  • תמונה או איור לכל פרויקט
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן פרויקטים עם מסילה אופקית בגלילה לאתר של [שם העסק]: הסקשן ננעל במקום (position sticky בגובה המסך), ובזמן שגוללים למטה שורת כרטיסי פרויקט נוסעת הצידה עד הכרטיס האחרון, ואז העמוד ממשיך כרגיל. מעל הכרטיסים כותרת, מונה '2 מתוך 5' ופס התקדמות דק שמתמלא לפי הגלילה. הכרטיס שמול המונה מודגש, והשאר קצת קטנים ומעומעמים. גובה אזור הגלילה מחושב ב-JS לפי רוחב השורה, והתזוזה ב-transform בלבד. במובייל, ולמי שביקש פחות תנועה, הסקשן לא ננעל: השורה הופכת לפס החלקה באצבע עם scroll-snap, והמונה והפס מתעדכנים לפי ההחלקה. מעל הסקשן שורת הנחיה עם חץ: לגלול למטה כשהוא ננעל, להחליק הצידה במצב הפס. בטעינה גלילה אוטומטית קצרה שמראה את התנועה ואז משחררת לגולש. כל כרטיס: איור או תמונה, סוג השירות, שם הפרויקט, עיר, שטח ושנה, ומשפט אחד. הפרויקטים: [5 פרויקטים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 חמישה עד שבעה כרטיסים זה הגבול. מסילה ארוכה מדי מרגישה כמו עמוד שנתקע באמצע.

תנועה ואפקטים

טבעת מונה שמתמלאת בגלילה

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

איפה זה עובד: דף הבית, עמוד אודות, עמוד תוכנית או מסלול, דף נחיתה

מה צריך להכין

  • מה המספר סופר (ימים, שלבים, אחוזים)
  • 4 אבני דרך במילה אחת
  • משפט סיום
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי טבעת מונה שמתמלאת בגלילה לאתר של [שם העסק]: מקטע בגובה 3 מסכים, ובמרכזו פאנל מוצמד (position: sticky) עם שורת מותג, כותרת, שורת משנה וטבעת SVG זוהרת בגרדיאנט של צבעי המותג. בתוכה מספר גדול שסופר מ-0 עד 100 לפי עומק הגלילה (stroke-dashoffset ב-requestAnimationFrame) ומתחתיו תווית יחידה. על הטבעת 4 אבני דרך ב-25, 50, 75 ו-100: גלולות מוסתרות עם מספר ומילה, שכל אחת קופצת פנימה כשהמספר עובר אותה. ב-100 הבזק אחד מתרחב מהטבעת ונעלם, המספר קופץ קלות ונצבע בצבע המותג, גלולת ה-100 מתמלאת באותו צבע, ומתחת מופיע משפט סיום. בטעינה הטבעת מתמלאת פעם אחת לבד עד 100 עם כל אלה, משתהה רגע, חוזרת לאפס, ומשם רק הגלילה שולטת. מתחת לפאנל רמז 'גללו כדי לספור' עם חץ קטן שנעלם ברגע שגוללים. התוכן: [כותרת ושורת משנה], [תווית היחידה], [4 אבני דרך], [משפט סיום]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 המספר חייב לספר סיפור, לא אחוזים: 100 ימים, 100 שיעורים. אז אבני הדרך מקבלות משמעות.

אפקטי גלילה

ציטוט שנדלק מילה אחרי מילה בגלילה

הגולש קורא את המשפט הכי חשוב שלכם מילה אחרי מילה, בקצב שלו, ולא מדלג עליו.

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

מה צריך להכין

  • ציטוט של 20 עד 30 מילים
  • שם ותפקיד לחתימה, ומקור הציטוט
  • 2 עד 3 מילים להדגשה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן ציטוט שנדלק בגלילה לאתר של [שם העסק]: רקע כהה בגובה מסך, ובמרכזו משפט גדול מיושר לימין שכל המילים שלו עמומות. מעליו סימן מירכאות ושורת מקור קטנה: [מקור הציטוט]. הסקשן ננעץ (position: sticky בתוך עטיפה של כ-240vh), וככל שגוללים המילים נדלקות אחת אחרי השנייה, ופס דק לצד הציטוט מתמלא מלמעלה למטה באותו קצב. [2 עד 3 מילים להדגשה] נדלקות בצבע המותג. כשהכול מואר עולה מתחת החתימה: [שם ותפקיד], ורק אז הסקשן משתחרר. גלילה חזרה מכבה את המילים ואת החתימה. בטעינה המשפט נדלק פעם אחת לבד, נשאר מואר שתי שניות וחוזר לעמום, וגלילה עוצרת את ההדגמה. לפני הגלילה מוצג למטה רמז 'גללו לאט, המשפט נדלק' עם חץ שזז. למי שביקש פחות תנועה: בלי נעיצה, הכול מואר מראש. כל מילה ב-span, חישוב ב-requestAnimationFrame. הציטוט: [משפט של 20 עד 30 מילים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 משפט אחד, 20 עד 30 מילים. ציטוט ארוך יותר מעייף, והגולש ממשיך לגלול באמצע.

אפקטי גלילה

טקסט ענק שרץ לפי מהירות הגלילה

רצועה שזזה יחד עם הגולש: גוללים מהר והמילים טסות. המסר שלכם נתפס גם בגלילה מהירה.

איפה זה עובד: דף בית בין סקשנים, בתי קפה, מסעדות, סטודיו, אופנה, אירועים

מה צריך להכין

  • 6 צירופים קצרים על העסק, 3 לכל שורה
  • איזו מילה בכל שורה תהיה בקו מתאר
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי רצועת טקסט ענק שרצה לפי מהירות הגלילה לאתר של [שם העסק]: רצועה כהה ברוחב מלא עם שתי שורות של אותיות ענקיות שרצות לרוחב בלי סוף, בכיוונים מנוגדים. בין הצירופים סמל קטן שמסתובב כל הזמן, וצירוף אחד בכל שורה בקו מתאר בלבד. הקצוות נמוגים בעדינות. כשלא גוללים השורות זזות לאט. גלילה מהירה מאיצה אותן ומטה את האותיות לכיוון התנועה (skewX), גלילה למעלה הופכת את הכיוון של שתיהן, וכשעוצרים המהירות וההטיה חוזרות בהדרגה לקצב האיטי, בכיוון האחרון. המהירות נגזרת מהפרש scrollY בכל פריים של requestAnimationFrame עם החלקה, ההזזה ב-transform שקופצת חזרה ברוחב עותק אחד, והלולאה נעצרת מחוץ למסך (IntersectionObserver). במובייל האותיות קטנות יותר. בטעינה גלילה אוטומטית קצרה למטה ובחזרה שמראה את ההאצה וההיפוך. הצירופים: [6 צירופים קצרים, 3 לכל שורה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 צירופים של שתיים או שלוש מילים עובדים הכי טוב. משפט ארוך נקרא רק כשעוצרים.

אפקטי גלילה

כרטיסים שנערמים בגלילה

כל שלב עולה ומכסה את הקודם. תהליך העבודה שלכם נקרא כמו סיפור, צעד אחרי צעד.

איפה זה עובד: תהליך עבודה, עמוד שירותים, דף בית, שיפוצים, קליניקות ומשרדים

מה צריך להכין

  • 5 שלבי עבודה: כותרת, משפט ותגית זמן
  • רעיון לאיור לכל שלב
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן כרטיסים שנערמים בגלילה לאתר של [שם העסק]: מעל הסקשן כותרת ושורת 'גללו למטה'. חמישה כרטיסים גדולים נדבקים לראש המסך (position sticky, כל אחד קצת נמוך מהקודם), והבא עולה ומכסה את הקודם. המכוסה מתכווץ מעט מהקצה העליון ומתכהה, והשוליים של הקודמים מציצים כערימה עם עומק. בכל כרטיס, ברקע אחר מצבעי המותג: מספר גדול, תגית זמן, כותרת, משפט ואיור SVG לצד הטקסט. לצדם מונה דביק: מספר השלב מתגלגל מעל '/05', וחמישה פסים שהם כפתורי גלילה לכרטיס, והפעיל מתארך בצבע המותג. הכיווץ, ההכהיה והמונה מחושבים מ-getBoundingClientRect ב-requestAnimationFrame. בטעינה גלילה אוטומטית קצרה עד הכרטיס השלישי, שנעצרת כשהגולש נוגע. במובייל כרטיסים צרים, האיור למעלה והמונה צר בצד. למי שביקש פחות תנועה: רשימה רגילה בלי הדבקה. השלבים: [5 שלבים: כותרת, משפט ותגית זמן]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 טקסט קצר בכל כרטיס. כרטיס עמוס נחתך כשהוא נדבק לראש מסך של טלפון.

אפקטי גלילה

טקסט נגלל מול תמונה דביקה

הגולש קורא שלב אחרי שלב, והמוצר של כל שלב מופיע לידו בלי לחיצה אחת.

איפה זה עובד: שגרת טיפוח, תהליך עבודה, שלבי שירות, עמוד מוצר, דף נחיתה

מה צריך להכין

  • 4 שלבים עם כותרת ומשפט קצר
  • מוצר ומחיר לכל שלב
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן גלילה בשני טורים לאתר של [שם העסק]: בטור אחד 4 בלוקים של טקסט (מספר ושם שלב, כותרת ומשפט הסבר) שנגללים כרגיל, ובטור השני מסגרת עם פינות עגולות שנשארת דביקה (position: sticky) ומחליפה תוכן לפי הבלוק הפעיל: איור SVG של המוצר שמרחף לאט על רקע מספר השלב בגדול, צבע רקע משלו לכל שלב, ותווית עם שם המוצר, המחיר ומונה '02 / 04'. המעבר הוא cross-fade עם הגדלה קלה, בלי רגע ריק. הבלוק הפעיל בהיר והשאר עמומים, ולצד הטקסט פס התקדמות אנכי שמתמלא, עם נקודה לכל שלב שנדלקת כשמגיעים אליו. השלב הפעיל נקבע ב-requestAnimationFrame לפי getBoundingClientRect מול קו באמצע המסך. במובייל המסגרת נדבקת לראש המסך והטקסט נגלל מתחתיה. בטעינה גלילה אוטומטית קצרה לשלב השני, ואז הגולש ממשיך לבד. השלבים: [4 שלבים עם כותרת, משפט ומוצר עם מחיר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 משפט אחד לכל שלב. בלוק ארוך מדי מושך את העין מרגע ההחלפה במסגרת.

אפקטי גלילה

זום פרלקס: טסים דרך התמונות

הגולש גולל וטס פנימה דרך גלריית התמונות, עד שהנכס המרכזי ממלא את המסך.

איפה זה עובד: נדל״ן, אדריכלים, מלונות בוטיק, אולמות אירועים, תיק עבודות

מה צריך להכין

  • 8 תמונות, אחת חזקה במיוחד למרכז
  • כותרת ושורת פרטים לתמונה המרכזית
  • 4 שירותים עם משפט לכל אחד
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן זום פרלקס לאתר של [שם העסק]: סקשן שננעל במקום (position: sticky במסילה של 320vh) על רקע כהה בצבע המותג, ובו תמונה מרכזית ושבע תמונות בגדלים שונים סביבה, עם פינות עגולות וצל רך, שורת מותג למעלה ורמז 'גללו וטוסו פנימה' עם חץ מקפץ למטה. בגלילה כל תמונה גדלה מהמרכז בקצב אחר (לכל שכבה scale משלה לפי התקדמות הגלילה), כאילו טסים דרכן, והשורה והרמז דועכים. בסוף המרכזית ממלאת את המסך, מתכהה למטה ועולה עליה הכותרת [כותרת] ומתחתיה [פרטי הנכס]. המשך גלילה משחרר ל-[4 שירותים עם משפט לכל אחד]. בטעינה מוצגת קומפוזיציית הפתיחה כשנייה, ואז העמוד גולל לבד עד הסוף בגלילה רכה של כ-3 שניות, מחכה רגע וחוזר לראש, ונעצר כשהגולש נוגע. במובייל חמש תמונות בלבד. למי שביקש פחות תנועה: בלי נעילה, ומוצג המצב הסופי. התמונות: [8 תמונות, החזקה למרכז]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שימו במרכז את התמונה הכי חזקה. רק היא נשארת על המסך, מתחת לכותרת.

אפקטי גלילה

כל תמונה נפתחת מול העיניים כשמגיעים אליה. הגלריה מרגישה כמו מגזין, לא כמו תיקייה.

איפה זה עובד: אולמות אירועים, צלמים, אדריכלים, מסעדות, עמוד אודות

מה צריך להכין

  • 6 תמונות בגדלים ויחסים שונים
  • כותרת ושורת פרטים לכל תמונה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

פתיחת Claude ↗

💡 בחרו תמונות שהעיקר בהן במרכז. העיגול והמלבן נפתחים מהמרכז, ושם העין נוחתת ראשונה.

תנועה ואפקטים

כפתור מגנטי שנמשך לעכבר

הכפתור הראשי זז לקראת העכבר, והעין הולכת אחריו. קריאה לפעולה שקשה לפספס.

איפה זה עובד: אזור פתיחה, דפי נחיתה, אתרי טכנולוגיה, סטודיו ומותגי יוקרה

מה צריך להכין

  • כותרת ומשפט משנה
  • טקסט לכפתור ראשי ולכפתור משני
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי כפתורים מגנטיים לאזור הפתיחה באתר של [שם העסק]: אזור פתיחה על רקע כהה עם רשת עדינה, ובו שורת מותג, כותרת '[כותרת]', משפט משנה ושלושה כפתורים בשורה (במובייל בטור): '[כפתור ראשי]' מלא עם חץ, '[כפתור משני]' בקו מתאר, ושלישי רגיל להשוואה. מתחת לכל אחד תווית קטנה: 'מגנטי' או 'רגיל'. כשהעכבר מתקרב לכפתור מגנטי, הכפתור נמשך אליו וזוהר, התווית שבתוכו זזה קצת יותר ממנו כדי ליצור עומק, ובמקום המקורי נשאר קו מתאר מקווקו. כשמתרחקים הוא חוזר בקפיץ רך. הכפתור הרגיל רק מתבהר. במגע אין משיכה, רק שקיעה קלה בלחיצה. בטעינה סמן עכבר מדומה עובר ליד שני הכפתורים המגנטיים ומושך אותם, נעצר על הרגיל שלא זז, וחוזר על המסלול עד שהגולש מזיז עכבר או נוגע. טכני: קפיץ ב-requestAnimationFrame, משיכה רק כש-pointerType הוא mouse. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שימו את האפקט רק על כפתור אחד או שניים בעמוד. כשהכול מגנטי, שום דבר לא בולט.

תנועה ואפקטים

כרטיסי זרקור שעוקבים אחרי העכבר

האור הולך אחרי העכבר ומדליק כל כרטיס בתורו. השירותים שלכם מקבלים במה.

איפה זה עובד: עמוד שירותים, דף הבית, אזור יתרונות, אתרים כהים של טכנולוגיה וסוכנויות

מה צריך להכין

  • 6 שירותים: כותרת, הסבר ונתון
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גריד כרטיסי זרקור לאתר של [שם העסק]: 6 כרטיסים כהים עם אייקון קו בריבוע מעוגל, כותרת, 2 שורות הסבר ונתון קצר. אלומת אור רכה עוקבת אחרי העכבר בהשהיה קלה, מאירה את פנים הכרטיס וגם את קו המסגרת, והשכנים מקבלים מעט מהאור. ביציאה האור דועך. במגע האור נדלק בנקודת ההקשה ודועך. בטעינה האלומה מטיילת לבד במסלול אליפטי איטי על הכרטיסים, נעצרת במגע או בתזוזת עכבר, וחוזרת אחרי 4 שניות שקט. במובייל: שורות קומפקטיות, אייקון בצד, כותרת ונתון באותה שורה. טכנית: pointermove אחד על הגריד מחשב לכל כרטיס את מיקום האור ביחס אליו. האור הוא עיגול גרדיאנט שזז עם transform, חתוך ב-overflow: hidden: שכבה מתחת לתוכן ושכבה בהירה שרואים רק דרך מסגרת של פיקסל. פחות תנועה: אור קבוע על הכרטיס הראשון, מסגרת מוארת בריחוף. השירותים: [6 שירותים: כותרת, הסבר ונתון]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 האפקט חי רק על רקע כהה. שמרו על אור עדין: אם רואים עיגול ברור, הוא חזק מדי.

תנועה ואפקטים

עדשת לפני ואחרי

הגולש מזיז עדשה על התמונה ומגלה בעצמו מה השתנה. סקרנות שמשאירה אותו בעמוד.

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

מה צריך להכין

  • תמונת לפני ותמונת אחרי מאותה זווית
  • פרטי הפרויקט: מה, איפה וכמה זמן
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עדשת לפני ואחרי לאתר של [שם העסק]: תמונת ה'לפני' במסגרת מעוגלת, ומעליה עדשה עגולה עם טבעת בצבע המותג שעוקבת בריכוך קל אחרי העכבר או האצבע ומגלה את ה'אחרי' באותו מקום. הגלגלת מעל התמונה, או כפתורי פלוס ומינוס עם הכיתוב 'גודל העדשה', מגדילים ומקטינים אותה, וכפתור שהגיע לקצה מתעמעם. בפינות העליונות תוויות שטוחות: 'לפני' כהה, ו'אחרי' לבנה עם מסגרת בצבע הטבעת. בטעינה העדשה מטיילת לבד על התמונה, נעצרת כשהגולש נוגע וחוזרת לטייל כשהוא עוזב. במגע היא מעט מעל האצבע, שלא תוסתר. במקלדת החיצים מזיזים אותה. לצד התמונה, ובמובייל מתחתיה, כפתורי הגודל ופרטי הפרויקט: [סוג החלל ועיר, משך העבודה, מה נעשה]. טכנית: שתי התמונות זו על זו, והעליונה נחתכת ב-clip-path: circle שמתעדכן ב-requestAnimationFrame. התמונות: [תמונת לפני ותמונת אחרי]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 צלמו את ה'אחרי' מאותה נקודה ובאותו גובה כמו ה'לפני'. סטייה קטנה שוברת את האפקט.

תנועה ואפקטים

המחשת חיפוש מול תשובת AI

הגולש רואה את ההבדל בעיניים: בחיפוש רגיל אתם שלישיים, בתשובת AI אתם בתוך התשובה.

איפה זה עובד: דפי נחיתה לקידום אתרים, סוכנויות דיגיטל, עמוד שירות SEO

מה צריך להכין

  • 4 שאלות שלקוחות מקלידים
  • תשובת AI של 2 משפטים לכל שאלה
  • 3 תוצאות חיפוש לכל שאלה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי המחשת חיפוש מול תשובת AI לאתר של [שם העסק]: כרטיס עם מתג מחליק 'חיפוש רגיל' / 'תשובת AI', שורת חיפוש ואזור תוצאות בגובה קבוע. בטעינה שאלה מוקלדת עם סמן מהבהב, ובינתיים שלוש נקודות חשיבה ושורות שלד. אז התשובה נכתבת מילה אחרי מילה: שם העסק במרקר בצבע המשני, ומתחתיה 3 מקורות ממוספרים. הראשון הוא כפתור של העסק בצבע המותג עם חץ קישור: לחיצה מציגה לרגע 'כאן הגולש עובר לאתר שלכם'. משם המתג עובר לבד ל'חיפוש רגיל' וב-cross-fade נכנסות 3 תוצאות (אתר, כותרת, תיאור), העסק שלישי עם תגית 'רק מקום 3'. אז השאלה נמחקת, הבאה מוקלדת וחוזרים ל-AI, בלופ. למטה 'שאלה 1 מתוך 4', כפתור 'השאלה הבאה' ופס דק שמתמלא עד המעבר הבא. ריחוף או פוקוס עוצרים את הלופ והפס, ולחיצה על המתג מחליפה תצוגה מיד. התוכן: [4 שאלות, לכל אחת תשובה של 2 משפטים ו-3 תוצאות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כתבו שאלות כמו שלקוח באמת מקליד. שאלה שיווקית מדי מסגירה שזו הדגמה.

תנועה ואפקטים

אייקונים מונפשים שמציירים את עצמם

האייקונים מצטיירים מול העיניים וממשיכים לזוז. אזור היתרונות מפסיק להיות רשימה יבשה.

איפה זה עובד: אזור יתרונות, עמוד שירותים, דף הבית, קליניקות ונותני שירות

מה צריך להכין

  • 6 יתרונות: כותרת ושורת הסבר
  • תנועה קטנה שמתאימה לכל אייקון
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן יתרונות עם אייקונים מונפשים לאתר של [שם העסק]: שורת מותג, כותרת ומשפט פתיחה, ומתחתם 6 כרטיסים לבנים. בכל כרטיס אייקון SVG קווי בריבוע מעוגל בהיר, כותרת ושורת הסבר. במחשב 3 בשורה עם האייקון מעל הטקסט, במובייל שורות עם האייקון בצד. כשכרטיס נכנס למסך (IntersectionObserver) האייקון מצטייר קו אחרי קו עם stroke-dashoffset, בדירוג בין הכרטיסים, ואז ממשיך בלולאה בתנועה קטנה משלו, למשל לב פועם, מחוגי שעון מסתובבים, וי שמצטייר שוב במגן, פעמון מתנדנד. הקו בצבע המותג, החלק שזז בצבע המשני. ריחוף, הקשה או Enter על האייקון (הוא כפתור) מנגנים את הציור מחדש, והכרטיס מקבל מסגרת בצבע המותג. טכנית: pathLength=1 על כל path, בלי למדוד אורכים. בלי Lottie ובלי פונט אייקונים. בפחות תנועה: אייקונים שלמים וקבועים. היתרונות: [6 יתרונות: כותרת, הסבר ותנועה לאייקון]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 תנועה אחת קטנה לכל אייקון מספיקה. כשכולם קופצים חזק ביחד, העין לא יודעת לאן להסתכל.

תנועה ואפקטים

כפתור ענק עם מסגרת אור מסתובבת

קישור אחד שאי אפשר לפספס: האור שרץ סביבו מושך את העין, והגולש נכנס לגלריה.

איפה זה עובד: מעבר לגלריה, לתיק עבודות או לקטלוג, בסוף עמוד הבית או בין סקשנים

מה צריך להכין

  • כותרת קצרה ושורת משנה
  • קישור לגלריה או לעמוד המרכזי
  • 3 תמונות מייצגות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי כפתור ענק לאתר של [שם העסק] שמוביל אל [קישור לגלריה]: כרטיס כהה ולחיץ ברוחב מלא, ובו כותרת לבנה גדולה '[כותרת]', שורת משנה אפורה '[שורת משנה]' ועיגול בהיר עם חץ. קצת פנימה מהשוליים מסגרת גרדיאנט דקה שמסתובבת לאט, והאור שלה נשפך בעדינות על פני הכרטיס ליד השוליים. מהקצה התחתון מציצות שלוש תמונות ממוזערות, מוטות כמו הדפסים עם שוליים לבנים: [3 תמונות]. בכניסה למסך הכרטיס עולה, התמונות מטפסות אחת אחרי השנייה, ומצב הריחוף מודגם פעם אחת לבד. בריחוף ובפוקוס המסגרת מאיצה, הכרטיס מתרומם והצל מעמיק, והחץ זז קדימה. בלחיצה שקיעה קלה. במובייל הכרטיס גבוה יותר, הכותרת בשתי שורות, שורת המשנה והחץ בתחתית, בלי התמונות. טכני: המסגרת היא ריבוע conic-gradient שמסתובב ב-transform מאחורי פני הכרטיס, והמהירות משתנה בהדרגה ב-requestAnimationFrame. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כותרת של שתיים או שלוש מילים. ככל שהיא קצרה יותר, הכפתור נראה גדול ובטוח יותר.

תנועה ואפקטים

מסך כניסה עם מונה ווילון נפתח

רגע קצר של מותג בזמן שהאתר נטען, ואז העמוד נחשף בתנועה אחת נקייה.

איפה זה עובד: אדריכלים, מעצבי פנים, סטודיו, צלמים, אתרי תדמית, עמוד הבית

מה צריך להכין

  • לוגו בקובץ SVG או PNG שקוף
  • כותרת בשתי שורות ומשפט פתיחה
  • 4 שירותים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מסך כניסה לאתר של [שם העסק]: בטעינה מסך מלא בצבע המותג הכהה, במרכזו הלוגו ושורת [תחום], ובתחתית מונה גדול עם % שרץ מ-0 עד 100 (מהר בהתחלה, לאט בסוף) לצד פס התקדמות דק שמתמלא איתו. קווים דקים מחלקים את המסך לחמישה פסים אנכיים. ב-100 הלוגו והמונה דועכים והפסים עולים בזה אחר זה מימין לשמאל כמו וילון. העמוד שמאחור נכנס: שתי שורות הכותרת עולות כל אחת ממסכה (overflow hidden), ואחריהן בעלייה מדורגת שורת מיקום, משפט, 4 שירותים ממוספרים, כפתור 'קבעו פגישת היכרות' ושרטוט קווי של חזית בית עם קו מידה. 'דילוג' ו-Esc פותחים את הווילון מיד, ו'הפעלה מחדש' בראש העמוד מריץ שוב. המונה ב-requestAnimationFrame. בפחות תנועה העמוד מוצג מיד, ו'הפעלה מחדש' מציג את מסך הכניסה סטטי לשנייה. התוכן: [קישור ללוגו], [כותרת בשתי שורות ומשפט], [4 שירותים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כניסה של עד 3 שניות, ורק בעמוד הבית. בעמודים פנימיים היא רק מעכבת את הגולש.

תנועה ואפקטים

כותרות קינטיות: שלוש כניסות טקסט

הכותרת נבנית מול העיניים ונשארת קריאה. הגולש עוצר לקרוא במקום לגלול הלאה.

איפה זה עובד: מגזינים ובלוגים, ראש עמוד הבית, פתיחת כתבה או עמוד שירות

מה צריך להכין

  • 3 כותרות קצרות לכתבות
  • תווית מדור, שורת משנה וכותב לכל כתבה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן כותרות קינטיות לאתר של [שם העסק]: שלוש לשוניות, ובכל אחת כתבה עם כניסה אחרת. 'אותיות ממסכה': האותיות עולות אחת אחת מקו נסתר. 'מילים מטשטוש': המילים מתחדדות מ-filter: blur (רק בכניסה). 'פענוח': אותיות עבריות אקראיות בצבע המותג מתחלפות וננעלות אחת אחת עד שהמשפט מתייצב. מעל הכותרת תווית מדור, מתחתיה שורת משנה וכותב שנכנסים אחריה, מילת מפתח בצבע המותג ומספר הכתבה ענק ושקוף ברקע. האפקט רץ כשהכותרת נכנסת למסך (IntersectionObserver), במעבר לשונית ובכפתור 'נגנו שוב'. בטעינה הלשוניות מתחלפות לבד כל 5 שניות עם פס התקדמות, עד שבוחרים לשונית. ריחוף על מילה (הקשה בטלפון) מערבל אותה, ושורת רמז מסבירה. הכתבות באותו תא בגריד עם cross-fade. לקורא מסך טקסט נסתר מלא, והעותק המונפש aria-hidden. התוכן: [3 כותרות, מדור, שורת משנה וכותב]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 תנו אפקט רק לכותרת הראשית. כשכל כותרת בעמוד זזה, אף אחת כבר לא בולטת.

תנועה ואפקטים

סמן מותאם שמגיב לאלמנטים

הסמן משתנה מעל קישור, תמונה, כפתור וטקסט, והאתר מרגיש מוקפד כמו של מותג יוקרה.

איפה זה עובד: אתרי יוקרה, סטודיו, תיקי עבודות, חנויות בוטיק. במחשב בלבד

מה צריך להכין

  • כותרת ופסקה קצרה
  • טקסט לקישור ולכפתור
  • תמונת מוצר עם שם ומחיר
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סמן עכבר מותאם לאתר של [שם העסק]: אזור פתיחה בהיר עם כותרת, פסקה, כפתור כהה, קישור ותמונת מוצר. הסמן הרגיל מוחלף בנקודה קטנה ובטבעת דקה שעוקבת אחריה באיחור רך. על הקישור הטבעת גדלה ומתמלאת בגוון שקוף, על התמונה היא הופכת לעיגול מלא עם המילה 'צפייה' והנקודה נעלמת, על הכפתור היא עוזבת את העכבר ונצמדת לצורה שלו, ועל הפסקה היא הופכת לקו אנכי דק. בלחיצה היא מתכווצת לרגע והאלמנט שוקע מעט. מתחת מקרא של ארבעת המצבים, והפעיל מודגש בקו זהב. בטעינה סמן מדומה עובר בלולאה בין האלמנטים ולוחץ פעם על הכפתור, עד שהגולש מזיז עכבר. במגע אין סמן מותאם, רק ההדגמה ושורת הסבר קצרה. לחיצה על אלמנט מציגה הודעה קטנה בתחתית. טכני: lerp ב-requestAnimationFrame, מעקב רק כש-pointerType הוא mouse. התוכן: [כותרת, פסקה, טקסט לקישור ולכפתור, תמונת מוצר עם שם ומחיר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 אל תסתירו את הסמן הרגיל בטפסים ובשדות טקסט. שם אנשים צריכים לראות בדיוק איפה הם.

אזור פתיחה

הירו עם אתרים מתחלפים על מחשב וטלפון

כבר בשנייה הראשונה הגולש רואה עבודות אמיתיות — בלי לגלול.

איפה זה עובד: דף הבית של סוכנות, מעצב, צלם או כל עסק עם תיק עבודות

מה צריך להכין

  • 5–10 צילומי מסך של עבודות
  • כותרת ומשפט משנה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה (הירו) לדף הבית של [שם העסק]: כותרת חזקה '[הכותרת]', משפט משנה וכפתור וואטסאפ, ולצידם מוקאפ של מחשב נייד וטלפון מצוירים ב-CSS. במסכים מתחלפות תמונות העבודות [קישורים לתמונות] עם מעבר עמעום, והתמונה גוללת לאט בתוך המסך כאילו מישהו גולש באתר. עדיף CSS בלבד, בלי JavaScript. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 צילומי מסך ארוכים (של כל העמוד) נראים הכי טוב — הגלילה בתוך המסך מראה את כל האתר.

אזור פתיחה

טיפוגרפיה חיה

הכותרת נבנית מול העיניים ומילה אחת מתחלפת — תשומת לב מהשנייה הראשונה.

איפה זה עובד: אזור פתיחה של כל אתר שרוצה להרגיש עדכני

מה צריך להכין

  • כותרת
  • 3–4 מילים מתחלפות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה טיפוגרפי ל-[שם העסק]: הכותרת '[הכותרת]' נחשפת מילה אחרי מילה עם טשטוש שנפתח, נצנוץ גרדיאנט שעובר על המילה '[מילת מפתח]', קרוסלת מילים שמתהפכת בתלת-ממד ('אנחנו בונים: [מילה 1] / [מילה 2] / [מילה 3]'), וכפתור מגנטי שנמשך קלות לעכבר. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 המילים המתחלפות = השירותים שלכם. ככה הגולש מבין את כל ההיצע ב-5 שניות.

אזור פתיחה

הירו קולנועי בלי וידאו

נראה כמו וידאו רקע — אבל נטען מיד ולא מאט את האתר.

איפה זה עובד: מותגים, סטודיו, מוצרים פרימיום

מה צריך להכין

  • כותרת
  • משפט משנה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה קולנועי ל-[שם העסק] שנראה כמו וידאו אבל בנוי מ-CSS בלבד: הבזקי אור בגרדיאנט שזזים לאט, חלקיקים מרחפים, שכבת גרעין עדינה, פרלקסה של 3 שכבות לפי העכבר, וכותרת '[הכותרת]' עם משפט משנה שנכתב כמו במכונת כתיבה. רק transform ו-opacity, 60 פריימים. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 וידאו רקע אמיתי שוקל מגה-בייטים ומוריד ציון מהירות. זה נותן את אותה הרגשה בחינם.

אזור פתיחה

הירו עם שאלון ב-3 שלבים

הגולש עונה על 3 שאלות בלחיצה כבר במסך הראשון, ואתם מקבלים ליד מסונן עם כל הפרטים.

איפה זה עובד: דף נחיתה לקמפיין, עמוד הבית של נותני שירות

מה צריך להכין

  • כותרת ושורת משנה
  • כותרת לכרטיס השאלון
  • 3 שאלות עם 4 תשובות לכל אחת
  • מספר וואטסאפ

הפרומפט — מחליפים את מה שמסומן

בנה לי הירו עם שאלון לאתר של [שם העסק]: רקע כהה עם כתמי גרדיאנט רכים שזזים. בצד אחד כותרת, שורת משנה, צ'יפים של יתרונות ושורת דירוג. בצד השני כרטיס בהיר שבולט על הרקע: תג 'זמין עכשיו' שפועם, כותרת ושורה שמסבירה מה מקבלים בסוף, פס התקדמות ומונה 'שאלה 1 מתוך 3'. שלוש שאלות, בכל אחת 4 תשובות בשורות עם אייקון. לחיצה מסמנת את התשובה לרגע בצבע המותג ומעבירה הלאה (יש 'חזרה'). אחריהן שם וטלפון עם בדיקת נייד ישראלי, ומסך תודה שפונה בשם הפרטי, מסכם את התשובות ומציע כפתור וואטסאפ ל-[מספר בפורמט 972] עם הודעה שכוללת אותן, וכפתור 'מילוי מחדש'. בטעינה הדגשה עוברת פעם אחת על התשובות ונעצרת כשנוגעים בכרטיס. במובייל הכרטיס מתחת לכותרת ושורת הדירוג מוסתרת. השאלות: [3 שאלות ותשובות]. היתרונות: [3 יתרונות]. כותרת הכרטיס: [מה מקבלים בסוף]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כתבו בכותרת הכרטיס מה מקבלים בסוף השאלון. בלי הבטחה ברורה, פחות אנשים מתחילים.

אזור פתיחה

הירו מגזיני עם קשת ומדליון

פתיחה שנראית כמו שער של מגזין: תמונה בקשת, הפנים שלכם ופריט אחד שקופץ לעין.

איפה זה עובד: מותג אישי, תיווך ונדל״ן, קליניקות, מעצבים, סופרים ומרצים

מה צריך להכין

  • תמונת אווירה לגובה ודיוקן
  • כותרת בשלוש שורות ופסקה קצרה
  • פריט אחד להבלטה בכרטיס
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה בסגנון מגזין לאתר של [שם העסק]: רקע בהיר ושתי עמודות. בצד הטקסט: שורת פתיח עם קו זהב, כותרת סריפית בשלוש שורות שבה מילה אחת מנצנצת בגרדיאנט זהב, פסקה, שני כפתורים ושורת אמון. בצד השני: תמונה במסגרת קשת עם קו מתאר דק מאחוריה, מדליון דיוקן עגול שחופף לתחתית הקשת, וכרטיס קטן שחופף לצד השני: תמונה ממוזערת, תווית 'חדש בשוק', שם, מחיר ונקודה פועמת. המדליון והכרטיס מרחפים בעדינות, כל אחד בקצב שלו. מעל הכול הדר צף בצורת גלולה: לוגו, 4 קישורים וכפתור. בטעינה כניסה מדורגת: ההדר, שורות הכותרת שעולות מתוך מסכה, הקשת, המדליון והכרטיס. במובייל הקשת מעל הטקסט, ובהדר רק לוגו וכפתור. לכותרת פונט Frank Ruhl Libre, לנצנוץ background-clip: text עם הזזת background-position. התוכן: [כותרת, פסקה, תמונת אווירה, דיוקן ופריט להבלטה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו תמונה לגובה שהנושא שלה במרכז. הקשת חותכת את שתי הפינות העליונות.

אזור פתיחה

הירו עם טופס מהיר: שם וטלפון

שם וטלפון כבר במסך הראשון. מי שהגיע מוכן משאיר פרטים בלי לגלול ובלי לחפש.

איפה זה עובד: עורכי דין, יועצים, קליניקות, דפי נחיתה לקמפיין

מה צריך להכין

  • כותרת ושורת משנה
  • זמן התגובה שאתם מתחייבים אליו
  • כתובת לפניות (וובהוק או מערכת לידים)
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה עם טופס מהיר לאתר של [שם העסק]: רקע בהיר עם שני עיגולים דקים חופפים שנעים לאט, שורת מותג, כותרת גדולה מיושרת לימין עם מילה מודגשת בקו, ושורת משנה. הטופס הוא חלק מהכותרת: קפסולה לבנה עם 'שם מלא', 'טלפון נייד' וכפתור 'חזרו אליי' בשורה אחת, ומתחתיה שורת אמון עם אייקונים: [זמן תגובה], דיסקרטיות, בלי התחייבות. בדיקת שם ומספר ישראלי: בשגיאה תווית השדה הופכת להודעה עדינה בגוון חם ('נראה שחסרה ספרה, בדקו שוב'), עד שמקלידים שוב. בשליחה ספינר ו'שולחים' בכפתור, ואז מסך תודה במקום הטופס ובאותו גודל: 'תודה' עם השם הפרטי, המספר שהוקלד וקישור 'תיקון פרטים' שמחזיר לטופס. בטעינה החלקים נכנסים בהדרגה, ובשדה השם מוקלדת דוגמה מתחלפת עד שנוגעים בטופס. במובייל השדות אחד מעל השני והכפתור ברוחב מלא. שליחה ב-fetch אל [כתובת לפניות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הבטיחו זמן תגובה רק אם תעמדו בו. שורת האמון עובדת כשהטלפון באמת מצלצל בזמן.

אזור פתיחה

הירו מפוצל וכרטיס תמונה עם הצעה

הגולש מבין בשנייה מי אתם ומה עושים, והתמונה עצמה מציעה לו את הצעד הבא.

איפה זה עובד: דף הבית של קייטרינג, מסעדות, ספקים, אולמות ונותני שירות

מה צריך להכין

  • כותרת, תת-כותרת ושני כפתורים
  • שלושה מספרים עם תווית
  • תמונה לגובה, ולשכבה שעליה: כותרת, מחיר וכפתור
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן פתיחה (הירו) מפוצל לאתר של [שם העסק]: מימין שורת פתיח קטנה עם קו בצבע המותג, כותרת גדולה בשתי שורות שמילה אחת בה מסומנת במרקר, תת-כותרת, שני כפתורים ומתחתם שורת אמון עם שלושה מספרים גדולים שנספרים מאפס בטעינה. משמאל כרטיס תמונה גדול עם פינות מעוגלות, מאחוריו משטח מוטה בצבע המותג, והתמונה בזום איטי שלא נפסק. בתחתית הכרטיס שכבה כהה שמציצה: נקודה פועמת וכותרת קטנה. בריחוף או בפוקוס היא עולה ב-translateY וחושפת שורת מחיר וכפתור. בטעינה הטקסט נכנס בדירוג מלמטה, הכרטיס נכנס מהצד, והשכבה עולה פעם אחת לבד ל-3 שניות ויורדת. במובייל ובמסכי מגע הכרטיס מתחת לטקסט, השכבה פתוחה תמיד והכפתורים ברוחב מלא. התוכן: [כותרת, תת-כותרת, שני כפתורים, שלושה מספרים עם תווית, תמונה לגובה, וכותרת, מחיר וכפתור לשכבה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו תמונה לגובה שהשליש התחתון שלה רגוע. שם יושבת השכבה עם הכותרת והכפתור.

אזור פתיחה

הירו וידאו שהעמוד מחליק מעליו

הפתיחה נשארת במקום והעמוד עולה מעליה כמו כרטיס. הגלילה הראשונה כבר מרגישה אחרת.

איפה זה עובד: דף בית של מוסכים, קבלנים, סטודיו, מסעדות ועסקי שירות עם סרטון טוב

מה צריך להכין

  • סרטון רקע קצר
  • שורת פתיח, כותרת ומשפט הסבר
  • 3 נקודות אמון ו-4 שירותים עם מחיר התחלתי
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה דביק לאתר של [שם העסק], שהעמוד מחליק מעליו: הירו כהה בגובה המסך עם וידאו רקע [קישור לסרטון] בלופ ובלי קול, ושכבת הכהיה בצד של הטקסט. בתוכו, בכניסה מדורגת: גלולה עם נקודה פועמת ושורת פתיח, כותרת גדולה בשלוש שורות שהאחרונה בצבע המותג, משפט הסבר, כפתור ראשי לוואטסאפ [מספר בפורמט 972], כפתור משני שגולל ברכות לסקשן הבא ושורת אמון עם [3 נקודות אמון]. ההירו ב-position: sticky, והסקשן הבא, בהיר עם [4 שירותים ומחיר התחלתי], עולה מעליו כמו כרטיס עם פינות עליונות מעוגלות וצל. ככל שהכרטיס עולה, תוכן ההירו מתעמעם, קטן ומתרחק והווידאו מתכהה, לפי מיקום הגלילה. בטעינה העמוד גולל לבד פעם אחת מעט למטה וחזרה, ונעצר כשהגולש נוגע. במובייל אותו אפקט, עם כפתורים ברוחב מלא. בלי overflow: hidden על אלמנט אב, אחרת ה-sticky נשבר. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 סרטון של 8 עד 12 שניות, בלי קול ועד 3 מגה. סרטון כבד מעכב את כל העמוד.

אזור פתיחה

הירו כהה עם גלולות של תחומים

הגולש רואה מיד במה אתם עוסקים, ומרחף על תחום כדי לקרוא עליו בלי לעזוב את המסך הראשון.

איפה זה עובד: משרדי רואי חשבון, עורכי דין, יועצים, קליניקות, דף הבית

מה צריך להכין

  • כותרת ומשפט משנה
  • 4 תחומי עיסוק עם תיאור קצר לכל אחד
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן הירו לאתר של [שם העסק]: רקע כהה אחיד ובפינה [מוטיב שקט מהתחום, למשל גרף עמודות] שנושם לאט. שורת מותג, כותרת בשתי שורות (השנייה בגוון בהיר), משפט משנה, קו מפריד דק, שורת גלולות עם תחומי העיסוק ושני כפתורים: ראשי 'לתיאום פגישה' עם חץ שפותח וואטסאפ ל-[מספר בפורמט 972], ומשני בקו מתאר 'תחומי השירות' שגולל לסקשן הבא. בטעינה הגלולות נכנסות אחת אחת. גלולה שמרחפים עליה או נוגעים בה מתמלאת בצבע המותג, ומשפט המשנה מתחלף ב-cross-fade לתיאור התחום, שנפתח בשמו מודגש. כל המשפטים באותו תא grid, כך שהגובה לא קופץ. כשהעכבר עוזב חוזר המשפט הכללי. עד הנגיעה הראשונה רץ סיור: כל 3 שניות נדלקת הגלולה הבאה, וקו צבעוני מתקדם על המפריד. במובייל הגלולות נגללות לרוחב עם scroll-snap והכפתורים ברוחב מלא. התוכן: [כותרת ומשפט משנה], [4 תחומים עם תיאור קצר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כתבו לכל תחום משפט אחד באורך דומה. כשהתיאורים שווים באורכם, החילוף נראה חלק ונקי.

אזור פתיחה

הירו תמונות מתחלפות, לוגו ותגיות

הגולש נוחת על תמונות האווירה של העסק, ובמבט אחד מבין מי אתם ומה מציעים.

איפה זה עובד: מסעדות, קונדיטוריות, סדנאות, צימרים, אולמות אירועים, סטודיו

מה צריך להכין

  • 4 תמונות רקע לרוחב, אחת לכל תגית
  • לוגו, כותרת ו-4 תגיות קצרות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה (הירו) במסך מלא לאתר של [שם העסק]: 4 תמונות רקע [קישורים לתמונות] שמתחלפות כל 6 שניות ב-cross-fade של 1.6 שניות עם זום עדין ורציף, ומעליהן שכבת כהות ששומרת על קריאות. במרכז: הלוגו [קישור ללוגו] בעיגול בהיר, כותרת '[הכותרת]' בשתי שורות (השנייה בצבע המשני) ושורת תגיות מופרדות בקו דק: [4 תגיות, אחת לכל תמונה]. כל תגית היא כפתור: לחיצה עליה קופצת לתמונה שלה, והתגית של התמונה שמוצגת מודגשת בקו תחתון. למטה: נקודות ניווט, כפתור השהיה והפעלה, ופס התקדמות דק לרוחב המסך שמתמלא עד ההחלפה ומתחיל מחדש בכל שקופית. בטעינה הלוגו, הכותרת והתגיות נכנסים בזה אחר זה, והמצגת כבר רצה. במובייל התגיות נשברות לשתי שורות של שתיים, והחלקה באצבע מחליפה שקופית. במצב פחות תנועה: תמונה קבועה בלי פס, והנקודות והתגיות עדיין עובדות. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כתבו תגיות של מילה או שתיים. במובייל הן יושבות שתיים בשורה, ותגית ארוכה שוברת את הסדר.

אזור פתיחה

הירו עם מילה מתחלפת בכותרת

מילה אחת מתחלפת בכותרת ומציגה את כל השירותים שלכם, בלי להעמיס על המסך הראשון.

איפה זה עובד: דף הבית של סוכנויות ביטוח, משרדים, קליניקות ונותני שירות

מה צריך להכין

  • סרטון רקע קצר ותמונת פוסטר
  • פתיח לכותרת ו-3 מילים מתחלפות
  • משפט משנה וטקסט לכפתור
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן הירו לאתר של [שם העסק]: וידאו רקע בלופ ובלי קול (muted, playsinline), עם שכבה כהה שמתחזקת בצד של הטקסט. התוכן מיושר לימין: שורת מותג עם סמל, שם העסק ו-[עיר], ומתחתיה כותרת '[פתיח הכותרת]' שהמילה האחרונה בה מתחלפת כל שתי שניות בין [3 מילים מתחלפות]. המילה היוצאת מחליקה למעלה ונעלמת, הבאה עולה מלמטה באותו רגע, ותחתיה קו מעוגל בצבע המותג שמצטייר מחדש מימין לשמאל בכל החלפה. מתחת [משפט משנה] וכפתור אחד '[טקסט הכפתור]'. בטעינה הכול נכנס בזה אחר זה. רוחב אזור המילה קבוע לפי המילה הארוכה, כדי שהשורה לא תקפוץ. קורא מסך מקבל משפט מלא אחד עם כל המילים, והאנימציה מוסתרת ממנו ב-aria-hidden. במובייל הכותרת בשתי שורות: המילה המתחלפת בשורה משלה. למי שביקש פחות תנועה: מילה אחת קבועה עם הקו, ופוסטר במקום וידאו. הסרטון: [קישור לסרטון ולתמונת פוסטר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו שלוש מילים באורך דומה. מילה ארוכה בהרבה מהאחרות משאירה חור בסוף השורה.

אזור פתיחה

הירו חנות עם סליידשואו מוצרים

הגולש רואה מיד את הקולקציות המובילות ואת ההצעה, ולחיצה אחת מביאה אותו למוצר.

איפה זה עובד: דף הבית של חנות אונליין: תכשיטים, אופנה, קוסמטיקה, עיצוב הבית

מה צריך להכין

  • 3 תמונות מוצר או קולקציה
  • כותרת, משפט ומחיר לכל שקופית
  • תג הצעה וקישור לכל שקופית
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה (הירו) לדף הבית של החנות של [שם החנות]: סליידשואו של 3 שקופיות. בכל שקופית תמונה גדולה בצד אחד ועליה תג הצעה כמו 'משלוח חינם מעל ₪300', ובצד השני שם הקטגוריה, כותרת מכירה קצרה, משפט אחד, כפתור 'לקולקציה' ולידו מחיר 'החל מ-'. השקופיות מתחלפות לבד כל 6 שניות ב-cross-fade, התמונה מתקרבת לאט, ושורות הטקסט והתג נכנסים מחדש מלמטה, אחד אחרי השני, בכל שקופית. ניווט: שני חיצים, מקשי החיצים, החלקה באצבע, ושלושה פסים קצרים שהפעיל בהם מתמלא כפס התקדמות עד ההחלפה. ריחוף, פוקוס מקלדת או אצבע על המסך עוצרים את הטיימר ואת הפס. במובייל התמונה למעלה והטקסט מתחתיה, וכל השקופיות באותו גובה כדי שהעמוד לא יקפוץ. השקופיות: [3 שקופיות: תמונה, קטגוריה, כותרת, משפט, מחיר, תג הצעה וקישור]. אם אין תמונה, צייר את המוצר ב-SVG. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 השקופית הראשונה היא היחידה שכולם רואים. שימו בה את רב המכר, לא את המוצר החדש.

אזור פתיחה

הירו עם תמונה שמתחלפת בכל כניסה

כל ביקור נפתח בתמונה אחרת מהתיק. האתר מרגיש חי, בלי קרוסלה שמסיחה את הדעת.

איפה זה עובד: צלמים, אדריכלים, מעצבי פנים, גלריות, סטודיו לעיצוב

מה צריך להכין

  • 7 תמונות לרוחב, עם שם ומקום לכל אחת
  • כותרת, משפט פתיח ו-4 שירותים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן הירו מונוכרומי לאתר של [שם העסק]: שורת מותג דקה (שם העסק מימין, [עיר] משמאל), מסגרת תמונה גדולה, ומתחתיה על רקע בהיר עם הרבה אוויר: כותרת ענקית בשני חלקים (השני באפור), ולצידה משפט פתיח ו-4 שירותים עם קו דק מעל כל אחד. בכל טעינה JS מגריל תמונה אחת מהסט, בשחור לבן. התמונה נחשפת במסכה איטית מלמטה למעלה (כ-1.8 שניות: עטיפה ב-translateY ותוכן ב-translateY הפוך) וממשיכה בזום איטי, ומעליה גרעין פילם שרוטט. בפינה התחתונה מונה '03 / 07' שמריץ מספרים חצי שנייה ונעצר על התמונה שנבחרה, מתחתיו שם התמונה, ומולו כפתור 'עוד תמונה' שמגריל תמונה אחרת וחושף אותה מעל הקודמת. הטקסטים נכנסים בדירוג מלמטה. במובייל המסגרת בגובה חצי מסך והכול בטור אחד. התוכן: [כותרת], [משפט פתיח], [4 שירותים], [7 תמונות עם שם ומקום]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו תמונות לרוחב שהנושא שלהן במרכז. במובייל המסגרת צרה והצדדים נחתכים.

אזור פתיחה

הירו באנר: תמונה רחבה ושלוש כותרות

פתיחה נקייה שקל לקרוא: תמונה אחת רחבה, ומתחתיה מסר ברור וכפתור אחד.

איפה זה עובד: דף הבית של עסק שירות, מרכזי למידה, משרדים, עמותות, יבואנים

מה צריך להכין

  • תמונת באנר לרוחב (או תיאור לאיור)
  • כותרת, סלוגן ומשפט הסבר
  • טקסט וקישור לכפתור
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה קלאסי לאתר של [שם העסק]: הדר דק עם לוגו ו-3 קישורים (במובייל רק הלוגו, ממורכז), ומתחתיו תמונת באנר ברוחב מלא ובגובה קבוע, כ-320 פיקסלים במחשב ו-220 במובייל, שממלאת את השטח עם object-fit: cover. מתחת לבאנר, על רקע בהיר ונקי, הכול ממורכז: כותרת ראשית גדולה, סלוגן בצבע המותג, קו קישוט דק עם מעוין קטן במרכזו, משפט הסבר וכפתור עם חץ, שבמובייל נמתח לרוחב. בטעינה הבאנר נחשף בזום החוצה עדין (scale מ-1.15 ל-1 יחד עם opacity), ואז עולים בדירוג הכותרת, הסלוגן, המשפט והכפתור, והקו מצטייר מהמרכז לצדדים עם scaleX. החץ בכפתור זז קלות כל כמה שניות, ובריחוף הכפתור מתרומם. אם אין תמונה, צייר במקומה איור SVG רחב של [תחום] בצבעי המותג, שהנושא שלו במרכז וכמה פרטים בו מרחפים לאט. התוכן: [תמונת באנר, כותרת, סלוגן, משפט וטקסט לכפתור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו תמונה לרוחב שהנושא שלה באמצע. במובייל רואים רק את החלק המרכזי שלה.

אזור פתיחה

הירו קרם עם סליידשואו ושני כפתורים

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

איפה זה עובד: דף הבית של מרפאות, קליניקות, סטודיו, טיפוח ונותני שירות

מה צריך להכין

  • 3 תמונות עם שם ושורת הסבר לכל אחת
  • כותרת קטנה, כותרת ראשית ופסקה קצרה
  • טקסט ויעד לשני הכפתורים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן פתיחה (הירו) רך לאתר של [שם העסק], על רקע קרם בהיר: בצד אחד כותרת קטנה '[כותרת קטנה]' שהיא ה-H1, כותרת גדולה '[כותרת ראשית]' שחלקה בצבע המותג, פסקה קצרה ושני כפתורים: מלא '[כפתור ראשי]' ומתאר '[כפתור משני]'. בצד השני מסגרת לבנה מעוגלת עם סליידשואו של [3 תמונות], ולכל תמונה תווית בהירה בתחתית עם שם ושורת הסבר. התמונות מתחלפות ב-cross-fade כל 4 שניות עם זום איטי, ומתחת למסגרת נקודות ניווט: הנקודה הפעילה היא גלולה שמתמלאת עד ההחלפה. ריחוף או פוקוס עוצרים את ההחלפה. מאחורי המסגרת שתי צורות אורגניות בצבע המותג, מלאה ושקופה למחצה, שמסתובבות לאט בכיוונים הפוכים. בטעינה הכול נכנס בהדרגה. במובייל המסגרת מעל הטקסט, הכול ממורכז והכפתורים ברוחב מלא. עד שיהיו תמונות, צייר במקומן איורי SVG וגרדיאנטים. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו 3 תמונות באותו סגנון ובאותה תאורה. תמונות שונות מדי הופכות את הדעיכה לקפיצה.

אזור פתיחה

הירו טיפוגרפי בשלוש כותרות

שם העסק ממלא את המסך והמסר נבנה שורה אחרי שורה. פתיחה חזקה גם בלי תמונה אחת.

איפה זה עובד: יועצים, משרדים, פיננסים, עסקים שעוד אין להם צילומים טובים

מה צריך להכין

  • 3 תחומים ו-3 שירותים
  • משפט מפתח בשלושה חלקים קצרים
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן פתיחה טיפוגרפי לאתר של [שם העסק], בלי תמונה: שלוש כותרות ממורכזות זו מעל זו. למעלה שורה קטנה של התחומים עם קו אנכי דק ביניהם: [3 תחומים]. מתחתיה שם העסק ענק בשורה אחת, בגודל clamp שמתכווץ בטלפון. מתחתיו משפט מפתח בשלושה חלקים קצרים, האחרון בצבע המשני, ובמובייל כל חלק בשורה משלו: [משפט מפתח בשלושה חלקים]. בסוף שורת שירותים מופרדת בנקודות: [3 שירותים], וכפתור '[טקסט הכפתור]' שפותח וואטסאפ למספר [מספר בפורמט 972], עם חץ בעיגול שזז קלות בלולאה. בטעינה כל שורה עולה מתוך מסכה (overflow: hidden) בתורה מלמעלה למטה, ואחרי שהשם נכנס מצטייר מתחתיו מימין לשמאל קו תחתון מעוגל ב-SVG עם stroke-dashoffset. הרקע בהיר, עם שלושה כתמי גרדיאנט רכים בצבעי המותג שנעים לאט בלולאה. הסקשן בגובה המסך והתוכן במרכזו. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שם קצר עובד הכי טוב. שם ארוך משתי מילים? שימו בגדול רק את המילה הראשונה.

אודות ולמה אנחנו

אודות: תמונה לצד שלוש סיבות ורשימה

הגולש מבין בשלוש נקודות למה לבחור בכם ולמי אתם מתאימים, ולוחץ על הצעת מחיר.

איפה זה עובד: דף הבית, עמוד אודות, עסקים שעובדים גם עם מוסדות וחברות

מה צריך להכין

  • תמונה אחת טובה של העבודה שלכם
  • 3 סיבות לבחור בכם: כותרת ומשפט לכל אחת
  • 4 סוגי לקוחות שאתם עובדים איתם
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן 'למה לעבוד איתנו' לאתר של [שם העסק]: בצד אחד תמונה גדולה במסגרת מעוגלת עם פינה אחת עגולה במיוחד וקו מתאר דק שמציץ מאחוריה. על שולי התמונה צף תג לבן שמרחף לאט: אייקון עם טבעת פועמת, שורה מודגשת ושורה קטנה. בצד השני תווית, כותרת, שלוש נקודות ממוספרות 01 עד 03 (מספר באריח מעוגל שמתמלא בצבע בריחוף, כותרת ומשפט), כרטיס לבן 'עם מי אנחנו עובדים' עם סימני וי בשני טורים, וכפתור 'קבלו הצעת מחיר' עם עיגול חץ שזז בריחוף ולידו שורה קטנה. כשהסקשן נכנס למסך (IntersectionObserver) התמונה והטקסט נכנסים בדירוג, חלק אחרי חלק, והתג קופץ אחרון. בגלילה התמונה זזה מעט בתוך המסגרת (parallax). במובייל התמונה לרוחב מעל הטקסט והרשימה בטור אחד. התוכן: [קישור לתמונה], [טקסט לתג], [כותרת], [3 סיבות עם כותרת ומשפט], [4 סוגי לקוחות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו תמונה שמראה את העבודה עצמה, לא תמונת סטוק. ובנקודות כתבו עובדות, לא סיסמאות.

אודות ולמה אנחנו

אודות חצי-חצי עם תמונה עד הקצה

סקשן אודות שקט ונקי: פסקה אחת מול תמונה גדולה שנחשפת בגלילה. נראה כמו אתר של סטודיו.

איפה זה עובד: דף הבית, עמוד אודות, אדריכלים, מעצבים, קליניקות, משרדים

מה צריך להכין

  • תמונה אחת גדולה ואיכותית, עם כיתוב קצר
  • תווית, כותרת ופסקה אחת של 3 עד 4 משפטים
  • שם ותפקיד לשורת החתימה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן אודות חצי-חצי לאתר של [שם העסק]: שני חצאים שווים ברוחב מלא. בחצי הימני: תווית קטנה עם קו קצר לפניה, כותרת, קו דק לכל רוחב הטקסט, פסקה אחת ושורת חתימה (שם מודגש ותפקיד). בחצי השמאלי תמונה שממלאת אותו עד קצה המסך, בלי פינות עגולות, עם כיתוב קטן בפינה ורקע בצבע המשני מתחתיה. כשהסקשן נכנס למסך (IntersectionObserver) התמונה נחשפת במסכה שנפתחת מקו האמצע אל קצה המסך: עטיפה עם overflow:hidden ושני translateX מנוגדים, כך שהתמונה לא זזה, ובמקביל זום מ-1.14 ל-1. הטקסט עולה בדירוג, והקו מצטייר ב-scaleX מתחילת השורה. אחר כך התמונה ממשיכה בזום איטי, הלוך ושוב. במובייל התמונה ברוחב מלא מעל הטקסט, ביחס 4:3. התוכן: [תווית], [כותרת], [פסקה של 3 עד 4 משפטים], [שם ותפקיד], [קישור לתמונה], [כיתוב לתמונה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו תמונה שהנושא שלה במרכז. במחשב ובמובייל היא נחתכת אחרת, והקצוות נעלמים.

אודות ולמה אנחנו

מי מלווה אתכם: פורטרט ומונים

הלקוח רואה מי האדם שיטפל בו, והניסיון נספר מול העיניים. פנים בונות אמון.

איפה זה עובד: עמוד אודות, דף הבית, רואי חשבון, עורכי דין, יועצים, מטפלים

מה צריך להכין

  • תמונת פורטרט אנכית באיכות טובה
  • 2 מספרים אמיתיים (שנות ניסיון, לקוחות)
  • 4 נקודות קצרות ופסקת היכרות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן היכרות אישי 'מי מלווה אתכם' לאתר של [שם העסק]: בצד אחד פורטרט ביחס 4 על 5: [קישור לתמונה], במסגרת שרק הפינה העליונה שפונה לטקסט מעוגלת מאוד, עם צל רך, ובתחתית התמונה, על מעבר כהה, [שם ותפקיד] בלבן. מאחורי המסגרת מלבן בצבע המשני שמציץ מהפינה ונע לאט בלולאה, ובריחוף התמונה מתקרבת מעט. בצד השני: כותרת קטנה עם קו, [כותרת ראשית], [פסקת היכרות], כרטיס לבן עם שני מונים וקו מפריד: [2 מספרים עם תווית], ומתחתיו [4 נקודות קצרות] בשני טורים, לכל אחת אייקון קו בריבוע מעוגל. המונים סופרים מ-0 כשמגיעים אליהם (IntersectionObserver), אבל ב-HTML כתוב כבר המספר הסופי. בכניסה למסך החלקים מופיעים בזה אחר זה, בדעיכה ובהחלקה למעלה. במובייל: פורטרט ריבועי למעלה, כרטיס המונים עולה מעט על קצה התמונה והמונים זה לצד זה, ואחריהם הטקסט והנקודות בטור אחד. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו תמונה עם מבט למצלמה ואור טבעי. פורטרט אמיתי משכנע יותר מכל תמונת מאגר.

אודות ולמה אנחנו

אודות בוטיק: פורטרט ושלוש נקודות

הגולש רואה מי עומד מאחורי העסק ושלוש סיבות לבחור בו, עוד לפני שגלל הלאה.

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

מה צריך להכין

  • פורטרט לגובה באיכות טובה
  • כותרת, פסקה ו-3 נקודות חוזק
  • שם ותפקיד לכרטיס
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן אודות בסגנון בוטיק לאתר של [שם העסק]: שתי עמודות על רקע בהיר, עם פס בגוון כהה מעט מאחורי הפורטרט. בצד הטקסט: שורת מותג קטנה עם קו דק, כותרת סריפית עם מילה אחת בצבע המותג, פסקה, ושלוש נקודות חוזק מופרדות בקו דק: אייקון קווי בעיגול, כותרת ושורה. מתחתן כפתור כהה עם חץ שזז בריחוף. בצד השני פורטרט גבוה, מאחוריו מסגרת דקה מוזחת באלכסון, ועל הפינה שלו כרטיס קטן עם שם ותפקיד. כשהסקשן נכנס למסך (IntersectionObserver): הטקסט עולה, הפורטרט נחשף מאחורי וילון, ושלוש הנקודות נכנסות מהצד אחת אחרי השנייה. אחר כך התמונה מתקרבת לאט, המסגרת נעה מעט כל הזמן, ובריחוף על הפורטרט היא נצמדת אליו. במובייל הפורטרט מעל הטקסט והכפתור ברוחב מלא. לכותרת פונט Frank Ruhl Libre. התוכן: [כותרת, פסקה, 3 נקודות חוזק, פורטרט, שם ותפקיד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו פורטרט לגובה עם רקע שקט ומבט למצלמה. רקע עמוס מתחרה במסגרת הדקה.

אודות ולמה אנחנו

אודות שחור-לבן עם כותרת בשתי שפות

סקשן שקט שנותן לתמונה ולמילים לדבר. הצבע מגיע רק כשהגולש מתקרב.

איפה זה עובד: צלמים, אדריכלים, מעצבים, סטודיו בוטיק, מותגים שקטים

מה צריך להכין

  • תמונה אחת לגובה, עם צבע
  • כותרת קצרה בעברית ובאנגלית
  • פסקה של 2 עד 3 משפטים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן אודות בשחור-לבן לאתר של [שם העסק]: שתי עמודות עם הרבה אוויר, וביניהן קו אנכי דק שמקטע כהה גולש לאורכו בלופ. בעמודת הטקסט: תווית 'אודות', כותרת בשתי שורות [כותרת בעברית], מתחתיה [כותרת באנגלית] במשקל דק, [פסקה קצרה] וכפתור קווי '[טקסט הכפתור]' עם חץ, שמתמלא שחור מהצד בריחוף. בעמודה השנייה תמונה לגובה [קישור לתמונה] בשחור-לבן ובזום איטי, שמקבלת צבע בריחוף, ובמסך מגע או במקלדת בלחיצה. מתחתיה [כיתוב לתמונה] ותווית 'שחור-לבן' שמתחלפת ל'צבע' בהחלקה למעלה. כשהסקשן נכנס למסך שורות הכותרת עולות בזו אחר זו מתוך מסכה, אחריהן שאר החלקים, ואז התמונה נצבעת לבד פעם אחת וחוזרת. הצבע בלי אנימציית filter: שתי שכבות של התמונה, העליונה ב-grayscale ורק ה-opacity שלה משתנה. במובייל טור אחד: כותרת, קו אופקי, תמונה, פסקה וכפתור. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו תמונה שיש בה צבע אחד חזק. המעבר משחור-לבן מרגיש אז כמו הפתעה קטנה.

אודות ולמה אנחנו

אודות קצר על קרם עם איורי קו

היכרות של עשר שניות: מי אתם, ממתי ולמה. בלי תמונות, רק טקסט טוב והרבה אוויר.

איפה זה עובד: דף הבית מתחת להירו, עמוד אודות, עסקים שכונתיים ומרפאות

מה צריך להכין

  • כותרת קצרה ושנת ההקמה
  • פסקת היכרות אחת, 3 עד 4 משפטים
  • נושא לשני איורי קו
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן אודות קצר וממורכז לאתר של [שם העסק], על רקע קרם: תג קטן בצורת גלולה ('מאז [שנת הקמה]'), כותרת גדולה, פסקת היכרות אחת ברוחב של עד 65 תווים בשורה, וכפתור מלא עם חץ שזז בריחוף ומוביל ל-[קישור לעמוד האודות]. מילה אחת בכותרת מסומנת בקו תחתון מצויר ביד בצבע המשני. משני צדי הטקסט שני איורי קו דקים ב-SVG בצבע המותג, עם פרט קטן ולב בצבע המשני: [נושא האיורים]. כשהסקשן נכנס למסך (IntersectionObserver) הטקסטים עולים אחד אחרי השני, והאיורים והקו התחתון מצטיירים קו אחרי קו עם stroke-dashoffset (החריג היחיד לכלל האנימציות). אחר כך האיורים מרחפים לאט והלבבות פועמים. במובייל שני האיורים קטנים ויושבים זה לצד זה מעל התג. מצב ההסתרה חל רק תחת class שה-JavaScript מוסיף. התוכן: [כותרת], [פסקת היכרות של 3 עד 4 משפטים], [טקסט הכפתור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 אם הפסקה יוצאת יותר מארבע שורות במחשב, קצרו אותה. אל תקטינו את הפונט ואל תרחיבו.

אודות ולמה אנחנו

למה אנחנו: וידאו ואייקונים חיים

שלוש הסיבות לבחור בכם, על רקע וידאו מהעסק ועם אייקונים שזזים. נקלט במבט אחד.

איפה זה עובד: עמוד הבית מתחת להירו: מוסכים, בעלי מקצוע, קליניקות, משרדים

מה צריך להכין

  • סרטון רקע קצר ותמונת פוסטר
  • 3 יתרונות: כותרת ומשפט לכל אחד
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן 'למה אנחנו' לאתר של [שם העסק]: רקע וידאו שמתנגן בלופ בלי קול ([קישור לווידאו], עם תמונת פוסטר עד שהוא נטען), ומעליו שכבת כהות ששומרת על הטקסט קריא. למעלה שורת מותג קטנה, כותרת [כותרת הסקשן] ומשפט משנה. מתחת שלוש עמודות עם קו דק ביניהן, ובכל אחת אייקון SVG בתוך עיגול שמונפש בלופ, כותרת וטקסט קצר: [3 יתרונות: כותרת, משפט ואייקון לכל אחד]. כשהסקשן נכנס למסך (IntersectionObserver) הכותרת והעמודות עולות בדירוג, ואז מצב הריחוף עובר פעם אחת לבד על שלוש העמודות. בריחוף או בנגיעה האייקון של אותה עמודה מואץ פי 3 (playbackRate של Web Animations API, שלא יקפוץ), העיגול מקבל הילה בצבע המותג וקו נמתח מתחת לכותרת. בפינה כפתור 'עצירת הווידאו' שעוצר ומפעיל אותו. במובייל העמודות בטור, והאייקון יושב לצד הטקסט. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו סרטון רגוע בלי חיתוכים חדים. תנועה חזקה מאחורי טקסט מקשה לקרוא אותו.

וידאו

קיר וידאו שנטען מהר

עשרות סרטונים בעמוד אחד, והוא עדיין נפתח מיד. נגן נטען רק כשמישהו לוחץ.

איפה זה עובד: עמוד המלצות מצולמות, סטודיו, קליניקות, מרצים, נדל״ן

מה צריך להכין

  • סרטונים אנכיים עם קישור לכל אחד
  • תמונת פוסטר אנכית לכל סרטון
  • כותרת קצרה, שם ואורך לכל סרטון
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קיר וידאו מהיר לאתר של [שם העסק]: גריד כרטיסים אנכיים (9:16), 2 בשורה במובייל ו-4 במחשב, ובכל אחד תמונת פוסטר, כפתור ניגון עם טבעת פועמת, כותרת, שם ואורך. שום נגן לא נטען עם העמוד: רק בלחיצה הפוסטר מוחלף בנגן שמתנגן במקום, אחד בכל רגע, עם מסגרת הדגשה סביב הכרטיס. הפוסטר נשאר עד שהסרטון מתחיל באמת. בזמן ניגון הכותרת נשארת, ומעליה פס התקדמות דק, מונה זמן ותג מצב: מושתק, מתנגן או מושהה. לחיצה נוספת משהה. במובייל הנגן נפתח במסך מלא עם כפתור סגירה. בטעינה הכרטיס הראשון מתנגן לבד, מושתק, ולחיצה עליו מפעילה קול. ליד הקיר מונה: כמה נגנים נטענו, ושני פסים שמתמלאים ומשווים את זמן הטעינה (לפי performance.now()) ל-[זמן הטעינה הישן], ומתחתיו הסבר בשלושה שלבים. הסרטונים: [קישור, פוסטר, כותרת, שם ואורך לכל סרטון]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בדקו את הקיר מקישור שנפתח בתוך וואטסאפ. רוב הגולשים מגיעים משם, ושם פריסות נשברות.

וידאו

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

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

מה צריך להכין

  • 6 עד 10 סרטונים אנכיים ביוטיוב
  • שם ותחום התמחות לכל סרטון
  • כותרת לקטע
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

פתיחת Claude ↗

💡 צלמו אנכי בטלפון, עד 40 שניות, עם אוויר מתחת לפנים: שם ותחום יושבים שם על הגרדיאנט.

וידאו

טבעת וידאו תלת-ממדית

הגולש מסובב את הסרטונים שלכם במרחב, ורק זה שבחזית מנגן. וידאו שמרגיש כמו חוויה.

איפה זה עובד: אולמות וגני אירועים, צלמים, סטודיו, מסעדות, דף הבית

מה צריך להכין

  • 7 סרטונים קצרים לגובה (mp4, עד 15 שניות)
  • תמונת פוסטר, שם ושורת משנה לכל סרטון
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי טבעת וידאו תלת-ממדית לאתר של [שם העסק]: 7 לוחות זכוכית אנכיים במסגרת בהירה דקה, מסודרים במעגל (perspective ו-rotateY) בהטיה קלה מלמעלה, וצל אליפטי על הרצפה. רק הלוח הקדמי מנגן, ועליו פס התקדמות דק ותג 'מנגן'. השאר: פוסטר מעומעם עם סמל ניגון, שקוף יותר ככל שהלוח רחוק. גרירה מסובבת את הטבעת, ובשחרור היא ננעלת על הלוח הקרוב. חיצים, מקלדת ולחיצה על לוח צדדי מביאים סרטון לחזית, ושם הוא מתחיל לנגן. בין החיצים כיתוב הסרטון הפעיל: שם, שורת משנה ומונה '2 / 7', בחילוף cross-fade. בטעינה היא מתקדמת פעם אחת לבד, ורמז 'גררו כדי לסובב' נעלם במגע הראשון. וידאו עם preload none, muted, loop ו-playsinline. במובייל הטבעת הופכת לפס החלקה אופקי עם scroll-snap, והלוח שבמרכז מנגן. הסרטונים: [7 קובצי mp4 עם פוסטר, שם ושורת משנה לכל אחד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 צלמו את כל הסרטונים לגובה ובאותו יחס. לוח אחד לרוחב שובר את כל הטבעת.

וידאו

פס רילס שמתנגן כשרואים אותו

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

איפה זה עובד: טיפוח, קליניקות, מסעדות, סטודיו לכושר, כל עסק שמצלם רילס

מה צריך להכין

  • 5 עד 6 סרטונים אנכיים (9:16) עד 30 שניות
  • תמונת פוסטר, כיתוב קצר ומספר צפיות לכל סרטון
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי פס רילס אופקי לאתר של [שם העסק]: שורה של כרטיסי וידאו אנכיים (9:16) בגלילה חופשית באצבע, בגרירה בעכבר או בגלגלת (כרטיס בכל תנועה, ובקצה הפס העמוד נגלל), עם scroll-snap רך. במחשב רואים כשלושה כרטיסים והקצוות דוהים. כל כרטיס הוא video מושתק בלופ עם פוסטר, שמתחיל לנגן רק כשלפחות חצי ממנו במסך ונעצר כשהוא יוצא (IntersectionObserver). על כל כרטיס: פס התקדמות דק למעלה, כפתור השהיה/ניגון בפינה אחת (כרטיס שהושהה ביד לא חוזר לנגן לבד, ובהשהיה הפריים מתעמעם מעט), וכפתור שמע בפינה השנייה שמדליק קול רק בכרטיס אחד בכל פעם, עם אקולייזר קטן שרוקד לידו. בתחתית הכרטיס, על גרדיאנט כהה: כיתוב קצר ומספר צפיות עם אייקון עין. בטעינה הפס מחליק פעם אחת כרטיס אחד קדימה וחוזר. הסרטונים: [5 עד 6 סרטונים אנכיים עם פוסטר, כיתוב קצר ומספר צפיות לכל אחד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 העלו סרטונים דחוסים (עד 3MB כל אחד) ובלי כתוביות אפויות: הכיתוב והכפתורים יושבים עליהם.

וידאו

נכנסים לאתר: גלילה לתוך סרטון

גוללים, והחלון גדל עד שהגולש נמצא בתוך האתר. הצצה חיה למוצר במקום עוד צילום מסך.

איפה זה עובד: דף בית של סוכנות או סטודיו, תיק עבודות, השקת אתר חדש

מה צריך להכין

  • צילום מסך ארוך של האתר, למחשב ולנייד
  • 3 מסרים קצרים לכותרת
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן 'נכנסים לאתר' לאתר של [שם העסק]: הסקשן ננעל (position sticky), ובמרכזו חלון דפדפן עם שורת כתובת. בתוכו צילום מסך ארוך של האתר שנגלל לפי הגלילה, כמו סרטון (scroll scrub). החלון גדל עד שהוא ממלא את המסך, ושורת הכתובת מחליקה החוצה. הוא בנוי בגודל מלא ומוקטן ב-transform scale, כדי שיישאר חד. מעליו תווית מותג, וכותרת שמתחלפת ב-cross-fade בין שלושה מסרים בגלילה. מתחתיו פס התקדמות, הנחיה 'גללו כדי להיכנס' עם חץ מקפץ, וכפתור השהיה שמקפיא את הסרטון. בהפעלה הוא מחליק חזרה למקום. מעל החלון הם יושבים על לוחיות אטומות. בסוף הסקשן משתחרר והעמוד ממשיך. במובייל החלון הוא מסגרת טלפון עם צילום מסך לנייד. בטעינה גלילה אוטומטית קצרה, ולמי שביקש פחות תנועה אין אותה והחלון לא גדל. המסרים: [3 מסרים קצרים]. צילומי המסך: [צילום מסך ארוך למחשב ולנייד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 צלמו את האתר ברוחב 1600 פיקסלים ומעלה. צילום צר נמרח כשהחלון ממלא את המסך.

וידאו

נגן וידאו קליל שנטען רק בלחיצה

סרטון בעמוד בלי לשלם עליו במהירות. עד הלחיצה נטענת רק תמונה קלה.

איפה זה עובד: עמוד הבית, עמוד פרויקט, אודות, דף נחיתה, מאמר

מה צריך להכין

  • קישור לקובץ הסרטון, כותרת קצרה ומשך
  • תמונת פוסטר לרוחב, ביחס 16:9
  • משקל הפוסטר ומשקל הסרטון, בערך
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי נגן וידאו קליל לאתר של [שם העסק]: נגן אחד ברוחב הטור ביחס 16:9, ובמובייל מקצה לקצה. עם העמוד נטענת רק תמונת פוסטר בזום איטי, ועליה כפתור ניגון גדול עם טבעת שפועמת בעדינות, ולמטה כותרת הסרטון ותג עם המשך. אלמנט ה-video נוצר רק בלחיצה: הכפתור הופך לספינר, הפוסטר נשאר עד שהסרטון מתחיל, ואז נעלם ב-cross-fade. בזמן ניגון יש למטה פס פקדים: כפתור השהיה, פס התקדמות שלחיצה עליו מדלגת, ומונה זמן '0:07 / 1:24'. לחיצה על הסרטון משהה ומחזירה את כפתור הניגון, ובסיום הפוסטר חוזר. מתחת לנגן שורת מצב 'הנגן עוד לא נטען', כמה נחסך בטעינת העמוד והערה 'מספרים לדוגמה', ופס משקל בשני חלקים: קצר ומלא לפוסטר, ארוך ומקווקו לנגן. בלחיצה החלק הארוך מתמלא והשורה מתחלפת ל'הנגן נטען בלחיצה'. התוכן: [קישור לסרטון, פוסטר, כותרת, משך, משקל הפוסטר והסרטון]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הפוסטר הוא מה שנטען עם העמוד. דחסו אותו ל-WebP, אחרת החיסכון נעלם.

הוכחה חברתית

פס לוגואים וביקורות רץ

לקוחות וביקורות שזזים מול העיניים — הוכחה חברתית בלי לתפוס מקום.

איפה זה עובד: מתחת להירו, לפני טופס יצירת קשר

מה צריך להכין

  • לוגואים של לקוחות (באישורם)
  • 4–6 ביקורות קצרות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי שני פסים רצים בלופ אינסופי חלק, בכיוונים הפוכים, לאתר של [שם העסק]: פס עליון של לוגואים של לקוחות [לוגואים] ופס תחתון של ביקורות קצרות עם 5 כוכבים [ביקורות]. עצירה בריחוף, מסכת דהייה בקצוות, ותקין בעברית מימין לשמאל. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 לוגואים רק באישור הלקוחות, וביקורות רק אמיתיות.

הוכחה חברתית

סליידר לפני/אחרי

התוצאה מדברת בעד עצמה: הגולש גורר ורואה את השינוי.

איפה זה עובד: שיפוצים, קליניקות, טיפוח, ניקיון, צילום מוצרים

מה צריך להכין

  • זוגות תמונות לפני/אחרי מאותה זווית
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סליידר השוואה לפני/אחרי לאתר של [שם העסק]: קו מפריד שגוררים בעכבר או באצבע (ומאחוריו input range נגיש למקלדת), תוויות 'לפני' ו'אחרי', ובטעינה הידית זזה פעם אחת לבד כדי להראות מה עושים. כמה זוגות עם לשוניות: [זוגות תמונות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שתי התמונות חייבות להיות מאותה זווית ובאותו גודל, אחרת האפקט נשבר.

הוכחה חברתית

מונים מונפשים

המספרים שלכם נספרים מול העיניים ובונים אמון מיידי.

איפה זה עובד: דף הבית, עמוד אודות

מה צריך להכין

  • 4 מספרים אמיתיים (שנות ניסיון, פרויקטים, לקוחות…)
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי 4 מונים גדולים לאתר של [שם העסק]: [מספר ותווית] ×4, שסופרים מ-0 כשהם נכנסים למסך (IntersectionObserver), עם טבעת התקדמות עדינה. חשוב: ב-HTML עצמו כבר כתוב המספר הסופי, וה-JavaScript מאפס ל-0 רק כשהוא רץ — כך גוגל, צילומי מסך ודפדפנים בלי JavaScript לא יראו 0. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 את זה למדנו בשטח: מונה שכתוב ב-HTML כ-0 נראה ריק לגוגל ובצילומי מסך.

הוכחה חברתית

ביקורות גוגל צפות בתלת-ממד

הביקורות האמיתיות שלכם מקבלות במה — ולא נבלעות בטקסט.

איפה זה עובד: דף הבית, עמודי שירות, דף נחיתה

מה צריך להכין

  • 5–8 ביקורות אמיתיות מגוגל
  • הדירוג ומספר הביקורות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קרוסלת ביקורות בסגנון גוגל לאתר של [שם העסק]: כרטיסים עם אות ראשונה של השם, שם, 5 כוכבים, טקסט וסמל גוגל, מרחפים בתלת-ממד עם עומק שדה (כרטיסים אחוריים קטנים ומטושטשים), מתנדנדים בעדינות ומתחלפים אחד-אחד. החלקה באצבע במובייל. כותרת: '[דירוג] ★ · [מספר] ביקורות בגוגל'. הביקורות: [ביקורות אמיתיות מהפרופיל]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 רק ביקורות אמיתיות מהפרופיל שלכם — אסור להמציא, וזה גם לא עובד.

הוכחה חברתית

חפיסת ביקורות נשלפת

הביקורות מוגשות קלף אחרי קלף, כמו חפיסה ביד. כל המלצה מקבלת את מלוא תשומת הלב.

איפה זה עובד: גני ואולמות אירועים, צלמים, מפיקים, דף הבית, דף נחיתה

מה צריך להכין

  • 6 ביקורות אמיתיות וקצרות
  • לכל ביקורת: שם, סוג אירוע ותאריך
  • ציון ממוצע ומספר ביקורות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי חפיסת ביקורות נשלפת לאתר של [שם העסק]: ערימת קלפים שבה העליון מוצג במלואו, ושניים מציצים מאחוריו בהטיה קלה ובגוון כהה, בלי תוכן. בכל קלף: מרכאה גדולה בצבע המותג, כוכבים, ציטוט, עיגול עם האות הראשונה, שם, סוג האירוע והתאריך. לחיצה על הקלף העליון, חץ 'הבאה' או גרירה שולפים אותו הצידה בסיבוב קל, והוא חוזר לתחתית. חץ 'הקודמת' מחזיר את הקלף האחרון, וגרירה קצרה מחזירה את הקלף למקומו. בין החיצים מונה '2 מתוך 6' ופס שמתמלא עד ההחלפה הבאה: החפיסה מתחלפת לבד כל 5 שניות (בפעם הראשונה אחרי שנייה וחצי), ועוצרת בריחוף, בפוקוס ובגרירה. לצד החפיסה, ובמובייל מעליה, סיכום דירוג: ציון גדול, כוכבים ומספר הביקורות. גרירה ב-pointer events עם touch-action: pan-y. הביקורות: [6 ביקורות עם שם, סוג אירוע ותאריך]. הדירוג: [ציון ומספר ביקורות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו ביקורות של שתיים עד שלוש שורות. קלף עמוס בטקסט לא נקרא לפני שהוא מתחלף.

הוכחה חברתית

ההמלצות נראות כמו הצ'אט שממנו הגיעו, ולכן מאמינים להן יותר מלכל ציטוט מעוצב.

איפה זה עובד: טיפוח, קליניקות, מאמנים, בעלי מקצוע, דף נחיתה

מה צריך להכין

  • 6 עד 8 הודעות אמיתיות מלקוחות
  • לכל הודעה: שם פרטי, שעה, שירות ותשובה שלכם
  • אישור מהלקוחות להציג את ההודעה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

פתיחת Claude ↗

💡 השאירו את הניסוח כמו שנכתב, כולל הסמיילי. הודעה מלוטשת מדי נראית כמו פרסומת.

הוכחה חברתית

מניפת ביקורות גוגל שנפתחת בריחוף

הביקורות מחכות כמו קלפים ביד ונפרשות כשנוגעים. סקרנות שגורמת לקרוא עוד אחת.

איפה זה עובד: דף הבית, עמודי שירות, דף נחיתה, יועצים ונותני שירות

מה צריך להכין

  • 5 ביקורות אמיתיות מגוגל: שם, עיר ושירות
  • הדירוג הממוצע ומספר הביקורות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מניפת ביקורות גוגל לאתר של [שם העסק]: 5 קלפי ביקורת על משטח כהה, מונחים אחד על השני כמו קלפים ביד, קצת מוטים. בכל קלף: עיגול עם האות הראשונה, שם, עיר, 5 כוכבים, תגית השירות, הטקסט ו'ביקורת מאומתת בגוגל'. מעל המניפה כותרת, הדירוג הממוצע בגדול עם כוכבים ו'מתוך [מספר] ביקורות בגוגל', ומתחתיה שורת הנחיה קצרה. בריחוף או בהקשה הקלפים מתפרשים בקשת, וכשהעכבר יוצא הם חוזרים לערימה. לחיצה על קלף מביאה אותו לחזית: מתיישר, מתרומם ומקבל מסגרת בצבע המותג. כשהמניפה נכנסת למסך (IntersectionObserver) היא נפתחת פעם אחת לבד, והקלף שבחזית מתחלף כל 3 שניות עד שנוגעים בה. המרווח בין הקלפים מחושב מרוחב המכל, כך ששום קלף לא נחתך. במובייל הקלפים נפרשים מהערימה לטור, והקשה מיישרת ומדגישה קלף. הביקורות: [5 ביקורות קצרות עם שם, עיר ושירות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו ביקורות של שתיים עד שלוש שורות. טקסט ארוך מגביה את הקלף והמניפה מאבדת צורה.

הוכחה חברתית

סקשן משוואה שמסביר את הערך שלכם

במקום סיסמה, הגולש רואה מה אתם נותנים ומה יוצא לו מזה. שלוש סיבות ותוצאה אחת.

איפה זה עובד: דף הבית, עמוד אודות, דף נחיתה, מתחת להירו

מה צריך להכין

  • 3 כותרות עם שורה קצרה לכל אחת (מה אתם עושים)
  • כותרת ושורה לתוצאה (מה הלקוח מרוויח)
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן משוואה לאתר של [שם העסק]: שורת מותג קטנה, כותרת ומשפט פתיח, ומתחתם שלוש קוביות לבנות עם אייקון קו, כותרת מודגשת ושורה קצרה, שמחוברות בעיגולי פלוס ושווה אל כרטיס תוצאה גדול יותר עם אייקון, תגית 'התוצאה', מסגרת גרדיאנט והילה רכה מאחוריו. במחשב הכול בשורה אחת מימין לשמאל, ובריחוף קובייה מתרוממת מעט. במובייל המשוואה אנכית: קוביות שוכבות עם האייקון בצד, והסימנים ביניהן. כשהסקשן נכנס למסך (IntersectionObserver) החלקים נכנסים אחד אחרי השני, הסימנים קופצים, וכרטיס התוצאה נכנס עמום עם מסגרת אפורה ואז נדלק: מסגרת הגרדיאנט וההילה מופיעות, וההילה ממשיכה לנשום לאט. מצב ההסתרה חל רק תחת class שה-JavaScript מוסיף, כדי שבלי JavaScript הכול גלוי. התוכן: [3 כותרות עם שורה קצרה לכל אחת], [כותרת ושורה לתוצאה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כתבו בקוביות מה אתם עושים בפועל, ובתוצאה מה הלקוח מרוויח. בלי מספרים מומצאים.

הוכחה חברתית

הגולש רואה את האתרים שבניתם נגללים מול העיניים, בלי ללחוץ על שום קישור.

איפה זה עובד: סוכנויות דיגיטל, בוני אתרים, מעצבים, עמוד תיק עבודות, דף הבית

מה צריך להכין

  • 5 עד 8 צילומי מסך ארוכים של עבודות
  • לכל עבודה: סוג העסק ומה עשיתם
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

פתיחת Claude ↗

💡 צלמו כל עמוד לכל אורכו ובאותו רוחב. צילום קצר נגמר מיד, והגלילה כמעט לא מורגשת.

הוכחה חברתית

כתבו עלינו: כתבות בתוך טלפונים

שלוש כתבות שנגללות לבד בתוך מסכי טלפון. הגולש רואה שכבר כתבו עליכם, בלי לעזוב את האתר.

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

מה צריך להכין

  • 3 כתבות, 2 עד 3 פסקאות מכל אחת
  • תמונה אחת לכל כתבה
  • שם כלי התקשורת וקישור לכתבה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן 'כתבו עלינו' לאתר של [שם העסק]: שלושה טלפונים מצוירים ב-CSS זה לצד זה, ובכל מסך כתבה מכלי תקשורת אחר: לוגו כלי התקשורת מצויר בטיפוגרפיה עם אייקון קטן, שם המדור, כותרת, תמונה עם כיתוב, שורת כותב ו-2 עד 3 פסקאות. הכתבה נגללת לאט בתוך המסך מלמעלה למטה וחזרה, בלולאה, בהפרש זמן בין הטלפונים, וריחוף עוצר את הגלילה. הטלפון האמצעי גדול יותר, ובטעינה הטלפונים עולים אחד אחרי השני. מתחת לכל טלפון שם כלי התקשורת, חודש הפרסום וכפתור 'לכתבה המלאה' שפותח את הכתבה המקורית בלשונית חדשה. במובייל כל הטלפונים באותו גודל, בפס החלקה אופקי עם scroll-snap: טלפון אחד תופס את רוב הרוחב עם הצצה לבא בתור. מדוד ב-JavaScript את גובה הכתבה מול גובה המסך, כדי שהגלילה תיעצר בדיוק בסוף. הכתבות: [3 כתבות: כלי תקשורת, מדור, כותרת, תמונה, כותב, 2 עד 3 פסקאות וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הביאו מכל כתבה רק 2 עד 3 פסקאות ותמונה אחת. כתבה שלמה נגללת לנצח ואף אחד לא קורא.

הוכחה חברתית

לפני ואחרי עם קווי מידה

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

איפה זה עובד: שיפוצים, קבלנים, אדריכלים, מטבחים, עיצוב פנים

מה צריך להכין

  • זוג צילומים לפני ואחרי מאותה זווית
  • שרטוט או הדמיה של החדר
  • מידות החדר ו-2 פרטים לכל צד
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן 'לפני ואחרי עם קווי מידה' לאתר של [שם העסק]: סליידר השוואה, 'לפני' מימין ו'אחרי' משמאל עם תוויות בפינות, וידית עגולה על קו לבן לגרירה בעכבר או באצבע (מאחוריה input range למקלדת). סביב התמונה קווי מידה, אופקי מעל ואנכי בצד, עם קווי קצה אלכסוניים והמספר בסנטימטרים באמצע. על התמונה תוויות ממוספרות (נקודה בצבע המותג, קו מוביל וכיתוב קצר): כל תווית שייכת לצד אחד ומופיעה רק כשהידית חושפת את הנקודה שלה. בטעינה הידית זזה פעם אחת לבד לשני הצדדים ונעצרת באמצע. מתחת זוג כרטיסים 'תכנון מול ביצוע' עם חץ ביניהם: שרטוט התוכנית עם תגית 'תוכנית' מול התוצאה עם תגית 'בוצע', כיתוב קצר בכל כרטיס, ומעליהם קו מידה עם שם החדר והעיר. אם אין צילומים, צייר את החדרים ב-SVG. הפרטים: [שם החדר ועיר], [רוחב וגובה בס״מ], [2 תוויות לכל צד], [תמונות ושרטוט, אם יש]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 צלמו את ה'לפני' מנקודה קבועה וסמנו אותה על הרצפה. ה'אחרי' מצלמים מאותה נקודה בדיוק.

הוכחה חברתית

כתבו עלינו: כרטיסי כתבות וסרטונים

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

איפה זה עובד: עורכי דין, רופאים, יועצים, מרצים, כל מי שמתראיין בתקשורת

מה צריך להכין

  • 8 פריטים עם קישור ותאריך
  • תמונת פוסטר לכל סרטון
  • תקציר קצר לפריט הכי חדש
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עמוד 'בתקשורת' לאתר של [שם העסק]: כותרת על פס כהה, לשוניות סינון עם מונה (הכול, כתבות, וידאו, פודקאסט) וגריד כרטיסים מהחדש לישן. בכל כרטיס: משטח עליון עם לוגו כלי התקשורת (סימן מילה מצויר עם אייקון וצבע משלו), תג סוג, תאריך, כותרת וכפתור 'להמשך קריאה' או 'להאזנה לפרק' שנפתח בלשונית חדשה. בווידאו: תמונת פוסטר עם כפתור ניגון, ולחיצה פותחת חלון עם לוגו, כותרת ונגן שנטען ומנגן רק בפתיחה ונעצר בסגירה (X, Esc או הרקע). הכרטיס הראשון רחב פי שניים, עם תקציר, תג 'הכי חדש' וכפתור ניגון פועם. בסינון הכרטיסים שנשארים מחליקים למקומם (FLIP) והשאר נכנסים בדהייה, ובטעינה עולים בזה אחר זה. במובייל טור אחד: כרטיס רגיל הוא שורה עם הלוגו בצד, והלשוניות נגללות לרוחב. הפריטים: [8 פריטים: סוג, כלי תקשורת, תאריך, כותרת וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 עדכנו את העמוד בכל הופעה חדשה. עמוד תקשורת שהפריט האחרון בו בן שנתיים משדר את ההפך.

הוכחה חברתית

רצועת המלצות בכרטיסי קשת

המלצות שנראות כמו הזמנה לאירוע, לא כמו טבלה. גוללים, קוראים עד הסוף ומשתכנעים.

איפה זה עובד: קייטרינג, אולמות, צלמים, מעצבי אירועים, קליניקות, עמוד הבית

מה צריך להכין

  • 8 המלצות מלקוחות, קצרות וארוכות
  • לכל המלצה: שם פרטי, סוג האירוע ותאריך
  • אישור מהלקוחות לפרסם
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי רצועת המלצות לאתר של [שם העסק]: כרטיסים ברוחב ובגובה אחידים שהחלק העליון שלהם קשת מלאה, עם קו מתאר דק בפנים. בכל כרטיס מרכאה גדולה, ציטוט ממורכז של עד 5 שורות, ובתחתית שם פרטי, סוג האירוע ותאריך. כל כרטיס שלישי כהה עם טקסט בהיר. הרצועה נגללת לרוחב ב-scroll-snap, גם בגרירת עכבר, והכרטיס הבא מציץ בקצה. מתחתיה חץ קודם, פס התקדמות שמתמלא עם הגלילה וחץ הבא: כל חץ מזיז כרטיס אחד ומתעמעם בקצה. הכרטיסים נכנסים מלמטה בזה אחר זה כשמגיעים אליהם (IntersectionObserver). בטעינה הרצועה זזה מעט הצידה וחוזרת, וחץ הבא פועם עד הנגיעה הראשונה. ציטוט שנחתך מקבל כפתור 'להמלצה המלאה' שפותח אותה בחלון מעל העמוד, בכרטיס קשת גדול, עם סגירה ב-X, ב-Esc או בלחיצה על הרקע. מעל הרצועה כותרת ושורת הסבר. ההמלצות: [8 המלצות עם שם פרטי, סוג האירוע ותאריך]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 פתחו בהמלצה קצרה ומוחשית. מספר אורחים או שם של מנה משכנעים יותר מ'היה מעולה'.

הוכחה חברתית

קיר לוגואי לקוחות שמתחלף לבד

הלקוחות שלכם על קיר אחד שזז לבד. הגולש רואה מי כבר סומך עליכם, בלי לקרוא מילה.

איפה זה עובד: עמוד הבית מתחת להירו, עמוד אודות, עסקים שעובדים עם חברות וארגונים

מה צריך להכין

  • 20 לוגואים של לקוחות (באישורם)
  • כותרת ופסקה קצרה
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן קיר לוגואי לקוחות לאתר של [שם העסק]: שורת מותג, כותרת ופסקה במרכז, ומתחתן גריד של 15 משבצות עם לוגו בכל אחת, 5 עמודות במחשב ו-3 במובייל, על רקע כהה עם רשת נקודות והילה רכה שנעה לאט. הלוגואים אפורים וחצי שקופים (filter: grayscale עם transition), ובריחוף או בנגיעה חוזרים לצבע מלא והמשבצת מתרוממת עם מסגרת בצבע המותג. כשהקיר נכנס למסך (IntersectionObserver) המשבצות עולות בגל מהפינה העליונה. כל 2.5 שניות משבצת אחת מחליפה לוגו באחד שלא מוצג, ב-cross-fade בלי רגע ריק: החדש נכנס בצבע מלא ואחרי שנייה דוהה לאפור. לא מחליפים משבצת שהעכבר מעליה. מתחת לקיר רצועה: משבצת מקווקוות 'הלוגו שלכם', משפט הזמנה וכפתור 'רוצים להצטרף?' שפותח וואטסאפ ל-[מספר בפורמט 972]. התוכן: [כותרת ופסקה], [20 לוגואים של לקוחות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 לוגואים בקובצי PNG שקופים או SVG, כולם בגובה דומה. לוגו אחד ענק שובר את כל הקיר.

הוכחה חברתית

פס לוגואים כפול על רקע כהה

הלקוחות שלכם עוברים מול העיניים בשתי שורות. אמון בלי מילה אחת של שיווק.

איפה זה עובד: מתחת להירו, בעמוד אודות, לפני המלצות או מעל טופס יצירת קשר

מה צריך להכין

  • 16 לוגואים של לקוחות או שותפים, באישורם
  • שורת כותרת קצרה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן לוגואים של לקוחות לאתר של [שם העסק]: רצועה כהה ברוחב מלא בצבע המותג, ובראשה שורת כותרת קטנה וממורכזת עם קו דק מכל צד: [כותרת קצרה]. מתחתיה, באזור ממורכז עד 1120px, שתי שורות לוגואים שנעות לאט ובלי הפסקה בכיוונים מנוגדים, במהירות מעט שונה. כל לוגו ממורכז בעיגול בהיר בגודל אחיד (קטן יותר במובייל), כך שלוגואים שונים נראים כמו סדרה אחת. הקצוות מתעמעמים עם mask-image, ובריחוף עם העכבר שתי השורות נעצרות והעיגול שמתחת לסמן גדל מעט. בטעינה הכותרת נכנסת ואחריה השורות. התנועה ב-CSS keyframes, בלי JavaScript: כל שורה מכילה את הלוגואים פעמיים (העותק עם aria-hidden) וזזה בדיוק 50%, עם margin במקום gap כדי שהחיבור לא יקפוץ. למי שביקש פחות תנועה השורות עומדות, העותק מוסתר והלוגואים ברשת ממורכזת. הלוגואים: [קישורים ל-16 לוגואים, 8 לכל שורה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 לוגו בקובץ SVG או PNG שקוף. לוגו עם רקע מרובע נראה כמו מדבקה בתוך העיגול.

הוכחה חברתית

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

איפה זה עובד: סוכני ביטוח, יועצי משכנתאות, רואי חשבון, מפיצים ויבואנים

מה צריך להכין

  • 7 לוגואים ברקע שקוף
  • כותרת ושורת הסבר
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

פתיחת Claude ↗

💡 לוגו עם רקע אפור או צבעוני בולט מיד על כרטיס לבן. בקשו מכל חברה קובץ עם רקע שקוף.

הוכחה חברתית

כרטיסי תוצאות עם מספר וגרף

במקום 'אנחנו הכי טובים', מספרים עם מקור. הגולש רואה תוצאה ומאמין לה.

איפה זה עובד: דף הבית, עמוד תוצאות, דפי נחיתה, עמוד שירות

מה צריך להכין

  • 5 תוצאות אמיתיות: מספר, יחידה ותיאור קצר
  • מקור או תקופה לכל מספר
  • 8 ערכי מגמה לכל גרף (למשל לפי חודש)
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן תוצאות במספרים לאתר של [שם העסק]: שורת מותג, כותרת, משפט פתיח וגריד של 5 כרטיסים. בכל כרטיס מספר גדול עם יחידה (אחוז, ימים, ₪), תיאור קצר, שורת מקור קטנה כמו 'ממוצע 2025' וגרף קו זעיר בתחתית. כרטיס אחד מודגש: רקע בצבע המותג, טקסט לבן ותגית קטנה מעל המספר. במחשב הוא תופס שתי עמודות ושתי שורות, במובייל רוחב מלא והשאר בשתי עמודות. כשכרטיס נכנס למסך (IntersectionObserver) הוא עולה בדירוג, המספר סופר מ-0 עם פסיק אלפים או נקודה עשרונית, והקו מצטייר משמאל לימין ב-stroke-dashoffset (החריג היחיד לכלל ה-transform). בסוף הקו נדלקת נקודה שפועמת בעדינות, ובריחוף הכרטיס מתרומם מעט. ב-HTML כתוב המספר הסופי, וה-JavaScript מאפס אותו רק כשהוא רץ. מתחת לגריד הערת מקור קטנה. התוצאות: [5 תוצאות: מספר, יחידה, תיאור, מקור ו-8 ערכי מגמה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 מספר בלי מקור נשמע כמו סיסמה. שורת 'ממוצע 2025' היא מה שגורם להאמין לו.

הוכחה חברתית

רצועת שלושה מונים בצבע המותג

שלושה מספרים שנספרים מול העיניים ואומרים בשנייה אחת: יש כאן ניסיון.

איפה זה עובד: דף הבית מתחת להירו, עמוד אודות, דף נחיתה

מה צריך להכין

  • 3 מספרים אמיתיים עם כותרת קצרה לכל אחד
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן רצועת מונים לאתר של [שם העסק]: רצועה צרה לכל רוחב העמוד בצבע המותג, ובה שלושה מספרים גדולים בלבן, לכל אחד כותרת קטנה מתחתיו, ומפרידים אנכיים דקים ביניהם. סימן פלוס או כוכב קטן צמוד למספר, בגוון בהיר של הצבע המשני. כשהרצועה נכנסת למסך (IntersectionObserver) שלושת המונים עולים בזה אחר זה, המפרידים נמתחים לגובה, והמספרים סופרים מ-0 פעם אחת בלבד, כולל פסיק אלפים ודירוג עם ספרה אחרי הנקודה. ברקע הרצועה כתם אור רך שנע לאט מצד לצד. במובייל שלושתם נשארים בשורה אחת, בגודל קטן יותר. חשוב: ב-HTML כבר כתוב המספר הסופי, וה-JavaScript מאפס ל-0 רק כשהוא רץ, כדי שגוגל וצילומי מסך לא יראו 0. המונים: [3 מספרים אמיתיים עם כותרת קצרה לכל אחד, למשל שנות ניסיון, לקוחות ודירוג]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כותרת של שתיים עד שלוש מילים לכל מספר. כותרת ארוכה נשברת במובייל והרצועה מתנפחת.

הוכחה חברתית

רצועת המלצות בשלוש קרוסלות

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

איפה זה עובד: דף הבית, דף נחיתה, סטודיו, קליניקות, נותני שירות

מה צריך להכין

  • 9 המלצות קצרות
  • שם ותפקיד לכל ממליץ
  • כותרת לסקשן
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן המלצות לאתר של [שם העסק]: רצועה ברוחב מלא בצבע המותג, עם שני עיגולים שקופים שנעים לאט ברקע, שורת פתיח וכותרת לבנה במרכז. מתחתן שלושה כרטיסים, בהירים בצדדים וכהה באמצע. כל כרטיס הוא קרוסלה של 3 המלצות: מרכאה גדולה, ציטוט, קו דק, עיגול עם ראשי תיבות, שם ותפקיד. ההמלצות מונחות זו על זו ב-grid (גובה קבוע) ומתחלפות ב-cross-fade עם תזוזה קלה. כל עמודה מתחלפת לבד כל 6 שניות, 2 שניות אחרי השכנה (הראשונה 2 שניות אחרי הטעינה), כך שתמיד משהו זז. מתחת לכל כרטיס 3 נקודות: הפעילה היא גלולה שמתמלאת עד ההחלפה, ולחיצה על נקודה מחליפה המלצה. ריחוף או פוקוס עוצרים רק את אותה עמודה. בטעינה הכול נכנס בזה אחר זה. מתחת ל-900px: שורה שמחליקים באצבע עם scroll-snap, כרטיס אחד במסך והצצה לבא. ההמלצות: [9 המלצות קצרות עם שם ותפקיד]. הכותרת: [כותרת הסקשן]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שמרו על המלצות באורך דומה, שלוש שורות בערך. כך שום כרטיס לא נראה ריק ליד השכנים.

הצגת עבודות

תמונות שנפתחות במסך מלא עם החלקה — גלריה שמרגישה כמו אפליקציה.

איפה זה עובד: צלמים, מעצבים, שיפוצים, אירועים

מה צריך להכין

  • 9–20 תמונות
  • כיתוב קצר לכל תמונה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

פתיחת Claude ↗

💡 תמונות בגדלים שונים (לרוחב ולגובה) הופכות את ה-masonry לחי. כולן מרובעות = משעמם.

הצגת עבודות

לוח השראה בסגנון פולארויד

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

איפה זה עובד: בתי קפה, מאפיות, סטודיו, גני אירועים, עמוד 'מי אנחנו'

מה צריך להכין

  • 9 תמונות מרובעות ללוח
  • כיתוב קצר לכל תמונה בלוח
  • 12 תמונות לפסים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי לוח השראה בסגנון פולארויד לאתר של [שם העסק]: לוח שעם במסגרת עץ ועליו 9 תמונות מרובעות במסגרות פולארויד, כל אחת בזווית קלה אחרת, עם כיתוב שנראה כתוב בעט (נטוי ומסובב מעט) ולסירוגין נעץ או סלוטייפ בראש הכרטיס. בטעינה הכרטיסים נוחתים בזה אחר זה, ואחד מתרומם לרגע כדי לרמוז על הריחוף. ריחוף, פוקוס או לחיצה מיישרים תמונה, מרימים אותה מעל השאר ומעמיקים את הצל. מעליו ומתחתיו שני פסי תמונות עם קצוות דהויים שרצים בלולאה בכיוונים מנוגדים, וכל פס נעצר בריחוף: הרצועה משוכפלת ומוזזת ב-transform עד -50%. במובייל (עד 700px) הלוח הופך לערימה: הקשה מעיפה את הכרטיס העליון הצידה ומחזירה אותו לתחתית, מתחת מונה '1 / 9' ושורת 'הקישו לתמונה הבאה', ובטעינה הערימה מדפדפת פעם אחת לבד. התמונות: [9 תמונות ללוח עם כיתוב לכל אחת, ו-12 תמונות לפסים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 צלמו את כל התמונות באותו אור. תמונת סטוק אחת בין תמונות אמיתיות שוברת את האשליה.

הצגת עבודות

פאנלי עבודות שנפתחים בריחוף

הגולש מרחף על פרויקט והוא נפתח מולו עם כל הפרטים. חמש עבודות בשורה אחת.

איפה זה עובד: מעצבי פנים, אדריכלים, צלמים, קבלני גמר, דף הבית, עמוד פרויקטים

מה צריך להכין

  • 5 פרויקטים: שם, שורת פרטים ותיאור קצר
  • תמונה לגובה לכל פרויקט
  • קישור לעמוד של כל פרויקט
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי שורת פאנלים להצגת עבודות לאתר של [שם העסק]: 5 פאנלים צרים וגבוהים, בכל אחד תמונה או איור, מספר סידורי גדול ושקוף בקו מתאר ושם הפרויקט כתוב לאורך. הפאנל שמרחפים עליו (או מגיעים אליו במקלדת) מתרחב ב-transition על flex-grow ומגלה בזה אחר זה שורת פרטים, כותרת, תיאור קצר וכפתור 'לצפייה בפרויקט'. התמונה שלו מתקרבת לאט, השאר מתכווצים ומתעמעמים, ומסגרת דקה מצטיירת סביבו (שני pseudo-elements ב-scaleX ו-scaleY). האחרון נשאר פתוח כשהעכבר יוצא. בטעינה הראשון פתוח, וסיור אוטומטי פותח את הבא כל 3 שניות עם פס התקדמות דק בתחתית, עד ריחוף או הקשה. במובייל: אקורדיון אנכי עם סימן פלוס שמסתובב לאיקס. הקשה פותחת פאנל (גובה ב-grid-template-rows) וסוגרת את האחרים, הקשה נוספת סוגרת. הפרויקטים: [5 פרויקטים: שם, פרטים, תיאור, תמונה וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו תמונות לגובה עם מוקד במרכז: בפאנל סגור רואים מהן רק רצועה צרה.

הצגת עבודות

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

איפה זה עובד: זגגות, נגרות, מעצבי פנים, צלמים, תיק עבודות בדף הבית

מה צריך להכין

  • 9 תמונות אנכיות באותו יחס
  • תגית, כותרת ושורת תיאור לכל תמונה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

פתיחת Claude ↗

💡 בחרו תמונות שהנושא שלהן במרכז. על הקשת הכרטיסים מוטים, ופרטים בקצוות הולכים לאיבוד.

הצגת עבודות

כרטיסים שנפתחים לחלון במעבר רציף

הגולש רואה הכול בקצרה, ולחיצה פותחת את הפרטים המלאים בלי לעזוב את העמוד.

איפה זה עובד: מכללות וקורסים, רשימת שירותים, חבילות ומחירים, צוות, דף הבית

מה צריך להכין

  • 6 פריטים: שם, שורת פרטים ותיאור מלא
  • 3 נקודות ומחיר לכל פריט
  • תמונה מרובעת לכל פריט
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי רשימת כרטיסים שנפתחים לחלון לאתר של [שם העסק]: גריד של כרטיסים לבנים קומפקטיים (טור אחד במובייל), בכל אחד תמונה קטנה מרובעת, שם, שורת פרטים ועיגול חץ. כרטיס שנלחץ מתכווץ קלות וגדל ברצף לחלון במרכז המסך בטכניקת FLIP עם Web Animations API: רקע הכרטיס נמתח לחלון, והתמונה, השם ועיגול החץ טסים ממקומם בכרטיס אל מקומם בחלון. הרקע מתעמעם, ובמקום הכרטיס נשאר שקע מקווקו. אחר כך נכנסים בזה אחר זה שורת פרטים מלאה, תיאור, 3 נקודות עם וי, מחיר וכפתור 'שריינו מקום' שנפרש מתוך עיגול החץ. סגירה באיקס, ב-Esc או בלחיצה על הרקע מחזירה הכול לכרטיס באותה תנועה, והפוקוס חוזר אליו. בטעינה כרטיס אחד נלחץ, נפתח ונסגר לבד. הפריטים: [6 פריטים: שם, שורת פרטים, תיאור, 3 נקודות, מחיר ותמונה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 השאירו בכרטיס שם קצר ושורה אחת. כל השאר שייך לחלון, וכך הרשימה נסרקת בשנייה.

קטלוגים

תיק עבודות עם סינון

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

איפה זה עובד: סוכנויות דיגיטל, מעצבים, אדריכלים, צלמים, עמוד תיק עבודות

מה צריך להכין

  • 9 עבודות ומעלה, לכל אחת צילום מסך ארוך וקישור
  • תחום וסוג אתר לכל עבודה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גריד עבודות עם סינון לאתר של [שם העסק]: כל כרטיס הוא קישור עם חלון דפדפן קטן על רקע גרדיאנט, ובו צילום מסך ארוך של האתר, ומתחתיו שם ושורת 'סוג אתר · תחום'. בריחוף הכרטיס מתרומם והצילום נגלל לאט עד סוף העמוד. מעל הגריד שתי שורות צ'יפים, 'תחום' ו'סוג אתר', כל אחת מתחילה ב'הכול', והן משתלבות. על כל צ'יפ מספר העבודות שייתן, וצ'יפ שייתן אפס מעומעם ונעול. לידן מונה 'מוצגות 6 מתוך 9 עבודות'. בסינון הכרטיסים מחליקים למקומם החדש בטכניקת FLIP, וחדשים נכנסים בפייד. בהתחלה שתי שורות, וכפתור 'הצג עוד' חושף שורה נוספת ונעלם בסוף. בלי JavaScript כל הכרטיסים מוצגים. במובייל שני טורים, וכל שורת צ'יפים נגללת לרוחב. בטעינה, פעם אחת, הצילום הראשון נגלל לבד וצ'יפ אחד נבחר לרגע. העבודות: [שם, צילום מסך ארוך, קישור, תחום וסוג לכל עבודה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 צלמו את העמוד כולו, מלמעלה עד הפוטר. צילום קצר לא נגלל, והאפקט הולך לאיבוד.

קטלוגים

תיק פרויקטים עם עמוד לכל פרויקט

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

איפה זה עובד: שיפוצים, קבלנים, אדריכלים, מעצבי פנים, נגרים

מה צריך להכין

  • 6 פרויקטים עם עיר, סוג, שטח, משך ותקציב
  • תמונות ושלבי עבודה לכל פרויקט
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עמוד פרויקטים לאתר של [שם העסק] שמתחלף לתצוגת פרויקט בלי טעינה מחדש. ברשימה: צ'יפים עם מונה לסינון לפי עיר ולפי סוג עבודה, מספר תוצאות שמתעדכן, וכפתור 'נקו את הסינון' כשאין התאמה. כל פרויקט הוא שורה רחבה ולחיצה: מספר רץ, תמונה, שם, עיר וסוג, שטח, משך וחץ. במובייל התמונה קטנה והטקסט לצידה. בתצוגת הפרויקט: כפתור 'לכל הפרויקטים', כותרת ותיאור, 4 נתונים (שטח, משך, תקציב, מסירה), גלריה עם תמונה גדולה, כיתוב ותמונות ממוזערות שמחליפות אותה ב-cross-fade, פס צד דביק עם ציר זמן של שלבי העבודה שמתמלא בפתיחה, ו'עוד פרויקטים': 3 כרטיסים, קודם מאותה עיר. חזרה, גם ב-Esc, שומרת סינון ומקום גלילה. בטעינה השורות נכנסות בהדרגה, והפרויקט הראשון נפתח לבד ל-3 שניות וחוזר, אלא אם הגולש כבר נגע. הפרויקטים: [6 פרויקטים עם נתונים, שלבים ותמונות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 פרויקט בלי שטח, משך ותקציב הוא רק אלבום תמונות. המספרים הם מה שבונה אמון.

קטלוגים

קטלוג נכסים עם חיפוש וסינון

הגולש מסנן לפי אזור, סוג, מחיר וחדרים ורואה מיד רק את הנכסים שמתאימים לו.

איפה זה עובד: משרדי תיווך, יזמים וקבלנים, נכסים מסחריים, השכרות

מה צריך להכין

  • 12 נכסים: כתובת, מחיר, חדרים, מ״ר ותיאור קצר
  • תמונה ראשית לכל נכס
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קטלוג נכסים לאתר של [שם העסק]: סרגל צד נדבק עם חיפוש חופשי, אזור, צ׳יפים של סוג נכס, סליידר מחיר עם שתי ידיות, כפתורי חדרים וניקוי. לידו מונה תוצאות, מיון וגריד שמתעדכן מיד, כשהכרטיסים מחליקים למקומם. בלי תוצאות: הודעה וכפתור ניקוי. בכל כרטיס: תמונה, תג 'חדש' או 'בלעדי', שם, רחוב ועיר, מחיר, חדרים, מ״ר וקומה. בריחוף הכרטיס מתרומם ונוטה קלות אחרי העכבר. לחיצה פותחת חלון פרטים עם תיאור וכפתור וואטסאפ ל-[מספר בפורמט 972], שנסגר ב-X, ב-Esc או בלחיצה בחוץ. בטעינה הכרטיסים נכנסים בזה אחר זה, וידית המחיר יורדת וחוזרת פעם אחת לבד. במובייל: כפתור 'סינון' נדבק עם מספר המסננים הפעילים, שפותח פאנל מלמטה עם 'הציגו 7 נכסים', וכרטיסים בשורות. על body רק overflow-x:clip, כי hidden שובר sticky. הנכסים: [12 נכסים עם הפרטים, תיאור ותמונה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 מלאו לכל נכס אזור, סוג ומחיר מדויקים. נכס עם שדה חסר נעלם מהסינון בלי שתשימו לב.

קטלוגים

קטלוג קורסים עם סינון וחיפוש

הגולש מסנן לפי תחום ומסלול, פותח קורס, רואה את הסילבוס ונרשם בוואטסאפ בלחיצה.

איפה זה עובד: מכללות, מרכזי למידה, חוגים, סדנאות, סטודיו עם מערכת שיעורים

מה צריך להכין

  • 12 קורסים: תחום, מסלול, משך ותאריך
  • סילבוס קצר ודרישות קדם לכל קורס
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קטלוג קורסים לאתר של [שם העסק]: פאנל כהה עם חיפוש חופשי ושתי שורות צ׳יפים בבחירה יחידה, תחום ומסלול (הכול, בוקר, ערב, אונליין). מתחתיו מונה תוצאות, מיון (תאריך, משך, שם) וגריד שמתעדכן מיד, והכרטיסים מחליקים למקומם. בכל כרטיס: אייקון, תחום, מסלול, שם, שבועות, מפגשים, תאריך פתיחה, פלוס שמסתובב ל-X ותג 'מקומות אחרונים' עם נקודה פועמת. לחיצה מרחיבה כרטיס אחד בכל פעם לרוחב השורה (grid-auto-flow: dense), גוללת אליו ומגלה סילבוס ממוספר, דרישות קדם וכפתור 'לפרטים והרשמה' שפותח וואטסאפ ל-[מספר בפורמט 972] עם שם הקורס. 6 קורסים בכל פעם, עם 'טענו עוד' ו'מוצגים 6 מתוך 12'. בלי תוצאות: הודעה וכפתור איפוס. בטעינה הכרטיסים נכנסים אחד אחד והראשון נפתח לבד. במובייל שורות הצ׳יפים נגללות לרוחב. הקורסים: [12 קורסים עם סילבוס ודרישות קדם]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כתבו תאריך פתיחה אמיתי לכל קורס. קורס בלי תאריך נראה כמו קורס שלא נפתח.

קטלוגים

אריחי קטגוריות בגריד לא סימטרי

הגולש רואה את כל הקטגוריות במבט אחד ונכנס ישר למה שמעניין אותו, בלי לחפש בתפריט.

איפה זה עובד: דף הבית של חנות, קטלוג מוצרים, תפריט של מסעדה או בית קפה

מה צריך להכין

  • 5 קטגוריות עם מספר פריטים וקישור
  • כותרת ופסקה קצרה לסקשן
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן אריחי קטגוריות לאתר של [שם העסק]: כיתוב קטן, כותרת ופסקה קצרה, ומולם קישור 'לכל הקטגוריות' בצורת גלולה עם עיגול חץ. מתחת חמישה כרטיסים לחיצים בגריד לא סימטרי של שלוש עמודות: שני גדולים (אחד גבוה, אחד רחב) ושלושה קטנים. כל כרטיס הוא איור SVG שאתה מצייר לפי הקטגוריה, עם תנועה קטנה שחוזרת (אדים שעולים, נצנוץ), ובתחתיתו, על מעבר כהה: שם הקטגוריה, מספר הפריטים ועיגול חץ. בריחוף או בפוקוס האיור מתקרב, הכרטיס עולה מעט והחץ זז קדימה. בטעינה הכרטיסים נכנסים בזה אחר זה, ואז מצב הריחוף עובר ביניהם לבד פעם אחת. במובייל הגריד הופך לפס החלקה אופקי עם scroll-snap: הכרטיס הבא מציץ מהצד, הפס זז וחוזר פעם אחת כרמז, ומתחתיו פס התקדמות דק שמתעדכן בגלילה ואחריו הקישור. התוכן: [כותרת ופסקה], [5 קטגוריות עם שם, מספר פריטים וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שימו בשני הכרטיסים הגדולים את הקטגוריות שמוכרות הכי הרבה. לשם העין הולכת קודם.

שירותים

כרטיסי שירות בהטיה תלת-ממדית

השירותים שלכם 'קופצים' מהמסך ומזמינים ללחוץ.

איפה זה עובד: עמוד שירותים, דף הבית, דף נחיתה

מה צריך להכין

  • 3 שירותים עם שורת הסבר לכל אחד
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי 3 כרטיסי שירות לאתר של [שם העסק]: [שירות 1], [שירות 2], [שירות 3]. כל כרטיס נוטה לכיוון העכבר בתלת-ממד, עם הבזק אור שזז עליו, והאייקון מרחף מעל הכרטיס (translateZ). במכשירי מגע: תנודה עדינה אוטומטית. בכל כרטיס: אייקון SVG, כותרת, 2 שורות הסבר וכפתור. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הטיה עדינה (עד 10 מעלות) נראית יוקרתית. יותר מזה — נראה כמו משחק.

שירותים

גריד בנטו לשירותים

כל השירותים במבט אחד, בפריסה מודרנית בסגנון אפל.

איפה זה עובד: דף הבית, עמוד 'מה אנחנו עושים'

מה צריך להכין

  • 4–6 שירותים
  • מספר אחד שאתם גאים בו
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גריד בנטו אסימטרי לשירותים של [שם העסק] על רקע גרדיאנט כהה, עם כרטיסי זכוכית (glassmorphism). בתוך האריחים מיקרו-אנימציות: גרף קטן שמצייר את עצמו, מונה מספרים, אייקון בלולאה ואריח תמונה עם זום איטי. האריחים נכנסים בכניסה מדורגת. השירותים: [רשימת שירותים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 אריח אחד גדול לשירות הכי רווחי — העין הולכת אליו קודם.

מכירה

טבלת מחירים עם מתג חודשי/שנתי

משווים חבילות בשנייה, והחבילה שאתם רוצים למכור בולטת.

איפה זה עובד: מנויים, ריטיינר, חבילות שירות, SaaS

מה צריך להכין

  • 3 חבילות עם מחירים ויתרונות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי טבלת מחירים ל-3 חבילות של [שם העסק]: [חבילה 1 ומחיר], [חבילה 2 ומחיר], [חבילה 3 ומחיר]. האמצעית מודגשת עם תגית 'הכי פופולרי'. מתג חודשי/שנתי ב-CSS בלבד (radio) שמחליף מחירים במעבר חלק ומראה כמה חוסכים בשנתי. רשימת יתרונות עם אייקוני וי ואיקס. במובייל: שורה שגוללים הצידה, עם עצירה על כל חבילה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 החבילה שבאמצע היא זו שנמכרת הכי הרבה — שימו שם את מה שאתם רוצים למכור.

שירותים ומחירים

שורות שירות: תמונה מול טקסט

כל שירות מקבל שורה משלו עם תמונה והסבר. הגולש גולל, מבין מה מציעים ולוחץ.

איפה זה עובד: דף הבית, עמוד שירותים, קבלנים, קליניקות, משרדים, סטודיו

מה צריך להכין

  • 3 שירותים: שם ופסקה קצרה לכל אחד
  • קישור לעמוד של כל שירות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן שירותים לאתר של [שם העסק]: שורת מותג קטנה, כותרת ומשפט פתיח, ומתחתם שלוש שורות שירות. בכל שורה איור בכרטיס מעוגל מצד אחד, ומהצד השני כותרת, פסקה וכפתור עם חץ לעמוד השירות. הצדדים מתחלפים משורה לשורה, ומאחורי הטקסט מספר השורה (01, 02, 03) ענק ושקוף למחצה. כל שורה מוסתרת עד שמגיעים אליה בגלילה (IntersectionObserver, פעם אחת): האיור מחליק פנימה מהצד שלו, והמספר, הכותרת, הפסקה והכפתור מהצד השני בזה אחר זה. הראשונה נכנסת כבר בטעינה. בגלילה האיור זז מעט בתוך המסגרת שלו (פרלקסה). האיורים הם SVG שטוח בצבעי המותג שאתה מצייר לפי השירות, ובכל אחד פרט אחד שזז בלולאה איטית, למשל רולר צבע או טיפות מים. בריחוף הכפתור מתרומם והחץ זז. במובייל טור אחד, והאיור תמיד מעל הטקסט. השירותים: [3 שירותים: שם, פסקה קצרה, טקסט לכפתור וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 פסקה של שתיים עד שלוש שורות לכל שירות. טקסט ארוך שובר את הקצב ואת יישור התמונה.

שירותים ומחירים

אריחי שירותים לפי קהל

כל גולש מזהה את עצמו באריח אחד, ומגיע בלחיצה לעמוד שנכתב בדיוק בשבילו.

איפה זה עובד: קייטרינג, אולמות, מכללות, קליניקות, כל עסק עם כמה קהלי יעד

מה צריך להכין

  • 5 קהלים: שורת קהל, שם שירות ומשפט קצר לכל אחד
  • תמונה וקישור לעמוד של כל שירות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן שירותים לפי קהל לאתר של [שם העסק]: שורת מותג, כותרת ושורת משנה, ומתחתן גריד של 5 אריחים. כל אריח הוא קישור לעמוד השירות: תמונה, שכבת צבע מהמותג שמתחזקת כלפי מטה, ועליה שורת קהל ושם השירות. בריחוף או בפוקוס התמונה מתקרבת, השכבה מתכהה, הכיתוב עולה ומתחתיו מופיעים משפט קצר ועיגול עם חץ. במחשב 3 עמודות והאריח הראשון רחב כפול. האריחים נכנסים בדירוג כשהסקשן נכנס למסך (IntersectionObserver), ואז זרקור עובר ביניהם כל 2.6 שניות, מציג את מצב הריחוף ועוצר כשהעכבר או הפוקוס בגריד. במובייל ובמסכי מגע: 2 עמודות, האריח הרחב לכל הרוחב, המשפט מוצג תמיד והחץ בפינה העליונה, והזרקור רק מקרב את התמונה ומכהה את השכבה. האריחים: [5 קהלים: שורת קהל, שם שירות, משפט קצר וקישור]. התמונות: [קישורים לתמונות]. בלי תמונה: איור SVG שטוח של השירות במבט על. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 נסחו כל אריח מהצד של הלקוח: 'לגנים ולבתי ספר', ולא 'חטיבת מוסדות'.

שירותים ומחירים

שישה שירותים: אייקון, טקסט וכפתור

כל השירותים במבט אחד, ולכל שירות כפתור משלו. הגולש מוצא את שלו ולוחץ.

איפה זה עובד: דף הבית, עמוד שירותים, עסק עם כמה תחומי פעילות

מה צריך להכין

  • 6 שירותים: שם ותיאור של שתי שורות
  • קישור לעמוד של כל שירות
  • כותרת ותת-כותרת לסקשן
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן שירותים לאתר של [שם העסק]: שורת מותג קטנה, כותרת גדולה ומולה תת-כותרת קצרה. מתחתן קו מפריד דק ומקווקו, ועליו אייקון קטן שמתאים ל[תחום] נע לאט מקצה לקצה וצובע את הקו מאחוריו. מתחת לקו שישה שירותים בכרטיסים שקופים, בלי רקע: אייקון קווי בתוך עיגול, שם השירות, תיאור של שתי שורות וכפתור טקסט 'לפרטים' עם חץ. בריחוף או בפוקוס העיגול מתמלא בצבע המותג מהמרכז החוצה, מסגרת דקה מופיעה סביב הכרטיס והחץ זז קדימה, הכול ב-opacity ו-scale. עד שהגולש נוגע, מצב הריחוף עובר לבד מכרטיס לכרטיס כל שתי שניות, ובמגע הכרטיס שנגעו בו נשאר מסומן. הכרטיסים נכנסים בדירוג כשהסקשן נכנס למסך (IntersectionObserver). במחשב שלושה טורים, בטאבלט שניים, ובמובייל טור אחד עם האייקון לצד הטקסט. השירותים: [6 שירותים: שם, תיאור של שתי שורות וקישור לכל אחד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כתבו תיאורים באורך דומה, שתי שורות לכל שירות. כך הכפתורים מתיישרים בשורה אחת.

שירותים ומחירים

אריחי שירות גבוהים עם תמונת רקע

כל שירות מקבל אריח גדול עם תמונה, והגולש בוחר במבט אחד לאן להיכנס.

איפה זה עובד: דף הבית, עמוד שירותים, מוסכים, קליניקות, בעלי מקצוע

מה צריך להכין

  • כותרת ומשפט פתיח לסקשן
  • 4 שירותים: שם, משפט תיאור וקישור לכל אחד
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן שירותים לאתר של [שם העסק]: שורת מותג קטנה, כותרת ולצידה משפט פתיח, ומתחתם ארבעה אריחים גבוהים זה לצד זה. בכל אריח: איור רקע שמצויר ב-SVG לפי השירות וממלא את כל האריח, שכבת גרדיאנט כהה מלמטה, שם השירות וכפתור 'לפרטים ומחיר', וכל האריח לחיץ ומוביל לעמוד השירות. בריחוף או בפוקוס האריח מתרומם עם צל ומסגרת בצבע המותג, האיור מתקרב לאט, הכפתור נצבע בצבע המותג, ושם השירות עולה ומפנה מקום למשפט תיאור מעל הכפתור. בטעינה האריחים נכנסים בזה אחר זה, ואז מצב הריחוף עובר לבד מאריח לאריח כל 3 שניות, עד שהגולש נוגע. במובייל האריחים הופכים לפס החלקה עם scroll-snap שרואים בו אריח וחצי (בטאבלט שניים וחצי), והאריח שבתחילת הפס הוא הפעיל. למי שביקש פחות תנועה התיאורים מוצגים מראש. התוכן: [כותרת ומשפט פתיח], [4 שירותים, לכל אחד שם, משפט תיאור וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שם שירות של שתיים עד שלוש מילים. שם ארוך נשבר לשלוש שורות ומסתיר את האיור.

שירותים ומחירים

שלושה אריחי שירות ברוחב מלא

שלושת השירותים המרכזיים תופסים את כל רוחב המסך, והגולש נכנס לשלו בלחיצה אחת.

איפה זה עובד: עורכי דין, יועצים, קליניקות, משרדים, דף הבית מתחת להירו

מה צריך להכין

  • 3 שירותים: שם, משפט קצר וקישור
  • נושא לאיור של כל שירות
  • כותרת ומשפט פתיח לסקשן
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן שירותים לאתר של [שם העסק]: כותרת ומשפט פתיח, ומתחתיהם שלושה אריחים גדולים שממלאים את כל רוחב העמוד בלי רווחים. בכל אריח איור רקע ב-SVG ובגרדיאנטים בצבעי המותג, עם פרט אחד שנע לאט בלולאה, הכהיה מלמטה, כותרת, משפט קצר וכפתור 'לעמוד השירות' עם חץ. כל האריח לחיץ. האריח שמרחפים עליו או מגיעים אליו במקלדת מתרחב מעט על חשבון השכנים (transition על flex-grow, רוחב הטקסט קבוע), קו תחתון נמתח מתחת לכותרת, האיור מתקרב מעט והחץ זז. ביציאת העכבר חוזרים לרוחב שווה. כשהסקשן נכנס למסך (IntersectionObserver) האריחים מופיעים בזה אחר זה, ואז סיור אוטומטי מפעיל אריח אחר כל 2.4 שניות, עד ריחוף או נגיעה. במובייל: שלושתם בטור ונמוכים יותר, טקסט מימין ואיור משמאל, והפעיל גבוה מעט. השירותים: [3 שירותים: שם, משפט קצר, נושא לאיור וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו את שלושת השירותים שמביאים הכי הרבה פניות. רביעי כבר שובר את השורה.

לידים

הווידג'ט החכם של סופי לוואטסאפ

הגולש בוחר שירות בצ'אט קטן ומגיע אליכם לוואטסאפ עם הודעה מוכנה. כפתור ההמרה מספר 1 שלנו.

איפה זה עובד: כל אתר שירות — קליניקות, בעלי מקצוע, משרדים

מה צריך להכין

  • מספר וואטסאפ
  • 3–5 שירותים
  • תמונת פרופיל או לוגו
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי ווידג'ט וואטסאפ צף לאתר של [שם העסק]: כפתור עגול בפינה שפועם, ובלחיצה נפתח חלון צ'אט מדומה עם התמונה של [שם איש הקשר], הודעת פתיחה 'היי, איך אפשר לעזור?' עם אנימציית 'מקליד…', וכפתורי בחירה של השירותים: [שירות 1], [שירות 2], [שירות 3]. בחירה פותחת וואטסאפ למספר [מספר בפורמט 972] עם הודעה מוכנה שכוללת את השירות. חובה: במובייל לפתוח עם window.location ולא window.open (נחסם), להעביר את הווידג'ט ל-body כדי שיישאר צף, ולשלוח dataLayer.push({event:'whatsapp_click'}) לפני המעבר — למעקב המרות. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 זה הרכיב שמביא אצלנו הכי הרבה פניות. מדביקים אותו בפוטר של כל האתר, לא רק בדף הבית.

לידים

פס יצירת קשר דביק למובייל

'התקשרו' ו'וואטסאפ' תמיד ביד — בדיוק ברגע שהגולש מוכן.

איפה זה עובד: כל אתר שירות, במיוחד עם תנועה מהטלפון

מה צריך להכין

  • טלפון
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי פס דביק בתחתית המסך במובייל לאתר של [שם העסק], עם 2 כפתורים: 'התקשרו' (לטלפון [טלפון]) ו'וואטסאפ' (למספר [מספר]). הפס מופיע רק אחרי שגוללים מעבר לאזור הפתיחה, ונעלם כשמגיעים לטופס יצירת הקשר או לפוטר (IntersectionObserver). במחשב הוא הופך לגלולה צפה בצד. אנימציית כניסה עדינה מלמטה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שבעים אחוז ויותר מהגולשים של עסקים מקומיים מגיעים מהטלפון — שם הפס הזה עושה את ההבדל.

לידים

טופס ליד חכם בשלבים

במקום טופס מפחיד — שאלות קצרות בלחיצה. יותר אנשים מסיימים, ואתם מקבלים ליד מסונן.

איפה זה עובד: דף נחיתה לקמפיין, עמוד הצעת מחיר

מה צריך להכין

  • 3 שאלות סינון עם אפשרויות
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי טופס השארת פרטים ב-4 שלבים לאתר של [שם העסק]: 1) איזה שירות — [אפשרויות] 2) גודל או תקציב — [אפשרויות] 3) מתי — [אפשרויות] 4) שם וטלפון. כל אפשרות היא כרטיס גדול ללחיצה, עם פס התקדמות, בדיקת טלפון ישראלי (05X-XXXXXXX) וניסוח חם. במסך הסיום: הצעה להמשיך בוואטסאפ למספר [מספר] עם הודעה שמסכמת את כל התשובות. את הנתונים לשלוח ל-[כתובת הטופס או וובהוק]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 השאלה הראשונה צריכה להיות הכי קלה — מי שלחץ פעם אחת, כמעט תמיד מסיים.

לידים

מחשבון הצעת מחיר

הלקוח רואה מחיר משוער לבד ומגיע אליכם כבר מוכן לסגור.

איפה זה עובד: ניקיון, שיפוצים, הובלות, אירועים, כל שירות עם מחירון

מה צריך להכין

  • המחירון או הנוסחה שלכם
  • 3–5 פרמטרים שמשפיעים על המחיר
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מחשבון מחיר אינטראקטיבי לאתר של [שם העסק]: סליידרים ומתגים עבור [פרמטרים — למשל: גודל במ״ר, מספר חדרים, תדירות, תוספות]. טווח המחיר המשוער מתעדכן חי עם אנימציית ספירה, עם פירוט לפי רכיבים. נוסחת המחיר: [הנוסחה או המחירון שלכם]. כפתור 'קבלו הצעה מדויקת בוואטסאפ' ששולח למספר [מספר] את כל מה שנבחר. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 מראים טווח ולא מחיר מדויק — זה מזמין פנייה במקום השוואה.

לידים

וואטסאפ חכם ששואל ומסנן

הגולש עונה על כמה שאלות בלחיצה, ואתם מקבלים בוואטסאפ פנייה מסודרת במקום 'היי'.

איפה זה עובד: יועצים, משרדים, קליניקות, בעלי מקצוע, עסקי שירות

מה צריך להכין

  • 4 שאלות סינון עם תשובות
  • מספר וואטסאפ
  • שם ותמונה של נציג
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי כפתור וואטסאפ צף לאתר של [שם העסק] שמסנן פניות לפני הוואטסאפ: כפתור ירוק פועם בפינה, שנפתח לבד כשנייה אחרי הטעינה לחלון צ'אט בגובה קבוע עם תמונה ושם של [שם הנציג], נקודת 'מחוברים עכשיו' ופס התקדמות דק שכבר מלא חלקית בשאלה הראשונה. ההודעות נערמות מלמטה: ברכה ואז [4 שאלות סינון עם אפשרויות תשובה] בזו אחר זו, כל הודעה אחרי אנימציית 'מקליד'. למטה אזור תשובות שמוצג כבר מהפתיחה: 'שאלה 1 מתוך 4', כפתורי תשובה שנכנסים כבועה בלחיצה, וכפתור 'חזרה' שמבטל את התשובה האחרונה. בסוף כרטיס 'ההודעה שתישלח' עם שורה לכל תשובה, ורק אז כפתור 'המשך לוואטסאפ': קישור רגיל ל-wa.me/[מספר בפורמט 972] (לא window.open, שנחסם במובייל) עם הסיכום כהודעה מוכנה, ולפניו dataLayer.push של whatsapp_click. במובייל החלון עולה מלמטה ברוחב מלא. סגירה באיקס או ב-Esc. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שאלת התקציב או הדחיפות היא זו שמסננת. שימו אותה שנייה, אחרי שאלה קלה.

לידים

בורר נציגים בוואטסאפ

הגולש בוחר עם מי לדבר ומגיע ישר לאדם הנכון. פחות העברות, תשובה מהירה יותר.

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

מה צריך להכין

  • 3 עד 4 נציגים: שם, תפקיד ומספר וואטסאפ
  • שעות פעילות והודעת פתיחה לכל נציג
  • תמונות פנים, אם יש
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי בורר נציגים בוואטסאפ לאתר של [שם העסק]: כפתור וואטסאפ צף שפועם, ושנייה אחרי הטעינה נפתח לבד חלון בגובה קבוע עם כפתור סגירה. בראשו 'עם מי תרצו לדבר?' ומתחת רשימת הנציגים: תמונה עגולה או ראשי תיבות, שם, תפקיד, חץ, ונקודת זמינות עם כיתוב: ירוקה ופועמת 'זמין עכשיו' או אפורה 'לא זמין'. הזמינות מחושבת בכל פתיחה משעות הפעילות של כל נציג, לפי שעון ישראל (Asia/Jerusalem). בחירה בנציג פותחת ב-cross-fade את המסך שלו: חץ חזרה, תמונה, שם וסטטוס, אנימציית 'מקליד' ואז הודעת פתיחה אישית ממנו, וכפתור ירוק 'וואטסאפ עם' ושמו הפרטי: קישור אמיתי ל-wa.me למספר שלו עם הודעה מוכנה. נציג לא זמין מציג גם 'נחזור אליכם מחר בבוקר' (או מתי שהוא חוזר), והכפתור הופך ל'השאירו הודעה'. הנציגים: [3 עד 4 נציגים: שם, תפקיד, מספר, שעות פעילות והודעת פתיחה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הגדירו לכל נציג שעות אמיתיות. נקודה ירוקה שלא עונה שורפת את האמון.

לידים

טופס צד נשלף עם לשונית

לשונית קטנה בקצה המסך שתמיד שם. לחיצה אחת, שם וטלפון, והליד אצלכם.

איפה זה עובד: מכללות, קליניקות, בעלי מקצוע, כל אתר שירות שרוצה פניות מכל עמוד

מה צריך להכין

  • 5 נושאים לבחירה
  • זמן המענה שאתם מתחייבים אליו
  • כתובת לקבלת הפניות (webhook או CRM)
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי טופס צד נשלף לאתר של [שם העסק]: לשונית אנכית צמודה לקצה השמאלי של המסך עם אייקון והכיתוב 'השאירו פרטים'. לחיצה מחליקה פנימה פאנל צף מעל רקע מעומעם, והלשונית מתחבאת. בפאנל: כותרת, שורת זמן מענה עם נקודה ירוקה פועמת, צ'יפים לבחירת נושא אחד (הראשון מסומן מראש, הנבחר נצבע ומקבל וי), שם, טלפון, כפתור 'שלחו ונחזור אליכם' ושורת 'בלי התחייבות'. שם קצר או טלפון שאינו 9 עד 10 ספרות מציגים שגיאה מתחת לשדה. אחרי שליחה הטופס מתחלף ב-cross-fade למסך תודה עם וי, שם הפונה, הנושא שנבחר וכפתור 'סגירה'. סוגרים ב-X, ב-Esc או בלחיצה בחוץ, והפוקוס חוזר ללשונית. במובייל הלשונית הופכת לכפתור רחב בתחתית והפאנל עולה מלמטה. בטעינה הפאנל נפתח לבד אחרי כשנייה, פעם אחת בלבד. שליחה ב-fetch אל [כתובת לקבלת הפניות]. הנושאים: [5 נושאים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 אל תבקשו יותר משם וטלפון. כל שדה נוסף מוריד פניות, את השאר שואלים בשיחה.

לידים

טופס לידים ומייל התראה מעוצב

כל פנייה מהאתר נוחתת אצלכם כמייל ברור עם כפתורי חיוג ווואטסאפ. חוזרים לליד מהר.

איפה זה עובד: עמודי שירות, דף צור קשר, דפי נחיתה

מה צריך להכין

  • רשימת נושאים לבחירה בטופס
  • כתובת וובהוק שמקבלת את הפניות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי טופס לידים עם מייל התראה מעוצב לאתר של [שם העסק]: מסך מפוצל. בצד אחד טופס ממותג עם שם, טלפון, נושא לבחירה מתוך [רשימת נושאים] והודעה, בדיקת טלפון ישראלי, וכפתור 'שלחו פנייה' שמתחלף ל'שולח' ואז ל'הפנייה נשלחה'. בצד השני תיבת דואר מדומה של בעל העסק: מונה 'לא נקראו', שתי הודעות ישנות ומקום שמור למייל הבא. בשליחה מעטפה עפה מהכפתור אל התיבה, המונה קופץ, ובראש התיבה נפתח מייל ההתראה: שם הליד בגדול, פס 'בנוגע ל' עם שם העמוד שממנו נשלחה הפנייה (מכותרת ה-H1), שורות טלפון, נושא, הודעה ושעת קבלה, וכפתורי 'חייגו' ו'וואטסאפ'. מייל קודם מתכווץ לשורה ברשימה. בטעינה ליד לדוגמה מוקלד ונשלח לבד, ואז הטופס מתנקה. במובייל התיבה מתחת לטופס והמסך גולל אליה כשהמייל נוחת. המייל בנוי כטבלת HTML עם סגנונות inline ונשלח עם הפנייה ל-[כתובת וובהוק]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שלחו את המייל לנייד של מי שעונה ללידים. כפתור החיוג שווה רק כשפותחים אותו בטלפון.

לידים

מחשבון משכנתא חי

הגולש גורר סכום, שנים וריבית ורואה מיד כמה ישלם בחודש, ופונה אליכם עם המספרים ביד.

איפה זה עובד: תיווך ונדל״ן, יועצי משכנתאות, קבלנים ויזמים, עמוד נכס

מה צריך להכין

  • טווחי הסליידרים: סכום, שנים וריבית
  • מספר וואטסאפ לקבלת הפניות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מחשבון משכנתא לאתר של [שם העסק]: שלושה סליידרים, לכל אחד ערך נוכחי בולט וערכי קצה: סכום ההלוואה, תקופה בשנים וריבית שנתית, בטווחים [טווחי הסליידרים]. לידם לוח תוצאה כהה: טבעת SVG של קרן מול ריבית ובמרכזה ההחזר החודשי, ומתחתיה הקרן וסך הריבית עם סכום ואחוז, וסך ההחזר. הכול מתעדכן תוך כדי גרירה לפי לוח שפיצר, בשקלים עם פסיקים. בטעינה סליידר הסכום זז פעם אחת לבד והמספרים רצים איתו. מתחת לתוצאה כפתור 'רוצים הצעה מדויקת?' ושורת הבהרה שהחישוב להמחשה בלבד. הכפתור פותח במקומו טופס קצר: סיכום המספרים, שם, טלפון וכפתור 'שלחו בוואטסאפ'. שדה חסר מסומן בהודעה קצרה. שליחה תקינה פותחת וואטסאפ ל-[מספר בפורמט 972] עם השם, הטלפון והמספרים, והטופס מתחלף באישור עם כפתור 'חזרה למחשבון'. במובייל התוצאה למעלה והכפתור בסוף. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 קבעו את ברירת המחדל לפי עסקה טיפוסית אצלכם. מספר פתיחה מציאותי מרגיש אמין.

לידים

שאלון איזה מסלול מתאים לי

שלוש לחיצות, והגולש מקבל המלצה אישית במקום להתלבט מול רשימת מסלולים.

איפה זה עובד: סטודיו, חדרי כושר, חוגים, קורסים, קליניקות, כל עסק עם כמה מסלולים

מה צריך להכין

  • 3 שאלות עם 3 תשובות לכל אחת
  • 4 מסלולים ולמי כל אחד מתאים
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי שאלון 'איזה מסלול מתאים לי' לאתר של [שם העסק]: 3 שאלות, אחת בכל פעם (תדירות, רמה, מטרה), ולכל אחת 3 כפתורים עם כותרת ושורת הסבר. לחיצה מסמנת וי ועוברת לבד לשאלה הבאה ב-cross-fade, והכפתורים נכנסים בזה אחר זה. מעליהם פס התקדמות עם 'שאלה 1 מתוך 3', מלא ברבע כבר בטעינה. יש כפתור 'חזרה', וגובה אזור השאלות קבוע. בראש הכרטיס 4 כפתורי מסלול עם אייקון ושורת תיאור: סימון עובר ביניהם לבד ומחליף את התיאור, לחיצה על מסלול עוצרת אותו שם, ובסוף הוא נעצר על המומלץ. בסוף כרטיס המלצה: שם המסלול, תדירות ורמה, ושלוש סיבות 'למה דווקא הוא' לפי התשובות. בלי מחיר: רק 'את המחירון נשלח בוואטסאפ'. כפתור 'שריינו שיעור ניסיון' פותח וואטסאפ ל-[מספר בפורמט 972] עם המסלול והתשובות, ולידו 'להתחיל מחדש'. התוכן: [3 שאלות ותשובות], [4 מסלולים ולמי כל אחד מתאים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 אל תציגו מחיר בתוצאה. מי שקיבל המלצה אישית רוצה קודם לנסות, והמחיר בא בשיחה.

לידים

מרכיב מוצר אינטראקטיבי

הלקוח מרכיב את המוצר בעצמו על שרטוט חי, ושולח לכם מפרט מדויק במקום שאלה כללית.

איפה זה עובד: זגגות, מטבחים, דלתות, פרגולות, ארונות וכל מוצר בהתאמה אישית

מה צריך להכין

  • רשימת החלקים והאפשרויות לכל חלק
  • ברירת המחדל לכל חלק
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מרכיב מוצר אינטראקטיבי לאתר של [שם העסק]: שרטוט SVG של מקלחון במבט חזית (דופן קבועה, דלת, פרזול וידית), ועליו 3 נקודות פועמות שמסמנות איפה לוחצים. לחיצה על חלק, על הנקודה או על הלשונית שלו מדגישה אותו ומציגה את האפשרויות שלו: זכוכית (עובי וגוון), פרזול (גימור), ידית (כיוון פתיחה). השרטוט משתנה מיד: פס הקצה של הזכוכית מתעבה, הגוון מתחלף ב-cross-fade בין שכבות, המתכת נצבעת בגרדיאנט, ובהחלפת כיוון השרטוט מתהפך ב-scaleX והדלת נפתחת מעט ונסגרת. מתחת סיכום מפרט בארבעה תאים שמתעדכן חי, והתא שהשתנה מהבהב. כפתור 'שלחו לי הצעה על המפרט הזה' פותח וואטסאפ ל-[מספר בפורמט 972] עם המפרט, שורה לכל פריט. בטעינה הדגמה אחת לבד: מחליפה אפשרות בכל חלק ונעצרת בנגיעה. במחשב השרטוט והסיכום לצד האפשרויות. התוכן: [האפשרויות וברירת המחדל לכל חלק]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שלושה חלקים לחיצים זה הגבול. מעבר לזה השרטוט מתמלא נקודות והגולש הולך לאיבוד.

לידים

סימולטור גבות חי, שערה אחר שערה

הלקוחה מעצבת את הגבות על המסך ושולחת לכם בוואטסאפ בדיוק מה שהיא רוצה.

איפה זה עובד: מעצבות גבות, איפור קבוע, קליניקות אסתטיקה, מכוני יופי

מה צריך להכין

  • 5 צורות, 3 טכניקות ו-5 גוונים שאתם מציעים
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סימולטור גבות חי על canvas לאתר של [שם העסק]: זוג גבות סימטרי על רקע בגוון עור, מצויר שערה אחר שערה, וקו עין סגורה עדין מתחת לכל גבה. בוחרים צורה ([5 צורות], עם ציור קטן בכל כפתור), טכניקה ([3 טכניקות]: שערות, הצללה מנוקדת, משולב) וגוון ([5 גוונים] בעיגולי צבע). כל בחירה מציירת את הגבות מחדש בצמיחה מההתחלה אל הקצה, והציור הקודם דועך. מתג 'קווי מיפוי' מוסיף קווים מקווקווים ותוויות בהתחלה, בשיא ובקצה, קו גובה בין השיאים וציר סימטריה באמצע. בטעינה הגבות צומחות לבד, ואז הדגמה אוטומטית (עם תווית ופס התקדמות דק) מחליפה בחירה כל 3 שניות, עד הנגיעה הראשונה. מתחת: סיכום הבחירה, כפתור 'רוצה בדיוק כזה' שפותח וואטסאפ ל-[מספר בפורמט 972] עם הבחירה, והערה שזו הדמיה בלבד. במובייל הקנבס נצמד לראש המסך. מיקומי השערות מזרע קבוע, כדי שלא ירצדו. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הציעו רק גוונים שיש לכם באמת בפיגמנטים. לקוחה שבחרה גוון תבקש בדיוק אותו.

לידים

פופאפ מבצע חכם עם ספירה לאחור

קופץ ברגע הנכון, פעם אחת בלבד, ואוסף טלפון לפני שהגולש עוזב את האתר.

איפה זה עובד: חנויות, סדנאות וקורסים, קליניקות, מבצעי חגים, דפי נחיתה

מה צריך להכין

  • תמונה או איור למבצע
  • כותרת המבצע ותאריך הסיום
  • כתובת לקבלת הלידים (webhook)
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי פופאפ מבצע לאתר של [שם העסק]: קופץ אחרי [מספר שניות] שניות, או קודם אם העכבר יוצא מהחלון כלפי מעלה, ופעם אחת בביקור (sessionStorage). בפנים: [תמונה או איור] עם מדבקת הנחה, תגית, [כותרת המבצע], שורת הסבר, ספירה לאחור עד [תאריך סיום המבצע] בימים, שעות, דקות ושניות, שדה טלפון נייד וכפתור 'שלחו לי את הקוד' עם הילה פועמת. מספר שגוי מקבל שגיאה מתחת לשדה. מספר תקין נשלח ב-fetch אל [כתובת לקבלת הלידים] והתוכן מתחלף במסך תודה עם המספר וכפתור 'חזרה לאתר'. סגירה ב-X, ב-Esc או בלחיצה על הרקע. כשהוא פתוח הגלילה נעולה והפוקוס נשאר בתוכו. במחשב כרטיס בשתי עמודות במרכז, במובייל מגירה שעולה מלמטה. מצב בדיקה (משתנה DEBUG): לוח קטן בפינה עם הטיימר מתמלא, מה הפעיל את הפופאפ ואם כבר הוצג, וכפתור 'הציגו שוב' שמאפס את הביקור ומתחיל מחדש. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 אל תקפיצו מוקדם מדי. 8 עד 15 שניות נותנות לגולש לראות קודם במה מדובר.

לידים

מחשבון דמי הבראה

הגולש מזין ותק והיקף משרה, רואה מיד כמה מגיע לו ופונה אליכם לבדיקת התלוש.

איפה זה עובד: רואי חשבון, הנהלת חשבונות, חשבי שכר, עורכי דין לדיני עבודה

מה צריך להכין

  • טבלת ותק וימי הבראה לפי הענף
  • תעריף ליום הבראה עדכני
  • מספר וואטסאפ לקבלת הפניות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מחשבון דמי הבראה לאתר של [שם העסק], בכרטיס אחד: ותק בשנים בכפתורי פלוס ומינוס עם מספר גדול (1 עד 40), היקף משרה בסליידר מ-10% עד 100%, ותעריף ליום בשדה שאפשר לעדכן (ברירת מחדל [תעריף ליום], שדה ריק חוזר אליה). מתחתם לוח תוצאה כהה שמתעדכן חי: 'מגיעים לכם 8 ימי הבראה', שורת 10 נקודות שמתמלאות לפי מספר הימים, הסכום בשקלים במספר גדול שרץ לערך החדש, ופירוט בשורה אחת: ימים כפול תעריף כפול אחוז משרה. לצד הכרטיס טבלת הוותק [טבלת ותק וימים], ופס כהה עם התג 'אתם כאן' מחליק אל השורה של הוותק שנבחר. מתחתיה הערה שהחישוב להמחשה בלבד וכפתור 'רוצים שנבדוק את התלוש שלכם?' שפותח וואטסאפ ל-[מספר בפורמט 972] עם הנתונים והתוצאה. בטעינה הוותק עולה לבד משנה אחת עד 12, והתוצאה והטבלה מתעדכנות איתו. נגיעה עוצרת את ההדגמה. במובייל הכול בטור אחד. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 עדכנו את התעריף והטבלה פעם בשנה. מחשבון עם תעריף ישן פוגע באמון.

לידים

רצועת לידים עם טופס בשורה

שם, טלפון ונושא בשורה אחת, באמצע העמוד. מי שהשתכנע משאיר פרטים בלי לחפש את צור קשר.

איפה זה עובד: דף הבית, סוף עמוד שירות, מכללות, קליניקות, נותני שירות

מה צריך להכין

  • שורת פתיח וכותרת
  • 4 נושאים לבחירה ו-3 הבטחות קצרות
  • כתובת לפניות (וובהוק או מערכת לידים)
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן רצועת לידים לאתר של [שם העסק]: רצועה בצבע המותג עם הילה רכה שנעה לאט, גלולה עם נקודה פועמת וכותרת עם הדגשה בצבע המשני: [שורת פתיח וכותרת]. מתחת מגש לבן עם טופס בשורה: 'שם מלא', 'טלפון נייד', select 'מה מעניין אתכם?' עם [4 נושאים] וכפתור 'חזרו אליי'. תווית מעל כל שדה ושורה שמורה מתחתיו: תקין מקבל וי ירוק ליד התווית, ושגוי ביציאה ממנו הודעה עדינה בגוון חם עד שמתקנים. טלפון נבדק כמספר ישראלי. בשליחה ספינר ו'שולחים' בכפתור, ואז במקום הטופס ובגודלו הודעת תודה עם השם הפרטי, הנושא וכפתור 'פנייה נוספת'. מתחת שורת אמון עם אייקונים: [3 הבטחות קצרות]. בטעינה החלקים נכנסים בהדרגה, והטופס מתמלא לבד פעם אחת כהדגמה חזותית: מציג טעינה ותודה ומתאפס, בלי fetch (נגיעה עוצרת). במובייל השדות וההבטחות בטור. fetch אל [כתובת לפניות] רק כשהגולש שולח. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 אל תוסיפו שדה רביעי. כל שדה נוסף מוריד פניות, ואת השאר שואלים בטלפון.

קריאה לפעולה

קריאה לפעולה עם חיוג ווואטסאפ

מי שהשתכנע באמצע העמוד לא צריך לגלול עד הסוף. חיוג או וואטסאפ בלחיצה אחת.

איפה זה עובד: בין סקשנים בעמוד הבית ובעמודי שירות, בכל עסק שעונה לטלפון

מה צריך להכין

  • כותרת חדה אחת
  • טלפון ומספר וואטסאפ
  • שעות המענה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן קריאה לפעולה לאמצע העמוד לאתר של [שם העסק]: רצועה ברוחב מלא שיושבת בין שני סקשנים, ברקע בצבע המותג. מעל הרקע דוגמה עדינה של סמל קטן שחוזר ומתאים לתחום [תחום], בקווי מתאר לבנים כמעט שקופים, שזזה לאט באלכסון בלולאה רציפה (שכבה נפרדת שזזה ב-transform). בצד אחד כותרת אחת חדה: [כותרת], ומתחתיה שורה קטנה: [שעות המענה]. בצד השני שני כפתורי גלולה עם אייקונים: ראשי לבן 'חייגו [טלפון]' שמחייג בלחיצה, ומשני כהה 'שלחו וואטסאפ' שפותח שיחה עם [מספר בפורמט 972]. הכותרת, השורה והכפתורים נכנסים בזה אחר זה כשהרצועה מגיעה למסך (IntersectionObserver). מהכפתור הראשי יוצאת טבעת שמתרחבת ונמוגה פעם ב-4 שניות. בריחוף הכפתור עולה מעט והאייקון גדל מעט. במובייל הכול ממורכז והכפתורים ברוחב מלא, זה מעל זה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

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

קריאה לפעולה

קריאה לפעולה רכה לסוף העמוד

הגולש סיים לקרוא ועדיין מתלבט. סקשן רגוע אחד מוריד את החשש ומזמין לפנות.

איפה זה עובד: סוף עמוד הבית, עמודי שירות, סטודיו, קליניקות, יועצים

מה צריך להכין

  • כותרת מזמינה ומשפט הרגעה
  • 3 נקודות אמון קצרות
  • קישור להרשמה ומספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן קריאה לפעולה רגוע לסוף העמוד, לאתר של [שם העסק]: כרטיס בהיר עם פינות עגולות, ובמרכזו שורת פתיח קטנה, כותרת מזמינה [כותרת], משפט הרגעה [בסגנון 'בלי התחייבות, עונים תוך שעה'] ושני כפתורים זה לצד זה: ראשי מלא עם חץ שמוביל ל-[קישור להרשמה], ומשני בקו מתאר עם אייקון וואטסאפ שפותח שיחה למספר [מספר בפורמט 972] עם הודעה מוכנה. בריחוף הכפתור מתרומם מעט והחץ זז הצידה. מתחת לכפתורים שלוש נקודות אמון קצרות בשורה, כל אחת עם עיגול קטן וסימן וי: [3 נקודות אמון]. ברקע הכרטיס, מאחורי הטקסט, עיגול גרדיאנט רך בצבעי המותג שנע ומתנפח לאט בלולאה. כשהסקשן נכנס למסך (IntersectionObserver, פעם אחת) התוכן עולה בדירוג: כותרת ומשפט, אחריהם כפתור אחרי כפתור, ואז נקודות האמון. במובייל הכפתורים ברוחב מלא, אחד מתחת לשני, ונקודות האמון בטור. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 משפט ההרגעה עונה על החשש הכי גדול של הלקוח. שאלו שלושה לקוחות מה כמעט עצר אותם.

קריאה לפעולה

רצועת קריאה לפעולה בכפתור אחד

שאלה אחת, הבטחה אחת וכפתור אחד. הגולש שמתלבט יודע בדיוק מה הצעד הבא.

איפה זה עובד: אמצע עמוד הבית, סוף עמוד שירות, עסקים שמוכרים בשיחה

מה צריך להכין

  • שאלה, כותרת ומשפט הרגעה
  • טקסט לכפתור ומספר וואטסאפ
  • מוטיב לאיור הקו (למשל מצפן)
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן קריאה לפעולה לאתר של [שם העסק]: רצועה ברוחב מלא ברקע צבע המותג, עם טקסט כהה. מימין: שאלה קטנה עם קו קצר לפניה '[שאלה, למשל: עדיין מתלבטים?]', כותרת גדולה '[כותרת]', משפט הרגעה '[משפט הרגעה]' וכפתור אחד כהה ומעוגל '[טקסט הכפתור]' שפותח וואטסאפ למספר [מספר בפורמט 972]. בקצה הכפתור עיגול עם חץ: בריחוף הכפתור עולה מעט והחץ זז שמאלה, ומאחוריו הילה שמתרחבת ונמוגה כל 3 שניות. בצד שמאל איור קו גדול של [מצפן, או מוטיב אחר מהתחום]: קווים דקים בלבן חצי שקוף, בלי מילוי, גדול מגובה הרצועה כך שהקצה שלה חותך אותו. האיור מסתובב לאט, סיבוב שלם בדקה, והמחוג שבמרכזו מתנדנד קלות. כשהרצועה נכנסת למסך (IntersectionObserver) השאלה, הכותרת, המשפט והכפתור עולים בזה אחר זה. במובייל הכול ממורכז, הכפתור ברוחב מלא והאיור מוסתר. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כפתור אחד בלבד. ברגע שמוסיפים שני, הגולש חוזר להתלבט והרצועה מאבדת את הכוח.

ניווט

תפריט ניווט פרימיום

תפריט זכוכית שמתכווץ בגלילה, מגה-תפריט עם כרטיס מומלץ, ותפריט מובייל מלא.

איפה זה עובד: אתרים עם הרבה שירותים או קטגוריות

מה צריך להכין

  • מבנה התפריט (קטגוריות ותתי-עמודים)
  • שירות אחד להדגשה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי תפריט ניווט ל-[שם העסק]: כותרת דביקה בסגנון זכוכית שמתכווצת בגלילה, מגה-תפריט בריחוף עם עמודות ואייקונים ([המבנה]) וכרטיס מומלץ ל-[השירות], תפריט מובייל על כל המסך עם כניסה מדורגת של הקישורים וכפתור וואטסאפ, והדגשת הסקשן הפעיל תוך כדי גלילה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בתפריט המובייל שימו את הוואטסאפ ראשון — זה מה שרוב הגולשים מחפשים שם.

ניווט

מגירת צד עם חיפוש חי

הגולש פותח תפריט, מקליד שתי אותיות ומגיע ישר לשירות שחיפש. גם באתר עם עשרות עמודים.

איפה זה עובד: אתרים עם הרבה שירותים: שיפוצים, קליניקות, משרדים, מכללות

מה צריך להכין

  • רשימת השירותים, מחולקת לקבוצות
  • פרויקט אחד להדגשה, עם תמונה
  • טלפון ומספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מגירת צד עם חיפוש חי לאתר של [שם העסק]: כפתור 'תפריט' בהדר פותח מגירה מימין על רקע מעומעם ומטושטש, והתוכן נכנס בדירוג. למעלה כותרת, X ושדה חיפוש עם ניקוי: ההקלדה מסננת קישורים ושמות קבוצות, מדגישה את ההתאמה, פותחת קבוצות שנמצאו ומעדכנת מונה ('נמצאו 3 תוצאות'). אין התאמה: הודעה. בגוף: אקורדיון שירותים (אייקון ומספר קישורים לקבוצה, אחת פתוחה בכל רגע) וכרטיס 'פרויקט מומלץ' עם תמונה, נקודה פועמת, שם ושורת פרטים. בתחתית קבועים כפתורי חיוג ווואטסאפ. נסגרת ב-Esc, ברקע, ב-X או בקישור, והפוקוס כלוא בה וחוזר לכפתור התפריט. בטעינה נפתחת לבד, מקלידה חיפוש לדוגמה ומנקה, עד שהגולש נוגע. במובייל כמעט ברוחב המסך, והשדה ב-16px נגד זום באייפון. התוכן: [קבוצות שירותים וקישורים], [פרויקט מומלץ], [טלפון], [מספר בפורמט 972]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 קראו לקישורים במילים שהלקוחות מקלידים, לא בשמות הפנימיים שלכם. אחרת החיפוש לא ימצא.

ניווט

הדר זכוכית צף שנעלם בגלילה

ההדר לא מסתיר את התמונה הראשונה, מפנה מקום בזמן קריאה, וחוזר ברגע שמחפשים את התפריט.

איפה זה עובד: חנויות אונליין, מותגי אופנה ותכשיטים, אתרים עם תמונת הירו גדולה

מה צריך להכין

  • לוגו וקישורי התפריט
  • 3 עד 5 הודעות קצרות לפס הרץ
  • 4 קטגוריות לחנות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי הדר צף לחנות של [שם החנות], קבוע בראש המסך מעל תמונת ההירו. בראש העמוד הוא שקוף עם טקסט בהיר, ומעליו פס הודעות שרץ בלולאה ונעצר בריחוף: [3 עד 5 הודעות קצרות]. אחרי 24 פיקסלים של גלילה פס ההודעות עולה החוצה וההדר הופך לפס זכוכית מעוגל שמרחף עם שוליים: רקע בהיר חצי שקוף עם backdrop-filter: blur, מסגרת דקה, צל עדין וטקסט כהה. בגלילה למטה הוא מחליק החוצה, ובגלילה למעלה חוזר מיד (כיוון הגלילה נמדד ב-requestAnimationFrame עם סף של 6 פיקסלים). בהדר: כפתור תפריט, לוגו, אייקון סל עם מונה, ובמחשב גם הקישורים באמצע. כפתור התפריט פותח מגירה מימין על רקע מעומעם: שדה חיפוש, הקישורים בכניסה מדורגת, ו'קנו לפי קטגוריה' עם אריחי אייקון: [4 קטגוריות]. סגירה ב-X, ב-Esc או בלחיצה על הרקע, והעמוד מאחוריה לא נגלל. הקישורים: [קישורי התפריט]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הדר שקוף צריך תמונת הירו כהה ושקטה בחלק העליון. על תמונה בהירה או עמוסה הלוגו נעלם.

ניווט

תפריט מובייל במסך מלא

במקום תפריט צפוף בטלפון: מסך שלם עם קישורים גדולים, תתי עמודים וכפתור קביעת תור.

איפה זה עובד: קליניקות, משרדים, אתרי שירות עם הרבה עמודים

מה צריך להכין

  • מבנה התפריט עם תתי העמודים
  • טלפון, כתובת ושעות פעילות
  • לוגו בגרסה רגילה ובגרסה לבנה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי הדר דביק ותפריט מובייל במסך מלא לאתר של [שם העסק]: מעל ההדר פס דק עם טלפון וכתובת. ההדר נדבק למעלה ומקבל צל כשגוללים, ובו הלוגו, כפתור טלפון בצורת גלולה (קישור tel) וכפתור המבורגר. לחיצה על ההמבורגר פותחת תפריט שמכסה את כל המסך ונכנס מימין על רקע כהה: גלילת העמוד ננעלת, ההמבורגר הופך ל-X והלוגו מתלבן. הקישורים נכנסים בזה אחר זה, העמוד הנוכחי מסומן בצבע ההדגשה, ופריט עם תתי עמודים נפתח באקורדיון עם חץ שמסתובב (אחד פתוח בכל פעם, grid-template-rows מ-0fr ל-1fr). בתחתית כפתור 'קביעת תור' ושורות טלפון, כתובת ושעות. X, Esc או לחיצה על קישור סוגרים. בטעינה התפריט נפתח לבד פעם אחת, פותח את האקורדיון הראשון ונסגר אחרי כמה שניות. התפריט: [הקישורים ותתי העמודים]. הטלפון: [טלפון]. הכתובת והשעות: [כתובת ושעות]. הלוגו: [קישור ללוגו ולגרסה הלבנה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 ודאו שגלילת העמוד ננעלת כשהתפריט פתוח. אחרת האצבע גוללת את האתר במקום את התפריט.

ניווט

סרגל ניווט תחתון בסגנון אפליקציה

האתר מרגיש כמו אפליקציה: כל מה שחשוב במרחק אגודל, והוואטסאפ תמיד במרכז.

איפה זה עובד: סטודיואים, קליניקות, מסעדות, כל אתר שרוב התנועה שלו מהטלפון

מה צריך להכין

  • 4 שיעורים עם תיאור, מחיר ואורך
  • מספר וואטסאפ
  • כתובת ושעות פעילות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סרגל ניווט תחתון בסגנון אפליקציה לאתר של [שם העסק]: 5 לשוניות, 'בית', 'שיעורים', 'וואטסאפ', 'תפריט' ו'צור קשר'. הוואטסאפ הוא עיגול פועם בצבע המותג, מוגבה מעל מרכז הסרגל, ופותח שיחה למספר [מספר בפורמט 972]. הסרגל צמוד לתחתית, עם רקע מטושטש (backdrop-filter) ורווח env(safe-area-inset-bottom). גלולה מאחורי האייקון הפעיל מחליקה בין הלשוניות ב-transform, והתוכן מתחלף ב-cross-fade: בית עם תמונה, כרטיס 'השיעור הבא' ולוח השבוע, [4 שיעורים עם תיאור, מחיר ואורך] עם כפתור 'הרשמה', תפריט קישורים, וצור קשר עם [כתובת ושעות פעילות] וטופס קצר. כל לחיצה בתוכן מקפיצה הודעה קטנה מעל הסרגל. בגלילה למטה הסרגל מתכווץ והכיתובים נעלמים, ובגלילה למעלה חוזר. בטעינה הגלולה עוברת ל'שיעורים' וחוזרת, ואז גלילה קצרה מדגימה את הכיווץ. במחשב הכול בתוך מסגרת טלפון. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 חמש לשוניות זה המקסימום. יותר מזה, והאייקונים נהיים קטנים מדי לאצבע.

ניווט

כפתורים צפים: חיוג, וואטסאפ ולמעלה

הגולש מתקשר או כותב לכם בלחיצה אחת מכל מקום בעמוד, וחוזר למעלה בלי לגלול.

איפה זה עובד: אתרי שירות, בעלי מקצוע, קליניקות, כל עמוד ארוך

מה צריך להכין

  • טלפון
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי ערימת כפתורים צפים לאתר של [שם העסק]: שלושה כפתורים עגולים בפינה השמאלית התחתונה, מלמעלה למטה: חזרה למעלה (לבן), חיוג ל-[טלפון] (צבע המותג) ווואטסאפ ל-[מספר בפורמט 972] (ירוק, עם הילה שפועמת בעדינות). בטעינה החיוג והוואטסאפ קופצים פנימה, והתוויות שלהם נפתחות פעם אחת לבד ונסגרות. אחר כך תווית כהה נפתחת לצד הכפתור בריחוף או בפוקוס: 'חזרה למעלה', 'חייגו אלינו', 'כתבו לנו בוואטסאפ'. כפתור החזרה מופיע רק אחרי 200 פיקסלים של גלילה, עם טבעת SVG שמתמלאת לפי אחוז הגלילה (stroke-dashoffset), ולחיצה עליו גוללת בעדינות לראש העמוד. לחיצה על חיוג מחייגת, ובמחשב התווית נשארת פתוחה 3 שניות ומציגה את המספר. כשהפוטר נכנס למסך, הערימה מתרוממת ב-transform בגובה החלק שנראה ממנו, כך שהיא תמיד יושבת מעליו. במובייל הכפתורים קטנים יותר, 48 פיקסלים. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בדקו שהערימה לא יושבת על כפתור הנגישות או הצ׳אט. אם כן, העבירו אותה לצד השני.

ניווט

פס מבצעים רץ מעל ההדר

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

איפה זה עובד: חנויות אונליין, מסעדות עם משלוחים, כל אתר עם מבצע עונתי

מה צריך להכין

  • 5 הודעות מבצע קצרות (משלוח, קופון, קולקציה)
  • שם החנות ללוגו טקסט
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי פס מבצעים רץ מעל ההדר לחנות של [שם החנות]: פס צר בגובה כ-38px שבו 5 הודעות קצרות רצות בלופ אינסופי וחלק, בלי קפיצה בנקודת החיבור, בכיוון הקריאה של עברית (ההודעה הבאה נכנסת משמאל ונעה ימינה). התנועה ב-CSS בלבד: translateX על מסלול שמשוכפל פעמיים, עם מסכת דהייה עדינה בשני הקצוות. בכל הודעה המילה או הסכום החשובים בגלולה קטנה בצבע מנוגד, ובין ההודעות נקודה קטנה. ריחוף או פוקוס מקלדת עוצרים את הריצה, ומי שביקש פחות תנועה רואה את ההודעות סטטיות וממורכזות. בקצה השמאלי כפתור X עגול (אזור מגע 44px) שמקפל את הפס בהחלקה למעלה, וההדר עולה למקומו. ספק שלוש וריאציות צבע כמחלקות CSS (כהה, בצבע המותג, בהיר) והצג את שלושתן זו מתחת לזו, כל אחת מעל הדר מדומה עם לוגו טקסט, תפריט וסמלי חיפוש וסל, כדי שאבחר. ההודעות: [5 הודעות מבצע קצרות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

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

ניווט

מחליף שפה שהופך את כל העמוד

לקוחות מחו״ל עוברים לשפה שלהם בלחיצה, והאתר כולו מתהפך איתם בלי טעינת עמוד.

איפה זה עובד: תיירות, נדל״ן, קליניקות, מלונות, עסקים עם לקוחות שלא קוראים עברית

מה צריך להכין

  • התרגום של כל הטקסטים ל-3 שפות
  • 4 קישורי תפריט
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי הדר עם מחליף שפה לאתר של [שם העסק], עם הירו קצר ופוטר שמתחלפים איתו. בהדר: לוגו, [4 קישורי תפריט], כפתור 'דברו איתנו' ומחליף בצורת גלולה עם [3 שפות] ורקע כהה שמחליק אל השפה הפעילה. לחיצה מחליפה בלי טעינת עמוד את lang ו-dir (RTL או LTR), את כל הטקסטים לפי data-i18n ממילון אחד ב-JS ואת הפונט: פונט מערכת לשפות שאינן עברית. הקישור המסומן בתפריט נשאר מסומן. המעבר: cross-fade של 400ms, עותק של המצב הישן מתעמעם מעל החדש. בהירו: שורת מותג, כותרת, פסקה, כפתור עם חץ שמתהפך וכרטיס מבצע עם מטוס שנע על קו מקווקו. בפוטר: לוגו, תיאור, שעות וזכויות. במובייל הקישורים, המחליף והכפתור בתפריט המבורגר שדוחף את העמוד למטה. בטעינה, פעם אחת: התפריט במובייל נפתח, השפה עוברת לאנגלית וחוזרת לעברית, והתפריט נסגר. התרגומים: [הטקסטים ב-3 השפות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כתבו כל שפה בשם שלה: English ולא 'אנגלית'. מי שלא קורא עברית לא ימצא את הכפתור אחרת.

ניווט

גם מי שגלל עד הסוף משאיר פרטים. הפוטר הופך מסוף העמוד להזדמנות אחרונה לליד.

איפה זה עובד: כל אתר תדמית: בעלי מקצוע, קליניקות, סטודיו, משרדים

מה צריך להכין

  • תמונה אחת של העסק או של עבודה
  • כתובת, טלפון, מייל ושעות פעילות
  • 3 שירותים ו-5 קישורים מהירים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

פתיחת Claude ↗

💡 בקשו מ-Claude בהמשך לחבר את השליחה למייל או לוואטסאפ. בלי זה הטופס רק מציג תודה.

ניווט

הדר בשתי קומות עם פס שירות עליון

הטלפון והוואטסאפ מול העיניים מהשנייה הראשונה, והתפריט נשאר זמין לאורך כל הגלילה.

איפה זה עובד: נותני שירות, מכללות, קליניקות, משרדים, כל אתר שחשוב בו הטלפון

מה צריך להכין

  • לוגו וקישורי התפריט
  • טלפון, מספר וואטסאפ, כתובת ושעות
  • משפט קצר לפס העליון
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי הדר בשתי קומות לאתר של [שם העסק], קבוע בראש המסך. למעלה פס שירות דק וכהה: נקודה פועמת ומשפט קצר [משפט לפס העליון], ומולו טלפון [טלפון] וקישור וואטסאפ ל-[מספר בפורמט 972] (במובייל שניהם אייקונים). מתחתיו פס לבן עם לוגו, הקישורים [קישורי התפריט] וכפתור '[טקסט הכפתור]'. העמוד הנוכחי מסומן בקו תחתון (aria-current), גם במגירה, ובריחוף אותו קו נמתח מתחת לקישור. אחרי 40 פיקסלים של גלילה הפס העליון מתקפל, ההדר מצטמצם, הלוגו קטן מעט ומופיע צל רך: הכול ב-transform על עטיפה אחת ב-position: fixed, בלי לשנות גובה. מתחת ל-900 פיקסלים הקישורים והכפתור עוברים למגירה שמחליקה משמאל מכפתור המבורגר: קישורים בכניסה מדורגת, הכפתור, טלפון, וואטסאפ ו-[כתובת ושעות]. סגירה ב-X, ב-Esc או בלחיצה על הרקע המעומעם, והעמוד מאחור לא נגלל. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 משפט אחד בפס העליון, לא שלושה. מה שהכי דחוף ללקוח עכשיו: הרשמה, מבצע או שעות.

ניווט

תפריט דוק עם הגדלה בריחוף

ניווט שמזמין לגעת: האייקונים גדלים מתחת לעכבר, וכל עמוד במרחק לחיצה אחת.

איפה זה עובד: סטודיואים, מרכזי למידה, תיקי עבודות, אתרים עם 4 עד 6 עמודים

מה צריך להכין

  • 6 עמודים: שם קצר, כותרת, משפט ו-3 פרטים
  • 2 תוויות קצרות לכל עמוד
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי תפריט דוק צף לאתר של [שם העסק], בסגנון דוק: פס זכוכית מעוגל (backdrop-filter) בתחתית המסך עם 6 אייקונים מעוגלים, כל אחד בגרדיאנט משלו. העכבר על הדוק מגדיל את האייקונים בגל חלק לפי המרחק ממנו, הם מתרחקים והפס מתרחב איתם, ותווית כהה צצה מעל הקרוב. נקודה מסמנת את העמוד הפעיל. לחיצה מקפיצה את האייקון ומחליפה ב-cross-fade את התוכן שמעל: כותרת, משפט, 3 פרטים, כרטיס איור בצבעי האייקון עם 2 תוויות מרחפות, וכפתור 'לשיעור ניסיון' שעובר להרשמה ושם הופך ל'תודה, נחזור אליכם היום'. בטעינה גל עובר לבד מקצה לקצה ולוחץ על האייקון השלישי (במסך צר גל עדין). במגע ובמסך צר אין הגדלה בעכבר: גודל קבוע, אזור מגע 44px, והתווית מופיעה לרגע בלחיצה. חישוב ב-requestAnimationFrame עם lerp. העמודים: [6 עמודים עם שם קצר, כותרת, משפט, 3 פרטים ו-2 תוויות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שישה אייקונים זה המקסימום. צבע אחר לכל עמוד, והגולש מזהה אותו בלי לקרוא.

SEO

שאלות נפוצות + סכמה לגוגל

עונה על ההתנגדויות של הלקוח, ומסמן לגוגל את התשובות.

איפה זה עובד: כל עמוד שירות

מה צריך להכין

  • 6–10 שאלות אמיתיות שלקוחות שואלים
  • תשובה קצרה לכל אחת
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור שאלות נפוצות לאתר של [שם העסק]: אקורדיון על בסיס details ו-summary עם פתיחה חלקה, תיבת חיפוש שמסננת ומדגישה התאמות, ובלוק JSON-LD תקין מסוג FAQPage עם אותן שאלות ותשובות בדיוק. השאלות והתשובות: [השאלות והתשובות שלכם]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שאלות אמיתיות, ממה שלקוחות שואלים בטלפון. סכמה על שאלות מומצאות לא עוזרת לכם.

תוכן ומגזין

תבנית מאמר מגזין עם טופס צמוד

מאמר שנקרא כמו מגזין, עם טופס שמלווה את הקורא לאורך כל הגלילה. תוכן שמביא פניות.

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

מה צריך להכין

  • מאמר כתוב עם כותרות משנה ושאלות בסוף
  • תמונה ראשית רחבה
  • רשימת השירותים לטופס ומספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי תבנית מאמר מגזין לאתר של [שם העסק]: סרגל עליון דביק עם שם המותג, פס התקדמות קריאה שמתמלא לפי הגלילה במאמר ותווית 'נשארו 4 דקות קריאה' שמחושבת ממספר המילים ובסוף הופכת ל'סיימתם לקרוא'. הירו כהה עם תמונת רקע בזום איטי, פירורי לחם, תגית, כותרת, כותב ותאריך. כרטיס מאמר שעולה על ההירו, עם פתיח, כותרות משנה, טבלה, רשימה וציטוט. בצד טופס הצעת מחיר כהה (שם, טלפון, שירות) דביק (position:sticky): בדיקת שדות, שורת הרגעה מתחת לכפתור והודעת תודה. במובייל הוא הופך לכפתור צף פועם שפותח מגירה מלמטה עם רקע מוחשך, ונסגרת באיקס, ברקע או ב-Esc. סקריפט הופך כל h4 שאחרי 'שאלות נפוצות' לאקורדיון details ו-summary, הראשון פתוח. בסוף פס קריאה לפעולה עם כפתור שמחזיר לטופס וכפתור וואטסאפ ל-[מספר בפורמט 972]. המאמר: [כותרת, תמונה ותוכן]. השירותים: [רשימת שירותים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כתבו את השאלות בסוף המאמר ככותרות h4. הסקריפט הופך אותן לאקורדיון לבד, בלי עריכה.

תוכן ומגזין

עמוד מגזין ראשי עם סינון

בלוג שנראה כמו מגזין: כתבה ראשית, סינון לפי נושא והנקראות ביותר. הגולש נשאר לקרוא.

איפה זה עובד: עמוד הבלוג, מרכז ידע, מגזין תוכן של חנות או של בעל מקצוע

מה צריך להכין

  • רשימת כתבות: כותרת, קטגוריה, תאריך וקישור
  • 5 כתבות לרשימת הנקראות ביותר
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עמוד מגזין ראשי לאתר של [שם העסק]: כותרת עיתון עם שם המגזין ושורת גיליון. כתבה ראשית גדולה שעל האיור שלה כרטיס לבן עם תג 'כתבה ראשית' ותקציר, ולידה שתי כתבות משנה. כל כרטיס מציג איור SVG, קטגוריה, כותרת, זמן קריאה ותאריך. מתחת, צ'יפים של קטגוריות עם מספר הכתבות מסננים גריד של 6 כרטיסים: הנשארים מחליקים למקומם (FLIP), החדשים נכנסים בדעיכה, ושורת 'מוצגות 6 מתוך 12 כתבות' מתעדכנת. כפתור 'טענו עוד' מוסיף 3 ומציג כמה נשארו. בצד פס 'הנקראות ביותר' ממוספר ב-position: sticky, ובמובייל הוא יורד למטה, הכרטיסים הופכים לשורות והצ'יפים נגללים לרוחב. בטעינה הכול נכנס בהדרגה, באיור הראשי תנועה עדינה בלולאה, וכשהצ'יפים נכנסים למסך אחד נבחר לבד לשתי שניות וחוזר ל'הכול'. הכתבות: [רשימת כתבות: כותרת, קטגוריה, תאריך וקישור]. הנקראות ביותר: [5 כתבות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הכתבה הראשית מקבלת את רוב הקליקים. החליפו אותה פעם בשבוע, גם אם לא כתבתם חדשה.

תוכן ומגזין

שאלות נפוצות בסגנון צ'אט

במקום רשימה ארוכה, שיחה: הגולש לוחץ על שאלה והתשובה מגיעה כמו הודעה אישית.

איפה זה עובד: משרדי עורכי דין, קליניקות, יועצים, עמודי שירות ודפי נחיתה

מה צריך להכין

  • 6 שאלות שלקוחות באמת שואלים
  • תשובה קצרה לכל שאלה
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי שאלות נפוצות בסגנון צ'אט לאתר של [שם העסק]: חלון שיחה בגובה קבוע עם כותרת (עיגול ראשי תיבות, שם העסק, [תחום] ונקודה פועמת) ובועת פתיחה של העסק. מתחתיו השאלות כצ'יפים ומונה 'נשאלו 1 מתוך 6'. לחיצה על צ'יפ: השאלה נכנסת כבועה של הגולש משמאל, בועת העסק מימין, עם העיגול לידה, מציגה שלוש נקודות 'מקליד' כשנייה, ואז התשובה מחליפה אותן באותה בועה. השיחה נגללת לבד להודעה החדשה (scrollTo בתוך החלון, בלי להזיז את העמוד), ובזמן ההקלדה הצ'יפים נעולים. צ'יפ שנשאל מסומן ב-וי ומתעמעם, ולחיצה נוספת עליו גוללת לתשובה שלו ומבליטה אותה לרגע. בתחתית כפתור 'לא מצאתם תשובה? כתבו לנו' שפותח וואטסאפ למספר [מספר בפורמט 972]. בטעינה השאלה הראשונה נשאלת לבד. השיחה באזור aria-live. השאלות: [6 שאלות עם תשובה קצרה לכל אחת]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 תשובה של עד שלוש שורות. בועה ארוכה מרגישה כמו נאום, לא כמו שיחה.

תוכן ומגזין

מערכת שעות חיה לשיעורים וחוגים

רואים מיד מה מתקיים עכשיו ומה פנוי, ומשריינים מקום בלחיצה אחת בוואטסאפ.

איפה זה עובד: סטודיו לפילאטיס ויוגה, חדרי כושר, חוגים, סדנאות

מה צריך להכין

  • מערכת השעות השבועית
  • מספר המקומות בכל שיעור
  • מספר וואטסאפ להרשמה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מערכת שעות חיה לאתר של [שם העסק]: לשוניות לשבעת הימים הקרובים ('היום', 'מחר', ואז יום ותאריך), והיום נבחר מראש. מתחתן צ'יפים שמסננים לפי סוג אימון. בכל שורה: שעה, שם השיעור עם נקודת צבע לפי סוג, מדריכה, משך, מקומות שנותרו וכפתור 'שריינו מקום' שפותח וואטסאפ ל-[מספר בפורמט 972] עם השיעור, היום והשעה. שיעור שמתקיים כרגע: תגית 'עכשיו' עם נקודה פועמת, ובמקום הכפתור פס התקדמות ושעת סיום. שיעור מלא: תגית 'מלא' וכפתור 'רשימת המתנה'. שיעורים שהסתיימו היום מוסתרים. אם אין שיעור מתאים, מוצגת הודעה קצרה. בראש: היום והשעה עם נקודה חיה, ופס כהה 'השיעורים הקרובים' עם שלושת הבאים ('עכשיו', 'בעוד 25 דק׳', 'מחר'). לחיצה עליהם קופצת ליום ומבליטה את השורה. הזמן לפי Asia/Jerusalem, מתעדכן כל חצי דקה. הנתונים במערך אחד: [מערכת השעות השבועית]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 אל תסתירו שיעורים מלאים. 'מלא' ליד שיעור מראה שהסטודיו מבוקש ודוחף לשריין מוקדם.

תוכן ומגזין

אילן יוחסין אינטראקטיבי

כל המשפחה במבט אחד: לוחצים על שם ורואים מאיפה הוא בא ומי בא אחריו.

איפה זה עובד: אתרי מורשת והנצחה, ספר משפחה, עמוד אודות של עסק משפחתי, עמותות

מה צריך להכין

  • רשימת בני המשפחה: שם, שנים, הורה ובן זוג
  • משפט קצר על כל אדם
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אילן יוחסין של ארבעה דורות לאתר של [שם העסק], שנבנה ממערך נתונים ב-JS: [בני המשפחה: שם, שנים, הורה, בן זוג ומשפט קצר]. כרטיס לכל אדם עם שם ושנים (ראש המשפחה בכהה), וקווי SVG מעוגלים מהורה לילדיו. הרקע בסגנון קלף עם מסגרת כפולה וחותם זהב עגול. לחיצה על אדם מסמנת אותו בטבעת פועמת, מדגישה בזהב את השושלת שלו, מהשורש ועד צאצאיו, מעמעמת את השאר ומציגה כרטיס פרטים כהה: דור, שם מלא, שנים, בן זוג, מספר ילדים ומשפט. לכל הורה כפתור עגול שמקפל את הענף ומראה כמה הוסתרו, והעץ מסתדר מחדש בתנועה רכה עם requestAnimationFrame. בטעינה הדורות נחשפים בזה אחר זה, אדם אחד כבר נבחר, וענף אחד מתקפל ונפתח לבד. במחשב העץ יורד מלמעלה וכרטיס הפרטים בצד. במובייל הוא אנכי, ממורכז ונגלל לאורך, כל דור מוזח מתחת להורה, והכרטיס נצמד לתחתית. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 התחילו מארבעה דורות ועד 20 שמות. עץ רחב יותר עדיף לפצל לענפים בעמודים נפרדים.

תוכן ומגזין

תבנית פוסט ג׳ורנל עריכתי

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

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

מה צריך להכין

  • מאמר כתוב עם תמונה ראשית, כותרות משנה וציטוט
  • תמונה, תפקיד ושתי שורות על המייסדת
  • 3 כתבות נוספות: תמונה, קטגוריה וכותרת
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי תבנית פוסט ג׳ורנל עריכתי לאתר של [שם העסק]: פס התקדמות קריאה דק בראש המסך שמתמלא לפי הגלילה במאמר. שם הג׳ורנל ממורכז בסריף (Georgia, גם בכותרות ובציטוט) עם שורת תיאור, קו דק, תמונה ראשית רחבה בזום איטי, שורת מטא (תאריך, כותבת, זמן קריאה שמחושב ממספר המילים, 200 בדקה), כותרת ממורכזת וקו קצר. מתחת שני טורים: גוף המאמר עם אות פתיחה גדולה, כותרות משנה וציטוט מודגש בין שני קווים, ולצידו פס צד דביק (position:sticky) עם כרטיס המייסדת (דיוקן בקשת, שם, תפקיד, שתי שורות) ושלושה כפתורי שיתוף עגולים: וואטסאפ, מייל והעתקת קישור. לחיצה מקפיצה הודעת אישור קצרה. במובייל טור אחד והכרטיס מתחת למאמר. בסוף 'כתבות נוספות': [3 כתבות] בכרטיסים עם תמונה, קטגוריה, כותרת ותאריך. בטעינה החלקים נכנסים בזה אחר זה. המאמר: [כותרת, תמונה ותוכן]. המייסדת: [פרטים ותמונה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו לציטוט משפט אחד שעומד בפני עצמו. מי שרק מרפרף קורא את הכותרת ואותו, לא יותר.

תוכן ומגזין

מאמרים אחרונים: גריד כרטיסים

שלושת המאמרים החדשים בכרטיסים נקיים. הגולש רואה שהאתר חי, ונשאר לקרוא.

איפה זה עובד: דף הבית, סוף עמוד שירות, אתרי תדמית עם בלוג, משרדים ובעלי מקצוע

מה צריך להכין

  • 3 מאמרים עם תקציר וקטגוריה
  • קישור לעמוד המאמרים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן 'מאמרים אחרונים' לאתר של [שם העסק]: שורת מותג, כותרת, משפט פתיח וקישור 'לכל המאמרים' עם חץ בעיגול, ומתחת גריד של שלושה כרטיסים. כל כרטיס הוא קישור אחד: איור SVG על גרדיאנט ביחס 16:10 עם פרט אחד שנע לאט בלולאה, קטגוריה, כותרת, תקציר שנחתך אחרי שתי שורות, ובתחתית תאריך וזמן קריאה. בריחוף ובפוקוס האיור מתקרב והכותרת מקבלת קו תחתון. כשהסקשן נכנס למסך (IntersectionObserver) מוצגים כשנייה כרטיסי שלד (skeleton) באותן מידות עם הבהוב שנע לרוחבם, ואז הכרטיסים נכנסים אחד אחרי השני בלי שהעמוד קופץ, ומצב הריחוף עובר פעם אחת לבד מכרטיס לכרטיס. בטאבלט הכרטיסים הם שורות עם האיור בצד. במובייל כרטיס אחד בשורה, והקישור יורד מתחת לכרטיסים ככפתור ברוחב מלא. המאמרים: [3 מאמרים: כותרת, קטגוריה, תקציר, תאריך, זמן קריאה וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 אם המאמר האחרון בן חצי שנה, הסתירו את התאריך. תאריך ישן משדר אתר נטוש.

תוכן ומגזין

מאמרים עם פסקת פתיחה נדבקת

הכותרת וההסבר נשארים מול העיניים בזמן שגוללים בין המאמרים. בלוג שנראה מושקע.

איפה זה עובד: עמוד הבית, עמוד שירות, משרדים, יועצים וקליניקות

מה צריך להכין

  • שורת פתיח, כותרת ופסקה
  • 3 מאמרים: כותרת, קטגוריה, תאריך וקישור
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן מאמרים לאתר של [שם העסק] בשתי עמודות. בעמודת הטקסט: שורת פתיח בגלולה, כותרת בשתי שורות שהשנייה בצבע המשני, פסקה קצרה, מונה '01 / 03' עם פס דק שמתקדם לפי המאמר שמול העיניים, וכפתור 'לכל המאמרים'. העמודה נדבקת כשגוללים על הכרטיסים (position: sticky עם align-self: start, בלי overflow: hidden על העטיפות). לצידה שני כרטיסים גדולים זה מתחת לזה, בכל אחד איור SVG לפי נושא המאמר, תג קטגוריה על האיור, כותרת, תאריך ועיגול עם חץ. מתחתם מאמר שלישי כשורה קומפקטית: איור קטן בצד, קטגוריה, כותרת ותאריך. בריחוף הכרטיס עולה, האיור מתקרב והעיגול מתמלא בצבע. בטעינה הכול נכנס בהדרגה, ובאיורים תנועה עדינה בלולאה. במובייל הכול בטור אחד, בלי הדבקה ובלי המונה. הטקסטים: [שורת פתיח, כותרת ופסקה]. המאמרים: [3 מאמרים: כותרת, קטגוריה, תאריך וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 פסקת הפתיחה קצרה בכוונה: שתיים עד שלוש שורות. עמודה שגבוהה מהמסך לא יכולה להידבק.

תוכן ומגזין

שאלות נפוצות: אקורדיון נקי

הלקוח מוצא תשובה בלחיצה אחת, בלי לגלול קיר של טקסט ובלי להרים טלפון.

איפה זה עובד: עמודי שירות, דפי נחיתה, עמוד מחירון, כל עסק שעונה על אותן שאלות

מה צריך להכין

  • 6 שאלות שלקוחות באמת שואלים
  • תשובה קצרה לכל שאלה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן שאלות נפוצות לאתר של [שם העסק]: שורת פתיח עם קו, כותרת ומשפט הסבר, ואקורדיון של שש שאלות בכרטיסים לבנים: מספר, שאלה ועיגול עם פלוס. לחיצה פותחת את התשובה בהחלקה רכה (grid-template-rows מ-0fr ל-1fr, החריג היחיד ל-transform ול-opacity), הפלוס מסתובב לאיקס, העיגול מתמלא בצבע המותג והכרטיס מקבל מסגרת וצל. שאלה אחת פתוחה בכל רגע, ולחיצה על הפתוחה סוגרת אותה. בטעינה הכרטיסים נכנסים בזה אחר זה, הראשונה פתוחה, ואחרי שנייה השנייה נפתחת לבד, אלא אם הגולש כבר נגע. ברקע כתם אור רך שנע לאט. מבנה details ו-summary, שעובד גם בלי JavaScript. מקלדת: Tab, Enter, רווח, חיצים למעלה ולמטה ופוקוס נראה. במחשב הכותרת מימין והאקורדיון משמאל, במובייל טור אחד ושורות מגע של 64 פיקסלים לפחות. השאלות: [6 שאלות עם תשובה קצרה לכל אחת]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 פתחו בשאלה שהכי מעכבת סגירה, בדרך כלל מחיר או זמן. היא זו שפתוחה בטעינה.

תוכן ומגזין

שאלות נפוצות עם חיפוש וכרטיס נציג

הגולש מוצא תשובה בשנייה, ומי שלא מצא כותב ישר לנציג בוואטסאפ במקום לעזוב.

איפה זה עובד: עמוד שירות, עמוד צור קשר, סדנאות וקורסים, קליניקות, חנויות

מה צריך להכין

  • 8 שאלות ותשובות אמיתיות
  • שם, תפקיד ותמונה של הנציג
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן שאלות נפוצות לאתר של [שם העסק]: כותרת ושתי עמודות. בעמודה הרחבה שדה חיפוש, שלוש מילים מוצעות ללחיצה, ואקורדיון: רק שאלה אחת פתוחה, הראשונה כבר בטעינה, עיגול פלוס שמסתובב לאיקס ופתיחה חלקה ב-grid-template-rows. החיפוש מסנן תוך כדי הקלדה בשאלות ובתשובות, מדגיש את ההתאמה ב-mark, פותח את התוצאות כשנשארו עד שלוש, ומציג 'נמצאו 2 שאלות' וכפתור ניקוי. בעמודה הצרה כרטיס כהה נדבק (sticky) 'לא מצאתם תשובה?': עיגול תמונת הנציג עם נקודה ירוקה פועמת, שם ותפקיד, משפט קצר, כפתור וואטסאפ ושורת זמן מענה. כשאין תוצאות: הודעה שמפנה לנציג ומסגרת מודגשת סביב הכרטיס. במובייל הכרטיס יורד מתחת לשאלות ולא נדבק. בטעינה מוקלדת מילה לדוגמה, הרשימה מסתננת והמילה נמחקת. נגיעה עוצרת את ההדגמה. תוכן: [8 שאלות ותשובות], [שם, תפקיד ותמונה של הנציג], [מספר בפורמט 972]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שימו בכרטיס אדם אמיתי עם שם ותמונה. לאדם כותבים, ל'שירות לקוחות' הרבה פחות.

תהליך

ציר תהליך שנחשף בגלילה

הלקוח מבין בדיוק מה יקרה אחרי שיפנה — והחשש יורד.

איפה זה עובד: עמוד 'איך זה עובד', דף שירות, דף נחיתה

מה צריך להכין

  • 4–6 שלבים בתהליך העבודה שלכם
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי ציר זמן אנכי (מימין לשמאל) של תהליך העבודה ב-[שם העסק]: [שלב 1], [שלב 2], [שלב 3], [שלב 4], [שלב 5]. קו זוהר שמצייר את עצמו תוך כדי גלילה, וכל שלב נכנס באנימציה כשמגיעים אליו. עם animation-timeline: view(), ונפילה חיננית ל-IntersectionObserver בדפדפנים שלא תומכים. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שלב ראשון תמיד 'שיחה בלי התחייבות' — זה מה שמוריד את החשש לפנות.

תהליך

מסלול תהליך שמצטייר בגלילה

הגולש גולל והדרך אליכם מצטיירת מול העיניים, שלב אחרי שלב, עד הכפתור.

איפה זה עובד: עמוד 'איך זה עובד', דף שירות, דף נחיתה, סוכנויות ונותני שירות

מה צריך להכין

  • 4 שלבים בתהליך: זמן, כותרת ומשפט לכל שלב
  • טקסט וקישור לכפתור שבסוף המסלול
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מסלול תהליך עבודה לאתר של [שם העסק]: ארבעה שלבים, בכל אחד עיגול ממוספר וכרטיס עם תגית זמן, כותרת ומשפט, מחוברים בקו SVG מתפתל שמסתיים בכפתור '[טקסט הכפתור]'. במחשב המסלול אופקי ומתפתל כמו נחש: שורה מימין לשמאל, פניית פרסה ושורה חזרה, והכרטיסים מתחת לעיגולים. במובייל הוא אנכי ומזגזג בין הצדדים, והכרטיס ליד העיגול. קו בסיס מנוקד, ומעליו קו גרדיאנט זוהר שנצבע לפי הגלילה (stroke-dashoffset) עם נקודה פועמת שנעה בראשו. שלב שהקו הגיע אליו נדלק: העיגול מתמלא והכרטיס מתבהר. הראשון דלוק מההתחלה. בסוף הנקודה נעלמת והכפתור נדלק ופועם. אם המסלול נראה כבר בטעינה, הוא מצטייר פעם אחת לבד, חוזר בעדינות למיקום הגלילה ועובר לשליטת הגולש. הקו מחושב ב-JS ממיקום העיגולים בפועל, ומחדש בשינוי רוחב. השלבים: [4 שלבים: זמן, כותרת ומשפט]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כתבו לכל שלב גם כמה זמן הוא לוקח. לוח זמנים ברור מוריד את החשש לפנות.

תהליך

מפת דרכים עם סיכות שנוחתות

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

איפה זה עובד: מכללות וקורסים, קליניקות, יועצים, עמוד 'איך זה עובד'

מה צריך להכין

  • 4 שלבים: כותרת, משפט ומשך לכל שלב
  • היעד שבסוף הדרך, במשפט קצר
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מפת דרכים לאתר של [שם העסק]: פאנל כהה עם רשת נקודות, ובו דרך מתפתלת ב-SVG שנכנסת מימין ומסתיימת משמאל בדגל יעד מתנופף עם כיתוב. במרכז הדרך קו מקווקו שזז לאט (stroke-dashoffset, החריג היחיד). על הדרך סיכות מפה ממוספרות, ולכל אחת כרטיס שלב לסירוגין מעל הדרך ומתחתיה: 'שלב 1', משך, כותרת ומשפט. כשהן נכנסות למסך (IntersectionObserver) הסיכות נוחתות מלמעלה לפי הסדר עם קפיצה קלה וטבעת שמתפשטת מהחוד, כל כרטיס מופיע אחרי הסיכה שלו והדגל נוחת אחרון. ריחוף, פוקוס או הקשה על סיכה מדגישים את השלב: היא גדלה ומחליפה צבע, הכרטיס מתרומם ושאר השלבים מתעמעמים. בפינה מקרא: סיכה 'שלב', קו מקווקו 'המסלול', דגל 'היעד'. במובייל הדרך אנכית בצד ימין, הכרטיסים לצידה והמקרא בשורה מעל. השלבים: [4 שלבים עם כותרת, משפט ומשך]. היעד: [מה מקבלים בסוף]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 ארבעה שלבים זה מה שנכנס יפה ברוחב מחשב. יש לכם יותר? אחדו שניים לתחנה אחת.

תהליך

תהליך עבודה עם תוכנית איזומטרית

הלקוח רואה את התהליך על תוכנית של בית: כל שלב מדליק חדר, וכל חדר מסביר שלב.

איפה זה עובד: אדריכלים, מעצבי פנים, קבלני שיפוצים, יזמי נדל״ן

מה צריך להכין

  • 4 שלבים: כותרת, משפט ומשך לכל שלב
  • לאיזה חדר בתוכנית כל שלב שייך
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן 'איך זה עובד' לאתר של [שם העסק] בשני חלקים. בצד אחד ארבעה כרטיסי שלב: עיגול ממוספר, כותרת, משך, משפט ושורת 'בתוכנית: שם החדר', מחוברים בקו אנכי שמתמלא עד השלב הפעיל. בצד השני גיליון שרטוט עם רשת עדינה, ועליו תוכנית איזומטרית של דירה ב-SVG (רצפות, קירות, ריהוט פשוט) ומעל כל חדר תווית ממוספרת עם שמו. תמיד שלב אחד פעיל: ריחוף, פוקוס, הקשה או גלילה אל שלב מדגישים את הכרטיס, צובעים את רצפת החדר ומקפיצים את התווית עם טבעת פועמת. לחיצה על חדר או על תווית מדגישה את השלב וגוללת אליו. בטעינה הכרטיסים עולים בזה אחר זה וההדגשה עוברת לבד משלב לשלב במחזור, עד שנוגעים. התוכנית נשארת במסך בזמן הגלילה (position: sticky). במובייל היא מעל השלבים, ורק התווית הפעילה מציגה שם. השלבים: [4 שלבים: כותרת, משפט, משך וחדר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שייכו כל שלב לחדר שבאמת קשור אליו. חיבור אקראי נראה כמו קישוט, לא כמו הסבר.

תהליך

איך זה עובד: שלושה שלבים ממוספרים

שלושה צעדים ברורים במקום הסבר ארוך. הגולש מבין מיד מה מחכה לו ופונה בביטחון.

איפה זה עובד: עמוד הבית, דף שירות, דף נחיתה, קליניקות, נותני שירות

מה צריך להכין

  • 3 שלבים: כותרת, פסקה קצרה ומשך לכל אחד
  • כותרת ומשפט פתיחה לסקשן
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן 'איך זה עובד' לאתר של [שם העסק]: תווית קטנה, כותרת ומשפט פתיחה במרכז, ומתחתם לוח לבן עם שלושה שלבים בשורה. בכל שלב מספר גדול (01, 02, 03) שמוצג בהתחלה כקו מתאר בלבד, ומתחתיו כותרת, פסקה קצרה ושורת משך קטנה, כולן מעומעמות. קו מקווקו מחבר בין המספרים. כשהסקשן נכנס למסך (IntersectionObserver, פעם אחת) הכול קורה ברצף: המספר הראשון מתמלא בצבע המותג מלמטה למעלה והטקסט שלו מתבהר, הקו נמתח ממנו אל המספר הבא, וכך עד השלישי. אחר כך הקווקווים ממשיכים לזרום לאט בכיוון ההתקדמות. במובייל השלבים בטור: המספר מימין, הטקסט לצדו, והקו אנכי ויורד ממספר למספר. המילוי והקו נעשים רק עם transform בתוך עטיפה עם overflow:hidden. הכותרת: [כותרת הסקשן]. משפט הפתיחה: [משפט פתיחה]. השלבים: [3 שלבים: כותרת, פסקה ומשך לכל אחד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שלושה שלבים בדיוק. אם יש לכם חמישה, אחדו: מעבר לשלושה הגולש כבר לא קורא.

כרטיס ביקור

כרטיס ביקור דיגיטלי פרימיום

כרטיס ביקור בקישור אחד: חיוג, וואטסאפ, ניווט ושמירת איש קשר בלחיצה.

איפה זה עובד: עורכי דין, רואי חשבון, מטפלים, סוכני נדל״ן, כל נותן שירות

מה צריך להכין

  • תמונה
  • טלפון, וואטסאפ, מייל, כתובת
  • קישורים לרשתות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי כרטיס ביקור דיגיטלי בגודל טלפון עבור [שם ותפקיד]: תמונה, צד אחורי שמתהפך בתלת-ממד עם QR, וכפתורים — חיוג, וואטסאפ, ניווט ב-Waze ל-[כתובת], מייל, ו'שמירת איש קשר' שמייצר קובץ vcf להורדה. שורת רשתות חברתיות ואנימציית כניסה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שולחים את הקישור בוואטסאפ אחרי כל פגישה — הלקוח שומר אתכם באנשי הקשר בלחיצה.

סניפים

מפת סניפים אינטראקטיבית

כל הסניפים על מפה מעוצבת, עם שעות, טלפון ו-Waze בלחיצה.

איפה זה עובד: רשתות, עסקים עם כמה סניפים או אזורי שירות

מה צריך להכין

  • רשימת סניפים: כתובת, שעות, טלפון
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מפת סניפים ל-[שם העסק]: מפת ישראל מפושטת ב-SVG עם נקודות זוהרות בסניפים ([הסניפים]), לחיצה על נקודה או על פריט ברשימה מקרבת את המפה ומציגה כרטיס עם שעות, טלפון וכפתור Waze. סבב אוטומטי בין הסניפים בטעינה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 עובד גם ל'אזורי שירות' — עסק נייד שמסמן איפה הוא מגיע.

כלים לכל אתר

הגולש בוחר בלחיצה אילו עוגיות לאשר, והתגיות שלכם נטענות רק אחרי שהסכים.

איפה זה עובד: כל אתר עם אנליטיקס, פיקסל או קמפיינים ממומנים, ובמיוחד חנויות

מה צריך להכין

  • רשימת התגיות שרצות באתר
  • קישור לעמוד מדיניות הפרטיות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

פתיחת Claude ↗

💡 לפני העלייה לאוויר לחצו 'רק הכרחי' ובדקו בלוח שכל התגיות באמת חסומות.

כלים לכל אתר

עמוד 404 ממותג עם חיפוש

גולש שהגיע לקישור שבור לא נוטש: הוא מחפש, לוחץ וממשיך לעמוד הנכון.

איפה זה עובד: כל אתר, במיוחד אחרי שינוי כתובות, מעבר לאתר חדש או קמפיין ישן

מה צריך להכין

  • 8 עמודים: שם, תיאור, מילות חיפוש וקישור
  • 3 עמודים פופולריים לכרטיסים
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עמוד 404 ממותג לאתר של [שם העסק]: המספר 404, כשבמקום האפס איור SVG מעולם ה-[תחום] שזז בעדינות בלולאה (למשל בבית קפה: כוס עם אדים). מתחתיו כותרת קלילה, משפט הסבר, ושדה חיפוש שמציע עמודים תוך כדי הקלדה מרשימה שבקוד: עד 4 הצעות עם שם ותיאור, החלק שהוקלד מודגש, חיצים ו-Enter (aria-activedescendant), Esc סוגר, כפתור X לניקוי, ובלי התאמה שורה שמפנה לוואטסאפ. בטעינה הכול נכנס בהדרגה, והשדה מקליד לבד פעם אחת '[חיפוש לדוגמה]': הרשימה נפתחת, ואחרי כמה שניות ההדגמה נמחקת. נגיעה בשדה עוצרת אותה. מתחתיו כפתור 'חזרה לדף הבית' וכפתור וואטסאפ ל-[מספר בפורמט 972]. לצידם במחשב, ומתחתם במובייל, שלושה כרטיסי 'הכי מבוקשים אצלנו' עם אייקון, שם, תיאור וחץ. לחיפוש: [8 עמודים עם שם, תיאור, מילות חיפוש וקישור]. לכרטיסים: [3 עמודים פופולריים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בדקו פעם בחודש אילו כתובות שבורות מקבלות הכי הרבה כניסות, והפנו אותן לעמוד הנכון.

כלים לכל אתר

עמוד בקרוב עם ספירה לאחור

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

איפה זה עובד: חנות לפני השקה, אתר בבנייה או בשדרוג, קולקציה חדשה

מה צריך להכין

  • תאריך ושעת ההשקה
  • לוגו, כותרת וקישורים לרשתות
  • כתובת שאליה נשלחות ההרשמות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עמוד 'בקרוב' במסך מלא לאתר של [שם העסק]: רקע כהה עם כוכבי נצנוץ שמהבהבים לאט, לוגו, תגית 'האתר החדש בדרך', כותרת [כותרת] ומשפט משנה. במרכז ספירה לאחור חיה אל [תאריך ושעת ההשקה]: ימים, שעות, דקות ושניות, כל ספרה בכרטיס flip שמתהפך ב-rotateX כשהיא מתחלפת, ובטעינה הכרטיסים מתהפכים פעם אחת מ-00 לערך האמיתי. בסיום הספירה מופיעים במקומה 'עלינו לאוויר' וכפתור כניסה לאתר. שדה מייל 'עדכנו אותי כשעולים' ושורת הטבה [הטבה לנרשמים]: מייל שגוי מציג שגיאה מתחת לשדה, מייל תקין נשלח ב-fetch אל [כתובת לקבלת ההרשמות] והשדה מתחלף באישור עם וי והכתובת שנרשמה. אייקוני רשתות עגולים: [קישורי הרשתות]. בתחתית שורה קטנה 'כניסת צוות' שפותחת שדה קוד: קוד שגוי מרעיד את השדה ומציג 'קוד שגוי', והקוד [קוד צוות] מעביר אל [קישור לאתר החדש]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 קבעו תאריך שאתם בטוחים בו. ספירה שמתאפסת ונדחית שוב ושוב פוגעת באמון.

כלים לכל אתר

עמוד תודה אחרי השארת פרטים

הגולש יודע בדיוק מה קורה עכשיו ומתי חוזרים אליו, וההמרה נמדדת פעם אחת בלי כפילויות.

איפה זה עובד: אחרי כל טופס: דף נחיתה, צור קשר, הצעת מחיר, קביעת פגישה

מה צריך להכין

  • 3 שלבים עם זמן תגובה לכל אחד
  • 2 עמודים מומלצים עם קישור
  • מספר וואטסאפ
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עמוד תודה אחרי שליחת טופס לאתר של [שם העסק]: וי שמצטייר בעיגול (stroke-dashoffset, רק שם), כותרת 'קיבלנו, תודה' עם שם הפונה, ו'מה קורה עכשיו': שלושה שלבים על ציר אנכי, לכל אחד זמן תגובה, הראשון מסומן כבוצע והשני פועם. לצידם במחשב, ומתחתם במובייל: כרטיס 'סיכום הפנייה' (מספר פנייה, שם, נושא, טלפון מוסתר חלקית, שעה נוחה), כפתור וואטסאפ 'רוצים לזרז?' ל-[מספר בפורמט 972] ושני קישורים לעמודים מומלצים. בתחתית ספירה לאחור של 30 שניות לדף הבית, עם פס שמתקצר וכפתור 'ביטול'. הפרטים נקראים מ-sessionStorage שהטופס שמר (בלעדיהם כותרת כללית, בלי סיכום). בטעינה הכול נכנס בהדרגה, ו-generate_lead נדחף ל-dataLayer פעם אחת, גם ברענון. לוח בדיקה בפינה, עם סגירה, מציג את האירוע ושעת השליחה. השלבים: [3 שלבים עם זמן תגובה]. מומלצים: [2 עמודים עם קישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 כתבו זמני תגובה שאתם עומדים בהם. הבטחה של 30 דקות שלא מתקיימת גרועה משתיקה.

מוצר

תצוגה מהירה למוצר בחנות

הגולש בוחר גודל ומוסיף לסל ישר מהקטלוג, בלי לעבור עמוד. פחות קליקים עד הקנייה.

איפה זה עובד: חנויות ווקומרס, עמודי קטגוריה, קרוסלות מוצרים בדף הבית

מה צריך להכין

  • 2 עד 4 תמונות לכל מוצר
  • גדלים או גוונים עם מחיר לכל אחד
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי תצוגה מהירה (Quick View) לחנות של [שם החנות]: גריד מוצרים, ובכל כרטיס תמונה, קטגוריה, שם, מחיר, מספר האפשרויות וכפתור 'תצוגה מהירה'. הכפתור או התמונה פותחים חלון מעל העמוד: תמונה גדולה עם ממוזערות ותג של האפשרות שנבחרה, קטגוריה, שם, מחיר עם הערת משלוח, תיאור קצר, צ'יפים של גודל או גוון שמחליפים מחיר ותמונה, בורר כמות וכפתור 'הוספה לסל' עם הסכום. בלחיצה הכפתור מאשר 'נוסף לסל', החלון נסגר, מונה העגלה מתעדכן ומופיעה הודעה קצרה. יש קישור לעמוד המלא. נסגר ב-Esc, ברקע או ב-X, עם לכידת פוקוס. במובייל החלון עולה מלמטה כמגירה, כפתור הקנייה דביק וגרירה למטה סוגרת. בטעינה המוצר הראשון נפתח לבד וצ'יפ אחד מתחלף כהדגמה. המוצרים: [שם, קטגוריה, מחיר, תמונות ואפשרויות לכל מוצר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 אל תדחסו לחלון את כל עמוד המוצר. תמונה, מחיר, בחירה וכפתור, והשאר בקישור לעמוד המלא.

מוצר

עמוד מוצר פרימיום עם סימולטור גודל

הגולש בוחר חומר ומידה, רואה מחיר מתעדכן ואת הגודל ליד מטבע. פחות ספקות לפני קנייה.

איפה זה עובד: חנויות תכשיטים, שעונים, משקפיים, אביזרי אופנה ועיצוב לבית

מה צריך להכין

  • תיאור המוצר: צורה, חומרים ומידות
  • מחיר לכל חומר ומידה
  • 4 שאלות ותשובות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עמוד מוצר פרימיום לחנות של [שם החנות], למוצר [שם המוצר]: גלריה עם 4 תמונות ממוזערות, במובייל בהחלקה עם scroll-snap. לידה שם, תיאור, מחיר 'החל מ' וצ'יפים לבחירת חומר ומידה. כל בחירה מסומנת בצ'יפ, צובעת את המוצר בתמונות ומעדכנת את המחיר (התווית הופכת ל'המחיר שלכם'), את שורת 'הבחירה שלכם' ואת כפתור 'הוספה לסל', שמציג מחיר והופך בלחיצה ל'נוסף לסל' לשתי שניות. מתחת: 4 כרטיסי מפרט עם אייקון, והתלויים בבחירה מתעדכנים איתה. סימולטור גודל: המוצר ליד מטבע שקל (18 מ״מ) באותו קנה מידה, וכפתורי מידה מסונכרנים לצ'יפים. שאלות נפוצות באקורדיון: רק אחת פתוחה, הראשונה כבר בטעינה. בטעינה הבחירה עוברת פעם אחת לבד בין החומרים וחוזרת. המוצר מצויר ב-SVG, גרדיאנט מתכת במשתני CSS ונצנוץ עדין. התוכן: [חומרים, מידות ומחירים], [4 שאלות ותשובות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 מדדו את המוצר באמת ורשמו מידות במ״מ. סימולטור שמגזים בגודל מחזיר לכם הזמנות.

מוצר

כרטיס מוצר חכם עם הוספה מהירה

הגולש רואה עוד תמונה, מחליף גוון ומוסיף לסל בלי לצאת מעמוד הקטגוריה.

איפה זה עובד: עמוד קטגוריה, דף הבית, מוצרים משלימים, חנויות אופנה ועיצוב

מה צריך להכין

  • 4 מוצרים עם מחיר ותגית
  • 2 תמונות לכל גוון של כל מוצר
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גריד כרטיסי מוצר לחנות של [שם החנות], 2 בשורה במובייל ו-4 במחשב. בכל כרטיס: תמונה, שם, מחיר ונקודות צבע. בריחוף התמונה מתחלפת לתמונה שנייה בדעיכה רכה, וכפתור 'הוספה מהירה' עולה מתחתית התמונה. במגע ובמסך צר הכפתור קבוע, והתמונות מתחלפות בהחלקה (scroll-snap) עם נקודות. לחיצה על נקודת צבע מסמנת אותה בטבעת ומחליפה את התמונות לגוון הזה ב-cross-fade. 'הוספה מהירה' הופך לרגע ל'נוסף לסל' עם וי, מקפיץ את מונה הסל בפס עליון דביק ופותח מתחתיו בועה עם שם המוצר והגוון. תגית 'חדש' בפינת התמונה. מוצר שאזל: תגית 'אזל', תמונה מעומעמת ובלי כפתור. במבצע: מחיר חדש בצבע המותג ולידו הישן עם קו. עד שהגולש נוגע, הכרטיסים מדגימים את עצמם בתורות: תמונה שנייה, כפתור, הגוון הבא. המוצרים: [4 מוצרים: שם, מחיר, מחיר מבצע, תגית, 2 תמונות לכל גוון]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 צלמו את התמונה השנייה מזווית אחרת או על דוגמנית. שתי תמונות דומות לא שוות ריחוף.

מוצר

פס הוספה לסל דביק

הוספה לסל תמיד מול העיניים. מי שהשתכנע בסוף העמוד לא צריך לגלול חזרה כדי לקנות.

איפה זה עובד: עמודי מוצר ארוכים בחנות, במיוחד מוצרים עם משקלים, מידות או צבעים

מה צריך להכין

  • שם המוצר ותמונה
  • 3 וריאציות עם מחיר לכל אחת
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי פס 'הוספה לסל' דביק לעמוד מוצר בחנות של [שם החנות]. בעמוד: תמונת המוצר, שם, מחיר, בחירת וריאציה בגלולות (הראשונה מסומנת מראש) וכפתור 'הוספה לסל' ראשי. כשהכפתור הראשי יוצא מהמסך בגלילה (IntersectionObserver על הכפתור), מחליק פנימה פס צף כהה ומעוגל: תמונה קטנה, שם, מחיר, אותן גלולות וכפתור הוספה. במחשב הפס בראש המסך, בשורה אחת. במובייל בתחתית, בשתי שורות: הגלולות למעלה, ומתחתן תמונה, שם, מחיר וכפתור. בחירה בפס מסמנת את אותה גלולה בעמוד ולהפך, והמחיר מתעדכן בשני המקומות. לחיצה על הוספה, בעמוד או בפס, מציגה בשני הכפתורים 'נוסף לסל' עם וי למשך 2 שניות. כשהכפתור הראשי חוזר למסך, הפס מחליק החוצה. בטעינה העמוד נגלל לבד פעם אחת עד שהפס מופיע, ועוצר אם הגולש נוגע. המוצר: [שם ותמונה]. הווריאציות: [3 וריאציות עם מחיר לכל אחת]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שימו בפס רק בחירה אחת (משקל או מידה). פס עם שלוש בחירות כבר מרגיש כמו טופס.

מוצר

בלוק ספר עם רכישה ישירה

הספר מרחף מול הגולש כמו על מדף, ולחיצה אחת מובילה ישר לתשלום. בלי עגלה בדרך.

איפה זה עובד: סופרים, הוצאות לאור, ספרי עיון, דף נחיתה למוצר אחד או שניים

מה צריך להכין

  • ספר ראשי: שם, תקציר, ציטוט, מחיר וכריכה
  • ספר שני: שם, כריכה ומשפט תיאור
  • מחיר החבילה, מחירי המשלוח ומזהי המוצרים בחנות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי בלוק מכירה לספר לאתר של [שם העסק]: כריכה תלת-ממדית ב-CSS עם שדרה עבה וכהה וחתך דפים בהיר. בטעינה היא מסתובבת מהשדרה אל החזית, ואז מרחפת ומסתובבת קלות מעל צל רך, ובריחוף בעכבר פונה אל החזית. לידה שם, תקציר, ציטוט עם מירכאה גדולה ו'מתוך [שם הספר]', מחיר וכפתור 'לרכישה'. בלחיצה הוא מציג 'עוברים לתשלום' ומוביל בלי עגלה ישר אל /checkout/?add-to-cart=[מזהה מוצר]. מתחתיו בלוק כהה: שתי כריכות צפות, תווית 'חבילת צמד', כותרת, משפט תיאור, מחיר רגיל מחוק, [מחיר החבילה], חותמת 'חוסכים ₪[סכום]' וכפתור. בכל בלוק שורת משלוח ממשתנה אחד: [מחירי משלוח]. במובייל פס קנייה נדבק לתחתית: שם, מחיר וכפתור, ומתחלף לחבילה כשגוללים אליה. התוכן: [ספר ראשי: שם, תקציר, ציטוט, מחיר וכריכה], [ספר שני: שם, כריכה ומשפט תיאור]. בלי תמונה, צייר כריכה: שם, מחבר ואיור קו. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 קחו את צבעי הבלוק מהכריכה עצמה. על כפתור זהב כותבים בכהה: לבן על זהב כמעט לא נקרא.

מוצר

ספר תלת-ממדי שנפתח להצצה

הגולש מסובב את הספר, פותח ומדפדף בו כמו בחנות ספרים. מרגישים את המוצר לפני שקונים.

איפה זה עובד: ספרי בישול, סופרים, הוצאות לאור, חוברות וקורסים מודפסים

מה צריך להכין

  • שם הספר, מחיר וקישור לרכישה
  • 3 נקודות על מה יש בפנים
  • 2 מתכונים להצצה: שם ורשימת מצרכים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה למכירת ספר מתכונים בחנות של [שם החנות]: ספר תלת-ממדי ב-CSS עם כריכה ([שם הספר], שם העסק ואיור קו), שדרה, גב וחתך דפים בעובי אמיתי, מעל עיגול צבע וצל. הוא מסתובב לאט מצד לצד, נוטה אחרי העכבר ומסתובב בגרירה בעכבר או באצבע (touch-action: pan-y). לחיצה פותחת את הכריכה על ציר השדרה, מיישרת את הספר לחזית ומדפדפת שני דפים: עמוד שער, ואז [2 מתכונים להצצה], איור ושם בעמוד אחד ו'מה צריך' בעמוד שמולו. לחיצה נוספת סוגרת, ובטעינה הוא נפתח ונסגר פעם אחת לבד. מתחתיו תווית: 'לחצו להצצה · גררו לסיבוב', ובספר פתוח 'לחצו לסגירה'. הספר נפתח מימין, כמו ספר בעברית. לצד הספר (במובייל מתחתיו): כותרת, משפט פתיח, [3 נקודות על מה יש בפנים] עם סימן וי, [מחיר], שורת משלוח וכפתור 'להזמנת הספר' שמציג 'הספר בסל' ומוביל אל [קישור לרכישה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בעמודי ההצצה כתבו מעט מילים ובגדול. עמוד צפוף בספר קטן לא נקרא בטלפון.

קטלוג

קטלוג עם סינון מיידי

הלקוח מסמן סוג, חומר ומחיר, והמוצרים מתחלפים מול העיניים. פחות חיפוש, יותר קנייה.

איפה זה עובד: חנויות אונליין עם 20 מוצרים ומעלה: תכשיטים, אופנה, רהיטים, מתנות

מה צריך להכין

  • רשימת מוצרים עם מחיר, סוג וחומר
  • תמונה וקישור לכל מוצר
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קטלוג עם סינון מיידי לחנות של [שם החנות]: בצד פאנל 'סינון ומיון' עם תיבות סימון לפי סוג (ליד כל אחת מספר המוצרים), כפתורי חומר עם עיגול צבע, סליידר מחיר עם שתי ידיות (שני input range זה על זה) ומיון: מומלצים, מהזול ליקר, מהיקר לזול. כל שינוי מעדכן את הגריד מיד, בלי טעינת עמוד: הכרטיסים (תמונה, שם, חומר, מחיר, קישור) מחליקים למקומם החדש, ומעליהם מונה תוצאות וצ'יפים של המסננים הפעילים שמסירים בלחיצה, ו'נקו הכול'. אין תוצאות: 'לא נמצאו מוצרים' וכפתור 'איפוס המסננים'. במובייל: שתי עמודות, כפתור 'סינון ומיון' דביק עם מונה מסננים שפותח מגירה תחתונה, ובה כפתור 'הצג X מוצרים' שמתעדכן תוך כדי בחירה, ו'טען עוד' שמוסיף 6. בטעינה שני סוגים מסומנים לבד כהדגמה, במובייל במגירה שנפתחת ונסגרת. המוצרים: [שם, מחיר, סוג, חומר, תמונה וקישור לכל מוצר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שלושה או ארבעה מסננים מספיקים. כל מסנן נוסף מאריך את המגירה במובייל ומבלבל את הקונה.

קטלוג

הגולש מדפדף בין חדש, נמכרים ומבצעים בלי לעזוב את העמוד, ומוסיף לסל בלחיצה אחת.

איפה זה עובד: עמוד הבית של חנות, עמוד מוצר, עמוד עגלה, מתחת לפוסט בבלוג

מה צריך להכין

  • 6 עד 8 מוצרים לכל לשונית: שם, מחיר ותמונה
  • תמונות מוצר על רקע נקי ואחיד
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

פתיחת Claude ↗

💡 צלמו את כל המוצרים על אותו רקע ובאותו גודל. שורה אחידה נראית כמו מותג, לא כמו שוק.

קטלוג

הגולש מדפדף בין הכריכות, והתקציר, הדירוג והמחיר מתחלפים לצידן. כל ספר מקבל רגע על הבמה.

איפה זה עובד: סופרים, הוצאות לאור, חנויות ספרים, קורסים ומוצרים דיגיטליים

מה צריך להכין

  • כריכות של 6 ספרים
  • תקציר של שני משפטים, דירוג ומחיר לכל ספר
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

פתיחת Claude ↗

💡 כל הכריכות באותו יחס גובה ורוחב, אחרת המדף נראה עקום. ותקציר של שני משפטים, לא יותר.

קטלוג

קנו את הלוק עם נקודות חמות

הגולש רואה לוק שלם, לוחץ על פריט שמצא חן בעיניו ומוסיף את כל הלוק לסל.

איפה זה עובד: חנויות אופנה, תכשיטים, עיצוב הבית, עמוד הבית או עמוד קולקציה

מה צריך להכין

  • תמונת לוק לאורך (בלעדיה הדמות תצויר)
  • 5 פריטים מהלוק: שם, מחיר ואיפה כל אחד בתמונה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי רכיב 'קנו את הלוק' לחנות של [שם החנות]: תמונת לוק גדולה עם נקודה חמה פועמת על כל פריט, ולצידה קרוסלת מוצרים עם scroll-snap למרכז: בכל כרטיס תמונת הפריט, שם ומחיר, הכרטיס הפעיל במרכז והשכנים מציצים קטנים ועמומים. לחיצה על נקודה מזיזה את הקרוסלה אל הפריט, מדגישה את הכרטיס במסגרת עם הבהוב אחד, מכהה את הנקודה ופותחת לידה תווית עם שם ומחיר. גם הפוך: לחיצה על כרטיס או החלקה בקרוסלה מדליקות את הנקודה שלו. מתחת כפתור 'הוסיפו את כל הלוק' עם מספר הפריטים והסכום הכולל, שמתחלף ל-3 שניות ל'הלוק בסל'. בטעינה הפריט הראשון כבר מסומן, והרכיב עובר לבד מפריט לפריט עד שהגולש נוגע. במובייל הקרוסלה מתחת לתמונה, בכרטיסים נמוכים. עד שיהיו צילומים, צייר את הדמות והבגדים ב-SVG שטוח, גם בכרטיסים. הפריטים: [5 פריטים: שם, מחיר ומיקום על התמונה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 בחרו תמונה שבה כל פריט נראה במלואו. נקודה על פריט חצי מוסתר לא מוכרת אותו.

קטלוג

הדר חנות עם מגה-תפריט מזכוכית

הגולש רואה את כל הקטלוג במבט אחד ומגיע למוצר בשתי לחיצות, בלי ללכת לאיבוד.

איפה זה עובד: חנויות אונליין עם הרבה קטגוריות: בית, אופנה, טיפוח, צעצועים

מה צריך להכין

  • לוגו ו-4 קטגוריות, לכל אחת 4 עמודות קישורים
  • תמונת קולקציה מומלצת לכל קטגוריה
  • 3 הודעות קצרות ו-5 מוצרים עם מחיר
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי הדר נדבק לחנות של [שם החנות]. מעליו פס הודעות שמתחלף כל 4 שניות: [3 הודעות]. בהדר: לוגו, קטגוריות, חיפוש, חשבון ועגלה עם מונה. ריחוף על קטגוריה פותח מגה-תפריט מזכוכית (backdrop-filter: blur): 4 עמודות של כותרת ו-4 קישורים, וכרטיס תמונה של קולקציה מומלצת עם שם, מחיר וזום איטי. השהיית כוונה: 120ms לפתיחה, 250ms לסגירה. במקלדת: Enter פותח, החצים זזים בין קטגוריות, עמודות וקישורים, Esc סוגר ומחזיר פוקוס. החיפוש נפתח כשכבה: שדה גדול, חיפושים פופולריים והצעות מוצר עם מחיר שמסתננות בהקלדה. במובייל הקטגוריות והחשבון עוברים למגירה מימין עם אקורדיון, אחת פתוחה בכל פעם. סגירה ב-X, ב-Esc או ברקע. בטעינה המגה-תפריט נפתח לבד פעם אחת (במובייל: המגירה). התוכן: [4 קטגוריות עם 4 עמודות וקולקציה מומלצת], [5 מוצרים עם מחיר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 שמות קצרים לקישורים, מילה או שתיים. מגה-תפריט עמוס נראה כמו מפת אתר ולא עוזר לבחור.

חנויות

עגלת צד מעוצבת לחנות

הוספה לסל מרגישה כמו באפליקציה, והפס 'עוד ₪X למשלוח חינם' מגדיל את הסל.

איפה זה עובד: חנויות ווקומרס

מה צריך להכין

  • סכום למשלוח חינם
  • צבעי המותג
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עגלת צד מותאמת לחנות הווקומרס של [שם החנות], במקום תוסף העגלה: בהוספה לסל תמונה ממוזערת 'עפה' לכפתור עגלה צף עם מונה שקופץ, והמגירה נפתחת משמאל עם המוצרים, כמות פלוס/מינוס, הסרה, סכום ביניים ופס התקדמות 'עוד ₪[סכום] למשלוח חינם'. מבוסס WooCommerce Store API (נקודת הקצה wc/store/v1/cart). דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 פס המשלוח החינם הוא הדבר שהכי מגדיל סל — קבעו את הרף קצת מעל ההזמנה הממוצעת.

עגלה ותשלום

אנימציית עף לסל בהוספת מוצר

הגולש רואה את המוצר עף לעגלה ואת הסכום עולה. אין ספק שההוספה הצליחה.

איפה זה עובד: חנויות ווקומרס, עמודי קטגוריה, עמוד מוצר, קטלוג עם הוספה מהירה

מה צריך להכין

  • תמונות מוצר מרובעות על רקע נקי
  • שם, תיאור קצר ומחיר לכל מוצר
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אנימציית 'עף לסל' לחנות של [שם החנות]: הדר דביק עם סמל עגלה, מונה וסכום, ומתחתיו כרטיסי מוצר עם תמונה, שם, תיאור קצר, מחיר וכפתור 'הוספה לסל'. בלחיצה עותק עגול של תמונת המוצר עף בקשת אל העגלה, מתכווץ ונבלע, והכפתור מציג 'נוסף לסל' עם וי לשנייה וחצי. המונה והסכום מתעדכנים רק בנחיתה: העגלה קופצת, המונה מתנפח, ניצוצות קטנים מתפזרים והסכום סופר למעלה. אחר כך מגירת עגלה מציצה מהצד לשתי שניות עם המוצרים שבסל, סה״כ, כפתור 'מעבר לתשלום' ופס דק שמתרוקן עד שהיא נסגרת. לחיצה על העגלה פותחת וסוגרת אותה, ריחוף משאיר אותה פתוחה, וגם Esc ואיקס סוגרים. בטעינה המוצר הראשון נוסף לבד, כדי להראות את האנימציה. הקשת ב-Web Animations API בשתי שכבות: העוטף נע לרוחב, הפנימי לגובה עם הרמה באמצע. המוצרים: [שם, תיאור, מחיר ותמונה לכל מוצר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 תמונה על רקע נקי נראית טוב גם כעיגול קטן באוויר. תמונה עמוסה הופכת לכתם.

עגלה ותשלום

עמוד עגלה ממותג לחנות

העגלה נראית כמו החנות שלכם, לא כמו תוסף. הכול מתעדכן מול העיניים, עד כפתור התשלום.

איפה זה עובד: חנויות ווקומרס, אופנה, טיפוח, מתנות, כל חנות עם קופונים ומשלוחים

מה צריך להכין

  • 3 מוצרים לדוגמה עם מחיר
  • שיטות המשלוח והמחירים
  • קוד קופון ואחוז ההנחה
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עמוד עגלה ממותג לחנות של [שם החנות]: פס מותג עם קישור 'המשך קנייה', כותרת עם מונה פריטים, וכרטיס לכל פריט: תמונה, שם, וריאציה, כמות פלוס/מינוס, מחיר והסרה, כשהשאר מחליקים למקומם. מתחת שדה קופון: קוד נכון הופך לתג עם כפתור ביטול, שגוי מציג שגיאה, ובחירת משלוח בכרטיסי רדיו עם זמן ומחיר. בצד כרטיס סיכום ב-position sticky: סכום ביניים, משלוח, הנחה, סך הכול, כפתור 'להמשך לתשלום' ושורת אמון. כל שינוי מעדכן את הסכומים בספירה חלקה עם requestAnimationFrame. בטעינה הכרטיסים נכנסים בהדרגה, הסכומים נספרים מאפס, והקופון מוקלד ומוחל לבד פעם אחת. במובייל כל פריט בשתי שורות, והסך הכול וכפתור התשלום נדבקים לתחתית. עגלה ריקה: איור, משפט קצר וכפתור 'חזרה לחנות'. התוכן: [פריטים עם וריאציה ומחיר], [משלוחים ומחירים], [קופון ואחוז הנחה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הציגו את מחיר המשלוח כבר בעגלה. הפתעה בעמוד התשלום היא הסיבה הכי נפוצה לנטישה.

עגלה ותשלום

עמוד תשלום ממותג בשלבים

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

איפה זה עובד: חנויות ווקומרס, מכירת ספרים, מוצרי בוטיק, דף מכירה למוצר אחד

מה צריך להכין

  • מוצרים ומחירים
  • אפשרויות משלוח: מחיר וזמן אספקה
  • קוד קופון ו-3 הבטחות קצרות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עמוד תשלום לחנות של [שם החנות], בעמודה אחת. למעלה כרטיס 'סיכום הזמנה' מתקפל. סגור: כמה פריטים וסכום. פתוח: [מוצרים ומחירים], שדה קופון [קוד קופון] ושורות ביניים, משלוח, הנחה וסה״כ. בטעינה הוא נפתח לבד לרגע ונסגר. מתחתיו שלבים ממוספרים. 1 פרטים: שם, טלפון, אימייל. 2 משלוח: כרטיסי בחירה [אפשרויות משלוח, מחיר וזמן אספקה] ושדה כתובת. 3 תשלום: לשוניות כרטיס אשראי (מספר, תוקף, CVV), ארנק דיגיטלי והעברה בנקאית. לכל שדה תווית צפה, inputmode מתאים ובדיקה ביציאה ממנו: וי ירוק או שגיאה מתחתיו. שלב שהושלם מקבל וי במקום המספר. הסכום בכפתור התשלום מתעדכן עם המשלוח והקופון. בלחיצה: גלילה לשגיאה הראשונה, או טעינה ואז מסך 'ההזמנה התקבלה' עם מספר הזמנה. מתחת לכפתור סמלי אמון: [3 הבטחות קצרות]. שום פרט לא נשלח: השאר מקום מסומן לחיבור הסליקה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 ככל שיש פחות שדות, יותר אנשים מסיימים. בקשו רק מה שבאמת צריך כדי לשלוח.

עגלה ותשלום

פס משלוח חינם ומינימום הזמנה

הלקוח רואה כמה חסר למינימום ולמשלוח חינם, ומוסיף עוד פריט במקום לנטוש את הסל.

איפה זה עובד: חנויות ווקומרס, משלוחי אוכל ומאפים, כל חנות עם דמי משלוח

מה צריך להכין

  • סכום מינימום להזמנה
  • סכום למשלוח חינם ודמי משלוח
  • פריטים ומחירים
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עגלה עם פס משלוח חינם ומינימום הזמנה לחנות של [שם החנות]: מסלול אחד עם שתי תחנות, מינימום ₪[סכום מינימום] ומשלוח חינם ₪[סכום למשלוח]. תחנה שהושגה מקבלת וי והבאה פועמת. מעליו שורת מצב: 'חסרים ₪X להזמנה', 'עוד ₪X למשלוח חינם', ו'המשלוח עלינו!' עם פרץ קונפטי. מתחת רשימת הסל עם פלוס ומינוס, ושורת 'משלימים את הסכום': עד 3 פריטים שלא בסל עם כפתור הוספה, והזול ביותר שסוגר את החסר ראשון ומסומן. ביעד היא נעלמת. בסיכום: ביניים, משלוח ₪[דמי משלוח] שהופך ל'חינם', וסה״כ. מתחת למינימום כפתור התשלום נעול, עם מנעול, ולחיצה מנערת את שורת המצב. מהמינימום (כולל) הוא נפתח ל'לתשלום ₪X', ובלחיצה מאשר 'ממשיכים לתשלום'. במובייל הסיכום והכפתור צמודים לתחתית. בטעינה הסל מתחת למינימום, ואחרי שנייה פריט נוסף לבד והנעילה נפתחת. הפריטים: [פריטים ומחירים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הודעה בעגלה לא חוסמת הזמנה. בקשו לאכוף את המינימום גם בשרת, ונסו להזמין מתחתיו.

מבצעים והזמנות

לוח תאריכים להזמנת סדנה

הגולש רואה בלוח מתי יש סדנה וכמה מקומות נותרו, ומזמין בשתי לחיצות.

איפה זה עובד: סדנאות, קורסים, סיורים, חוגים, אירועים עם מספר מקומות מוגבל

מה צריך להכין

  • רשימת מועדים: תאריך, שעות, מחיר ומקומות
  • מספר וואטסאפ להזמנות
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי לוח תאריכים לעמוד סדנה באתר של [שם העסק]: לוח חודשי עם חיצים, שננעלים מחוץ לחודשים שיש בהם מועדים. יום עם סדנה צבוע ומציג 'נותרו 3', ועד 3 מקומות גם נקודה פועמת. יום מלא אפור עם 'מלא' ואינו לחיץ, יום ריק הוא מספר בלבד. מתחת מקרא: יש מקום, נבחר, מלא. לחיצה על יום מסמנת אותו ומציגה לצד הלוח פאנל: התאריך המלא, כרטיסי שעה עם מחיר למשתתף ומקומות שנותרו (הפנויה הראשונה מסומנת, מלאה מושבתת), בורר משתתפים פלוס/מינוס עד מספר המקומות, סה״כ שמתעדכן, וכפתור שמסכם תאריך, שעה וסכום ופותח וואטסאפ עם ההזמנה ל-[מספר בפורמט 972]. בטעינה הימים נכנסים בהדרגה והמועד הקרוב נבחר לבד. לפני בחירה הפאנל מציג 'בחרו יום מסומן' בגובה שמור. במובייל הלוח ברוחב מלא, הפאנל מתחתיו והכפתור צמוד לתחתית. המועדים: [תאריך, שעות, מחיר ומקומות לכל מועד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 פתחו מועדים לחודשיים קדימה לפחות. לוח עם שלושה תאריכים נראה כמו עסק ריק.

מבצעים והזמנות

פופאפ מועדון לקוחות עם קופון

הגולש משאיר טלפון או מייל, והקופון כבר מופעל בסל. בלי להקליד קוד.

איפה זה עובד: חנויות אונליין: עמוד הסל, עמוד מוצר, כניסה ראשונה לחנות

מה צריך להכין

  • אחוז ההנחה וקוד הקופון
  • משפט ההסכמה לדיוור
  • 2 מוצרים עם מחיר ודמי משלוח
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי פופאפ מועדון לקוחות לעמוד הסל בחנות של [שם החנות]. נפתח לבד 0.8 שניות אחרי הטעינה, פעם אחת לגולש (localStorage): במובייל מגירה מלמטה, במחשב כרטיס במרכז. בצד פאנל כהה: '[אחוז הנחה]' ענק, 'משלוח חינם להזמנה הראשונה' ועיגולי אור שנעים לאט. בטופס: שדה לטלפון נייד או מייל עם בדיקה והודעת שגיאה, תיבת הסכמה לדיוור, כפתור 'הצטרפות וקבלת הקופון' וקישור 'להמשיך בלי להצטרף'. נסגר גם ב-X, ב-Esc ובלחיצה על הרקע הכהה. אחרי ההצטרפות, cross-fade למסך תודה: הקוד [קוד קופון] נחשף אות אחרי אות על כרטיס קופון, וכפתור 'לסל שלי' מתמלא 3 שניות וסוגר. אז סיכום הסל נגלל לתצוגה: שורת 'חברי מועדון חוסכים' (פותחת שוב את הפופאפ) מתחלפת בשורת ההנחה, המשלוח הופך ל'חינם', הסכום יורד בספירה ובהדר נשאר תג 'חבר מועדון'. סל לדוגמה: [2 מוצרים עם מחיר ודמי משלוח]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

פתיחת Claude ↗

💡 הגדירו בחנות קופון אמיתי עם אותו קוד, והגבילו אותו לשימוש אחד ללקוח.

וואטסאפ

סוכן וואטסאפ חכם (AI)

עונה ללקוחות 24/7 בשפה טבעית, קובע תורים ומעביר אליכם רק את מה שצריך בן אדם.

איפה זה עובד: סטודיו, קליניקה, מסעדה — כל עסק עם הרבה שאלות חוזרות

מה צריך להכין

  • חשבון Green API (וואטסאפ)
  • מפתח Claude API
  • מחירון, שעות ושאלות נפוצות
  • גישה ל-Google Calendar

הפרומפט — מחליפים את מה שמסומן

בנה לי בוט וואטסאפ חכם ל-[שם העסק] ב-Python: מקבל הודעות מ-Green API דרך webhook, עונה עם Claude API לפי קובץ ידע שאני מספק ([מחירון, שעות, שאלות נפוצות]), מציע זמנים פנויים מ-Google Calendar ככפתורים, קובע תור ושולח אישור. כשהלקוח מבקש נציג, או שהבוט לא בטוח בתשובה — הוא מעביר אליי הודעה עם תקציר השיחה. שמור היסטוריה לכל לקוח, אל תמציא מחירים או שעות שלא בקובץ, ותן לי הוראות הרצה והגדרת ה-webhook. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 עובד הכי טוב ב-Claude Code — הוא כותב, מריץ ובודק. התחילו מ-10 שאלות אמיתיות שלקוחות שואלים.

לידים

התראת ליד לוואטסאפ תוך שנייה

ליד נכנס מהאתר והטלפון שלכם מקבל את כל הפרטים — לפני שהלקוח הספיק לפנות למתחרה.

איפה זה עובד: כל אתר עם טופס יצירת קשר

מה צריך להכין

  • אתר וורדפרס עם טופס
  • חשבון Green API
  • מספר הוואטסאפ שלכם

הפרומפט — מחליפים את מה שמסומן

בנה לי חיבור בין הטופס באתר הוורדפרס של [שם העסק] לבין וואטסאפ: בכל שליחת טופס נשלחת אליי מיד הודעה דרך Green API עם שם, טלפון, השירות, מאיזה עמוד הגיע הליד ומאיזה מקור (גוגל, פייסבוק, ישיר), וכפתור חיוג. בלי תוספים כבדים — קטע קוד אחד בוורדפרס (hook על שליחת הטופס) ובדיקת כפילויות. תן לי גם דרך לבדוק שזה עובד. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 מי שחוזר לליד בתוך 5 דקות סוגר הרבה יותר. ההתראה הזו היא ההבדל.

תורים

מערכת זימון תורים

הלקוחות קובעים לבד 24/7 ומקבלים תזכורת בוואטסאפ — ואתם מפסיקים לרדוף בטלפון.

איפה זה עובד: קוסמטיקה, קליניקות, מספרות, סטודיו, יועצים

מה צריך להכין

  • רשימת שירותים ומשך כל אחד
  • שעות פעילות
  • חשבון Green API לתזכורות

הפרומפט — מחליפים את מה שמסומן

בנה לי מערכת זימון תורים ל-[שם העסק]: עמוד בחירת שירות, שבוע עם שעות פנויות, פרטים ואישור. השירותים ומשכי הזמן: [רשימה], שעות פעילות: [שעות]. תזכורת בוואטסאפ יום לפני (Green API), ביטול וקביעה מחדש בקישור, ולוח ניהול פשוט בשבילי. Next.js ו-Supabase, מותאם לעברית ולמובייל. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 התזכורת יום לפני מורידה ביטולים של הרגע האחרון יותר מכל דבר אחר.

ניהול

דשבורד לידים ו-CRM

כל הלידים, הסטטוסים וההכנסות במסך אחד — יודעים מה עובד ועל מי לחזור.

איפה זה עובד: כל עסק שמקבל פניות ממכמה מקורות

מה צריך להכין

  • מקורות הלידים (טופס, וואטסאפ, גיליון)
  • שלבי המכירה שלכם

הפרומפט — מחליפים את מה שמסומן

בנה לי דשבורד CRM קטן ל-[שם העסק]: כרטיסי מדדים (לידים החודש, שיעור סגירה, הכנסות), גרף מגמה, לוח קנבן של לידים (חדש, בטיפול, נסגר) עם גרירה, ופיד פעילות. מקור הלידים: [טופס באתר / וואטסאפ / גוגל שיטס]. Next.js ו-Supabase, עברית מימין לשמאל, התחברות מאובטחת. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 התחילו רק עם 3 שלבים. CRM מסובך מדי הוא CRM שאף אחד לא ממלא.

גוגל

מענה חכם לביקורות גוגל

כל ביקורת מקבלת תשובה אישית תוך דקות — גוגל אוהב את זה, והלקוחות רואים שאכפת לכם.

איפה זה עובד: כל עסק עם פרופיל Google Business

מה צריך להכין

  • גישה לפרופיל Google Business
  • מפתח Claude API
  • דוגמה לטון שלכם

הפרומפט — מחליפים את מה שמסומן

בנה לי כלי שמושך ביקורות חדשות מפרופיל Google Business של [שם העסק], מזהה אם הביקורת חיובית או שלילית, ומנסח עם Claude API טיוטת תשובה אישית בעברית — בטון [הטון שלכם], מזכיר שם ושירות כשזה טבעי, בלי תבניות. ביקורת שלילית מסומנת כדחופה ונשלחת אליי לוואטסאפ. שום תשובה לא מתפרסמת בלי אישור שלי. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 האישור שלכם לפני פרסום הוא חובה — תשובה אוטומטית לביקורת שלילית יכולה להזיק.

SEO

דוח SEO חודשי אוטומטי

בכל 1 לחודש הלקוח מקבל דוח ברור: כמה הגיעו מגוגל, על אילו מילים, ומה השתפר.

איפה זה עובד: סוכנויות, פרילנסרים, עסקים שמשלמים על קידום

מה צריך להכין

  • גישה ל-Google Search Console
  • צבעי המותג
  • מספר וואטסאפ או מייל של הלקוח

הפרומפט — מחליפים את מה שמסומן

בנה לי סקריפט Python שבכל 1 לחודש מושך מ-Google Search Console את הנתונים של [האתר]: קליקים, הופעות, מיקום ממוצע ו-10 מילות המפתח המובילות, עם השינוי מהחודש הקודם. הוא בונה דוח HTML ממותג בצבעי [צבעים] עם גרף, ממיר ל-PDF ושולח ללקוח בוואטסאפ או במייל. רק נתונים אמיתיים מ-GSC, בלי הערכות. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 לקוח שרואה כל חודש מה השתפר — נשאר. הדוח הזה שווה יותר מכל שיחת שימור.

הנהלת חשבונות

חשבוניות מהמייל ישר לרו״ח

חשבוניות ספקים נאספות מהמייל, מסווגות, ונארזות לרו״ח בסוף החודש — בלי לגעת.

איפה זה עובד: כל עסק עם ספקים וחשבוניות במייל

מה צריך להכין

  • גישה לתיבת המייל
  • קטגוריות ההוצאות שלכם
  • מייל של הרו״ח

הפרומפט — מחליפים את מה שמסומן

בנה לי סקריפט Python שסורק את המייל [כתובת] פעמיים ביום, מזהה חשבוניות (PDF ותמונות), מחלץ ספק, סכום, תאריך ומספר חשבונית, מסווג לקטגוריה ([הקטגוריות]) לפי תוכן החשבונית, מזהה כפילויות, ושומר בתיקייה לפי חודש. ב-1 לחודש הוא בונה טבלת סיכום ושולח את החבילה לרו״ח [מייל] עם עותק אליי. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 סיווג לפי תוכן החשבונית, לא לפי נושא המייל — למדנו את זה בשטח.

מכירות

הצעת מחיר ממותגת בדקה

ממלאים 4 שדות, יוצאת הצעה מעוצבת עם הלוגו, נשלחת בוואטסאפ, והלקוח מאשר בלחיצה.

איפה זה עובד: קבלנים, ספקי שירות, סטודיו, כל מי ששולח הצעות

מה צריך להכין

  • לוגו וצבעים
  • שירותים ומחירים קבועים
  • תנאי תשלום

הפרומפט — מחליפים את מה שמסומן

בנה לי מחולל הצעות מחיר ל-[שם העסק]: טופס פנימי (לקוח, שירותים מרשימה [השירותים והמחירים], כמויות), שמייצר PDF ממותג עם הלוגו, שורות, מע״מ, סה״כ, תוקף ותנאי תשלום [התנאים], ושולח ללקוח בוואטסאפ עם קישור לאישור. אישור הלקוח מעדכן סטטוס ומודיע לי. Next.js ו-Supabase. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 הצעה שנשלחת תוך שעה מהשיחה נסגרת פי כמה מהצעה שמגיעה מחר.

וואטסאפ

דיוור וואטסאפ בקצב אנושי

הודעה אישית לרשימת לקוחות, נשלחת אחת-אחת בקצב שלא נחסם, עם מעקב מי קרא ומי השיב.

איפה זה עובד: עסקים עם רשימת לקוחות: מבצעים, חידוש, לקוחות שנעלמו

מה צריך להכין

  • רשימת לקוחות (שם וטלפון)
  • חשבון Green API
  • נוסח ההודעה

הפרומפט — מחליפים את מה שמסומן

בנה לי כלי דיוור בוואטסאפ ל-[שם העסק] דרך Green API: בחירת קהל מרשימה (למשל לקוחות שלא ביקרו 60 יום), הודעה עם שם אישי, שליחה אחת-אחת בקצב אנושי עם השהיות אקראיות ומגבלה יומית, מונים חיים (נשלח, נקרא, השיבו), עצירה אוטומטית בכל סימן חסימה, והתשובות מגיעות אליי. בלי ספאם: רק ללקוחות שנתנו את המספר. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 קצב אנושי ומגבלה יומית זה מה ששומר על המספר. מהר = חסימה.

חנויות

החזרת עגלות נטושות

לקוח שעזב באמצע מקבל תזכורת בוואטסאפ עם המוצר — וחלק גדול חוזר לסיים.

איפה זה עובד: חנויות ווקומרס

מה צריך להכין

  • חנות ווקומרס
  • חשבון Green API
  • נוסח התזכורת

הפרומפט — מחליפים את מה שמסומן

בנה לי אוטומציה לעגלות נטושות בחנות הווקומרס [שם החנות]: כשלקוח שהשאיר טלפון עוזב עם מוצרים בסל, אחרי [שעה] נשלחת לו הודעת וואטסאפ (Green API) עם תמונת המוצר, הסכום וקישור שמחזיר אותו לסל. תזכורת שנייה אחרי יום עם [הטבה קטנה], ולא יותר. לוח קטן שמראה כמה הוחזר. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 תזכורת אחת נעימה מחזירה. שלוש תזכורות מבריחות.

תורים

תזכורות תורים נגד אי-הגעה

יום לפני: תזכורת, אישור בלחיצה, ושינוי תור בשיחה עם הבוט. פחות כיסאות ריקים.

איפה זה עובד: קליניקות, מספרות, סטודיו, יועצים

מה צריך להכין

  • היומן שלכם (Google Calendar או מערכת)
  • חשבון Green API

הפרומפט — מחליפים את מה שמסומן

בנה לי מערכת תזכורות ל-[שם העסק]: כל ערב היא מושכת את התורים של מחר מ-[היומן], שולחת לכל לקוח תזכורת בוואטסאפ עם כפתורים 'מאשר' ו'צריך לשנות'. מי שמבקש לשנות מקבל 2 זמנים פנויים ובוחר, ומי שלא ענה מסומן אצלי. בבוקר אני מקבל סיכום: מאושרים, שונו, לא ענו. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 הכפתור 'צריך לשנות' הוא הסוד — בלי הוא, הלקוח פשוט לא מגיע.

לידים

ניקוד לידים חכם

כל ליד מקבל ציון לפי תקציב, דחיפות והתאמה — ואתם מתקשרים קודם למי שסוגר.

איפה זה עובד: עסקים עם עשרות פניות בשבוע

מה צריך להכין

  • מקורות הלידים
  • מה הופך ליד לטוב אצלכם (3–4 קריטריונים)

הפרומפט — מחליפים את מה שמסומן

בנה לי מנקד לידים ל-[שם העסק]: כל פנייה חדשה מ-[טופס / וואטסאפ / גוגל] עוברת ניתוח עם Claude API לפי [הקריטריונים], מקבלת ציון 1–100 ושורת נימוק, ונכנסת לרשימה ממוינת ב-CRM. ליד עם ציון גבוה שולח לי התראה מיידית בוואטסאפ עם כפתור חיוג. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 הקריטריונים צריכים לבוא מהעסקאות שסגרתם בפועל — מה היה משותף ללקוחות הטובים.

סושיאל

לוח תוכן שמייצר ומפרסם לבד

שבוע של פוסטים נכתב, מתוזמן ומתפרסם — ואתם רק מאשרים.

איפה זה עובד: כל עסק שרוצה נוכחות קבועה בלי להתעסק

מה צריך להכין

  • 3–5 נושאים שהעסק מדבר עליהם
  • טון הדיבור
  • חיבור לחשבונות (Meta)

הפרומפט — מחליפים את מה שמסומן

בנה לי מערכת תוכן לסושיאל ל-[שם העסק]: כל שבוע היא מציעה 5 פוסטים ([הנושאים], בטון [הטון]) עם קופי ורעיון לתמונה, משבצת אותם בלוח שבועי, מחכה לאישור שלי, ומפרסמת לאינסטגרם ולפייסבוק דרך ה-API של Meta בשעות הטובות. דוח קצר בסוף השבוע: מה עלה ומה עבד. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 האישור שלכם לפני פרסום הוא לא חובה טכנית — הוא מה ששומר על הקול שלכם.

אתר

צ'אטבוט לאתר שאוסף לידים

עונה על שאלות מהידע של העסק, מציג מוצרים, ואוסף שם וטלפון בשיחה טבעית.

איפה זה עובד: כל אתר עם תנועה ושאלות חוזרות

מה צריך להכין

  • קובץ ידע: שירותים, מחירים, שעות, שאלות נפוצות
  • מפתח Claude API

הפרומפט — מחליפים את מה שמסומן

בנה לי צ'אטבוט לאתר של [שם העסק]: בועה בפינת המסך, עונה רק מתוך קובץ הידע [הקובץ] עם Claude API (ואומר 'אבדוק ואחזור' כשלא יודע), מציג כרטיסי מוצר בתוך השיחה, ואוסף שם וטלפון בצורה טבעית כשמזהה כוונת קנייה. כל ליד נשלח אליי בוואטסאפ. קוד צד לקוח להטמעה ושרת קטן ל-API. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 בוט שאומר 'לא יודע' בונה יותר אמון מבוט שממציא.

גוגל

ניהול גוגל ביזנס אוטומטי

עדכון שבועי, מענה לביקורות ושעות חג — הפרופיל חי, והדירוג במפות עולה.

איפה זה עובד: כל עסק מקומי

מה צריך להכין

  • גישה לפרופיל Google Business
  • 3 נושאים לעדכונים
  • מפתח Claude API

הפרומפט — מחליפים את מה שמסומן

בנה לי מנהל פרופיל Google Business ל-[שם העסק]: כל שבוע הוא מפרסם עדכון ([הנושאים]) עם תמונה, עונה לביקורות חדשות בטיוטה שאני מאשר, מעדכן שעות בחגים מרשימה שאני נותן, ומודד את המיקום במפות על [3 מילות חיפוש] ב-[עיר]. דוח חודשי קצר בוואטסאפ. עבוד בשלבים: קודם תוכנית קצרה לאישור שלי, אחר כך הקוד, ובסוף בדיקה על נתונים אמיתיים. עברית בכל מה שהלקוח רואה. סודות ומפתחות רק בקובץ env, לא בקוד.

פתיחת Claude ↗

💡 פרופיל שמתעדכן כל שבוע מדורג יותר גבוה מפרופיל מושלם שלא נגעו בו חצי שנה.

צילום טלפון רגיל
לפני · צילום טלפון רגיל
צילום מוצר לחנות — רקע נקי — התוצאה
אחרי
מוצרים

צילום מוצר לחנות — רקע נקי

תמונת קטלוג מקצועית מצילום טלפון רגיל

מה צריך להכין

  • צילום של המוצר (גם מהטלפון)
  • שם המוצר

הפרומפט — מחליפים את מה שמסומן

צור צילום מוצר מקצועי לחנות אונליין מהמוצר שבתמונה המצורפת: [שם המוצר]. שמור בדיוק על הצורה, הצבע, התווית, הכיתוב והפרופורציות של המוצר — אל תשנה ואל תשפר שום פרט בו. רקע [לבן נקי / אפור בהיר / בצבע המותג], תאורת סטודיו רכה ומפוזרת עם אור מסגרת עדין, צל מגע ריאליסטי מתחת למוצר, המוצר במרכז עם הרבה מרחב ריק סביבו, בלי אביזרים ובלי אלמנטים נוספים, חדות מקסימלית. פורמט ריבועי 1:1.

פתיחת ChatGPT ↗

💡 צלמו את המוצר באור יום ליד חלון — ככל שהמקור חד יותר, התווית תישמר מדויקת יותר.

צילום טלפון רגיל
לפני · צילום טלפון רגיל
המוצר כגיבור של פרסומת — התוצאה
אחרי
מוצרים

המוצר כגיבור של פרסומת

תמונת פרסום קולנועית שמוכרת תחושה

מה צריך להכין

  • צילום של המוצר
  • סביבה שמתאימה למוצר

הפרומפט — מחליפים את מה שמסומן

צור תמונת פרסום קולנועית למוצר שבתמונה המצורפת: [שם המוצר]. שמור על המוצר בדיוק כמו שהוא — צורה, צבע ותווית. הצב אותו [בסביבה — למשל: על משטח אבן כהה עם טיפות מים]. תאורה דרמטית כהה עם אור מסגרת חזק, אובך עדין וחלקיקים באוויר, עומק שדה רדוד, מראה של עדשה אנמורפית, גוון צבע [חם וזהוב / קר וכחלחל]. המוצר הוא המוקד הבלתי-מעורער של התמונה, בלי טקסט. פורמט [4:5 לפיד / 9:16 לסטורי].

פתיחת ChatGPT ↗

💡 אותו צילום מקור עובד לשני הפרומפטים — קטלוג נקי לחנות, וגרסה קולנועית למודעות.

תמונת אווירה אמיתית — בלי סטוק — התוצאה מהפרומפט
מותג

תמונת אווירה אמיתית — בלי סטוק

צילום שנראה כאילו הבאתם צלם לעסק

מה צריך להכין

  • סוג העסק
  • מה רואים בתמונה
  • האווירה שאתם רוצים

הפרומפט — מחליפים את מה שמסומן

צור צילום אווירה ריאליסטי לעסק שלי: [סוג העסק ושמו]. בתמונה: [מה רואים — למשל: ידיים מכינות קפה על בר עץ]. אור חלון טבעי, טקסטורות אמיתיות, גרעין פילם עדין, צילום במצלמת 35 מ״מ בצמצם f/2.8, קומפוזיציה ספונטנית כמו צילום עריכה אמיתי ולא מבוים. אווירה: [חמימה / מקצועית / אנרגטית]. בלי טקסט, בלי לוגו, בלי ברק מלאכותי. פורמט [16:9 לאתר / 4:5 לאינסטגרם].

פתיחת ChatGPT ↗

💡 המילים 'בלי ברק מלאכותי' ו'לא מבוים' הן מה שמוריד את המראה של AI.

פוסט מבצע לאינסטגרם — התוצאה מהפרומפט
סושיאל

פוסט מבצע לאינסטגרם

פוסט מבצע מעוצב עם עברית תקינה

מה צריך להכין

  • שם העסק
  • המבצע
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

עצב פוסט אינסטגרם ריבועי למבצע של [שם העסק] — [תחום העסק]. כותרת גדולה ובולטת: "[כותרת המבצע]". שורת משנה: "[פרטים קצרים]". כפתור בתחתית: "[קריאה לפעולה]". צבעי המותג: [צבעים]. במרכז: [מוצר או אובייקט מרכזי]. עיצוב פרסומי ישראלי נקי ומודרני, היררכיה ברורה, הרבה אוויר, כל הטקסט בעברית חד, קריא ומאוית נכון, בלי טקסט מיותר.

פתיחת ChatGPT ↗

💡 כתבו את הטקסט המדויק במירכאות — ככה הוא נכתב בתמונה מילה במילה.

סטורי טיפ מקצועי — התוצאה מהפרומפט
סושיאל

סטורי טיפ מקצועי

סטורי שממצב אתכם כמומחים

מה צריך להכין

  • טיפ אחד מהתחום
  • 3 נקודות קצרות

הפרומפט — מחליפים את מה שמסומן

עצב סטורי אינסטגרם אנכי 9:16 עם טיפ מקצועי מ[שם העסק], [תחום]. למעלה תגית קטנה: "טיפ מקצועי". כותרת: "[הטיפ בקצרה — עד 8 מילים]". מתחת 3 נקודות קצרות: "[נקודה 1]", "[נקודה 2]", "[נקודה 3]". בתחתית: "[שם העסק]" ו-"[קריאה לפעולה]". סגנון [מינימליסטי בהיר / כהה ויוקרתי], צבעי המותג [צבעים], אייקון קטן ליד כל נקודה, השאר מרווח ריק למעלה ולמטה בשביל הממשק של אינסטגרם. כל הטקסט בעברית, חד ומאוית נכון.

פתיחת ChatGPT ↗

💡 טיפ אחד לסטורי. שלוש נקודות — לא יותר.

שקף פתיחה לקרוסלה שעוצר גלילה — התוצאה מהפרומפט
סושיאל

שקף ראשון שגורם להחליק

מה צריך להכין

  • נושא הקרוסלה
  • כותרת של כאב או הבטחה

הפרומפט — מחליפים את מה שמסומן

פתיחת ChatGPT ↗

💡 מספר בכותרת ('5 טעויות') מבטיח ערך ברור — ככה מחליקים.

מודעה ממומנת: כאב ← פתרון — התוצאה מהפרומפט
פרסום

מודעה ממומנת: כאב ← פתרון

מודעה שהלקוח מזהה בה את עצמו

מה צריך להכין

  • הכאב של הלקוח במילים שלו
  • ההבטחה שלכם
  • ההצעה

הפרומפט — מחליפים את מה שמסומן

עצב מודעה ממומנת לפייסבוק ואינסטגרם 1:1 ל[שם העסק] שמוכר [שירות או מוצר] ל[קהל יעד]. בחצי העליון הכאב: "[משפט כאב קצר שהלקוח אומר לעצמו]", עם ויזואל שממחיש אותו. בחצי התחתון הפתרון: "[ההבטחה שלכם בקצרה]", עם ויזואל שממחיש את התוצאה. פס תחתון: "[הצעה או קריאה לפעולה]". ניגוד חזותי ברור בין החצאים — אפור ועמום למעלה מול צבעוני ובהיר למטה. צבעי המותג [צבעים], מעט טקסט, כל הטקסט בעברית חד ומאוית נכון.

פתיחת ChatGPT ↗

💡 משפט הכאב צריך להישמע כמו מחשבה של הלקוח — לא כמו סלוגן.

באנר ראשי לאתר — התוצאה מהפרומפט
אתר

באנר ראשי לאתר

תמונת פתיחה לאתר עם מקום לכותרת

מה צריך להכין

  • מה הלקוח מקבל אצלכם
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

צור תמונת באנר רחבה 16:9 לראש דף הבית של [שם העסק], [תחום]. סצנה: [מה רואים — העסק במיטבו או התוצאה שהלקוח מקבל]. השאר את הצד הימני של התמונה נקי ורגוע, כדי שאפשר יהיה לשים עליו כותרת וכפתור באתר. צילום ריאליסטי, אור טבעי, עומק שדה רדוד, צבעים שמתאימים ל[צבעי המותג]. בלי טקסט ובלי לוגו בתמונה.

פתיחת ChatGPT ↗

💡 האתר בעברית — הכותרת יושבת מימין. לכן מבקשים שהצד הימני יישאר נקי.

אינפוגרפיקה: איך זה עובד ב-3 שלבים — התוצאה מהפרומפט
אתר

אינפוגרפיקה: איך זה עובד ב-3 שלבים

הסבר ויזואלי שמוריד חששות לפני פנייה

מה צריך להכין

  • 3 שלבים של העבודה איתכם

הפרומפט — מחליפים את מה שמסומן

עצב אינפוגרפיקה 4:5 שמסבירה איך עובדים עם [שם העסק] ב-3 שלבים. כותרת: "[כותרת — למשל: איך זה עובד?]". שלב 1: "[שם השלב ומשפט קצר]". שלב 2: "[שם השלב ומשפט קצר]". שלב 3: "[שם השלב ומשפט קצר]". כל שלב עם מספר גדול ואייקון תלת-ממדי נקי, חיבור ביניהם בקו או חץ, קריאה מימין לשמאל. צבעי המותג [צבעים], רקע נקי, הרבה אוויר. כל הטקסט בעברית חד ומאוית נכון.

פתיחת ChatGPT ↗

💡 מתאים גם לאתר (מתחת לבאנר) וגם כפוסט קבוע בהיילייטס.

ברכת חג ממותגת — התוצאה מהפרומפט
מותג

ברכת חג ממותגת

ברכה שנראית שלכם — לא עוד תבנית

מה צריך להכין

  • החג
  • אלמנט מעולם העסק

הפרומפט — מחליפים את מה שמסומן

עצב ברכת [שם החג] ממותגת לפוסט 1:1 של [שם העסק], [תחום]. שלב סמלים של החג ([סמלי החג]) עם אלמנט מעולם העסק ([אלמנט מהעסק]). טקסט: "[הברכה]" ומתחת: "[שם העסק] מאחלים לכם [איחול קצר]". אווירה חגיגית וחמה, צבעי המותג [צבעים], בלי קלישאות ובלי עומס. כל הטקסט בעברית חד ומאוית נכון.

פתיחת ChatGPT ↗

💡 האלמנט מהעסק הוא מה שהופך ברכה גנרית לברכה שזוכרים.

איור נייר חתוך לסיפור העסק — התוצאה מהפרומפט
מותג

איור נייר חתוך לסיפור העסק

איור עבודת-יד ייחודי לפוסט, לאתר או לרילס

מה צריך להכין

  • סצנה שמספרת את העסק
  • צבעי המותג

הפרומפט — מחליפים את מה שמסומן

צור איור בסגנון נייר חתוך (paper-cut) שמספר את הסיפור של [שם העסק]: [הסצנה]. בנה אותו מ-6 עד 8 שכבות של קרטון מט עבה, קצוות חתוכים חדים, צללים רכים בין השכבות שנותנים עומק אמיתי, תאורה רכה מלמעלה. פלטת צבעים: [צבעים]. תחושה של עבודת-יד, עריכתית ומוחשית. בלי טקסט. פורמט [1:1 / 16:9].

פתיחת ChatGPT ↗

💡 רוצים שזה יזוז? אותו פרומפט בכלי וידאו + 'תנועת מצלמה איטית מאחור לקדימה'.

סלפי רגיל
לפני · סלפי רגיל
תמונת פרופיל מקצועית מסלפי — התוצאה
אחרי
מותג

תמונת פרופיל מקצועית מסלפי

תמונת פרופיל אמינה לאתר, לגוגל ולוואטסאפ

מה צריך להכין

  • סלפי ברור מקדימה
  • התפקיד שלכם

הפרומפט — מחליפים את מה שמסומן

הפוך את הסלפי המצורף לתמונת פרופיל מקצועית של [תפקיד]. שמור על הפנים בדיוק כמו שהם — מבנה הפנים, צבע העיניים, קו השיער וגוון העור — בלי שיפוצים ובלי החלקה. לבוש: [לבוש]. רקע: [רקע]. תאורת פורטרט רכה, עדשה 85 מ״מ בצמצם f/1.8, מיקוד חד בעיניים, מרקם עור טבעי. מראה אמין ונגיש, לא של סטוק. פורמט 4:5.

פתיחת ChatGPT ↗

💡 'בלי החלקה' ו'מרקם עור טבעי' — זה ההבדל בין תמונה אמינה לפילטר.

חוסכים זמן

פרטי העסק שלי

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