Eksperyment z Locofy.ai

Czy narzędzie może zastąpić programistę w generowaniu kodu aplikacji webowej?

W ostatnim czasie przeprowadziliśmy eksperyment mający na celu sprawdzenie możliwości narzędzia https://www.locofy.ai/ w kontekście generowania kodu aplikacji FrontEnd. Zadanie polegało na wygenerowanie komponentów w technologii Vue na podstawie projektu interfejsu w Figmie(przygotowanym pod daną technologie). Naszym celem było zweryfikowanie, czy to rozwiązanie może skutecznie wspomóc proces wdrażania interfejsów użytkownika, a może nawet częściowo zastąpić pracę programisty.

Przebieg eksperymentu

1.  Przygotowanie projektu w Figmie – 1. Przygotowanie projektu w Figmie – Stworzyliśmy interfejs użytkownika zgodny z zasadami dobrego UX/UI, bazując na komponentach często wykorzystywanych w aplikacjach webowych zgodnie z założeniami fameworku w którym miala być tworzona aplikacja.
2. Konwersja w Locofy.ai – Zaimportowaliśmy projekt do narzędzia i skonfigurowaliśmy generację kodu Vue.
3. Analiza wygenerowanego kodu oraz strony – Kod wynikowy został poddany ocenie zarówno z perspektywy UX designera, jak i programisty.

Wyniki eksperymentu

Perspektywa projektanta UX

Z punktu widzenia UX designera Locofy.ai to bardzo interesujące narzędzie. Pozwala na szybkie przekształcenie projektu w Figmie w działający prototyp z kodem. To może być pomocne w testowaniu interakcji oraz szybkim tworzeniu PoC dla koncepcji biznesowych oraz wdrażaniu wersji MVP.

Jednak zauważyliśmy kilka istotnych ograniczeń:

• Narzędzie wymaga bardzo precyzyjnie przygotowanego designu – wszelkie nieścisłości w Figmie mogą prowadzić do błędnych wyników.
• Nie zawsze poprawnie interpretuje komponenty – niektóre elementy interfejsu były błędnie konwertowane na kod HTML i CSS.
• Brak zaawansowanych opcji dostosowywania zachowań interaktywnych – co sprawia, że interakcje trzeba i tak dopracowywać ręcznie.
• Długotrwały proces pokazywania, jakie elementy w FIGMA odpowiadają jakim rodzajom komponentom w kodzie

Perspektywa programisty

Z kolei ocena wygenerowanego kodu przez programistę wykazała, że Locofy.ai w obecnej wersji nie jest jeszcze na tyle „inteligentne”, by zastąpić doświadczonego dewelopera. Główne problemy:

• Kod wygenerowany przez Locofy nie jest optymalny pod względem struktury i czystości – wymaga refaktoryzacji, by spełniał standardy developerskie.
• Wygenerowany kod Vue często nie zawierał logiki związanej ze stanem aplikacji – narzędzie skupia się na warstwie wizualnej, ale nie integruje się efektywnie z backendem.
• Brak pełnej zgodności z frameworkami Vue (np. Vue Router, Vuex/Pinia) – co oznacza, że deweloper i tak musi dopisywać kluczowe elementy ręcznie.

Wnioski

Locofy.ai to narzędzie, które może znacznie przyspieszyć proces prototypowania i wdrażania podstawowej warstwy wizualnej interfejsu użytkownika. Jednak w obecnym stanie nie jest jeszcze wystarczająco zaawansowane, by generować kod porównywalny z pracą doświadczonego programisty.

Dla zespołów projektowych i programistycznych może to być dobre wsparcie w zakresie szybkiego generowania wersji testowych, jednak pełne wdrożenie kodu produkcyjnego nadal wymaga ingerencji i optymalizacji przez dewelopera.

Czy warto korzystać z Locofy.ai?

Tak, jeśli:

• Potrzebujesz szybko przekształcić projekt z Figmy w działający prototyp.
• Chcesz wygenerować podstawowy kod UI do dalszej pracy.
• Jesteś gotów na ręczne poprawki kodu wynikowego.

Nie, jeśli:

• Oczekujesz w pełni gotowego i zoptymalizowanego kodu Vue.
• Potrzebujesz zaawansowanych interakcji i integracji z backendem.
• Chcesz zachować wysokie standardy kodowania bez konieczności refaktoryzacji.

Podsumowując, Locofy.ai to obiecujące narzędzie, które ma potencjał, ale na chwilę obecną nie jest w stanie w pełni zastąpić pracy programisty. Warto jednak śledzić jego rozwój, bo z czasem może stać się bardziej użyteczne dla zespołów deweloperskich.