---
name: next-design
description: "Projektuje główną ścieżkę, makiety ekranów i wygląd aplikacji hackathonowej, włącznie ze stanami błędu, pustymi danymi i małym ekranem."
---

# Od problemu do ekranów

Odczytaj cel, odbiorcę, ograniczenia i istniejący branding. Jeśli brakuje celu, zapytaj o jedną czynność użytkownika. Nie zakładaj, że każdy projekt wymaga strony, logowania lub panelu.

1. Zapisz brief według [szablonu](references/brief.md). Wybierz jedną ścieżkę na demo i listę poza zakresem. Odróżnij rzeczywiste potrzeby od hipotez. Ustal znaczenie sukcesu, np. „uczeń zapisze zadanie i zobaczy je po odświeżeniu”.
2. Rozpisz ścieżkę: wejście, działanie, wynik, wyjście. Użyj najmniejszej potrzebnej liczby ekranów. Przypisz każdemu ekranowi cel i główną akcję. Ogranicz rozgałęzienia w pierwszej wersji.
3. Zrób makietę możliwą do obejrzenia w dostępnym środowisku: lokalny HTML, istniejące narzędzie projektowe lub diagram i opis. Makieta nie może udawać działającej aplikacji. Nie publikuj w zewnętrznym narzędziu bez upoważnienia. Oznacz przykładowe dane.
4. Opisz stany z [karty ekranu](references/ekran.md): start, pusto, ładowanie, sukces, błąd, brak uprawnień, jeśli występują. Przycisk ma jednoznaczną nazwę, a błąd mówi, jak go naprawić. Nie dodawaj sztucznych stanów dla funkcji bez danych czy sieci.
5. Zaproponuj spójny kierunek wizualny: typografia, kolory, odstępy, komponenty i zachowanie na telefonie. Zachowaj istniejący branding. Przy nowym projekcie przedstaw konkretny podgląd zamiast listy przymiotników. Animacja ma wspierać użytkownika; uwzględnij ograniczenie ruchu.
6. Sprawdź podgląd na małym i dużym ekranie, podstawowy kontrast, klawiaturę i czytelność etykiet. Zapisz wynik oraz brakujące sprawdzenia. Jeśli masz tylko tekst, uczciwie oznacz, że makieta nie została wyrenderowana.
7. Zapytaj początkującego o jedną decyzję wizualną, która zmienia produkt, np. czytelność i układ. Przy wcześniej zaakceptowanym briefie i kierunku przejdź do implementacji bez ponownej zgody. Zapisz decyzję w planie.

Gdy `next-gate` jest dostępny, zakończ etap bramką Makieta. Nie koduj całego produktu przed sprawdzeniem głównej ścieżki, chyba że użytkownik wyraźnie chce szybki eksperyment; nazwij wtedy pominięte sprawdzenia.