Projektowanie za pomocą sztucznej inteligencji najlepiej sprawdza się w pętli: opisujesz, szkice sztucznej inteligencji, oceniasz i udoskonalasz, a następnie powtarzasz. Sztuczna inteligencja szybko tworzy opcje. Jesteś odpowiedzialny za wybór tego właściwego.
Krok 1: napisz brief. Opisz użytkownika, zadanie, treść i wszelkie ograniczenia. „Ekran ustawień aplikacji budżetowej dla osób korzystających z telefonów, z sekcjami dotyczącymi konta, powiadomień i prywatności, wykorzystujący nasze istniejące komponenty” da znacznie lepszy wynik niż „utwórz stronę ustawień”.
Krok 2: wygeneruj wersje robocze. Narzędzia podpowiedzi do interfejsu użytkownika, takie jak Google Stitch lub asystent AI UXPin, zamieniają opis lub szkic w ekrany. Poproś o kilka wariantów i porównaj je, zamiast akceptować pierwszy.
Krok 3: dopracuj w narzędziu do projektowania. Przenieś najlepszą wersję roboczą do Figma, Penpot lub innego edytora. Napraw hierarchię, odstępy i kopiuj oraz zaprojektuj stany, które sztuczna inteligencja zwykle pomija: ładowanie, pusty, błąd i wyłączone.
Krok 4: połącz się z kodem. Narzędzia do kodowania AI, takie jak Claude Code i Cursor, mogą zbudować interfejs. Wyniki są znacznie lepsze, gdy można odczytać projekt za pośrednictwem serwera MCP. Zarówno Figma, jak i Penpot mają takie rozwiązanie. W przypadku części interaktywnych i animowanych stworzony przez nas ExodeUI ma serwer MCP, który pozwala sztucznej inteligencji tworzyć i edytować animacje ze stanami i fizyką sprężyn na podstawie podpowiedzi w prostym języku, przechowywanych w otwartym pliku .exode odtwarzanym przez Twoją aplikację.
Krok 5: sprawdź przed wysyłką. Sprawdź użycie klawiatury i czytnika ekranu, kontrast, ograniczenie ruchu, małe i duże ekrany oraz długi lub przetłumaczony tekst. Traktuj wyniki AI jak pracę szybkiego, ale nowego członka zespołu: przydatne, ale zawsze sprawdzane.