Home Manager - jak projektuję aplikację mobilną z pomocą AI i Figma MCP

Buduję aplikację mobilną do zarządzania domem. Listy zakupów, domowa spiżarnia, zadania, notatki - wszystko współdzielone z domownikami. Robocza nazwa: Home Manager.

Logika tej aplikacji to dla mnie codzienna robota. Bazy danych, synchronizacja w czasie rzeczywistym, powiadomienia push, współdzielenie danych między użytkownikami - te rzeczy ogarniam od lat w .NET. Potrafię postawić API, zaprojektować schemat bazy, ogarnąć autentykację i autoryzację. Backend to mój naturalny teren.

Problem pojawia się w momencie, kiedy trzeba zaprojektować to, co użytkownik faktycznie zobaczy na ekranie telefonu.

Problem, który zna każdy programista backendu

Nie jestem designerem. Nigdy nim nie byłem. Potrafię zakodować prosty ekran - wrzucić listę elementów, dodać przycisk, ustawić nawigację. Ale zaprojektować interfejs tak, żeby wyglądał profesjonalnie i był intuicyjny w użyciu? To zupełnie inna dyscyplina.

Każdy, kto próbował samodzielnie zrobić UI do swojego side projectu, zna to uczucie. Otwierasz Figmę albo po prostu zaczynasz kodować widok, i po dwóch godzinach masz coś, co działa, ale wygląda jak formularz z systemu ERP z 2008 roku. Marginesy się nie zgadzają, kolory gryzą, hierarchia informacji jest płaska - wszystko ma ten sam rozmiar i wagę wizualną, więc oko nie wie, gdzie patrzeć.

Można oczywiście użyć gotowych komponentów z Material Design albo innej biblioteki UI. I to pomaga - ale tylko do pewnego momentu. Bo biblioteka komponentów daje ci klocki, a nie projekt. To jak dostać zestaw LEGO bez instrukcji. Masz elementy, ale nie wiesz jak je złożyć w coś, co ma sens.

W przypadku Home Managera ta kwestia była szczególnie istotna. To nie jest aplikacja, z której korzystam tylko ja. Używa jej moja partnerka, potencjalnie inni domownicy. Jeśli interfejs jest nieintuicyjny, nikt nie będzie z tego korzystał - wrócą do kartki na lodówce albo do wspólnej notatki w telefonie. A wtedy cały backend, nad którym pracowałem, jest bezużyteczny.

Mógłbym zatrudnić designera. Ale to side project - nie mam na to budżetu na etapie prototypu. Mógłbym spędzić tygodnie ucząc się zasad projektowania UI. Ale czas to mój najcenniejszy zasób i wolę go wydać na rzeczy, w których jestem dobry.

I wtedy trafiłem na coś, co zmieniło moje podejście do tego problemu.

Figma MCP - co to jest i jak działa

Figma udostępniła MCP Server - Model Context Protocol - który pozwala narzędziom AI bezpośrednio generować i odczytywać projekty w Figmie. W praktyce oznacza to, że mogę z poziomu Claude Code opisać słowami, co chcę zobaczyć na ekranie, a AI stworzy gotowy design w moim pliku Figma.

Żeby było jasne - to nie jest generowanie obrazków. To nie jest screenshot ani mockup w PNG. Figma MCP tworzy prawdziwe komponenty Figmy: ramki, warstwy, elementy tekstowe, ikony, z konkretnymi wymiarami, odstępami, kolorami i hierarchią. Dokładnie takie same elementy, jakie stworzyłby designer ręcznie.

Technicznie działa to tak: MCP to otwarty protokół, który definiuje sposób komunikacji między narzędziem AI (np. Claude) a zewnętrznym serwisem (np. Figma). Claude dostaje zestaw narzędzi - może tworzyć nowe pliki, generować widoki na podstawie opisu, pobierać screenshoty istniejących projektów, odczytywać metadane komponentów. Wszystko przez API, bez klikania w interfejs Figmy.

Kluczowa rzecz: AI ma dostęp do bibliotek designerskich Figmy. Czyli nie wymyśla kolorów i proporcji od zera - korzysta z gotowych systemów projektowych, sprawdzonych wzorców UI, komponentów które zostały zaprojektowane przez ludzi, którzy wiedzą co robią. AI po prostu składa je w spójną całość na podstawie mojego opisu.

Proces krok po kroku - jak projektowałem ekrany Home Managera

Zacznę od tego, jak wyglądał mój workflow. Pracuję w Claude Code - to moje główne środowisko. Figma MCP jest podpięta jako jedno z narzędzi. Nie muszę przeskakiwać między aplikacjami - opisuję co chcę w terminalu, a projekt materializuje się w Figmie.

Ekran listy zakupów

Zacząłem od głównego widoku - listy zakupów. Opisałem to mniej więcej tak: ekran mobilny z listą produktów do kupienia, każdy element z checkboxem do odhaczenia, kategorie produktów wizualnie oddzielone, pole do szybkiego dodawania nowego produktu na górze, informacja kto dodał dany produkt.

Dostałem gotowy widok. Nie będę mówił, że był idealny za pierwszym razem - bo nie był. Ale był profesjonalny. Odpowiednie odstępy, czytelna typografia, logiczny układ elementów. To, co ja bym kodował przez dwie godziny metodą prób i błędów, pojawiło się w minutę.

Potem iterowałem. Poprosiłem o przeniesienie pola dodawania na dół ekranu (bo kciuk naturalnie tam sięga), o zmianę kolorystyki odhaczonych produktów na mniej kontrastową (żeby nie odciągały uwagi od tego, co jeszcze trzeba kupić), o dodanie ikony kategorii obok nazwy sekcji. Każda zmiana - kilkanaście sekund.

Ekran spiżarni

Spiżarnia to inny typ widoku. Tu nie chodzi o odhaczanie - chodzi o przegląd tego, co mamy w domu. Opisałem: widok kafelkowy produktów w domu, z informacją o ilości, dacie ważności (kolor ostrzegawczy, gdy się zbliża), możliwością filtrowania po kategorii. Plus przycisk "dodaj do listy zakupów" przy produktach, których ilość jest niska.

AI rozwiązała kilka problemów projektowych, o których sam bym nie pomyślał. Na przykład - wizualne rozróżnienie produktów bliskich wygaśnięcia nie przez czerwony tekst (który jest mało czytelny na małym ekranie), ale przez subtelny pasek boczny przy kafelku z gradientem od żółtego do czerwonego. Drobna rzecz, ale taka, którą doświadczony designer by zrobił, a ja bym wrzucił czerwoną czcionkę i poszedł dalej.

Ekran zadań domowych

Zadania domowe wymagały innego podejścia - tu ważna jest informacja "kto" i "kiedy". Opisałem widok z listą zadań, przypisaniem do osoby (awatar lub inicjały), deadlinem, cyklicznością (np. "co tydzień"), statusem.

Tu poprosiłem AI o inspirację widokiem w stylu Todoist - prostym, minimalistycznym. Efekt: lista z wyraźną hierarchią dat (dziś, jutro, ten tydzień), kolorowe tagi przypisanych osób, ikona powtarzania przy zadaniach cyklicznych. Czytelny od pierwszego spojrzenia.

Ekran notatek

Notatki to najprostszy widok, ale też taki, gdzie łatwo zrobić nudny design. Poprosiłem o listę notatek współdzielonych z podglądem pierwszych linii treści, informacją kto ostatnio edytował, pinowanie ważnych notatek na górze.

Efekt wygląda jak uproszczona wersja Apple Notes - co jest dokładnie tym, czego potrzebowałem. Funkcjonalny, przejrzysty, bez wodotrysków.

Workflow: przed i po

Żeby zobrazować różnicę, porównam jak wyglądał mój proces projektowania UI przed Figma MCP i jak wygląda teraz.

Wcześniej: Otwierałem edytor kodu. Zaczynałem budować widok od zera, używając biblioteki komponentów. Patrzyłem na efekt. Nie podobał mi się. Szukałem inspiracji na Dribbble albo w innych aplikacjach. Próbowałem odwzorować coś co widziałem. Marginesy nie grały. Zmieniałem. Kolory jakoś nie pasowały. Googlowałem palety kolorów. Po trzech godzinach miałem jeden ekran, który był "okej" - nie dobry, ale "wystarczający". I tak dla każdego widoku. W sumie: 20-30 godzin na podstawowy zestaw ekranów.

Teraz: Opisuję słowami co chcę zobaczyć. Dostaję projekt w Figmie. Iteruję - "przesuń to tam", "zmień kolor na ciemniejszy", "dodaj ikonę kategorii". Każda iteracja to sekundy, nie minuty. Po godzinie mam komplet ekranów: główny dashboard, listę zakupów, spiżarnię, zadania, notatki, ustawienia, ekran logowania. Wszystko spójne wizualnie, bo AI utrzymuje ten sam system designu przez cały projekt.

Godzina zamiast trzydziestu. I wynik jest obiektywnie lepszy, bo bazuje na sprawdzonych wzorcach projektowych, a nie na moim "oko mi mówi że to chyba jest okej".

Od projektu Figma do kodu

Sam projekt to dopiero połowa drogi. Kluczowe pytanie: jak przenieść to do kodu?

I tu jest druga korzyść Figma MCP - mogę z poziomu Claude odczytać metadane komponentów. Wymiary, kolory w HEX, odstępy w pikselach, rozmiary fontów. Nie muszę "na oko" odwzorowywać designu w kodzie. Mam dokładne wartości.

W praktyce: biorę projekt z Figmy, czytam jego strukturę przez MCP, i na tej podstawie generuję komponenty UI. W moim przypadku to React Native (bo Home Manager to aplikacja mobilna), ale to działa z dowolnym frameworkiem frontendowym.

Nie twierdzę, że efekt jest pixel-perfect za pierwszym razem. Zawsze są drobne korekty - jakiś padding się nie zgadza, font renderuje się trochę inaczej na urządzeniu niż w Figmie. Ale punkt startowy jest na zupełnie innym poziomie niż gdybym zaczynał od pustego pliku.

Solo developer + AI - trend, który zmienia reguły gry

Home Manager to mój side project, ale widzę ten sam wzorzec u innych. Coraz więcej programistów buduje produkty samodzielnie, bo AI zasypuje luki kompetencyjne.

Nie chodzi o to, że AI zastępuje designerów, copywriterów czy specjalistów od marketingu. Chodzi o to, że programista, który ma pomysł na produkt, nie musi już czekać aż znajdzie (i opłaci) zespół. Może postawić działający prototyp - z sensownym UI, zrozumiałą kopią i podstawowym landingiem - sam, w ułamku czasu który byłby potrzebny rok temu.

To zmienia ekonomię side projectów. Bariera wejścia spadła. Koszt prototypu spadł. Czas od pomysłu do pierwszej testowalnej wersji spadł z miesięcy do tygodni, czasem dni.

Ale - i to jest ważne "ale" - AI nie zastępuje myślenia o produkcie. Figma MCP zrobi mi profesjonalnie wyglądający ekran, ale nie powie mi, czy to jest właściwy ekran. Nie powie mi, czy moi użytkownicy potrzebują widoku spiżarni czy może to zbędna funkcjonalność. Nie powie mi, jaki problem naprawdę rozwiązuję.

Strategia produktowa, zrozumienie użytkownika, priorytetyzacja funkcji - to nadal wymaga ludzkiej głowy. AI przyspiesza wykonanie, nie zastępuje decyzji.

Co dalej z Home Managerem

Mam komplet ekranów w Figmie. Następny krok to przeniesienie ich do kodu i postawienie działającego prototypu - minimum viable product, który mogę dać do testów ludziom w moim domu. Potem iteracja na podstawie realnego użytkowania.

Cały proces - od pomysłu przez design po działający prototyp - robię sam, z AI jako partnerem. Nie dlatego, że nie doceniam pracy designerów (wręcz przeciwnie - teraz doceniam ją bardziej, widząc ile decyzji projektowych trzeba podjąć przy każdym ekranie). Ale dlatego, że na etapie walidacji pomysłu potrzebuję szybkości, nie perfekcji.

Na koniec - jeśli masz podobny problem

Jeśli masz pomysł na aplikację, wewnętrzne narzędzie dla firmy, albo potrzebujesz szybkiego prototypu żeby zwalidować koncept - to jest dokładnie to, czym zajmuję się w ramach mojej działalności Deadline. Stawiam MVP i PoC dla firm: od pomysłu przez design (tak, teraz z Figma MCP) po działający prototyp z backendem.

Efekt: zamiast miesięcy planowania i budżetu na pełny zespół, dostajesz działającą wersję w tygodniach. Wystarczającą, żeby pokazać inwestorom, przetestować z użytkownikami, albo po prostu sprawdzić czy pomysł trzyma się kupy.

Odezwij się na LinkedInie albo przez stronę - pogadamy bez zobowiązań, czy i jak mogę pomóc.