Fusion Builder – narzędzie łączące design z kodem produkcyjnym

TL;DR

Fusion to nie AI IDE – uzupełnia Cursor i VS Code w wizualnych procesach pracy
Trzech głównych użytkowników: designerzy, product managerowie i developerzy pracujący z UI
Konwersja Figma → kod z automatycznym rozpoznawaniem design systemów
Współpraca w czasie rzeczywistym podobnie jak w Figma – cały zespół pracuje jednocześnie
Builder Bot reaguje na komentarze w żądaniach scalenia i wprowadza zmiany na żądanie
Kontrola dostępu oparta na rolach pozwala ograniczyć dostęp do określonych części kodu
Koncepcja obszaru roboczego – dodawanie wielu repozytoriów jako kontekst bez ich edytowania

Świat narzędzi deweloperskich przeżywa obecnie prawdziwą rewolucję. AI IDE jak Cursor czy GitHub Copilot zmieniły sposób, w jaki programiści piszą kod. Jednak wciąż brakuje rozwiązań, które pozwoliłyby całym zespołom współpracować nad kodem produkcyjnym w sposób wizualny.

Fusion ma wypełnić właśnie tę lukę, łącząc możliwości designu z prawdziwym kodem aplikacji.

Czym jest Fusion i dla kogo?

Pozycjonowanie względem AI IDE

Steve wyraźnie odróżnia Fusion od popularnych AI IDE. „To nie jest AI IDE” – podkreśla podczas prezentacji. Fusion integruje się z narzędziami takimi jak VS Code czy Cursor, jednak nie zastępuje codziennych narzędzi inżynierów.

W przeciwieństwie do tradycyjnych narzędzi do kodowania wizualnego, Fusion rozwiązuje kluczowy problem skali. Steve zauważa istotną różnicę: „Porównajcie to z wieloma narzędziami do kodowania wizualnego. Jest ich milion, niektóre mają opcję podłączenia repo, ale nie podłączysz ich do dużego repozytorium.”

Dlatego też Fusion koncentruje się na z natury wizualnych procesach pracy oraz pracy w skali zespołowej. Docelowo ma służyć sytuacjom, gdzie designerzy konwertują projekty na kod, product managerowie tworzą prototypy, a developerzy aktualizują UI na podstawie projektów z Figmy.

Trzech głównych użytkowników

Steve identyfikuje trzy kluczowe grupy docelowe:

Designerzy: • Pracują na prawdziwych aplikacjach produkcyjnych • Generują pomysły i prototypy z możliwością udostępniania linkami • Kontrolują każdy piksel i rozmiar ekranu • Działają w przeglądarce, bez konfiguracji środowiska

Product managerowie: • Prototypują, budują i testują rozwiązania • Współpracują z designerami w czasie rzeczywistym • Tworzą wersje robocze żądań scalenia dla całych funkcjonalności • Jak zauważa Steve: „Widzimy dużo PM-ów i designerów współpracujących bezpośrednio w Fusion”

Developerzy: • Skupiają się na skalowalności, wydajności i optymalizacji • Otrzymują obsługę UI przez narzędzie lub innych członków zespołu • Wykorzystują rozszerzenie VS Code lub CLI do lokalnej pracy • Dostają gotowe żądania scalenia z pixel-perfect implementacjami

Kluczowe funkcjonalności

Konwersja Figma → kod

Demonstracja rozpoczyna się od prostego przykładu z Builder Academy – prawdziwą aplikacją produkcyjną. Po wydaniu polecenia „dodaj nową stronę Contact Us i linkuj ją w nawigacji” narzędzie generuje kompletną stronę kontaktową.

Rezultat wykorzystuje design system, komponenty i ikony z aplikacji. Wszystko zostaje wygenerowane automatycznie, zachowując spójność z istniejącym kodem.

Jeszcze bardziej imponujący jest przykład konwersji z Figmy. Steve kopiuje projekt dashboardu z Cloudscape design system i wkleja go do Fusion. W rezultacie narzędzie automatycznie rozpoznaje komponenty oraz generuje kod wykorzystujący właściwe elementy.

Fusion współpracuje także z trybem deweloperskim w Figmie – jak zauważa Steve: „wszystko działa również w dev mode.” Plugin można używać zarówno w normalnym trybie, jak i w trybie deweloperskim.

Szczególnie ciekawą funkcjonalnością jest wsparcie dla zestawów komponentów. Steve prezentuje zestaw komponentów bannerów z różnymi wariantami. Po skopiowaniu całego zestawu, Fusion generuje jeden komponent z właściwościami obejmujący wszystkie wariacje – podobnie jak w profesjonalnych bibliotekach komponentów typu Storybook.

Trzy tryby pracy

Fusion oferuje trzy różne sposoby interakcji:

• Tryb projektowy – działający identycznie jak Figma:

Zaznaczanie warstw i przesuwanie elementów
Zmiana odstępów i układu
Jak tłumaczy Steve: „To powinno działać prawie identycznie jak używanie Figmy”

• Tryb interakcji – testowanie aplikacji:

Sprawdzanie responsywności na różnych urządzeniach
Klikanie przycisków i wypełnianie formularzy
Podgląd działania funkcjonalności

• Tryb kodu – dostęp do wygenerowanego kodu:

Edycja i przegląd zmian
Wprowadzanie poprawek
Wysyłanie żądań scalenia

Współpraca w czasie rzeczywistym

Podobnie jak Figma zrewolucjonizowała współpracę nad designem, Fusion przenosi tę filozofię na kod. Steve wyjaśnia: „To trochę jak to, co Figma zrobiła dla designu i przeglądu designu – wszyscy pracują tutaj razem w czasie rzeczywistym.”

W konsekwencji zespół może jednocześnie pracować nad tym samym kodem. Dostępne są unoszące się kursory oraz wszystkie udogodnienia znane z narzędzi współpracy.

Techniczne możliwości AI

Steve podkreśla, że agent radzi sobie z repozytoriami dowolnej wielkości i złożoności. „Agent potrafi nawigować po kodzie o dowolnej wielkości. Jeśli używałeś Cursor czy Claude Code, zobaczysz bardzo podobne wzorce rozumowania, eksplorowania kodu, przeglądania plików, analizowania.”

Dodatkowo AI pakuje kontekst pełen przykładowego kodu. Dzięki temu generuje kod dokładnie w stylu istniejącego – analizuje inne przykłady i stosuje te same wzorce.

Współpraca zespołowa w praktyce

Żądania scalenia od osób nietechnicznych

Steve demonstruje proces tworzenia żądania scalenia przez osobę nietechniczną. Po wygenerowaniu strony kontaktowej można natychmiast wysłać żądanie scalenia. Zespół inżynieryjny otrzymuje zestawienie zmian i może zdecydować o scaleniu.

Według doświadczeń Steve’a: „W wielu przypadkach nasi product managerowie dodają całe funkcjonalności i wysyłają je jako wersje robocze żądań scalenia, mówiąc: hej, to prototyp, sprawdźcie.”

Często okazuje się, że takie żądania scalenia są wystarczająco dobre do bezpośredniego wdrożenia lub wymagają jedynie minimalnych poprawek.

Builder Bot do przeglądu kodu

Jedną z najbardziej intrygujących funkcji jest Builder Bot. W żądaniu scalenia można go oznaczyć i poprosić o konkretne zmiany.

Steve demonstruje to na żywo, wydając polecenie: „Builder IO bot, przenieś ten formularz do osobnego komponentu w nowym pliku.” Bot natychmiast odpowiada, że zajmie się zadaniem, a następnie wypycha commit z wymaganymi zmianami.

Bot wykorzystuje to samo AI co główne narzędzie. W rezultacie może reagować na komentarze oraz wprowadzać poprawki na żądanie osób dokonujących przeglądu.

Zadawanie pytań o kod

Fusion wykracza poza generowanie kodu. Steve pokazuje, jak można zadawać pytania o istniejący kod i funkcjonalności.

„Można kliknąć na przycisk i zapytać: jakie tracking istnieje tutaj? Jakie eventy i properties są na tym?” – tłumaczy Steve. Product managerowie często pytają o tracking eventy na konkretnych przyciskach, jednak Steve radzi: „kolego, po prostu idź do Fusion i zapytaj.”

Dzięki wskaźnikowi można klikać na elementy UI i pytać o ich implementację. Steve demonstruje to pytaniem: „Jakie API napędza tę wyszukiwarkę lokacji?” i natychmiast otrzymuje odpowiedź: „używa geocoding API z Open Mateo.”

Integracja z design systemami

Automatyczne rozpoznawanie komponentów

Fusion automatycznie analizuje i indeksuje design systemy zarówno po stronie Figmy, jak i w kodzie. Steve prezentuje przykłady z różnymi systemami: Cloudscape (używany przez AWS), Material UI w przykładzie CRM dashboardu czy Shad CN w komponencie bannerów.

Jak komentuje Steve, przeglądając wygenerowany kod: „Nie ma ani jednego div-a w zasięgu wzroku, co jest świetne.” Kod wykorzystuje design system od góry do dołu.

Obszar roboczy i dodatkowe repozytoria

Steve wprowadza koncepcję obszaru roboczego, która pozwala dodać nieograniczoną liczbę repozytoriów jako kontekst. AI ma dostęp do wszystkich repozytoriów, jednak pisze tylko do głównego.

„Możesz mieć swój design system, Storybook, dodaj to jako kolejne repo” – wyjaśnia Steve. AI uzyskuje świadomość tych zasobów, więc można używać podstawowych instrukcji typu: „nasz design system ma te pliki Storybook, spójrz na nie, żeby wiedzieć, jak używać komponentów.”

Dodatkowe repozytoria mogą zawierać dokumentację wewnętrznych API, inne aplikacje z podobnymi wzorcami czy przykłady dobrych praktyk. Agent AI potrafi przeszukać te informacje w języku naturalnym oraz zastosować je w odpowiednim momencie.

Serwery MCP i zewnętrzne narzędzia

Steve pokazuje również integrację z serwerami MCP (Model Context Protocol). „Mamy pełny dostęp do narzędzi. Pokażę wam serwery MCP za chwilę” – mówi podczas demonstracji z Open Mateo API.

Fusion ma wbudowane serwery MCP, jednak można także dodawać własne. Jak wyjaśnia Steve: „Możesz dodać własne niestandardowe serwery. Wystarczy podać URL serwera i token autoryzacji, jeśli potrzebujesz.” To otwiera możliwość integracji z praktycznie dowolnymi zewnętrznymi narzędziami i API.

Kontrola dostępu oparta na rolach

Fusion pozwala precyzyjnie kontrolować, kto ma dostęp do jakich części kodu. Steve podaje praktyczny przykład: „Chcemy, żeby nasz zespół marketingowy tworzył strony docelowe na określonej ścieżce. Nie chcemy, żeby edytowali nasze komponenty wielokrotnego użytku czy jakąkolwiek logikę backendową.”

Można określić, które ścieżki plików są dostępne do odczytu, a które do zapisu. Marketing czy product mogą mieć dostęp tylko do określonych funkcjonalności, podczas gdy inżynierowie zachowują pełną kontrolę nad całą aplikacją.

Praktyczne przykłady użycia

Builder Academy – strona kontaktowa

Steve rozpoczyna od prostego przykładu. Podłącza się do Builder Academy przez GitHub, wystarczy dodać repozytorium, określić port, sposób instalacji dependencji oraz komendę dev.

Fusion wspiera szeroki zakres platform. Steve wymienia: „GitHub Enterprise, Azure DevOps, GitLab i GitLab Enterprise, BitBucket, etc.” Wszystko ma być dostępne w ciągu tygodnia od prezentacji.

Można również pracować lokalnie. Jak dodaje Steve: „możesz robić wszystko, co pokazuję, lokalnie używając naszego rozszerzenia VS Code lub CLI.” Wybór IDE nie ma znaczenia.

Polecenie „dodaj nową stronę Contact Us i linkuj ją w nawigacji” skutkuje gotową stroną. Wykorzystuje ona design system, komponenty, ikony, kolory i tokeny z aplikacji.

Dashboard pogodowy z Cloudscape

Drugi przykład to bardziej złożony dashboard pogodowy. Steve prosi AI o wyszukanie informacji o Open Mateo API w internecie. Następnie kopiuje projekt z Figmy i wkleja do Fusion.

Rezultatem jest funkcjonalny dashboard z wykresami temperatury, tabelami i wyszukiwarką miast. Wszystko wykorzystuje komponenty Cloudscape oraz wygląda jak aplikacja AWS.

CRM z ticketem Linear

Najbardziej imponujący przykład łączy Linear z Fusion. Steve kopiuje ticket z Linear i wkleja go jako prompt. Ticket opisuje potrzebę stworzenia dashboardu CRUD dla użytkowników.

W efekcie AI analizuje ticket, sprawdza wewnętrzne API (dzięki obszarowi roboczemu) oraz generuje funkcjonalną tabelę z wyszukiwarką i modalem edycji. Wszystko powstaje na podstawie jednego ticketa.

Jak zespół Builder używa własnego narzędzia

Steve dzieli się konkretnymi przykładami z codziennej pracy. Builder Academy to prawdziwa aplikacja produkcyjna „zbudowana przez prawdziwych inżynierów bez zamiaru używania narzędzia takiego jak Fusion.”

Jednak sytuacja się zmieniła. „Mieliśmy podstawowy UI dla projektów kiedyś i mogło być lepiej. Niektóre części były mylące. I co się stało? Nasz product designer wszedł do Fusion i zaktualizował ten UI. Znacznie czystszy, znacznie ładniejszy.”

Równie imponujący jest przykład z product managerem: „Nasz product manager wszedł i dodał funkcję przypinania, która jest naprawdę przydatna, gdy masz dużo projektów dodanych.”

Ten typ współpracy zmienia wszystko. Zamiast korporacyjnego ping-ponga między zespołami, każdy może bezpośrednio wprowadzać zmiany.

Przyszłość rozwoju wizualnego

Steve przewiduje przyszłość, w której całe zespoły współpracują bezpośrednio nad kodem. Designerzy mogą robić pierwszą wersję, podczas gdy developerzy wprowadzają finalne zmiany – lub odwrotnie, w zależności od procesu pracy zespołu.

„To naprawdę fajne, co może zostać odblokowane, gdy cały zespół współpracuje bezpośrednio” – podsumowuje Steve. „To trochę jak to, co Figma zrobiła dla designu i przeglądu designu.”

Zaawansowane możliwości graficzne

Na pytanie o gradienty, wzory i ikony Steve odpowiada entuzjastycznie. Pokazuje przykłady z własnych projektów, w tym grę kółko i krzyżyk z intensywnymi gradientami i animacjami.

„Możesz używać w pełni niestandardowych SVG i ikon. Dla SVG o rozsądnym rozmiarze zostanie wbudowane inline, bardzo duże zostaną umieszczone w zewnętrznym pliku i będą używane z CDN. Właściwie niebo jest granicą” – mówi Steve.

Praktyczne listy kontrolne

Podłączenie pierwszego repozytorium

Wejdź na fusion.builder.io
Kliknij „Connect GitHub”
Wybierz repozytorium do podłączenia
Określ port, na którym działa aplikacja
Podaj komendę instalacji dependencji (np. npm install)
Podaj komendę uruchomienia serwera deweloperskiego (np. npm run dev)
Rozpocznij promptowanie lub importuj design z Figmy

Konfiguracja obszaru roboczego z dodatkowymi repozytoriami

Dodaj główne repozytorium (gdzie będą zapisywane zmiany)
Dodaj repozytorium z design systemem/Storybook
Dodaj repozytorium z dokumentacją API
Ustaw niestandardowe instrukcje: „W folderze design-system/stories.jsx znajdziesz przykłady użycia komponentów”
Przetestuj, czy AI rozpoznaje komponenty z dodatkowych repozytoriów

Proces od Figma do żądania scalenia

Zainstaluj plugin Builder w Figmie
Wybierz komponenty lub ramki do eksportu
Kliknij „Smart Export” w pluginie
Wklej skopiowany design w Fusion z promptem
Sprawdź wygenerowany kod w trybie projektowym/interakcji/kodu
Wprowadź poprawki przez prompty lub edycję wizualną
Wyślij żądanie scalenia
Oznacz @builder-bot w komentarzach dla dodatkowych zmian

Kontrola dostępu oparta na rolach

Zdefiniuj role w zespole (design, marketing, inżynieria)
Określ ścieżki plików dostępne dla każdej roli
Ustaw uprawnienia: tylko odczyt vs odczyt-zapis dla poszczególnych folderów
Przetestuj dostęp z konta o ograniczonych uprawnieniach
Dokumentuj zasady dostępu dla zespołu

Dostępność i społeczność

Fusion jest dostępne z darmowym poziomem na fusion.builder.io. Jak zachęca Steve: „Mamy dość hojny poziom darmowy, gdzie możesz wszystko wypróbować na własną rękę.”

Steve szczególnie podkreśla otwartość na opinie: „Patrzę na każdą pojedynczą opinię.” Zespół ma kanał Slack, gdzie Steve przegląda każdy feedback. Często wywołuje to rozmowy w stylu: „hej, to dobra opinia, może możemy zrobić aktualizację.” Wtedy zespół produktowy, inżynieryjny i design rozmawiają o wprowadzeniu ulepszeń na podstawie opinii użytkowników.

Kluczowy insight

Odwróć komunikację w zespole

Standardowo myślimy: PM-y i designerzy zadają pytania developerom o kod („Czy mamy tracking na tym przycisku?”, „Jakie API napędza tę funkcję?”), a developerzy tłumaczą implementację słowami.

W praktyce okazuje się, że: Lepiej dać osobom nietechnicznym bezpośredni dostęp do zadawania pytań kodowi. Steve pokazuje, jak można kliknąć na element UI i zapytać: „Jakie API napędza tę wyszukiwarkę?” i od razu dostać konkretną odpowiedź.

Dlaczego to jest istotne: Eliminuje wąskie gardło developera jako tłumacza między kodem a resztą zespołu. Zamiast czekać na odpowiedź, każdy może natychmiast zweryfikować implementację.

Test na jutro: Następnym razem gdy PM lub designer zapyta Cię o szczegóły implementacji, zamiast tłumaczyć im kod, pokaż jak mogą zapytać narzędzie bezpośrednio i sprawdź czy przestaną Cię bombardować technicznymi pytaniami.

Powyższy artykuł stanowi notatki z live streamu prezentującego narzędzie Fusion Builder. Steve, współzałożyciel i CEO Builder, demonstrował funkcjonalności swojego narzędzia oraz dzielił się doświadczeniami zespołu. Wszystkie opisane przemyślenia, obserwacje i wnioski pochodzą bezpośrednio z jego prezentacji.

Tag: Ai Tools

Fusion Builder – narzędzie łączące design z kodem produkcyjnym #EN164