Zbuduj z AI działający prototyp aplikacji i pokaż go ludziom

Dlaczego działający prototyp mówi więcej niż makieta

Statyczne ekrany sprawdzają, czy ludziom podoba się wygląd. Rzadko sprawdzają, czy potrafią z tego korzystać, bo tester musi sobie wyobrazić, co dzieje się po każdym dotknięciu, a osoba prowadząca sesję w końcu opowiada produkt za niego. Klikalny prototyp aplikacji, który naprawdę reaguje, usuwa tę narrację. Tester wpisuje dane w prawdziwe pole, widzi, jak zmienia się prawdziwa suma, dostaje prawdziwy pusty stan, gdy usunie ostatnią pozycję. Jego dezorientacja dotyczy twojego projektu, a nie braków prototypu.

Zmienia to też pytania, które możesz zadać. Przy makiecie pytasz „czy byś z tego korzystał?”, a ludzie odpowiadają uprzejmie. Gdy coś działa, możesz dać zadanie („dodaj zmianę na przyszły wtorek i zobacz, jak wpłynie na twoje godziny w tygodniu”) i patrzeć, gdzie tester się waha.

Ustal, czego prototyp ma dowieść

Zanim cokolwiek opiszesz, zapisz jedno lub dwa pytania, na które test ma odpowiedzieć. Dzięki temu projekt pozostaje mały, a sesje skupione. Typowe pytania:

• Zrozumienie: czy w ciągu kilku sekund ludzie wiedzą, do czego służy główny ekran?
• Główne zadanie: czy bez pomocy wykonają tę jedną rzecz, dla której produkt istnieje?
• Niezręczny moment: co się dzieje w sytuacji brzegowej, co do której masz wątpliwości: przy pustej liście, błędzie do cofnięcia, długiej nazwie, która się zawija?
• Gotowość: czy po skorzystaniu zamieniliby na to swój obecny arkusz, notes albo aplikację?

Wszystko, co nie służy tym pytaniom, można pominąć albo udawać. Strona ustawień, której nikt nie otworzy w dwudziestominutowej sesji, to zmarnowany wysiłek, nawet jeśli łatwo ją wygenerować.

Jak opisać to Anticode

Opisz w kilku zdaniach osobę, zadanie i ekrany oraz powiedz, jak mają wyglądać przykładowe dane. Na przykład: „Prototyp aplikacji do zamiany zmian dla zespołu kawiarni. Ekrany: grafik na ten tydzień, prośba o zamianę zmiany i lista otwartych próśb o zamianę. Użyj ośmiu przykładowych pracowników i realistycznego tygodnia. Oznacz wszystko jako dane demo.” Architect odpowiada krótkim planem (nazwa, ekrany, wygląd, funkcje) i może zadać do trzech pytań tam, gdzie odpowiedź zmienia wynik, każde z proponowanymi odpowiedziami do kliknięcia.

Gdy wybierzesz Build it, model pisze całą aplikację jako jeden dokument HTML, a ty możesz patrzeć, jak kod się pojawia. Nowe aplikacje można też, gdy ta usługa przeglądu jest dostępna, otworzyć w przeglądarce bez interfejsu w szerokości telefonu i laptopa, zrobić zrzuty ekranu i przeklikać, a błędy wracają do poprawki.

Niech udawane części będą uczciwe

Aplikacje Anticode działają w piaskownicy bez dostępu do sieci, więc wszystko, co normalnie wymagałoby serwera, jest symulowane na stronie: inni użytkownicy to przykładowe osoby, „wysłane” wiadomości trafiają na lokalną listę, a ekran logowania przyjmuje cokolwiek. Aplikacja oznacza je jako dane demo tam, gdzie ma to znaczenie. Zostaw to oznaczenie widoczne podczas testów. Testerzy, którzy myślą, że korzystają z działającego systemu, podejmują inne, bardziej ryzykowne decyzje niż ci, którzy wiedzą, że to model, a na tym etapie chcesz opinii tych drugich.

Trwałe jest natomiast wszystko, co aplikacja zapisze w przeglądarce testera. Jeśli ktoś doda trzy pozycje, zamknie kartę i wróci jutro, pozycje nadal będą na tym urządzeniu. To wystarczy do badania dzienniczkowego przez tydzień, o ile każdy tester trzyma się jednego telefonu lub laptopa.

Prowadzenie sesji i zmiany w aplikacji

1. Opublikuj prototyp pod jego adresem anticode.dev i wyślij testerom link. Nic nie trzeba instalować.
2. Interesariuszom wyślij zamiast tego link do przeglądu dla klienta: mogą otworzyć aktualny podgląd bez konta i zostawić komentarze przypięte do sekcji. Linki domyślnie wygasają po 14 dniach i możesz je unieważnić.
3. Po każdej rundzie poproś o zmiany zwykłymi słowami („przenieś przycisk zamiany na kartę każdej zmiany”). Ostatnie zapisy są przechowywane w historii wersji (do liczby zależnej od planu), więc możesz pokazać obok siebie rundę pierwszą i trzecią albo wrócić do wcześniejszej.

Czego nie sprawdzi prototyp działający w jednej przeglądarce

Określ tę granicę uczciwie. Prototyp w piaskownicy działa naraz na jednym urządzeniu, więc nie sprawdzi:

• Niczego, co dzieje się między ludźmi: prawdziwych powiadomień, wspólnych list, dwóch testerów widzących nawzajem swoje zmiany.
• Prawdziwego logowania, uprawnień ani odzyskiwania konta.
• Danych z zewnątrz na żywo, płatności ani funkcji AI wewnątrz aplikacji (można je tylko naśladować stałymi przykładowymi odpowiedziami).
• Wydajności przy prawdziwych ilościach danych lub wolnych sieciach.

Gdy pomysł przetrwa testy, eksport do Next.js jest krokiem w stronę prawdziwego produktu. Obejmuje aplikacje i daje standardowy projekt App Router w TypeScript z bazą Postgres przez Prisma, logowaniem e-mailem, rolami klienta i personelu oraz panelem administracyjnym. To punkt wyjścia, który programista rozbuduje, a nie gotowa aplikacja dla wielu użytkowników, i możesz go wypchnąć do wybranego repozytorium GitHub. Co zawiera, opisuje poradnik o eksporcie do Next.js. Jeśli potrzebujesz produkcyjnych funkcji dla wielu użytkowników bez pisania kodu, lepiej od obu rozwiązań może ci posłużyć narzędzie no-code z backendem.

Częste pytania

Czy to generator prototypów aplikacji AI, czy narzędzie projektowe?

Buduje działający kod, a nie ramki na płótnie. Dostajesz prawdziwą aplikację w przeglądarce, co nadaje się do testów użyteczności; jeśli zespół projektowy potrzebuje plików projektowych dopracowanych co do piksela, użyj równolegle narzędzia projektowego.

Czy testerzy mogą korzystać z niego na telefonach?

Tak. Opublikowana aplikacja to strona internetowa, która działa w przeglądarce telefonu, a wszystko, co zapisuje, zostaje na tym telefonie.

Czy zobaczę, co wpisali testerzy?

Nie to, co zapisali w aplikacji, bo zostaje to na ich urządzeniu. Jeśli dodasz formularz opinii lub kontaktowy, te zgłoszenia trafią do ciebie e-mailem i do panelu.

Czy prototyp staje się prawdziwą aplikacją?

Może stać się punktem wyjścia. Eksport do Next.js zamienia go w projekt z bazą danych i logowaniem, który programista może rozwijać.