Pierwszy prototyp z AI: kalkulator, który mieści się na jednym ekranie

Ile czasu zajmuje wam trzydzieści zadań?

Policzmy: 30 zadań tygodniowo po 12 minut daje sześć godzin. Już mamy pomysł na pierwszy prototyp z AI. Dwa pola, przycisk i wynik. Użytkownik wpisuje liczbę zadań i czas jednego, a program mnoży wartości i dzieli przez 60.

Model pomoże napisać kod i ułożyć ekran. Sam kalkulator robi zwykłe działanie — nie przewiduje, ile oszczędzicie dzięki AI. Pomija też przerwy, pracę równoległą i różnice między zadaniami. Dodajmy taki opis pod wynikiem, żeby sześć godzin nie zaczęło znaczyć czegoś więcej, niż policzyliśmy.

Podobnie możecie zawęzić inny pomysł: porównać dwa warianty albo pomóc znaleźć poradnik. Jedna konkretna czynność daje nam coś do zbudowania. Przy ogólnym „strona wyjaśniająca ofertę” trudniej ustalić, od czego zacząć.

Kolory za chwilę. Co robimy z pustym polem?

Ustalmy najpierw zasady. Zero przyjmujemy, liczby ujemnej nie. Puste pole powinno wywołać komunikat, a nie obliczenie bez słowa wyjaśnienia. Wybierzcie też miejsce na wynik, żeby po kliknięciu było wiadomo, gdzie patrzeć.

Logowanie, płatności i zapis danych nie są nam w tym ćwiczeniu potrzebne. Jeśli w innym pomyśle któreś z nich musicie pokazać, wyraźnie oznaczcie niedziałający element jako demonstrację. Tutaj zlecamy tylko lokalny kalkulator. Poniższy prompt trzyma go w tych granicach.

Zbuduj pojedynczy ekran kalkulatora w HTML, CSS i JavaScript.
Pola: liczba zadań tygodniowo oraz minuty na zadanie.
Wynik: liczba zadań × minuty / 60, opisany jako godziny tygodniowo.
Odrzucaj wartości ujemne i puste. Zero jest prawidłowe.
Dodaj widoczne etykiety pól, komunikaty błędów i przycisk Oblicz.
Całość ma działać klawiaturą i mieścić się na telefonie.
Bez połączeń sieciowych, bibliotek i fikcyjnych rekomendacji biznesowych.

Sprawdźmy, co się stanie z zerem

Najpierw wpiszcie 30 zadań po 12 minut: wynik ma wynosić sześć godzin. Potem zero i jeszcze jeden przykład policzony ręcznie. Zostawcie puste pole, spróbujcie liczby ujemnej i bardzo długiej. Jeśli dane są błędne, potrzebujemy informacji, co poprawić, zamiast liczby udającej prawidłowy wynik.

Przejdźcie przez pola Tabem i uruchomcie obliczenie bez myszy. Czy widać aktywne pole? Na telefonie i przy powiększonym tekście obejrzyjcie wynik oraz komunikaty. To one mówią użytkownikowi, czy obliczenie się udało. Jeśli wychodzą poza ekran, poprawcie układ.

Teraz oddajcie ekran drugiej osobie

Poproście kogoś: „Sprawdź, ile godzin zajmuje 30 zadań po 12 minut”. I dajcie mu chwilę bez tłumaczenia przycisków. Miejsce, w którym się zatrzyma, sporo powie o ekranie. Po naszej instrukcji obsługi ten sam problem mógłby pozostać niewidoczny.

Wybierzcie jedną najważniejszą poprawkę. Może pole potrzebuje lepszej nazwy, a może jednostka powinna być bliżej wyniku. Nie trzeba od razu dodawać kolejnych funkcji. Zachowajcie kod i założenia, nawet jeśli po próbie pomysł stanie się jeszcze prostszy. Przy kolejnej wersji przyda się wiedza, skąd wziął się obecny układ.