Generowanie kodu i szkieletu
Przegląd
Po opisaniu obrazu ramkami ograniczającymi i przypisaniu zachowań możesz wygenerować działający kod komponentu lub układ szkieletu. AI używa pozycji ramek ograniczających, typów elementów i kierunków zachowań do tworzenia dokładnych danych wyjściowych.
Panel boczny asystenta AI
Panel Asystenta AI to prawy panel boczny używany do konfiguracji i wyzwalania generowania kodu lub szkieletu. Zawiera następujące kontrolki:
Selektor modelu wizyjnego
Wybierz, który model wizyjny AI użyć do analizy obrazów i generowania danych wyjściowych. Różne modele mogą dawać różne poziomy szczegółowości i dokładności.
Selektor frameworka
Wybierz docelowy framework do generowania kodu (np. React, Vue, Svelte). Wygenerowany kod będzie używał składni i wzorców wybranego frameworka.
Zakładki Komponenty / Szkielety
Przełączaj się między generowaniem kodu komponentów (zakładka Komponenty) a układami szkieletów (zakładka Szkielety) z opisanych obrazów.
Grupy obrazów
Wymienia wszystkie Twoje grupy obrazów dla bieżącego projektu inżynierii odwrotnej. Wybierz grupę, aby wyświetlić podgląd jej obrazów i skonfigurować generowanie. Każda grupa pokazuje liczbę obrazów.
Generuj bloki
Kliknij, aby rozpocząć proces generowania AI. AI analizuje obrazy wybranej grupy wraz z wszelkimi adnotacjami ramek ograniczających i zachowaniami, aby wytworzyć dane wyjściowe.
Tryby wyjścia
Generuj kod
Konwertuj opisany obraz na działający kod komponentu dla docelowego frameworka (React, Vue, Svelte itp.). Wygenerowany kod zawiera układ, stylizację i wszelkie zachowania zdefiniowane na ramkach ograniczających.
Generuj szkielet
Eksportuj opisany obraz jako układ szkieletu, który otwiera się w narzędziu Szkielet. Każda ramka ograniczająca staje się elementem szkieletu, który możesz dalej udoskonalać, przearanżować i połączyć z innymi ekranami.
Funkcje generowania kodu
Wybór frameworka
Wybierz docelowy framework przed generowaniem. Obsługiwane frameworki obejmują React, Vue, Svelte, SolidJS, Angular i inne.
Mapowanie zachowań
Zachowania przypisane do ramek ograniczających są tłumaczone na handlery zdarzeń, logikę nawigacji, modale i inny interaktywny kod w danych wyjściowych.
Dokładność układu
AI używa pozycji i rozmiarów ramek ograniczających z obrazu, aby wytworzyć układ ściśle odpowiadający oryginalnemu projektowi wizualnemu.
Zapisz do bloków
Wygenerowane komponenty mogą być zapisane bezpośrednio do Biblioteki bloków do ponownego użycia w różnych projektach.
Dodaj do projektu
Wstaw wygenerowany kod bezpośrednio do bieżącego projektu jako nowe pliki komponentów.
Wskazówki
Aby uzyskać najlepsze wyniki, używaj obrazów w wysokiej rozdzielczości z wyraźnymi elementami UI. Ściśle rysuj ramki ograniczające wokół każdego elementu dla dokładniejszego generowania kodu. Przypisuj konkretne zachowania zamiast niejasnych opisów — „otwiera modal rejestracji" działa lepiej niż „robi coś". AI działa najlepiej ze standardowymi układami webowymi i typowymi wzorcami UI.