בתרגול הזה נבנה דף נחיתה לעסק סינתטי בשני מסלולים: אב־טיפוס חזותי ב־Claude Artifacts וגרסת קוד מקומית. התרגול מסתיים בקבצים ובבדיקות, לא באתר שפורסם. פרסום אמיתי דורש החלטה על אחסון, דומיין, פרטיות ודרך מאובטחת לקבלת פניות.
אם אינכם מכירים את סביבת האב־טיפוס, קראו קודם את המדריך ל־Claude Artifacts. לעבודה על קבצים מקומיים אפשר להיעזר בהסבר על Claude Code. שמות הכפתורים והממשק עשויים להשתנות, ולכן התרגול מתמקד בתהליך ובתוצרים, לא במיקום של כפתור מסוים.
התרחיש
העסק הבדיוני "סדר בתהליך" עוזר לעסקים קטנים למפות תהליך עבודה ידני ולזהות נקודות תקיעה. השירות בתרגיל הוא פגישת מיפוי של 90 דקות, שבסופה הלקוח מקבל תרשים תהליך ורשימת שלושה צעדים לשיפור. קהל היעד: בעלי עסקים עם 2–10 עובדים שמנהלים משימות דרך הודעות, גיליונות ושיחות. ה־CTA הראשי: "לקביעת שיחת היכרות של 20 דקות". אין לנו עדיין המלצות לקוחות מאומתות, מחיר סופי או נתוני הצלחה, ולכן אסור להמציא אותם.
הדף צריך להבהיר למי השירות מיועד, מה מקבלים ומה הצעד הבא.
שלב 1: מסמך אפיון קצר
לפני קוד או עיצוב, מלאו את השדות הבאים:
- קהל: בעל או בעלת עסק קטן עם צוות, שחווים אובדן משימות וחוסר בהירות באחריות.
- בעיה: העבודה מפוזרת בין ערוצים ואין תמונה אחת של התהליך.
- הצעה: פגישת מיפוי ממוקדת ותוצר כתוב; לא הבטחה לחיסכון מסוים.
- CTA ראשי: קביעת שיחת היכרות.
- CTA משני: צפייה במה מקבלים בפגישה.
- התנגדויות צפויות: "אין לי זמן", "כבר יש לנו מערכת", "לא ברור מה יקרה אחרי השיחה".
- מידע חסר: מחיר, יומן זמין, מדיניות פרטיות וכתובת לקבלת טפסים.
השתמשו בפרומפט לכתיבת קופי לדף נחיתה כבסיס, או הדביקו את הפרומפט הבא:
אתה אסטרטג תוכן ומעצב חוויית משתמש. בנה מסמך תוכן לדף נחיתה בעברית
לעסק "סדר בתהליך" לפי האפיון המצורף.
מטרת הדף: להביא מבקר מתאים לקביעת שיחת היכרות של 20 דקות.
קהל: בעלי עסקים עם 2–10 עובדים שעובדים בין הודעות, גיליונות ושיחות.
השירות: פגישת מיפוי של 90 דקות שבסופה תרשים תהליך ו-3 צעדים לשיפור.
כללים:
- אין להמציא המלצות, מספר לקוחות, אחוזי הצלחה, הסמכות או מחיר.
- כתוב עברית ישירה, בלי הבטחות מוחלטות ובלי סופרלטיבים.
- לכל מקטע הגדר מטרה, כותרת, טקסט קצר ו-CTA אם נדרש.
- הצע CTA ראשי אחד וחזור עליו בניסוח עקבי.
- סמן בסוגריים מרובעים כל מידע שחסר מבעל העסק.
מבנה: Hero, זיהוי הבעיה, מה מקבלים, איך זה עובד, למי מתאים ולמי לא,
שאלות נפוצות, טופס ופרטי קשר.
בדקו שהכותרת מדברת על תוצאה בלי להבטיח דבר שאי אפשר להוכיח. ניסוח מתאים: "ממפים תהליך עבודה אחד ומחליטים מה לתקן קודם". אין בסיס להבטחה מספרית על חיסכון בזמן.
שלב 2: אב־טיפוס ב־Artifacts
בקשו מ-Claude ליצור אב־טיפוס של עמוד יחיד מתוך מסמך התוכן. הגדירו מגבלות ברורות כדי שהעיצוב ישרת את המסר:
צור Artifact אינטראקטיבי של דף נחיתה בעברית ובכיוון RTL.
השתמש בתוכן המאושר בלבד. עצב עמוד נקי עם רוחב קריא, ניגודיות טובה,
כפתור CTA ראשי עקבי וניווט עוגנים קצר.
דרישות:
- HTML סמנטי: header, main, section, form, footer.
- תצוגה תקינה ברוחב מובייל וללא גלילה אופקית.
- כפתורים וקישורים עם מצב focus נראה לעין.
- טופס עם label גלוי לכל שדה, שדות שם, טלפון או דוא"ל והסכמה ליצירת קשר.
- הודעת הצלחה מקומית שמסומנת במפורש כהדגמה בלבד.
- אין לשלוח נתונים, אין שירות חיצוני ואין קוד מעקב.
- אין אנימציה הכרחית להבנת התוכן.
עברו על האב־טיפוס כמבקרים: האם הקהל ברור, ה־CTA מתאר פעולה, אפשר להגיע לטופס במקלדת וטקסט ארוך נשבר נכון? בקשו תיקון אחד בכל סבב.
Artifact הוא סביבת עבודה טובה לתצוגה ולשיחה על העמוד, אך אל תניחו שהוא אתר ציבורי, מערכת לידים או גיבוי. שמרו את התוכן המאושר בנפרד והמשיכו לגרסת קוד שניתנת לבדיקה.
שלב 3: יצירת גרסה מקומית עם Claude Code
פתחו תיקייה ייעודית או פרויקט ניסוי. במאגר קיים, בקשו מ-Claude Code לקרוא את הוראות המאגר ולא לשנות קבצים שאינם שייכים לדף. קובצי HTML, CSS ו־JavaScript מספיקים לתרגיל.
בנה גרסה מקומית של דף הנחיתה שאישרתי.
לפני שינוי קבצים:
1. הצג אילו קבצים אתה מתכוון ליצור או לערוך.
2. אל תתקין חבילות ואל תשנה קבצים מחוץ לתיקיית התרגיל.
3. אל תפרסם, אל תחבר דומיין ואל תגדיר שירות חיצוני.
דרישות מימוש:
- RTL ועברית תקינה, HTML סמנטי ו-CSS רספונסיבי.
- נקודת שבירה הגיונית למובייל, בלי רוחבים קשיחים שגורמים לגלילה.
- טופס עם אימות בדפדפן והודעות שגיאה ברורות.
- שליחת הטופס תהיה מדומה בלבד; הצג הודעה שאין העברת נתונים.
- אין טענות, המלצות או מספרים שלא נמסרו באפיון.
- הוסף קובץ README עם הוראות הפעלה מקומית ורשימת מגבלות.
- בסיום, הרץ בדיקות זמינות ודווח מה לא ניתן לבדוק אוטומטית.
עברו על רשימת הקבצים לפני אישור. בקשו הסבר על המקום שבו יחובר שירות טפסים. אל תדביקו מפתח API או סיסמה בקוד הדפדפן. חיבור דיוור או CRM הוא משימה נפרדת שדורשת הרשאות ומדיניות פרטיות.
שלב 4: בדיקת מובייל
פתחו את הדף בכלי הפיתוח של הדפדפן ובדקו לפחות רוחב צר של כ־360 פיקסלים ורוחב ביניים של כ־768 פיקסלים. המספרים הם נקודות בדיקה, לא רשימת המכשירים המלאה.
בדקו:
- אין גלילה אופקית ואין טקסט שנחתך.
- הכותרת הראשית אינה תופסת את כל המסך לפני שמופיע CTA.
- כפתורים גדולים מספיק ללחיצה ואינם צמודים זה לזה.
- שדות הטופס מוצגים בעמודה אחת וברור מה חובה.
- מספר טלפון, דוא"ל וטקסטים ארוכים נשברים בלי לפגוע בפריסה.
- סדר התוכן ב־HTML הגיוני גם בלי העיצוב.
אם אפשר, בדקו גם בטלפון: הקלדה בעברית, פתיחת מקלדת, גלילה וחזרה מהטופס לראש העמוד, בלי לחשוף את הדף לרשת ציבורית.
שלב 5: טופס שאינו מתחזה למערכת פעילה
בטופס הדגמה אפשר לבדוק מבנה ואימות, אך הוא לא צריך לשלוח מידע. הוסיפו ליד הכפתור טקסט ברור: "טופס הדגמה — הפרטים אינם נשלחים". בלחיצה, מנעו שליחה והציגו הודעה מקומית. כך אף בודק לא יחשוב שנוצר ליד אמיתי.
לפני חיבור טופס פעיל החליטו אילו שדות נחוצים, לאן המידע מגיע, מי מורשה לצפות בו, כמה זמן שומרים אותו ומה נוסח ההסכמה. בקשו רק מידע שנחוץ לחזרה לפונה.
שלב 6: נגישות ובדיקות
בצעו מעבר מקלדת מלא באמצעות Tab ו־Shift+Tab. לכל רכיב אינטראקטיבי צריך להיות focus נראה, וסדר המעבר צריך לעקוב אחר סדר הקריאה. ודאו שלכל שדה יש label אמיתי, לא placeholder בלבד; שלתמונות משמעותיות יש טקסט חלופי; ושלתמונה דקורטיבית אין תיאור שמעמיס על קורא מסך. אל תעבירו מידע רק באמצעות צבע, למשל שדה שגוי עם מסגרת אדומה ללא הודעת טקסט.
בדקו גם:
- כותרת עמוד ייחודית ותיאור קצר בקוד.
- כותרת H1 אחת והיררכיית H2 עקבית.
- ניגודיות קריאה מספקת בטקסט, כפתורים וקישורים.
- הגדלת טקסט בדפדפן בלי חפיפה או אובדן תוכן.
- קישורי עוגן שמגיעים למקטע הנכון.
- אימות טופס לשדה ריק, דוא"ל שגוי וקלט ארוך.
- הצגה סבירה גם כאשר JavaScript אינו זמין; לפחות התוכן נשאר קריא.
- אין שגיאות ברורות במסוף הדפדפן.
בקשו מ-Claude Code לסכם את הבדיקות בטבלה: בדיקה, תוצאה, הוכחה, פעולה נדרשת. על בדיקה ידנית לכתוב "ידנית" ולא להציג אותה כאוטומטית. אפשר להשתמש בפרומפט להסבר קוד כדי להבין קטע שאינכם בטוחים לגביו לפני שמאשרים אותו.
שלב 7: שער לפני פרסום
התוצר מוכן לתרגול כשהקופי מאושר, הדף עובד מקומית, המובייל נבדק, הטופס מסומן כהדגמה ורשימת הנגישות הושלמה. לפני פרסום נדרשים אישור בעל העסק, יעד לטופס, מדיניות פרטיות, בדיקת אבטחה, אחסון, דומיין, גיבוי וניטור.
הגישו את תיקיית הקוד, צילום מסך רחב וצילום מסך מובייל, מסמך התוכן ורשימת בדיקות. הוסיפו פסקה קצרה בשם "מה חסר לפרסום". כך התרגול מסתיים באב־טיפוס שניתן לבדוק ולהמשיך ממנו, בלי ליצור רושם ש-Claude פרסם אתר או הקים מערכת לידים באופן אוטומטי.