Ramki ograniczające
Przegląd
Ramki ograniczające to główny model interakcji Inżynierii odwrotnej. Po przesłaniu obrazu rysujesz prostokątne ramki wokół poszczególnych elementów UI, aby je wyizolować. Każda ramka ograniczająca staje się zaznaczalnym regionem, do którego można przypisać zachowania, przekonwertować na kod lub wyeksportować jako komponent szkieletu.
Przepływ ekranów i grupy
Kanwa Przepływu Ekranów pozwala organizować pracę nad inżynierią odwrotną w grupy. Każda grupa może zawierać wiele obrazów ekranów i może być oznaczona jako Ekran (główne strony, sekcje lub widoki) lub Modal (nakładki, okna dialogowe, wyskakujące okna, szuflady). Kliknij dwukrotnie grupę, aby ją otworzyć i pracować z jej obrazami.
Ręczne ramkowanie
Wybierz narzędzie ramki
Wybierz narzędzie rysowania ramki ograniczającej z paska narzędzi nad kanwą obrazu.
Narysuj ramkę
Kliknij i przeciągnij na obrazie, aby narysować prostokątną ramkę wokół elementu UI — przycisku, karty, paska nawigacji, sekcji hero lub dowolnego komponentu.
Zmień rozmiar i dostosuj
Przeciągnij krawędzie lub rogi dowolnej ramki, aby dostosować jej pozycję i rozmiar. Upewnij się, że ściśle otacza docelowy element.
Przypisz zachowanie
Zaznacz ramkę i zdefiniuj, co element powinien robić — na przykład „otwiera modal", „nawiguje do /o-nas" lub „przełącza rozwijane menu".
Automatyczne ramkowanie AI
Zamiast rysować każdą ramkę ręcznie, użyj automatycznego ramkowania AI, aby Kaiju Hub AI automatycznie wykrył i okonturował elementy UI na Twoim obrazie. AI analizuje układ wizualny i tworzy ramki ograniczające wokół wykrytych komponentów, takich jak nagłówki, przyciski, karty, pola wejściowe, obrazy i elementy nawigacji.
Wykrywanie jednym kliknięciem
Kliknij przycisk automatycznego ramkowania, a AI przeskanuje cały obraz, tworząc ramki ograniczające wokół każdego wykrytego elementu UI.
Edycja po wykryciu
Automatycznie wykryte ramki są w pełni edytowalne. Przenoś, zmieniaj rozmiar, usuwaj lub dodawaj nowe ramki, aby udoskonalić wyniki.
Selektywne ponowne wykrywanie
Uruchom automatyczne wykrywanie na konkretnym regionie obrazu, jeśli potrzebujesz ramek tylko dla części układu.
Kierowanie zachowaniem
Siła ramek ograniczających tkwi w kierowaniu, co każdy element robi. Po oramkowaniu elementu możesz przypisać mu interaktywne zachowania, które zostaną odzwierciedlone w wygenerowanym kodzie lub szkielecie:
Otwiera modal
Kliknięcie elementu otwiera modal/dialog. Określ, jaką treść modal powinien wyświetlać.
Nawiguje do sekcji
Element działa jako link lub przycisk, który nawiguje do innej strony lub sekcji aplikacji.
Przełącza treść
Element pokazuje lub ukrywa powiązaną treść — rozwijane listy, akordeony, rozwijalne panele.
Przesłanie formularza
Element wyzwala walidację i przesłanie formularza.
Niestandardowa akcja
Zdefiniuj dowolny niestandardowy opis zachowania, a AI wygeneruje odpowiednie handlery zdarzeń i logikę.