W tej lekcji
Zanim agent zacznie budować aplikację, zobacz, jak będzie wyglądać. Łatwiej powiedzieć „ten przycisk jest schowany” albo „chcę prostszy ekran”, kiedy masz przed sobą obraz.
Co zyskasz
- Pierwsze ekrany pokazane graficznie. Zobaczysz, co użytkownik ma przed sobą i jak przechodzi do kolejnego kroku.
- Wspólne zasady wyglądu. Kolory, tekst, przyciski i formularze będą pasować do siebie w całej aplikacji. Taki zestaw elementów i zasad nazywa się design systemem.
- Wskazówki zapisane dla agenta. Przy budowie kolejnego ekranu odczyta ustalenia i zaakceptowane grafiki.
Dla naszej aplikacji z pomysłami wystarczą na początek lista pomysłów i widok dodawania pomysłu. Pokaż też pustą listę: nowy użytkownik musi wiedzieć, od czego zacząć.
Pokaż, co ma pasować do twojego projektu
Zostań w czacie swojego projektu. Dodaj zrzuty albo linki do dwóch lub trzech przykładów, które ci odpowiadają. Napisz, co konkretnie chcesz z nich wziąć: czytelny układ, spokojne kolory, duże przyciski. Jeśli masz logo, ustalone kolory lub opis wyglądu marki, też je dołącz. Nie musisz mieć żadnego z tych materiałów, żeby zacząć.
Agent powinien najpierw przeczytać, dla kogo budujesz i co ta osoba ma zrobić. Aplikacja używana na telefonie w terenie potrzebuje innego układu niż narzędzie do pracy z dużą tabelą przy biurku.
Zacznij od takiej wiadomości:
Przed projektowaniem ekranów przeczytaj opis produktu, plan i instrukcje projektu. Powiedz krótko, kto będzie używał aplikacji, w jakich warunkach i jakie jest jego najważniejsze zadanie. Nie zgaduj brakujących informacji — zapytaj o te, które wpływają na wygląd i obsługę. Sprawdź, czy mamy już projekty ekranów, zasady marki, design system lub gotowe elementy interfejsu. Jeśli tak, wykorzystaj je i wskaż źródło. Dołączone inspiracje: [co mi się podoba i dlaczego; albo: nie mam jeszcze inspiracji]. Zaproponuj jeden kierunek wyglądu i wyjaśnij, dlaczego pasuje do tego projektu. Jeszcze nie buduj aplikacji.
Ustal wygląd i obejrzyj pierwsze ekrany
Nie potrzebujesz od razu wielkiego katalogu. Ustal z agentem mały zestaw, którego będzie używać dalej. Jeśli projekt ma już własny design system, zacznij od niego.
| Co ustalacie | Przykład dla aplikacji z pomysłami |
|---|---|
| Kolory, litery i odstępy | Jeden kolor głównego przycisku, czytelne teksty i równy odstęp między pomysłami |
| Wspólne elementy | Przycisk „Dodaj pomysł”, pole na tekst, karta pomysłu i komunikat po zapisaniu |
| Układ i przejścia | Lista → dodawanie → powrót do listy z nowym pomysłem |
| Co widać, gdy coś się zmienia | Pusta lista, trwa zapisywanie, zapis się udał, zapis się nie udał |
| Telefon i łatwość obsługi | Wygodne przyciski, tekst bez powiększania, obsługa klawiaturą i czytelny błąd |
Teraz poproś o obrazy:
Na podstawie ustaleń pokaż graficzną propozycję pierwszych ekranów dla scenariusza: [scenariusz z planu]. Chcę zobaczyć makiety jako obrazy, nie tylko opis słowny. Jeśli nie masz narzędzia do przygotowania obrazów, powiedz to przed rozpoczęciem i zaproponuj sposób pokazania makiety. Najpierw pokaż jeden kierunek: planszę z kolorami, typografią, przyciskiem, polem formularza i przykładowym komunikatem oraz najważniejsze ekrany. Jeśli wygląd marki nie jest ustalony, możemy porównać najwyżej trzy kierunki i wybrać jeden. Użyj przykładowych tekstów pasujących do projektu. Pokaż ekran na komputerze i telefonie, pusty widok oraz komunikaty zapisywania, błędu i sukcesu. Dobierz wspólne elementy zgodne z technologią z planu. Jeśli potrzebujesz biblioteki gotowych przycisków i formularzy, najpierw sprawdź, czy projekt już ją ma. Jeśli nie, porównaj najwyżej trzy biblioteki zgodne z wybraną technologią i poleć jedną. Prostym językiem wyjaśnij, do czego pasują, czy są rozwijane, jak wspierają dostępność, czy można nadać im własny wygląd oraz co oznaczają dla utrzymania. Podaj ograniczenia i sprawdź aktualne informacje w oficjalnych źródłach. Niczego jeszcze nie instaluj. Pokaż makiety w rozmowie i poczekaj na moje uwagi. Nie buduj jeszcze działających funkcji aplikacji.
Obejrzyj wynik i mów konkretnie: „Na telefonie chcę od razu widzieć Dodaj pomysł”, „Za mały tekst”, „Ten komunikat nie mówi mi, co poprawić”. Agent pokazuje poprawioną wersję w tej samej rozmowie. Możesz mówić głosowo, jeśli tak jest ci wygodniej.
Gdy układ ci odpowiada, poproś o mały klikalny podgląd z przykładowymi danymi. Przejdź od listy do dodawania i z powrotem. Na tym etapie sprawdzasz układ i obsługę. Prawdziwy zapis danych powstanie podczas budowania w lekcji 6.
Zapisz wybór i przejdź do budowania
Po obejrzeniu i poprawkach wklej:
Akceptuję te ekrany i zasady wyglądu: [wskaż konkretną wersję]. Zapisz je w sekcji „Interfejs” istniejącego docs/plan.md. Uwzględnij zadania użytkownika, mapę ekranów, źródło wyglądu, kolory, typografię, odstępy, wspólne elementy, ważne stany, telefon, obsługę klawiaturą, sposób pisania komunikatów i kolejność pokazów kolejnych ekranów na Live Demo. Zapisz zaakceptowane grafiki w projekcie i podaj odnośniki w planie. Jeśli nie możesz ich zapisać, powiedz, czego potrzebujesz. Otwarte decyzje oznacz wprost. W projektowym AGENTS.md zapisz krótko, skąd czytać zasady interfejsu i grafiki przed budową kolejnego ekranu. Wskaż wybraną bibliotekę, jeśli ją uzgodniliśmy. Nie twórz drugiego planu ani drugiej kopii zasad. Powiedz, jaki pierwszy fragment zbudujemy w lekcji 6 i jak porównamy go z zaakceptowanym projektem. Jeszcze nie rozpoczynaj jego realizacji.
Sprawdź przed przejściem dalej: potrafisz wskazać zaakceptowane ekrany, znaleźć przycisk rozpoczynający główne zadanie i przejść cały scenariusz w podglądzie. Agent pokazuje zapisane zasady oraz grafiki i wyjaśnia, jak zastosuje je w następnym ekranie. Samo „będzie nowocześnie i czytelnie” nie wystarcza.
Jeśli tworzysz narzędzie bez ekranów, poproś agenta o zapisanie w planie, że ten krok nie dotyczy projektu, i przejdź do budowania.