Generování kódu a wireframe
Přehled
Vyberte cílový framework pro generování kódu (např. React, Vue, Svelte). Vygenerovaný kód bude používat syntaxi a vzory vybraného frameworku.
Postranní panel s AI asistentem
Záložky Komponenty / Wireframy
Obrazové skupiny
Zobrazuje seznam všech vašich obrazových skupin pro aktuální reverzní projekt. Vyberte skupinu a prohlédněte si její obrázky a nakonfigurujte generování. Každá skupina zobrazuje počet obrázků.
Generovat bloky
Kliknutím spustíte generování AI. AI analyzuje vybrané obrázky ve skupině spolu s ohraničujícími rámečky a chováním a vytvoří výstup.
Generovat kód
Převeďte anotovaný obrázek na funkční kód komponent pro váš cílový framework (React, Vue, Svelte atd.). Vygenerovaný kód zahrnuje rozvržení, styly a veškeré chování, které jste definovali v ohraničujících rámečcích.
Generovat wireframe
Exportujte anotovaný obrázek jako rozvržení wireframu do nástroje Wireframe. Každý ohraničující rámeček se stane prvkem wireframu, který můžete dále vylepšovat, uspořádávat a propojovat s dalšími obrazovkami.
Výběr frameworku
Vyberte cílový framework před generováním. Mezi podporované frameworky patří React, Vue, Svelte, SolidJS, Angular a další.
Výběr modelu Vision
Mapování chování
Chování přiřazené ohraničujícím rámečkům se překládá do obslužných funkcí, navigační logiky, modalit a dalšího interaktivního kódu ve výstupu.
Přesnost rozvržení
AI používá pozice a velikosti ohraničujících rámečků z obrázku a vytváří rozvržení, které úzce odpovídá původnímu vizuálnímu návrhu.
Funkce generování kódu
Uložit do bloků
Vygenerované komponenty lze uložit přímo do knihovny bloků pro opětovné použití v různých projektech.
Přidat do projektu
Vložte vygenerovaný kód přímo do svého aktuálního projektu jako nové soubory komponent.
Seznam úkolů
Podrobnosti o úkolu
Uložit do bloků
Kliknutím na libovolný úkol se otevře podrobné zobrazení, které zobrazuje vše o daném úkolu – prompt nebo vstup, vygenerovaný výstup a metadata o poskytovateli AI a modelu, který byl použit.
Filtry sekcí
Filtrujte úkoly podle sekce pomocí záložek v horní části: Všechny, Projekty, Bloky, Wireframy, Reverzní inženýrství a Automatizace. Každá záložka zobrazuje počet úkolů v dané kategorii.
Výběr frameworku
Přepínejte mezi generováním kódu komponent (záložka Komponenty) nebo rozvržení wireframu (záložka Wireframy) z anotovaných obrázků.