Vibe coding: Jak AI zmienia tworzenie aplikacji mobilnych #EN271

Uwaga: Poniższe notatki powstały na podstawie rozmowy z Adamem Nofsinger, współzałożycielem aplikacji Alma i byłym pracownikiem Apple, Patreon oraz Dropbox. Wszystkie przedstawione przemyślenia, obserwacje i strategie pochodzą od rozmówców podcastu.

TL;DR

Voice-first development – Super Whisper podwaja produktywność dzięki głosowemu instruowaniu zamiast pisania
Research-first approach – AI najpierw analizuje kod, dopiero potem działa, co zapobiega chaosowi w większych projektach
Figma MCP – bezpośrednie przenoszenie tokenów projektowych i komponentów do kodu SwiftUI
Sweetpad extension – budowanie aplikacji bezpośrednio z Cursor bez otwierania Xcode
Wybór modelu ma znaczenie – Sonnet vs Gemini to różni współpracownicy z odmiennymi stylami myślenia
Poprzeczka ciągle się podnosi – gdy AI ułatwia podstawy, developerzy próbują trudniejszych rzeczy
Minimalna wiedza, maksymalny zwrot – nawet kilka godzin podstaw programowania zwielokrotnia możliwości z AI

Rewolucja w kieszeni designera

Większość tutorial’i AI-development koncentruje się na web developmencie z React i Tailwind. Tymczasem mobilny świat iOS wymaga nieco innego podejścia, jednak korzyści są równie spektakularne. Designerzy mogą obecnie budować funkcjonalne aplikacje iOS bez głębokiej wiedzy programistycznej, ale nie oznacza to możliwości całkowitego pominięcia podstaw.

Konfiguracja z Cursor i Xcode – pierwszy kontakt

Szczegółowy proces setup’u

Krok 1: Stwórz projekt w Xcode

Wybierz opcję „App” dla iOS
Nadaj projektowi nazwę (camelCase zalecany)
Upewnij się, że interfejs jest ustawiony na SwiftUI
Zapisz na pulpicie

Krok 2: Sprawdź podgląd

Wykorzystaj natychmiastowy podgląd w Xcode
To jedna z najlepszych funkcji tego środowiska
Sprawdza się głównie w małych projektach

Krok 3: Otwórz folder w Cursor

Po wstępnej konfiguracji otwórz cały folder projektu w edytorze Cursor
Od tego momentu cała interakcja z AI odbywa się właśnie tam
Zacznij od research promptu

Rozwiązywanie problemów:

Jeśli coś nie działa: Shift+Command+K (clean)
Następnie Command+R (rebuild)

Proces rozpoczynania pracy z iOS okazuje się prostszy niż można przypuszczać. SwiftUI preview w Xcode pozostaje niezastąpione dla małych projektów, ponieważ renderuje się błyskawicznie i pokazuje zmiany w czasie rzeczywistym. W większych projektach jak Alma przestaje działać, jednak dla nauki i prototypów sprawdza się idealnie.

Nofsinger podkreśla istotną zasadę: „Powinieneś budować na swoim telefonie przez większość czasu, ponieważ wszystkie dziwactwa będą występować na telefonie i otrzymasz lepsze odwzorowanie tego, czy działa, czy nie”.

Sweetpad – budowanie poza Xcode

Sweetpad extension dla Cursor pozwala kompilować aplikacje bezpośrednio z editora bez otwierania Xcode. Może to być przełomowe rozwiązanie dla przepływu pracy, szczególnie dla osób preferujących pozostanie w jednym środowisku.

Rozszerzenie instaluje się przez Settings w Cursor, otwiera terminal i uruchamia dokładnie te same komendy co Xcode za kulisami. Nofsinger przyznaje szczerze: „Dla każdego, kto myśli, że jestem jak Neo w Matrix – nie mam pojęcia, co to wszystko znaczy. Po prostu patrzysz i widzisz, czy coś idzie nie tak oraz kiedy pojawia się kod błędu. Szukam po prostu czerwonego. Jeśli nie ma czerwonego, świetnie”.

Mimo to nadal używa Xcode równolegle, gdyż auto completion jest lepsze dla rzeczy specyficznych dla iOS. Sweetpad daje jednak opcję pozostania w Cursor przez cały czas.

Głos jako interfejs przyszłości

Super Whisper radykalnie zmienia sposób pracy z kodem. Nofsinger używa głosowych komend niemal przez cały czas, co podwaja jego produktywność.

„Przyszłością jest rozmawianie z komputerem” – podkreśla. Przyznaje, że nigdy nie myślał, iż wsiądzie do tego pociągu, ponieważ uważał, że głos nie ma sensu jako interfejs. Zmieniło się to w niecały rok.

Przykład przepływu pracy: Control+Option+Command uruchamia Super Whisper, Nofsinger wypowiada instrukcję „Przyjrzyj się szybko tej bazie kodu, zapoznaj się z nią, powiedz mi, co się dzieje”, a prompt ląduje w Cursor.

Adopcja przez konsumentów vs profesjonalistów

Ciekawa obserwacja z rozwoju Alma: zespół zaczynał z podejściem voice-first, ale użytkownicy konsekwentnie wybierali tekst. Widzieli, że ludzie cały czas przechodzą do tekstu, więc kolejność preferencji to tekst, obraz, a dopiero potem głos.

To pokazuje różnicę między profesjonalnym przepływem pracy (gdzie głos wygrywa) a preferencjami konsumentów (gdzie tekst wciąż dominuje). Rynek konsumencki po prostu nieco się opóźnia.

Strategia instruowania w dużych projektach

Research-first approach – kluczowe zasady

Efektywność pracy z AI zależy bezpośrednio od jakości poleceń. Zamiast od razu prosić o napisanie kodu, warto zacząć od polecenia zbadania istniejącej bazy. Kluczowa jest strategia „najpierw zbadaj, nie pisz kodu”. Dzięki temu model nie stworzy zbędnych systemów od zera, a zamiast tego wykorzysta te, które już istnieją w projekcie.

Podstawowe podejście:

„Nie pisz jeszcze żadnego kodu, po prostu raportuj, jak powinniśmy to podejść”
„Zbadaj, jak [funkcja] jest zaimplementowana w kliencie, ponieważ zamierzamy [działanie]”
„Przyjrzyj się bardzo uważnie temu widokowi, przeanalizuj dokładnie, jak działa”
Poczekaj na analizę przed następnym poleceniem

Przykład z feature flagami ilustruje tę zasadę: zamiast prosić „stwórz feature flag dla tej rzeczy”, najpierw kazano AI zbadać, jak feature flagi są już zaimplementowane w aplikacji.

Zarządzanie kontekstem w większych projektach

Cursor ma funkcję „Add file to cursor chat” – kluczową dla większych baz kodu. Gdy chce się naśladować wzorzec innego widoku w aplikacji lub pobierać komponenty, można załadować kontekst przed uruchomieniem zadania.

Dodatkową taktyką jest uruchomienie Claude w osobnym oknie z rolą CTO do ewaluacji rozwiązań. „To dodatkowa warstwa specjalnie zaprogramowana do krytykowania planu dla kogoś mniej technicznego. To bezcenne. Absolutnie bezcenne” – zauważa Nofsinger.

Studium przypadku: Animation playground

Konkretny przykład pełnego przepływu pracy – budowanie narzędzia do testowania krzywych animacji. Zaczyna od szkieletu (Command+Shift+4, Control – zrzut ekranu na schowek), wkleja do Cursor i wypowiada złożone polecenie:

„Dodaj lepszy kontrast do kolorów ikon na dole. Może zrób je czarne lub coś takiego. Na razie stworzymy plac zabaw dla animacji w jednej z tych zakładek. Umieśćmy prostokąt, zaokrąglony prostokąt u góry tego widoku. Następnie chcę zestaw czterech suwaków do manipulowania krzywą sprężyny i umieść odczyt tej krzywej sprężyny gdzieś na ekranie. Chcę przycisk na dole, który animuje ten prostokąt w rotacji z krzywą sprężyny ustawioną przez te slidery.”

Rezultat: działające narzędzie w kilka minut z możliwością testowania różnych parametrów spring animacji w czasie rzeczywistym. „To trafiło w dziesiątkę. Od razu z pudełka. Naprawdę podstawowe, oczywiście nie super skomplikowane, ale rozumiesz ideę.”

Wybór modelu AI – dlaczego to ma znaczenie

Różne modele AI to różni współpracownicy. Nofsinger ma silne preferencje wynikające z doświadczenia:

„Sonnet miał regresję kilka tygodni temu. Przynajmniej tak to odbierałem. Próbowałem przejść na Gemini 2.5 Pro i pomyślałem sobie – to nie jest współpracownik, z którym chcę pracować. Sposób myślenia i rozwiązania, które mi dawał – to nie było dla mnie.”

Zawsze używa Claude Sonnet w trybie max, ponieważ „nie ma kwoty, której nie zapłaciłbym za produktywność, jaką otrzymuję w trybie max z Claude Sonnet”. To istotna obserwacja dotycząca filozofii cenowej – ROI z premium modeli AI może być ogromny dla profesjonalistów.

Od Figmy do kodu w kilka kroków

Figma MCP (Model Context Protocol) pozwala na bezpośrednie przenoszenie elementów designu do kodu. Demonstracja pokazuje, jak wybranie elementu w Figmie i napisanie polecenia w Cursor skutkuje automatycznym wygenerowaniem kodu SwiftUI z odpowiednimi kolorami, gradientami i stylami.

Dwa sposoby integracji z Figmą

Metoda prosta (kopiuj-wklej): Polega na wejściu w Dev Mode w Figmie, zaznaczeniu elementu i skopiowaniu jego kodu SwiftUI. Ten fragment można następnie wkleić do Cursora z poleceniem zastosowania podobnych stylów w projekcie.

Metoda zaawansowana (Figma MCP): Po aktywacji integracji Model Context Protocol, Cursor może komunikować się bezpośrednio z Figmą. Cursor automatycznie pobiera kolory tła i style przycisku z zaznaczonej ramki w Figmie, a następnie implementuje je w kodzie.

Przepływ pracy ma swoje wymagania:

Musisz mieć coś zaznaczone na artboard w Figmie – nie można po prostu powiedzieć „odwołaj się do wszystkich moich zmiennych”
Najlepiej działa z tokenami projektowymi – zawsze pobiera właściwe kolory z systemów designu
Złożone efekty mogą nie działać – inner shadow w SwiftUI wymaga specjalnych rozwiązań
Zrzut ekranu czasem szybszy dla prostych przypadków

Nofsinger używa Figma MCP od półtora tygodnia i zauważa: „To może zacząć zastępować robienie zrzutów ekranu w niektórych kontekstach. Myślę, że szczególnie przy tworzeniu komponentów może to być naprawdę pomocne.”

Nauka programowania z AI jako mentorem

Dla designerów zaczynających przygodę z kodem rekomenduje się hybrydowe podejście – podstawy SwiftUI plus AI mentor.

„Poproś cursor, żeby opisał ci, co się dzieje i uczył cię po drodze” – to rada dla początkujących. Model wyjaśni wszystko, jeśli się zapyta. Można go używać jako osobistego mentora, który tłumaczy kod i koncepcje w trakcie pracy, co pozwala budować aplikacje i uczyć się jednocześnie.

Ważne jest zdobycie podstawowej wiedzy przez tradycyjne kursy online. „Spędź pięć godzin, naucz się podstaw SwiftUI i przyjdź tutaj z tym językiem” – podkreśla Nofsinger. AI jako wzmacniacz jest świetne, ale potrzebuje przynajmniej odrobiny wiedzy do wzmocnienia. Dzięki takiemu podejściu zyskuje się „całkowicie nierozsądny poziom pewności siebie”, by tworzyć rzeczy, które wcześniej wydawały się niemożliwe.

Poprzeczka ciągle się podnosi

Interesująca obserwacja o naturze postępu technologicznego: „To podobne do tego, jak wszyscy teraz mówią o Liquid Glass. Poprzeczka zawsze się przesuwa pod względem tego, co jest najbardziej niesamowite i technicznie nieosiągalne. Apple zawsze przesuwa tę poprzeczkę nieco dalej.”

To samo dzieje się z AI development. Gdy podstawowe rzeczy stają się łatwe, ludzie będą próbować trudniejszych. Gdy staje się łatwe robienie A, B, C, ludzie wymyślą D, E, F i będą to robić, ponieważ zawsze jest ten nacisk, żeby wykonywać fajniejsze i trudniejsze rzeczy.

Gdzie AI ma swoje granice

Nie wszystko da się zrobić z AI. Przykład holograficznej obracającej się karty, której nie udało się stworzyć nawet z przykładami i szczegółowymi poleceniami, ilustruje te ograniczenia.

„Poszedłem i robiłem tutorial przez godzinę, potem musiałem to wszystko poprawić, spojrzeć na kilka biletów Stack Overflow i wtedy to rozgryzłem” – przyznaje szczerze.

Obszary, gdzie tradycyjne metody wciąż wygrywają:

Zaawansowane animacje 3D – holograficzne karty, efekty liquid glass
Skomplikowane fizyki – animacje spring z wieloma parametrami
Niszowe biblioteki – specjalistyczne frameworki bez dobrej dokumentacji
Optymalizacje wydajności – gdzie potrzebna jest głęboka znajomość systemu

„Wciąż są rzeczy, dla których nie ma zastępstwa dla YouTube i tutoriali” – konstatuje realistycznie.

Nowa rola designera w świecie AI

Nofsinger znajduje się w punkcie kariery, gdzie ma „całkowicie nierozsądny poziom pewności, że mogę stworzyć coś prawdziwego”. To kluczowa zmiana – designerzy mogą teraz budować funkcjonalne aplikacje, nie tylko prototypy.

„Wszystko, co myślałeś, że nie możesz zrobić wcześniej, jest tutaj i możesz to teraz zrobić. W ciągu następnych kilku lat będzie jeszcze szaleniej.”

Jednak ważne jest zachowanie realizmu. Czasami AI nie da rady i to jest w porządku. Próbował stworzyć animację 3D split flap i stwierdził, że ROI staje się dość szybko niskie. To jest w porządku, ale sam fakt posiadania tej możliwości zmienia sposób myślenia o projektach.

3-letnia perspektywa – synchroniczny przepływ pracy

Konkretna wizja przyszłości: „Wszystko to przejdzie z asynchronicznego na synchroniczne. Tam będziemy za trzy lata. Po prostu będziesz mówić, a ta rzecz będzie budować przed tobą”.

Może nawet kod nie będzie widoczny przez cały czas – „może po prostu będzie ci pokazywany, gdy będziesz potrzebować to zobaczyć. Rozmawiasz z komputerem, robisz cokolwiek, a widok pojawia się, żeby dać ci podgląd, gdy go potrzebujesz.”

Voice interface będzie się rozwijać na poziomie systemu operacyjnego. macOS i inne systemy Apple będą się przesuwać w kierunku voice-first, ponieważ obecny Siri „nie wystarcza w swoim małym trybie głosowym.”

Praktyczne podsumowanie

Lista kontrolna quick start dla designerów

Narzędzia:

Xcode + Cursor + Super Whisper
Sweetpad extension (opcjonalnie)
Figma MCP beta (jeśli używasz Figmy)

Strategia nauki:

5-10h kursu podstaw SwiftUI
Eksperymentowanie z research-first poleceniami
Testowanie przepływu zrzut ekranu → kod
Używanie głosu do instruowania
Testowanie na prawdziwym telefonie, nie tylko symulatorze

Wybór modelu:

Claude Sonnet w trybie max dla najlepszej produktywności
Różne modele = różni współpracownicy
ROI z premium models może być ogromny

Sposób myślenia:

AI to współpracownik, nie magia
Zachowaj realizm – nie wszystko się uda
Poprzeczka będzie się przesuwać
Za 3 lata przepływ pracy będzie synchroniczny

Biblioteka poleceń Adama Nofsinger

Na podstawie rozmowy zebrałem konkretne polecenia używane w praktyce:

1. Prompt „Badawczy” (Investigate First)

„Zbadaj, jak zaimplementowane są flagi funkcyjne w kliencie, ponieważ zamierzamy ukryć część treści za flagą tylko dla administratorów”

Kiedy stosować: Zawsze na początku pracy nad nową funkcją w istniejącym kodzie. Zamiast od razu prosić o implementację, ten prompt zmusza AI do analizy i zrozumienia obecnych rozwiązań. Można go wzmocnić, dodając: „Nie pisz jeszcze żadnego kodu, tylko zaraportuj, jak powinniśmy do tego podejść”.

2. Prompt „Zapoznawczy” (Familiarize Yourself)

„Rzuć okiem szybko na tę bazę kodu. Zapoznaj się z nią i powiedz mi, co się tu dzieje”

Kiedy stosować: Na samym początku pracy z nowym, prostym projektem. Jest to świetny sposób, aby AI szybko podsumowało główną strukturę i cel kodu, zanim przejdzie się do bardziej złożonych zadań.

3. Prompt „Strukturalny” (Build the Foundation)

„Zbuduj nam strukturę z czterema zakładkami, umieść inne słowo na każdej z nich i nadaj każdej inny kolor tła”

Kiedy stosować: Kiedy potrzebujesz szybko stworzyć podstawowy szkielet aplikacji lub widoku. Zamiast pisać powtarzalny kod, można zlecić AI wygenerowanie całej nawigacji, na której będzie się dalej budować.

4. Prompt „Wielowarstwowy z kontekstem wizualnym”

Po wklejeniu zrzutu ekranu z Figmy: „Dodaj lepszy kontrast do kolorów ikon… stwórz plac zabaw dla animacji w jednej z zakładek. Umieść na górze prostokąt, a pod nim zestaw czterech suwaków do manipulacji krzywą animacji. Chcę też widzieć odczyt wartości tej krzywej gdzieś na ekranie oraz przycisk na dole, który animuje obrót tego prostokąta…”

Kiedy stosować: Przy implementacji konkretnego interfejsu użytkownika. Ten zaawansowany prompt łączy kontekst wizualny (zrzut ekranu) z konkretnymi instrukcjami dotyczącymi budowy UI, jego funkcjonalności oraz poprawek kosmetycznych.

Pozostałe polecenia z praktyki

„Nie pisz jeszcze żadnego kodu, po prostu raportuj, jak powinniśmy to podejść” Kiedy stosować: Na początku każdego większego feature’u. Zapobiega budowaniu niepotrzebnych systemów.

„Stwórz mi [komponent] w osobnym [typie pliku] i po prostu zaktualizuj [istniejący element], żeby używał tego [komponentu]” Kiedy stosować: Gdy chcesz wyciągnąć powtarzający się kod do komponentu wielokrotnego użytku.

„Czy możesz pobrać [właściwość] z ramki, którą mam obecnie wybraną w Figmie i zastosować to do [element docelowy]?” Kiedy stosować: Gdy używasz Figma MCP i chcesz przenieść konkretne style z designu.

Profesjonalne wskazówki dla instruowania

Używaj „Panie Robocie” na końcu, gdy nie jesteś pewien – AI skoryguje błędne założenia
„Nie mam pojęcia, czy masz taką możliwość” – dobry sposób na testowanie granic AI
Głosowe polecenia są dłuższe i bardziej naturalne – nie martw się o perfekcyjną składnię
Zrzut ekranu + polecenie – najszybszy sposób na przekazanie kontekstu wizualnego
„A potem pójdziemy gdzieś dalej” – sygnał, że to pierwszy krok, nie finalna implementacja

Kluczowe spostrzeżenie

Minimalna wiedza, maksymalny zwrot

Standardowo myślimy: Z AI nie muszę już uczyć się podstaw programowania. Mogę od razu tworzyć skomplikowane rzeczy, zlecając wszystko modelowi.

W praktyce okazuje się, że: Niewielka inwestycja w fundamentalną wiedzę (np. 5-godzinny kurs online) daje nieproporcjonalnie duży zwrot. AI jest niesamowicie dobre w braniu nawet „małego skrawka wiedzy” i wzmacnianiu go w realne umiejętności.

Dlaczego to jest istotne: To zmienia postrzeganie AI z magicznej czarnej skrzynki na potężny mnożnik naszych własnych, nawet niewielkich, kompetencji. Bez podstaw jesteśmy tylko operatorami, z podstawami stajemy się architektami, którzy potrafią świadomie kierować i weryfikować pracę narzędzia.

Test na jutro: Następnym razem gdy staniesz przed nowym wyzwaniem technicznym, zamiast od razu prosić AI o gotowe rozwiązanie, spróbuj poświęcić 2-3 godziny na podstawowy tutorial w tym temacie. Dopiero potem użyj AI do budowy i sprawdź, o ile szybciej i pewniej będziesz w stanie weryfikować oraz modyfikować jego propozycje.

Ten wpis jest częścią mojej kolekcji notatek z ciekawych podcastów, webinarów i innych treści, które uważam za wartościowe i do których sam chcę wracać. Jeśli chcesz sprawdzić oryginalne źródło, znajdziesz je tutaj: Vibe coding mobile apps with Cursor + Xcode