Editor de machete
Editorul de machete este locul în care proiectați și rafinați ecranele. Bara laterală din stânga conține toate instrumentele de desen și de selecție, centrul este pânza în care plasați și aranjați elementele, iar bara laterală din dreapta afișează proprietățile elementului selectat.
Instrumente
Selectați
Faceți clic pentru a selecta și a muta elementele de pe pânză. Elementele selectate afișează proprietățile lor în bara laterală din dreapta.
Pătrat
Desenați elemente de tip container dreptunghiular pe pânză.
Cerc
Desenați elemente circulare pe pânză.
Text
Adăugați etichete de text și blocuri de conținut.
Imagine
Plasați elemente de tip substituent de imagine.
Buton
Adăugați elemente de tip buton interactive.
Intrare
Adăugați câmpuri de introducere a formularului.
+ (Adăugați ecran)
Adăugați un ecran nou la proiectul machetei.
Elemente blocate
După generarea cadrelor, puteți ajusta, adăuga sau elimina manual componente în editorul de machete pentru a rafina designul.
Modul Storyboard
Modul Storyboard vă permite să vedeți toate machetele și punctele de conectare într-o vedere de ansamblu. Comutați între pânza cu un singur ecran și modul storyboard folosind același buton din bara laterală din stânga. În modul storyboard, fiecare ecran este afișat ca o carte cu o previzualizare a aspectului.
Caracteristici Storyboard
Prezentare generală a machetei
Vedeți toate ecranele dintr-o singură privire, cu numărul de elemente și previzualizări vizuale.
Setare modală
Marcați orice ecran ca fiind un strat modal în loc de o pagină completă.
Faceți clic pentru a edita
Faceți clic pe orice carte de machetă pentru a trece la vizualizarea acesteia pentru editare detaliată.
Controale de zoom
Utilizați controalele de zoom din stânga pentru a mări/micșora storyboard-ul.
Conexiuni de flux
Vizualizați modul în care ecranele sunt conectate prin acțiuni de flux între machete.
Proprietăți element
Zona Machete vă permite să proiectați și să creați prototipuri ale aspectelor interfeței de utilizator în mod vizual. Creați machete pentru a planifica structura aplicației înainte de a scrie cod. Când deschideți Machete, veți vedea ecranul de bun venit cu un card Creați o machetă pentru a începe sau utilizați butonul + Machetă nouă din colțul din dreapta sus.
Tabloul de proprietăți
Poziție (X, Y)
Setați poziția exactă în pixeli a elementului pe pânză.
Dimensiune (lățime, înălțime)
Setați dimensiunile elementului în pixeli.
Z-Index (ordinea straturilor)
Controlați ce elemente apar deasupra celorlalte.
Rază de colț
Setați rotunjirea colțurilor cu o valoare numerică sau utilizați presetările Ascuțit, Rotunjit sau Pilă.
Conținut text
Editați textul afișat în interiorul elementului.
Tabloul de culori
Personalizați fundalul, bordura și culorile textului pentru elementul selectat.
Fluxuri
Fluxurile definesc acțiunile și navigarea între ecrane. Un flux este o acțiune, cum ar fi navigarea către o altă pagină, deschiderea unui strat modal sau direcționarea către o altă zonă. Mici pictograme de legătură de pe pânză indică ce elemente au fluxuri atașate. Machetele sunt conectate automat între ele în timpul generării AI, iar conexiunile de flux sunt create, de asemenea.
Configurarea fluxurilor
TEXT: Selectați un element
Comutați la fila <strong>Repozitoarele mele</strong> pentru a răsfoi și a clona repozitoare din contul dvs. GitHub. Acest lucru necesită conectarea unui cont GitHub în Setări.
TEXT: Deschideți fila Flux
Faceți clic pe <strong>Importați proiect</strong> pentru a adăuga proiectul în panoul dvs. de control.
TEXT: Adăugați o conexiune
Agentul care se deschide în mod implicit este determinat de furnizorul și modul pe care le-ați selectat în zona Informații despre proiect. De fiecare dată când faceți clic stânga pe butonul +, se deschide un tab nou folosind configurația implicită.
TEXT: Vizualizați pe canvas
După ce documentația proiectului machetei a fost generată, îl veți vedea în lista machetelor ca un card de proiect. Pentru a începe generarea cadrelor AI, faceți clic pe <strong>pictograma AI</strong> din colțul din dreapta jos al cardului proiectului. Aceasta deschide creatorul de cadre, unde puteți genera și gestiona cadre individuale pentru fiecare ecran.
Conexiuni de blocare
Faceți clic pe Generați pentru a începe generarea documentației AI. Proiectul machetei va apărea în lista dvs. în timp ce este creată documentația.
Editare AI
Construirea cadrelor
Solicitare conștientă de context
Ecran unic
Când editați un singur ecran, bara de solicitare afișează „Editare „Numele ecranului””, iar modificările AI se aplică numai acelui ecran.
Storyboard
Când sunteți în modul storyboard, AI poate edita toate machetele dintr-o singură dată sau poate crea machete noi folosind cele existente ca referință.
Sistemul de context Kaiju Hub AI
Utilizați pictograma microfonului din bara de solicitare pentru a dicta instrucțiunile în loc să le tastați.
Editare CLI
Faceți clic pe Editare CLI pentru un mod de editare avansat, cu mai mult control asupra modificărilor generate de AI.
Export și integrare
Odată ce documentația este finalizată, puteți începe să generați fiecare cadru individual din editorul de machete.