Yapay zeka ile otomatik olarak web uygulaması demosu kaydedin

Artık neyin gösterileceğini yazıp bunu bulut tarayıcısında ürününüzü tıklayarak kaydeden bir yapay zeka temsilcisine vererek otomatik olarak web uygulaması demosu kaydedebilirsiniz. Kaydın kullanılabilirliği, başlamadan önce ayarladıklarınıza bağlıdır: giriş yaptığı hesap, ekrandaki veriler ve yazdığınız talimat. Bu kılavuz bunların her birini, temsilci takıldığında ne yapılması gerektiğini ve Playwright veya Puppeteer betiğinin ne zaman daha iyi bir araç olduğunu ele almaktadır.

Ayrıca, kendiniz hiçbir ekran kaydı yapmadan ürün demosu almanın en doğrudan yoludur. Ürününüz herkese açık bir web uygulaması değilse veya sadece bir sunumunuz ya da URL'niz varsa, son kısımdaki diğer kayıt dışı yöntemler bunları kapsamaktadır.

Otomatik web sitesi kaydı nasıl çalışır#

Clevera'da yapay zeka kaydedici 2 girdi alır: bir başlangıç sayfası ve neyin gösterileceğini açıklayan yazılı bir talimat. Bir yapay zeka temsilcisi başlangıç sayfasını bulut tarayıcısında açar, adımları gerçekleştirir ve oturumu kaydeder. Çalışmasını izleyebilir, istediğiniz zaman tarayıcının kontrolünü ele alabilir ve işiniz bittiğinde kontrolü geri verebilirsiniz.

Varsayılan olarak temsilci salt okunurdur. Gezinme yapabilir, menüleri açabilir ve ekranları okuyabilir, ancak siz izin vermediğiniz sürece hiçbir şey oluşturmaz veya düzenlemez. Tamamlanan kayıt, diğer tüm kayıtlar gibi kütüphanenize düşer ve siz de onu seslendirmeli bir nasıl yapılır videosuna, ürün demosuna veya makaleye dönüştürürsünüz.

1. Adım: Demo hesabı ve demo verileri hazırlayın#

Temsilcinin gördüğü her şey videoya dahil olur. Tek bir talimat yazmadan önce hesabı ayarlayın.

• Özel bir demo hesabı kullanın. Temsilciyi asla üretim ortamındaki bir yönetici hesabına yönlendirmeyin. Kendi giriş bilgilerine sahip bir demo çalışma alanı, gerçek müşteri verilerini ekran dışında tutar ve herhangi bir hatanın etkisini sınırlar.
• Gerçekçi verilerle doldurun. Boş bir kontrol paneli kötü bir demo oluşturur. Tabloların, grafiklerin ve arama sonuçlarının bir ekip ürünü gerçekten kullanıyormuş gibi görünmesi için inandırıcı isimler, tutarlar ve tarihler içeren 10 ila 20 kayıt ekleyin. "Test 1", "asdf" ve gerçek müşteri isimlerinden kaçının.
• Akışın başlayacağı durumu ayarlayın. Demo "ilk projenizi oluşturun" kısmını gösteriyorsa, henüz hiçbir projenin bulunmadığından emin olun. Bir faturayı düzenlemeyi gösteriyorsa, faturanın orada olduğundan ve talimatın işaret edebileceği net bir isme sahip olduğundan emin olun.
• Tek seferlik kesintileri temizleyin. O hesapta önce işe alım turlarını, "yenilikler" pencerelerini ve deneme sürümü afişlerini kapatın. Kullanıcı başına bir kez açılan her şey kaydınızda da açılacaktır.
• Uygulamanın internetten erişilebilir olduğunu kontrol edin. Temsilci bir bulut tarayıcısında çalıştığı için localhost, VPN'inizin arkasındaki bir hazırlık sunucusunu veya ofisinize IP kısıtlamalı herhangi bir şeyi açamaz. Herkese açık bir demo veya sanal alan ortamı kullanın.

2. Adım: Temsilcinin takip edebileceği bir talimat yazın#

Çoğu kötü yapay zeka kaydı belirsiz talimatlardan kaynaklanır. Temsilci yazdığınızı, yazdığınız sırada yapar ve boşlukları tahminlerle doldurur. İyi talimatlar, ürününüzü daha önce hiç görmemiş biri için yazılmış kısa bir test betiği gibi okunur.

4 kuralı izleyin:

1. Ekranları adlandırın. "Para bölümüne git" yerine "Sol kenar çubuğundan Faturalandırma'yı açın" gibi kullanıcı arayüzünde görünen etiketleri kullanın.
2. Sırayı verin. Adımları numaralandırın. Sıra hikaye için önemliyse (ayarla, kullan, sonra sonucu gör), bunu belirtin.
3. Tam öğeleri işaret edin. Düğmeyi, sekmeyi, alanı veya kaydı adlandırın: "INV-1042 faturasına tıklayın", "Filtreler açılır menüsünü açın ve Gecikmiş'i seçin".
4. Nerede duracağınızı söyleyin. İzleyicinin hatırlaması gereken sonuç ekranında bitirin ve temsilciye orada bir süre kalmasını söyleyin.

Uygulamadaki fark şudur.

Kötü talimat:

Faturalandırmamızın nasıl çalıştığını göster.

Temsilci hangi ekranların önemli olduğuna, hangi kaydın açılacağına ve ne zaman bittiğine karar vermek zorundadır. İlk bulduğu şeyin turunu alırsınız.

Daha iyi ama yine de gevşek:

Nasıl fatura oluşturulacağını ve bir müşteriye gönderileceğini göster.

Net bir hedef var ancak başlangıç noktası, müşteri veya kalem yok. Salt okunur bir temsilciyle bu işlem başarılı olamaz çünkü fatura oluşturmak bir yazma eylemidir.

İyi talimat:

Kontrol Paneli'nde başlayın. 1) Sol kenar çubuğundaki Faturalar'a tıklayın. 2) Sağ üstteki Yeni fatura düğmesine tıklayın. 3) Müşteri kısmında "Northwind Studio"yu seçin. 4) Bir kalem ekleyin: "Tasarım ücreti", miktar 1, fiyat 2.400. 5) Taslağı kaydet'e tıklayın. 6) Taslağı açın ve Önizleme'ye tıklayın, ardından önizleme ekranında 3 saniye durun. Gönder'e tıklamayın.

Bu, her ekranı ve öğeyi adlandırır, hazırladığınız verilerdeki tam müşteriyi kullanır ve istemediğiniz tek eyleme net bir sınır çizer. Ayrıca başlamadan önce bu çalışmanın oluşturma iznine ihtiyacı olduğunu size söyler (4. Adıma bakın).

Birkaç alışkanlık daha yardımcı olur:

• Kayıt başına bir akış. "Fatura oluştur, sonra yinelenen bir program ayarla, sonra raporu dışa aktar" 3 videodur. Daha kısa çalışmaların düzeltilmesi ve yeniden kullanılması daha kolaydır.
• Yazılacak değerleri heceleyin. Temsilci metin uydurmak zorunda kalırsa, kamera karşısında garip bir şey uydurabilir.
• Bilinen tuhaflıklardan bahsedin. "Kaydet düğmesi fiyat alanı odak kaybedene kadar devre dışıdır" demek, temsilciyi birkaç kafa karıştırıcı tıklamadan kurtarır.

3. Adım: Bir giriş seçeneği belirleyin#

Çoğu web uygulaması demosu bir girişin arkasında yer alır. 3 seçeneğiniz var:

1. Adımdaki demo hesabı burada işe yarar. Giriş bilgisi sağladığınızda, demo verilerine erişimi olan demo'ya özel bir şifre düşük riskli bir seçimdir. Şirketiniz 2FA ile SSO üzerinden giriş yapıyorsa, kendiniz yazmak genellikle temsilciye yaptırmaya çalışmaktan daha hızlıdır.

4. Adım: Salt okunur veya oluşturma/düzenleme arasında karar verin#

Salt okunur varsayılandır ve beklediğinizden daha fazla demoyu kapsar (bir temsilcinin yazmasına izin vermenin riskleri yapay zeka ekran kaydı temsilcisi güvenliği kısmındadır): gezinme, filtreleme, arama, kayıtları açma, sekmeler arasında geçiş yapma ve raporları gösterme.

Oluşturma veya düzenlemeye yalnızca akış gerçekten ihtiyaç duyduğunda (kayıt oluşturma, ayar değiştirme, form gönderme) ve yalnızca bir demo hesabında izin verin. Ardından 2 şey yapın:

• Yukarıdaki "Gönder'e tıklamayın" örneğinde olduğu gibi durma noktasını talimata yazın. İnsanlara e-posta gönderen, kartlardan ücret alan veya entegrasyonlara gönderim yapan eylemler çalışmanın dışında tutulmalı veya demo çalışma alanında bağlantısı kesilmelidir.
• Sonrasında demo verilerini sıfırlayın, böylece bir sonraki çalışma aynı durumdan başlar.

5. Adım: Temsilci takıldığında kontrolü ele alın#

Bazı ekranlar herhangi bir otomatik tarayıcıyı zorlayabilir. Tüm akışı yeniden çalıştırmak yerine bunlar için plan yapın:

• Çerez afişleri ve onay açılır pencereleri. Kontrolü ele alın, kabul edin veya kapatın, geri verin.
• Özel tarih seçiciler ve sürükle-bırak. Alışılmadık araçlar, temsilcilerin en çok zaman kaybettiği yerlerdir. Tarihi kendiniz seçin ve kontrolü geri verin.
• Captcha'lar. Bunlar otomasyonu durdurmak için vardır. Kendiniz çözün.
• 2FA kodları. Telefonunuzdaki kodu yazın, sonra geri verin.

Geri verdiğinizde, temsilci bıraktığınız ekrandan devam eder. Devir teslim kayıtta görünüyorsa, düzenleyicide kırpın.

6. Adım: Kredileri düşük tutmak için çalışmaları kısa tutun#

Yapay zeka kaydedici, her planda yapay zekanın ne kadar süre çalıştığına bağlı olarak kredi kullanır. Bu da talimatı bir maliyet kaldıracı yapar. Hazırlanmış bir hesapta hassas bir talimat hızlı biter. Açılır pencerelerle dolu bir hesapta belirsiz bir talimat; keşfetme, yeniden deneme ve bekleme ile zaman harcar. Plan kredi miktarları fiyatlandırma sayfasındadır.

Kayıt neye dönüşür#

Ham çekim girdidir, nihai çıktı değil. Aynı yapay zeka kaydından şunları oluşturabilirsiniz:

• Nasıl yapılır videosu. Clevera, gereken her adımı sırasıyla kapsar, metni yazar ve bir yapay zeka seslendirmesi ekler, böylece kimsenin canlı anlatım yapması gerekmez. Yardım merkezleri ve kullanıcıya alıştırma süreçleri için ideal formattır. Yapay zeka eğitim oluşturucu ile nasıl çalıştığını görün.
• Ürün demosu. Yapay zeka burada seçicidir: düşük değerli görüntüleri atlayabilir, klipleri yeniden sıralayabilir ve her tıklamayı değil, sonuçları anlatabilir. Satış ve lansman sayfaları için ideal formattır. Ürün demo oluşturucumuz demo formatlarını kapsar.
• Makale. Dokümanlar ve SEO için otomatik seçilmiş, altyazılı ekran görüntüleri içeren yazılı bir nasıl yapılır rehberi.

Her biri ayrı bir içerik öğesidir; videolar ve makaleler 74 dile çevrilebilir. Arayüz değiştiğinde, anlatım ve metin üzerindeki düzenlemeler barındırılan bağlantılarda ve gömülü içeriklerde güncellenir, ancak görüntünün kendisi değişmez. Yeni görüntüler almak için aynı talimatı yeniden çalıştırın; arayüz değişikliğinden sonra eğitim videoları nasıl güncellenir rehberi, ne zaman yeniden kayıt yapmanız ve ne zaman düzenlemenin yeterli olduğu konusunu kapsar.

Hedef kitlenizin hangi formata ihtiyaç duyduğundan emin değilseniz, etkileşimli demolar ve ürün videoları karşılaştırmamız ve nasıl eğitim videosu oluşturulur rehberimiz, aralarındaki farkları ele almaktadır.

İlk denememiz: 1 talimat, 78 saniye, 9 kredi#

Ekim 2026'da, halka açık bir demo uygulaması olan TodoMVC üzerinde şu talimatla yapay zeka kaydediciyi çalıştırdık:

Üç yapılacak iş ekle: 'Lansman yazısı yaz', 'Demo kaydet', 'Bülten gönder'. 'Demo kaydet'i tamamlandı olarak işaretle. Ardından sadece açık yapılacak işleri göstermek için Aktif filtresine tıkla.

Oturum açma işlemi Yoktu. Değişikliklere İzin Ver seçeneğini açtık, çünkü yapılacak iş eklemek ve tamamlamak birer yazma işlemidir ve bunu sadece arkasında gerçek veri olmayan halka açık bir demo uygulaması olduğu için yaptık. Kendi ürününüzde bunun yerine 4. Adımı izleyin.

Ajan, yazdığımız şeyi tam olarak, sırasıyla, gördüğümüz kadarıyla hiçbir yeniden deneme veya yanlış tıklama olmadan yaptı ve müdahale etmemize gerek kalmadı. Çalıştırma yaklaşık 78 saniyelik gerçek zaman sürdü ve bir insanın yaklaşık 20 saniyede yaptığı bir görev için 58 saniyelik görüntü bıraktı, çünkü ajan adımlar arasında duraklıyor. Clevera bunu yaklaşık 50 saniyede 2 bölümlü, 6 adımlı ve 1.5x ile 1.8x hızlarında otomatik yakınlaştırmalı 0:40'lık bir nasıl yapılır videosuna dönüştürdü. Krediler: kayıt analizi için 5 ve nasıl yapılır videosu için 4, toplamda 9.

Clevera'nın o yapay zeka kaydından oluşturduğu, düzenlenmemiş 0:40'lık nasıl yapılır videosu.

Dikkat edilmesi gerekenler: görüntü soluk ve düşük kontrastlı çıktı, bu yüzden yayınlamadan önce kontrol edin. Ayrıca talimatımız numaralandırılmamıştı. 3 adımlı bir akışta çalıştı çünkü yazılacak her değeri ve tıklanacak tam filtreyi belirtti. Daha uzun akışlar için adımları numaralandırın.

Kodlanmış alternatif: Playwright ve Puppeteer#

Mühendislik ekipleri yıllardır tarayıcıları otomasyon betikleriyle kaydediyor ve bazı işler için bir betik daha iyi bir araçtır.

Playwright videoyu yerel olarak kaydeder. Playwright Test'te video seçeneğini 'on', 'retain-on-failure' veya 'on-first-retry' olarak ayarlarsınız; kütüphane ile recordVideo'ü bir dir ve isteğe bağlı bir size ile browser.newContext()'e iletirsiniz. 2 detay gözden kaçabiliyor. Videolar yalnızca tarayıcı bağlamı kapandığında kaydedilir, bu yüzden await context.close() yapmalısınız. Ayrıca video varsayılan olarak 800x800'e sığacak şekilde ölçeklenmiş görünüm alanına ayarlanır, bu yüzden keskin bir 1080p çekim istiyorsanız görünüm alanını ve size'u kendiniz ayarlayın. Seçicileri elle yazmanıza da gerek yok: npx playwright codegen siz uygulamada tıkladıkça betiği oluşturur.

Puppeteer, varsayılan olarak 30 FPS'de WebM kaydeden ve makinede ffmpeg gerektiren page.screencast() özelliğine sahiptir. Puppeteer 25.13 itibarıyla dokümanlar, MP4 çıktısı veren page.record() lehine bunu eski olarak işaretlemektedir.

Bir betik şu durumlarda daha iyi bir seçimdir:

• Her sürümde aynı akışın, kimse izlemeden CI üzerinden tetiklenerek kaydedilmesini istiyorsanız.
• Kayıt aynı zamanda bir test görevi görüyorsa ve hatalar sizin için görüntüler kadar önemliyse.
• Uygulamanız, CI çalıştırıcınızın görebildiği özel bir hazırlık ağı gibi bulut tarayıcısının ulaşamadığı bir yerdeyse.
• Uçtan uca testleri zaten sürdüren mühendisleriniz varsa ve seçiciler kararlıysa.

Ajan şu durumlarda daha iyi bir seçimdir:

• Videoya ihtiyaç duyan kişi ürün pazarlama, satış veya destek departmanındaysa ve kod yazmıyorsa.
• Akış tek seferlikse veya sık değişiyorsa: potansiyel müşteriye özel bir demo, yeni bir özellik, bir yardım makalesi.
• Ham görüntüye değil, anlatımlı bitmiş bir videoya ihtiyacınız varsa. Bir betik size sessiz bir ekran kaydı verir; anlatım, yakınlaştırmalar ve düzenleme yine size kalır.

Bu 2 yaklaşım iyi bir şekilde birleşir. Clevera, sessiz kayıtlar dahil olmak üzere yüklenen videoları kabul eder, böylece bir ekip CI'da Playwright ile bir akışı kaydedebilir ve anlatımlı nasıl yapılır videosunu veya demoyu oluşturmak için dosyayı yükleyebilir.

Ekran kaydı olmadan ürün demosu yapmanın diğer yolları#

Temiz bir çekim normalde düzenli bir hesap, tıklarken takip ettiğiniz bir metin, yanlış dönüşlerin olmamasını gerektirir ve her arayüz değişikliği birinin onu yeniden yapması anlamına gelir. Yapay zeka kaydedici, web uygulamaları için bunu ortadan kaldırır. Uygun olmadığında, kayıt gerektirmeyen başka seçenekleriniz de vardır:

Bir sunum, PDF veya ekran görüntülerinden#

Bunu özellik henüz yayınlanmadığında, uygulama halka açık olmadığında veya bir web uygulaması olmadığında kullanın. Bir PDF sunumu veya ekran görüntüleri yükleyin, Yeni özellik gibi bir demo türü seçin ve bir yönlendirme satırı ekleyin ("Hedef kitle mevcut yöneticiler, 90 saniyenin altında"). Slayt metni, Clevera'nın yazdığı ve slaytlarınızın üzerine seslendirdiği anlatıma rehberlik eder, bu yüzden "Herhangi bir raporu tek tıkla CSV'ye aktarın" gibi özel metinler sloganlardan daha etkilidir. Bir masaüstü uygulaması için, iyi seçilmiş 8 ila 10 ekran görüntüsü net bir anlatımlı rehbere dönüşebilir. Sınır: canlı tıklamalar veya imleç yoktur, bu yüzden "tam olarak buraya tıkla" eğitim videosundan ziyade bir lansman önizlemesine daha uygundur.

Bir URL'den veya birkaç cümleden#

Sosyal medya, reklamlar veya bir açılış sayfasının üst kısmı için kısa bir klip istiyorsanız, Clevera'nın sosyal ve tanıtım türleri (Starter ve üzeri, Beta aşamasında) görüntü gerektirmez. Bir bağlantı yapıştırın ve Clevera ürünün gerçeklerini, ekran görüntülerini ve logosunu sayfadan çeksin veya ürünü birkaç cümleyle tanımlayın; yapay zeka klibi müzikli hareketli grafikler olarak yazar ve türün desteklediği durumlarda seslendirme ekler. Ürün turu, özellik odaklı tanıtım ve özellik duyurusu, demoya en yakın türlerdir ve yapay zeka avatar türü (yine Starter ve üzeri, Beta) bir sunucu ekler. Bunlar eğitim değil, tanıtımdır: ürünün ne olduğunu gösterirler, gerçek bir iş akışını değil.

Avatar ve etkileşimli demo araçları#

HeyGen gibi avatar araçları, bir metni veya ürün bağlantısını sunucu odaklı bir videoya dönüştürür; yazılım için ekran görüntüsünün bir yerden gelmesi gerekir. Arcade ve Supademo gibi etkileşimli araçlar video yerine tıklanabilir demolar üretir, ancak bunları yakalamak için birinin yine de üründe tıklama yapması gerekir. Etkileşimli demolar ve ürün videoları karşılaştırmamız, hangisinin ne zaman daha iyi dönüşüm sağladığını kapsar.

Hangi yöntem hangi işe uygun#

Ekim 2026 testlerimizde fark netti. Yukarıdaki yapay zeka kaydedici çalışması ve 0:55'lik bir ürün genel bakışı 11 krediye mal oldu ve gerçek tıklamaları gösterdi. clevera.ai üzerinden "Bir web sitesini araştır" ile oluşturulan 35 saniyelik bir özellik odaklı tanıtım 96 krediye mal oldu, yaklaşık 7 dakika sürdü ve yayınlamadan önce düzeltmemiz gereken alakasız bir sahnede açıldı. Gerçek görüntüler daha ucuzdu ve demoya daha yakındı; tanıtım klibi erişim içindir, rehberlik için değil.

Başlamadan önce bilinmesi gereken sınırlar#

• Sadece web. AI kaydedici, web sitelerini ve web uygulamalarını bulut tabanlı bir tarayıcıda kaydeder. Masaüstü yazılımlarını veya yerel mobil uygulamaları kaydetmez. Masaüstü akışları veya kendiniz tıklamayı tercih ettiğiniz web akışları için Clevera masaüstü uygulamasını (macOS veya Windows) kullanın.
• Sadece erişilebilir uygulamalar. localhost, sadece VPN ile erişilen hazırlık ortamları veya IP kısıtlamalı araçlar desteklenmez.

Destek ekibinizin her hafta açıkladığı tek bir akışla, bir demo hesabı üzerinde ve her düğmeyi isimlendiren numaralandırılmış bir talimatla başlayın. İlk çalışmayı izleyin, müdahale etmeniz gereken yerleri not edin ve bu notları bir sonraki çalışma için talimatlara dahil edin.

SSS#

Ekranımı hiç kaydetmeden ürün demosu oluşturabilir miyim? Evet. AI kaydedici, sizin için bulut tabanlı bir tarayıcıda herkese açık bir web uygulamasını kaydeder; PDF sunumları veya ekran görüntüleri kayıt gerektirmez; bir URL veya komut ise tanıtım tarzı bir klibe dönüşür.

Gerçek müşteri verilerini demonun dışında nasıl tutarım? Aracı, gerçekçi sahte verilerle doldurulmuş özel bir demo hesabına yönlendirin (Adım 1), asla üretim ortamındaki bir yönetici hesabına değil.

AI kaydedici masaüstü yazılımlarıyla çalışır mı? Hayır. Sadece web sitelerini ve web uygulamalarını kaydeder. Masaüstü yazılımları için Clevera masaüstü uygulamasıyla kayıt yapın veya ekran görüntülerinden demo oluşturun.

Ücretsiz demo yapabilir miyim? Ücretsiz plan; bağlantı veya gömme yoluyla paylaşılan 3 dakikaya kadar nasıl yapılır videolarını, ürün demolarını ve makaleleri içerir (MP4 indirmeleri Başlangıç planında başlar). AI kaydı her planda kredi kullanır; sosyal medya ve tanıtım klipleri ile AI avatarı için Başlangıç planı veya üzeri gerekir.