Automatyczne nagrywanie demo aplikacji internetowej przy użyciu AI

Możesz teraz automatycznie nagrać demo aplikacji internetowej, opisując, co ma zostać pokazane, i przekazując to agentowi AI, który w trakcie nagrywania będzie klikał w Twoim produkcie w chmurowej przeglądarce. To, czy nagranie będzie użyteczne, zależy od tego, co przygotujesz przed startem: konta, na które się zaloguje, danych na ekranie oraz instrukcji, którą napiszesz. Ten przewodnik omawia każdy z tych elementów, podpowiada, co zrobić, gdy agent utknie, oraz kiedy lepszym narzędziem będzie skrypt Playwright lub Puppeteer.

To również najbardziej bezpośredni sposób na uzyskanie demo produktu bez samodzielnego nagrywania ekranu. Jeśli Twój produkt nie jest publiczną aplikacją internetową lub masz tylko prezentację albo adres URL, inne metody bez nagrywania opisane pod koniec artykułu będą odpowiednie.

Jak działa automatyczne nagrywanie stron internetowych#

W Clevera rejestrator AI przyjmuje 2 dane wejściowe: stronę startową oraz pisemną instrukcję opisującą, co pokazać. Agent AI otwiera stronę startową w chmurowej przeglądarce, wykonuje kroki i nagrywa sesję. Obserwujesz jego pracę, możesz w dowolnym momencie przejąć kontrolę nad przeglądarką i oddać ją z powrotem, gdy skończysz.

Domyślnie agent działa w trybie tylko do odczytu. Może nawigować, otwierać menu i czytać ekrany, ale nie będzie niczego tworzył ani edytował, chyba że mu na to pozwolisz. Gotowe nagranie trafia do Twojej biblioteki jak każde inne, a Ty możesz je przekształcić w wideo instruktażowe z narracją, demo produktu lub artykuł.

Krok 1: Przygotuj konto demo i dane testowe#

Wszystko, co widzi agent, trafi do wideo. Skonfiguruj konto, zanim napiszesz choćby jedną instrukcję.

• Użyj dedykowanego konta demo. Nigdy nie kieruj agenta na konto administratora w środowisku produkcyjnym. Przestrzeń robocza demo z własnym logowaniem chroni dane klientów przed widokiem i ogranicza skutki ewentualnych błędów.
• Wprowadź realistyczne dane. Pusty pulpit wygląda źle w demo. Dodaj od 10 do 20 rekordów z wiarygodnymi nazwami, kwotami i datami, aby tabele, wykresy i wyniki wyszukiwania wyglądały tak, jakby zespół faktycznie korzystał z produktu. Unikaj nazw typu „Test 1”, „asdf” oraz prawdziwych nazwisk klientów.
• Ustaw stan początkowy procesu. Jeśli demo pokazuje „utwórz swój pierwszy projekt”, upewnij się, że żaden projekt jeszcze nie istnieje. Jeśli pokazuje edycję faktury, upewnij się, że faktura jest dostępna i ma jasną nazwę, na którą instrukcja może wskazać.
• Usuń jednorazowe przeszkody. Najpierw zamknij wycieczki po aplikacji, okna typu „co nowego” i banery wersji próbnych na tym koncie. Wszystko, co pojawia się raz na użytkownika, pojawi się również w Twoim nagraniu.
• Sprawdź, czy aplikacja jest dostępna z internetu. Agent działa w chmurowej przeglądarce, więc nie otworzy localhost, serwera stagingowego za Twoim VPN-em ani niczego, co ma ograniczony dostęp IP do Twojego biura. Użyj publicznego środowiska demo lub sandboxa.

Krok 2: Napisz instrukcję, którą agent zrozumie#

Większość słabych nagrań AI wynika z niejasnych instrukcji. Agent robi to, co napisałeś, w kolejności, w jakiej to zapisałeś, a luki wypełnia domysłami. Dobre instrukcje czyta się jak krótki skrypt testowy napisany dla osoby, która nigdy nie widziała Twojego produktu.

Przestrzegaj 4 zasad:

1. Nazywaj ekrany. Używaj etykiet, które pojawiają się w interfejsie: „Otwórz Rozliczenia z lewego paska bocznego”, a nie „przejdź do sekcji finansowej”.
2. Podaj kolejność. Numeruj kroki. Jeśli kolejność ma znaczenie dla historii (konfiguracja, użycie, a potem wynik), napisz o tym.
3. Wskazuj dokładne elementy. Nazwij przycisk, kartę, pole lub rekord: „Kliknij fakturę INV-1042”, „Otwórz menu rozwijane Filtry i wybierz Zaległe”.
4. Powiedz, gdzie się zatrzymać. Zakończ na ekranie końcowym, który widz powinien zapamiętać, i powiedz agentowi, aby zatrzymał się tam na chwilę.

Oto różnica w praktyce.

Zła instrukcja:

Pokaż, jak działa nasze fakturowanie.

Agent musi sam zdecydować, które ekrany są ważne, który rekord otworzyć i kiedy skończyć. Otrzymasz wycieczkę po tym, co znajdzie jako pierwsze.

Lepsza, ale wciąż zbyt ogólna:

Pokaż, jak utworzyć fakturę i wysłać ją do klienta.

Jasny cel, ale brak punktu startowego, brak klienta, brak pozycji na fakturze. W przypadku agenta tylko do odczytu to również nie może się udać, ponieważ tworzenie faktury to akcja zapisu.

Dobra instrukcja:

Zacznij na Pulpicie. 1) Kliknij Faktury na lewym pasku bocznym. 2) Kliknij przycisk Nowa faktura w prawym górnym rogu. 3) W polu Klient wybierz „Northwind Studio”. 4) Dodaj jedną pozycję: „Design retainer”, ilość 1, cena 2400. 5) Kliknij Zapisz szkic. 6) Otwórz szkic i kliknij Podgląd, a następnie zatrzymaj się na ekranie podglądu na 3 sekundy. Nie klikaj Wyślij.

To nazywa każdy ekran i element, używa dokładnego klienta z Twoich danych testowych i stawia wyraźną granicę przy akcji, której nie chcesz wykonać. Informuje Cię również, zanim zaczniesz, że to uruchomienie wymaga uprawnień do tworzenia (patrz Krok 4).

Kilka dodatkowych nawyków pomaga:

• Jeden proces na nagranie. „Utwórz fakturę, potem skonfiguruj harmonogram cykliczny, a potem wyeksportuj raport” to 3 filmy. Krótsze nagrania łatwiej poprawić i łatwiej wykorzystać ponownie.
• Wpisuj wartości do wpisania. Jeśli agent musi wymyślać tekst, może wymyślić coś dziwnego przed kamerą.
• Wspomnij o znanych dziwactwach. „Przycisk Zapisz jest nieaktywny, dopóki pole ceny nie straci fokusu” oszczędza agentowi kilku zdezorientowanych kliknięć.

Krok 3: Wybierz opcję logowania#

Większość demo aplikacji internetowych wymaga logowania. Masz 3 opcje:

Konto demo z Kroku 1 sprawdza się tutaj najlepiej. Hasło tylko do demo z dostępem do danych tylko do demo to wybór o niskim ryzyku, gdy podajesz login. Jeśli Twoja firma loguje się przez SSO z 2FA, samodzielne wpisanie danych jest zazwyczaj szybsze niż próba zmuszenia agenta do zrobienia tego.

Krok 4: Zdecyduj między trybem tylko do odczytu a tworzeniem/edycją#

Tryb tylko do odczytu jest domyślny i obejmuje więcej demo, niż mogłoby się wydawać (ryzyko związane z pozwoleniem agentowi na zapis znajduje się w bezpieczeństwie agenta nagrywania ekranu AI): nawigowanie, filtrowanie, wyszukiwanie, otwieranie rekordów, przełączanie kart i pokazywanie raportów.

Pozwól na tworzenie lub edycję tylko wtedy, gdy proces tego naprawdę wymaga (tworzenie rekordu, zmiana ustawień, przesyłanie formularza) i tylko na koncie demo. Następnie zrób 2 rzeczy:

• Wpisz punkt zatrzymania w instrukcji, jak w „Nie klikaj Wyślij” powyżej. Akcje, które wysyłają e-maile, obciążają karty lub publikują w integracjach, powinny pozostać poza uruchomieniem lub być odłączone w przestrzeni roboczej demo.
• Zresetuj dane demo po zakończeniu, aby następne uruchomienie zaczynało się od tego samego stanu.

Krok 5: Przejmij kontrolę, gdy agent utknie#

Niektóre ekrany sprawiają problemy każdej zautomatyzowanej przeglądarce. Zaplanuj je zamiast uruchamiać cały proces od nowa:

• Banery plików cookie i zgody. Przejmij kontrolę, zaakceptuj lub zamknij, oddaj kontrolę.
• Niestandardowe wybieraki dat i przeciąganie elementów. Nietypowe widżety to miejsca, w których agenci marnują najwięcej czasu. Wybierz datę samodzielnie i zwróć kontrolę.
• Captcha. Istnieją po to, by zatrzymać automatyzację. Rozwiąż je samodzielnie.
• Kody 2FA. Wpisz kod z telefonu, a następnie oddaj kontrolę.

Kiedy oddajesz kontrolę, agent podejmuje pracę od ekranu, na którym go zostawiłeś. Jeśli moment przejęcia kontroli jest widoczny w nagraniu, przytnij go w edytorze.

Krok 6: Utrzymuj krótkie sesje, aby oszczędzać kredyty#

Rejestrator AI zużywa kredyty w zależności od czasu pracy AI, w każdym planie. To sprawia, że instrukcja jest dźwignią kosztów. Precyzyjna instrukcja na przygotowanym koncie kończy się szybko. Niejasna instrukcja na koncie pełnym wyskakujących okienek marnuje czas na eksplorację, ponawianie prób i czekanie. Kwoty kredytów w planach znajdują się na stronie z cennikiem.

Czym staje się nagranie#

Surowe nagranie to dane wejściowe, a nie gotowy produkt. Z tego samego nagrania AI możesz wygenerować:

• Wideo instruktażowe. Clevera uwzględnia każdą wymaganą akcję w odpowiedniej kolejności, pisze scenariusz i dodaje lektora AI, więc nikt nie musi nagrywać głosu na żywo. To format idealny do centrów pomocy i onboardingu. Zobacz, jak to działa w kreatorze samouczków AI.
• Prezentację produktu. AI jest tutaj selektywne: może pominąć mniej istotne fragmenty, zmienić kolejność klipów i opowiedzieć o efektach zamiast o każdym kliknięciu. To format dla działów sprzedaży i stron startowych. Nasz generator prezentacji produktów obejmuje różne formaty prezentacji.
• Artykuł. Pisany poradnik z automatycznie wybranymi zrzutami ekranu z podpisami, idealny do dokumentacji i SEO.

Każdy z nich to osobny element treści, a wideo i artykuły tłumaczą się na 74 języki. Gdy interfejs się zmienia, edycje narracji i tekstu aktualizują się w hostowanych linkach i osadzeniach, ale sam materiał wideo pozostaje bez zmian. Uruchom ponownie tę samą instrukcję, aby uzyskać świeży materiał; jak aktualizować filmy instruktażowe po zmianie interfejsu wyjaśnia, kiedy warto nagrać ponownie, a kiedy wystarczy edycja.

Jeśli nie masz pewności, jakiego formatu potrzebują Twoi odbiorcy, nasze porównanie interaktywnych prezentacji i filmów produktowych oraz przewodnik jak stworzyć film instruktażowy przedstawiają wady i zalety obu rozwiązań.

Nasz pierwszy test: 1 instrukcja, 78 sekund, 9 kredytów#

W październiku 2026 roku uruchomiliśmy rejestrator AI na TodoMVC, publicznej aplikacji demonstracyjnej, z następującą instrukcją:

Dodaj trzy zadania: 'Napisz post startowy', 'Nagraj demo', 'Wyślij newsletter'. Oznacz 'Nagraj demo' jako ukończone. Następnie kliknij filtr Active, aby wyświetlić tylko otwarte zadania.

Logowanie było ustawione na None. Włączyliśmy opcję Allow changes, ponieważ dodawanie i oznaczanie zadań jako ukończone to operacje zapisu, a zrobiliśmy to tylko dlatego, że jest to publiczna aplikacja demonstracyjna bez rzeczywistych danych. W przypadku własnego produktu postępuj zgodnie z Krokiem 4.

Agent zrobił dokładnie to, co napisaliśmy, w odpowiedniej kolejności, bez zauważonych powtórzeń czy błędnych kliknięć, a my nie musieliśmy przejmować kontroli. Uruchomienie zajęło około 78 sekund czasu rzeczywistego i pozostawiło 58 sekund materiału dla zadania, które człowiek wykonuje w około 20 sekund, ponieważ agent robi przerwy między krokami. Clevera przycięła to do 40-sekundowego filmu instruktażowego z 2 rozdziałami, 6 krokami i automatycznymi zbliżeniami przy 1.5x i 1.8x, w około 50 sekund. Kredyty: 5 za analizę nagrania i 4 za film instruktażowy, łącznie 9.

40-sekundowy film instruktażowy stworzony przez Clevera z tego nagrania AI, bez edycji.

Na co uważać: materiał wyszedł wyblakły i o niskim kontraście, więc sprawdź go przed publikacją. Nasza instrukcja nie była ponumerowana. Zadziałała przy 3-krokowym przepływie, ponieważ dokładnie określiliśmy każdą wartość do wpisania i filtr do kliknięcia. Przy dłuższych procesach numeruj kroki.

Alternatywa ze skryptem: Playwright i Puppeteer#

Zespoły inżynierskie od lat nagrywają przeglądarki za pomocą skryptów automatyzujących i w niektórych zadaniach skrypt jest lepszym narzędziem.

Playwright nagrywa wideo natywnie. W Playwright Test ustawiasz opcję video na 'on', 'retain-on-failure' lub 'on-first-retry'; korzystając z biblioteki, przekazujesz recordVideo do browser.newContext() z dir i opcjonalnym size. Dwa szczegóły mogą sprawiać trudności. Wideo jest zapisywane tylko po zamknięciu kontekstu przeglądarki, więc musisz await context.close(). Ponadto wideo domyślnie skaluje widok do 800x800, więc ustaw widok i size samodzielnie, jeśli chcesz uzyskać ostry obraz 1080p. Nie musisz też pisać selektorów ręcznie: npx playwright codegen generuje skrypt w miarę klikania w aplikacji.

Puppeteer posiada page.screencast(), który domyślnie nagrywa WebM w 30 FPS i wymaga ffmpeg na maszynie. Od wersji Puppeteer 25.13 dokumentacja oznacza go jako przestarzały na rzecz page.record(), który generuje pliki MP4.

Skrypt jest lepszym wyborem, gdy:

• Chcesz, aby ten sam proces był nagrywany przy każdym wydaniu, wyzwalany z CI bez nadzoru.
• Nagranie służy również jako test i zależy Ci na błędach tak samo jak na materiale wideo.
• Twoja aplikacja znajduje się w miejscu niedostępnym dla przeglądarki w chmurze, np. w prywatnej sieci stagingowej widocznej dla Twojego CI.
• Masz inżynierów, którzy już utrzymują testy end-to-end, a selektory są stabilne.

Agent jest lepszym wyborem, gdy:

• Osoba potrzebująca wideo pracuje w marketingu produktowym, sprzedaży lub wsparciu i nie pisze kodu.
• Proces jest jednorazowy lub często się zmienia: demo dla konkretnego klienta, nowa funkcja, artykuł pomocy.
• Potrzebujesz gotowego, udźwiękowionego filmu, a nie surowego materiału. Skrypt daje Ci ciche nagranie ekranu; narracja, zbliżenia i edycja pozostają po Twojej stronie.

Oba podejścia dobrze się łączą. Clevera akceptuje przesłane wideo, w tym ciche nagrania, więc zespół może nagrać proces za pomocą Playwright w CI i przesłać plik, aby wygenerować udźwiękowiony poradnik lub prezentację.

Inne sposoby na stworzenie prezentacji produktu bez nagrywania ekranu#

Czyste nagranie zazwyczaj wymaga uporządkowanego konta, scenariusza, którego trzymasz się podczas klikania, braku błędnych ruchów, a każda zmiana w interfejsie zmusza do powtórki. Rejestrator AI eliminuje to w przypadku aplikacji webowych. Gdy to nie pasuje, nadal masz opcje, które nie wymagają nagrywania:

Z prezentacji, PDF lub zrzutów ekranu#

Użyj tego, gdy funkcja nie została jeszcze wydana, aplikacja nie jest publiczna lub w ogóle nie jest aplikacją webową. Prześlij prezentację PDF lub zrzuty ekranu, wybierz typ prezentacji, np. Nowa funkcja, i dodaj wskazówkę ("Odbiorcy to obecni administratorzy, poniżej 90 sekund"). Tekst slajdów kieruje narracją, którą Clevera pisze i podkłada pod Twoje slajdy, więc konkretne hasła ("Eksportuj dowolny raport do CSV jednym kliknięciem") są lepsze niż slogany. W przypadku aplikacji desktopowej 8-10 dobrze dobranych zrzutów ekranu może stać się przejrzystym, udźwiękowionym przewodnikiem. Ograniczenie: brak kliknięć na żywo i kursora, więc lepiej pasuje do zapowiedzi premiery niż do filmu szkoleniowego typu "kliknij dokładnie tutaj".

Z adresu URL lub kilku zdań#

Do krótkiego klipu do mediów społecznościowych, reklam lub na górę strony docelowej, typy społecznościowe i promocyjne Clevera (od planu Starter wzwyż, w wersji Beta) nie wymagają materiału wideo. Wklej link, a Clevera pobierze fakty o produkcie, zrzuty ekranu i logo ze strony, lub opisz produkt w kilku zdaniach; AI napisze klip jako grafikę ruchomą z muzyką i, jeśli dany typ to przewiduje, lektorem. Prezentacja produktu, wyróżnienie funkcji i ogłoszenie funkcji to typy najbardziej zbliżone do demo, a typ awatara AI (również od planu Starter, Beta) dodaje prezentera. To materiały promocyjne, a nie szkoleniowe: pokazują, czym jest produkt, a nie rzeczywisty przepływ pracy.

Narzędzia z awatarami i interaktywne demo#

Narzędzia z awatarami, takie jak HeyGen, zamieniają scenariusz lub link do produktu w wideo z prezenterem; w przypadku oprogramowania materiał z ekranu nadal musi skądś pochodzić. Narzędzia interaktywne, takie jak Arcade i Supademo, tworzą dema typu "kliknij, aby przejść dalej" zamiast wideo, ale ktoś nadal musi przeklikać produkt, aby je zarejestrować. Nasze porównanie interaktywnych prezentacji i filmów produktowych wyjaśnia, kiedy które rozwiązanie konwertuje lepiej.

Która metoda pasuje do jakiego zadania#

W naszych testach z października 2026 roku różnica była wyraźna. Uruchomienie rejestratora AI powyżej plus 55-sekundowy przegląd produktu kosztowały 11 kredytów i pokazały rzeczywiste kliknięcia. 35-sekundowe wyróżnienie funkcji wygenerowane z clevera.ai za pomocą Research a website kosztowało 96 kredytów, zajęło około 7 minut i otworzyło się na niepowiązanej scenie, którą musielibyśmy poprawić przed publikacją. Rzeczywisty materiał był tańszy i bliższy prezentacji; klip promocyjny służy do zasięgów, a nie do instruktaży.

Ograniczenia, o których warto wiedzieć przed rozpoczęciem#

• Tylko web. Rejestrator AI nagrywa strony i aplikacje internetowe w przeglądarce w chmurze. Nie nagrywa oprogramowania desktopowego ani natywnych aplikacji mobilnych. W przypadku procesów na pulpicie lub procesów internetowych, które wolisz przeklikać samodzielnie, użyj aplikacji desktopowej Clevera (macOS lub Windows).
• Tylko dostępne aplikacje. Brak localhost, środowisk stagingowych dostępnych tylko przez VPN lub narzędzi z listą dozwolonych adresów IP.

Zacznij od jednego procesu, który Twój zespół wsparcia wyjaśnia co tydzień, na koncie demo, z ponumerowaną instrukcją, która nazywa każdy przycisk. Obejrzyj pierwsze uruchomienie, zanotuj, gdzie musiałeś przejąć kontrolę, i uwzględnij te uwagi w instrukcji dla kolejnego.

FAQ#

Czy mogę stworzyć demo produktu bez nagrywania ekranu? Tak. Rejestrator AI nagrywa dla Ciebie publiczną aplikację internetową w przeglądarce w chmurze, prezentacja PDF lub zrzuty ekranu nie wymagają nagrywania, a adres URL lub prompt zamieniają się w klip w stylu promocyjnym.

Jak uniknąć umieszczania prawdziwych danych klientów w demo? Skieruj agenta na dedykowane konto demo wypełnione realistycznymi, fałszywymi danymi (Krok 1), nigdy na konto administratora w środowisku produkcyjnym.

Czy rejestrator AI działa z oprogramowaniem desktopowym? Nie. Nagrywa tylko strony i aplikacje internetowe. W przypadku oprogramowania desktopowego nagrywaj za pomocą aplikacji desktopowej Clevera lub zbuduj demo ze zrzutów ekranu.

Czy mogę stworzyć demo za darmo? Plan Free obejmuje filmy instruktażowe, dema produktów i artykuły do 3 minut, udostępniane przez link lub osadzenie (pobieranie MP4 zaczyna się od planu Starter). Nagrywanie AI wykorzystuje kredyty w każdym planie; klipy społecznościowe i promocyjne oraz awatar AI wymagają planu Starter lub wyższego.