הקלטת הדגמת אפליקציית ווב באופן אוטומטי בעזרת AI

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

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

איך עובדת הקלטת אתרים אוטומטית#

ב-Clevera, ה-AI recorder מקבל 2 קלטים: דף התחלה והוראות כתובות המתארות מה להציג. סוכן AI פותח את דף ההתחלה בדפדפן ענן, מבצע את השלבים ומקליט את הסשן. אתם צופים בו בזמן אמת, יכולים להשתלט על הדפדפן בכל רגע, ולהחזיר את השליטה כשתסיימו.

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

שלב 1: הכינו חשבון הדגמה ונתוני הדגמה#

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

• השתמשו בחשבון הדגמה ייעודי. לעולם אל תכוונו את הסוכן לחשבון מנהל (admin) בסביבת הייצור. סביבת עבודה להדגמה עם התחברות משלה שומרת על נתוני לקוחות אמיתיים מחוץ למסך ומגבילה את הנזק שעלול להיגרם מכל טעות.
• הזינו נתונים ריאליסטיים. לוח בקרה ריק יוצר הדגמה גרועה. הוסיפו 10 עד 20 רשומות עם שמות, סכומים ותאריכים אמינים, כך שטבלאות, תרשימים ותוצאות חיפוש ייראו כאילו צוות באמת משתמש במוצר. הימנעו מ-"Test 1", "asdf" ושמות לקוחות אמיתיים.
• הגדירו את המצב שממנו מתחיל התהליך. אם ההדגמה מציגה "יצירת פרויקט ראשון", ודאו שעדיין לא קיים פרויקט. אם היא מציגה עריכת חשבונית, ודאו שהחשבונית קיימת ושיש לה שם ברור שההוראות יכולות להפנות אליו.
• נקו הפרעות חד-פעמיות. בטלו סיורי הדרכה, חלוניות "מה חדש" ובאנרים של תקופת ניסיון בחשבון זה מראש. כל דבר שקופץ פעם אחת למשתמש יקפוץ גם בהקלטה שלכם.
• בדקו שהאפליקציה נגישה מהאינטרנט. הסוכן רץ בדפדפן ענן, לכן הוא לא יכול לפתוח את localhost, שרת בדיקות (staging) מאחורי ה-VPN שלכם או כל דבר שמוגבל ב-IP למשרד שלכם. השתמשו בסביבת הדגמה ציבורית או בסביבת ארגז חול (sandbox).

שלב 2: כתבו הוראות שהסוכן יכול לבצע#

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

עקבו אחר 4 כללים:

1. תנו שמות למסכים. השתמשו בתוויות שמופיעות בממשק: "פתחו את Billing מסרגל הצד השמאלי", לא "לכו לחלק של הכסף".
2. ציינו את הסדר. מספרו את השלבים. אם הסדר חשוב לסיפור (הגדרה, שימוש, ואז צפייה בתוצאה), ציינו זאת.
3. הצביעו על אלמנטים מדויקים. ציינו את הכפתור, הלשונית, השדה או הרשומה: "לחצו על חשבונית INV-1042", "פתחו את תפריט Filters ובחרו ב-Overdue".
4. ציינו היכן לעצור. סיימו במסך התוצאה שהצופה צריך לזכור, ואמרו לסוכן להישאר שם לרגע.

הנה ההבדל בפועל.

הוראה גרועה:

הראו איך החשבוניות שלנו עובדות.

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

טובה יותר, אך עדיין רופפת:

הראו איך ליצור חשבונית ולשלוח אותה ללקוח.

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

הוראה טובה:

התחילו ב-Dashboard. 1) לחצו על Invoices בסרגל הצד השמאלי. 2) לחצו על כפתור New invoice בפינה הימנית העליונה. 3) ב-Customer, בחרו ב-"Northwind Studio". 4) הוסיפו פריט אחד: "Design retainer", כמות 1, מחיר 2,400. 5) לחצו על Save draft. 6) פתחו את הטיוטה ולחצו על Preview, ואז עצרו על מסך התצוגה המקדימה ל-3 שניות. אל תלחצו על Send.

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

כמה הרגלים נוספים שיעזרו:

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

שלב 3: בחרו אפשרות התחברות#

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

חשבון ההדגמה משלב 1 משתלם כאן. סיסמה להדגמה בלבד עם גישה לנתוני הדגמה בלבד היא הבחירה בעלת הסיכון הנמוך כשאתם מספקים פרטי התחברות. אם החברה שלכם מתחברת דרך SSO עם אימות דו-שלבי (2FA), הקלדה בעצמכם היא בדרך כלל מהירה יותר מאשר לנסות לגרום לסוכן לעשות זאת.

שלב 4: החליטו על מצב קריאה בלבד או יצירה/עריכה#

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

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

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

שלב 5: השתלטו כשהסוכן נתקע#

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

• באנרים של עוגיות וקופצים של הסכמה. השתלטו, אשרו או סגרו, והחזירו את השליטה.
• בוררי תאריכים מותאמים וגרירה ושחרור. ווידג'טים לא שגרתיים הם המקום שבו סוכנים מבזבזים הכי הרבה זמן. בחרו את התאריך בעצמכם והחזירו את השליטה.
• Captchas. אלו קיימים כדי לעצור אוטומציה. פתרו זאת בעצמכם.
• קודי אימות דו-שלבי (2FA). הקלידו את הקוד מהטלפון שלכם, ואז החזירו את השליטה.

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

שלב 6: שמרו על הרצות קצרות כדי לחסוך בקרדיטים#

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

מה הופכת ההקלטה להיות#

הצילום הגולמי הוא הקלט, לא התוצר הסופי. מאותה הקלטת AI ניתן ליצור:

• סרטון הדרכה. Clevera מכסה כל פעולה נדרשת לפי הסדר, כותבת את התסריט ומוסיפה קריינות AI, כך שאף אחד לא צריך להקליט בזמן אמת. זהו הפורמט למרכזי עזרה ותהליכי קליטת עובדים. ראו איך זה עובד ב-יוצר מדריכי ה-AI.
• הדגמת מוצר. ה-AI כאן סלקטיבי: הוא יכול לדלג על צילומים בעלי ערך נמוך, לסדר מחדש קטעים ולקריין תוצאות במקום כל לחיצה. זהו הפורמט למכירות ודפי השקה. מחולל הדגמות המוצר שלנו מכסה את פורמטי ההדגמה.
• מאמר. מדריך כתוב עם צילומי מסך שנבחרו אוטומטית וכוללים כיתובים, עבור תיעוד ו-SEO.

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

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

ההרצה הראשונה שלנו: הוראה אחת, 78 שניות, 9 קרדיטים#

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

הוסיפו שלושה פריטים לרשימה: 'Write launch post', 'Record demo', 'Send newsletter'. סמנו את 'Record demo' כהושלם. לאחר מכן לחצו על מסנן ה-Active כדי להציג רק משימות פתוחות.

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

הסוכן עשה בדיוק את מה שכתבנו, לפי הסדר, ללא ניסיונות חוזרים או לחיצות שגויות שראינו, ולא היינו צריכים להשתלט. ההרצה ארכה כ-78 שניות זמן שעון והותירה 58 שניות של צילומים למשימה שאדם מבצע בכ-20 שניות, מכיוון שהסוכן עוצר בין השלבים. Clevera חתכה זאת לסרטון הדרכה של 0:40 עם 2 פרקים, 6 שלבים וזום אוטומטי ב-1.5x ו-1.8x, תוך כ-50 שניות. קרדיטים: 5 עבור ניתוח ההקלטה ו-4 עבור ההדרכה, 9 בסך הכל.

סרטון ההדרכה באורך 0:40 ש-Clevera יצרה מהקלטת ה-AI הזו, ללא עריכה.

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

החלופה המתוסרטת: Playwright ו-Puppeteer#

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

Playwright מקליט וידאו באופן טבעי. ב-Playwright Test אתם מגדירים את האפשרות video ל-'on', 'retain-on-failure' או 'on-first-retry'; עם הספרייה אתם מעבירים את recordVideo ל-browser.newContext() עם dir ו-size אופציונלי. 2 פרטים עלולים להפתיע. סרטונים נשמרים רק כאשר הקשר הדפדפן נסגר, לכן עליכם await context.close(). והווידאו כברירת מחדל מציג את אזור התצוגה מוקטן כדי להתאים ל-800x800, אז הגדירו את אזור התצוגה ו-size בעצמכם אם אתם רוצים צילום 1080p חד. אתם גם לא חייבים לכתוב סלקטורים ביד: npx playwright codegen מייצר את הסקריפט בזמן שאתם לוחצים באפליקציה.

Puppeteer כולל את page.screencast(), שמקליט WebM ב-30 FPS כברירת מחדל ודורש ffmpeg על המכונה. נכון ל-Puppeteer 25.13 התיעוד מסמן אותו כמיושן לטובת page.record(), שמוציא MP4.

סקריפט הוא הבחירה הטובה יותר כאשר:

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

הסוכן הוא הבחירה הטובה יותר כאשר:

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

שתי הגישות משתלבות היטב. Clevera מקבלת וידאו שהועלה, כולל הקלטות שקטות, כך שצוות יכול להקליט תהליך עם Playwright ב-CI ולהעלות את הקובץ כדי ליצור את ההדרכה או ההדגמה המקוריינת.

דרכים אחרות ליצור הדגמת מוצר ללא הקלטת מסך#

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

ממצגת, PDF או צילומי מסך#

השתמשו בזה כשהתכונה עדיין לא הושקה, האפליקציה לא ציבורית, או שזו בכלל לא אפליקציית ווב. העלו מצגת PDF או צילומי מסך, בחרו סוג הדגמה כמו 'תכונה חדשה', והוסיפו שורת הנחיה ("הקהל הוא מנהלים קיימים, פחות מ-90 שניות"). טקסט השקופיות מנחה את הקריינות ש-Clevera כותבת ומקליטה על השקופיות שלכם, כך שתוכן ספציפי ("ייצאו כל דוח ל-CSV בלחיצה אחת") עדיף על סיסמאות. עבור אפליקציית דסקטופ, 8 עד 10 צילומי מסך שנבחרו היטב יכולים להפוך למדריך מקוריין וברור. המגבלה: אין לחיצות חיות או סמן, אז זה מתאים יותר לתצוגה מקדימה של השקה מאשר לסרטון הדרכה של "לחצו בדיוק כאן".

מכתובת URL או כמה משפטים#

עבור קליפ קצר לרשתות חברתיות, מודעות או ראש דף נחיתה, סוגי ה-Social & Promo של Clevera (בתוכנית Starter ומעלה, בגרסת בטא) לא דורשים צילומים. הדביקו קישור ו-Clevera תמשוך את עובדות המוצר, צילומי המסך והלוגו מהדף, או תארו את המוצר בכמה משפטים; ה-AI כותב את הקליפ כגרפיקה בתנועה עם מוזיקה ו, היכן שהסוג כולל זאת, קריינות. סיור מוצר, זרקור תכונה והכרזת תכונה הם הסוגים הקרובים ביותר להדגמה, וסוג ה-AI avatar (גם ב-Starter ומעלה, בטא) מוסיף מציג. אלו הם פרומו, לא הדרכה: הם מראים מה המוצר, לא תהליך עבודה אמיתי.

כלי אווטאר והדגמות אינטראקטיביות#

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

איזו שיטה מתאימה לאיזו משימה#

בבדיקות שלנו מאוקטובר 2026 הפער היה ברור. הרצת מקליט ה-AI לעיל בתוספת סקירת מוצר של 0:55 עלתה 11 קרדיטים והציגה לחיצות אמיתיות. זרקור תכונה של 35 שניות שנוצר מ-clevera.ai עם Research a website עלה 96 קרדיטים, לקח כ-7 דקות, ונפתח בסצנה לא קשורה שהיינו צריכים לתקן לפני הפרסום. צילומים אמיתיים היו זולים יותר וקרובים יותר להדגמה; קליפ הפרומו נועד לחשיפה, לא למדריכים.

מגבלות שכדאי לדעת לפני שמתחילים#

• אינטרנט בלבד. מקליט ה-AI מקליט אתרים ואפליקציות ווב בדפדפן ענן. הוא אינו מקליט תוכנות דסקטופ או אפליקציות מובייל נייטיב. עבור תהליכי דסקטופ, או תהליכי ווב שאתם מעדיפים להקליט בעצמכם, השתמשו באפליקציית הדסקטופ של Clevera (ל-macOS או Windows).
• אפליקציות נגישות בלבד. ללא localhost, סביבות staging מאחורי VPN או כלים המוגבלים ב-IP.

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

שאלות נפוצות#

האם ניתן ליצור דמו למוצר מבלי להקליט את המסך בכלל? כן. מקליט ה-AI מקליט עבורכם אפליקציית ווב ציבורית בדפדפן ענן, מצגת PDF או צילומי מסך אינם דורשים הקלטה, וכתובת URL או הנחיה (prompt) הופכים לקליפ בסגנון פרומו.

איך שומרים על נתוני לקוחות אמיתיים מחוץ לדמו? כוונו את הסוכן לחשבון דמו ייעודי המכיל נתונים פיקטיביים ריאליסטיים (שלב 1), לעולם לא לחשבון אדמין בסביבת הייצור (production).

האם מקליט ה-AI עובד עם תוכנות דסקטופ? לא. הוא מקליט אתרים ואפליקציות ווב בלבד. עבור תוכנות דסקטופ, הקליטו באמצעות אפליקציית הדסקטופ של Clevera או בנו את הדמו מצילומי מסך.

האם ניתן ליצור דמו בחינם? התוכנית החינמית כוללת סרטוני הדרכה, דמואים למוצרים ומאמרים באורך של עד 3 דקות, לשיתוף באמצעות קישור או הטמעה (הורדות MP4 זמינות בתוכנית Starter). הקלטת AI צורכת קרדיטים בכל התוכניות; קליפים לרשתות חברתיות, פרומואים והאוואטר של ה-AI דורשים תוכנית Starter ומעלה.