Mis on Visual Editor?

Visual Editor on uus funktsioon Cursor Browseris, mis võimaldab veebirakendusi visuaalselt redigeerida, samal ajal kui AI agent töötab koos sinuga, et uuendada aluskoodi. See toob su veebirakenduse, koodibaasi ja visuaalsed redigeerimistööriistad ühte aknasse, ületades lõhe disaini ja arenduse vahel. Sa saad elemente lohistada, komponente ja nende omadusi üle vaadata ning muudatusi kirjeldada osutades ja klõpsates – kõik seda ilma töövoogu katkestamata.

Kellele see on mõeldud

• Frontend-arendajad, kes soovivad kiiremini iteratiivselt täiustada kasutajaliidese paigutusi ja stiile, ilma et peaksid käsitsi koodifaile otsima.
• Disainiinsenerid, kes peavad ületama lõhe visuaalsete makettide ja tootmiskoodi vahel, tehes otse brauseris reaalajas kohandusi.
• React-arendajad, kes töötavad komponendipõhiste arhitektuuridega ja vajavad võimalust testida erinevaid olekuid, omadusi ja stiilivariatsioone lennult.

Peamised funktsioonid

Ümberkorraldamine lohistamisega

Visuaalne redaktor võimaldab saidi paigutust ja struktuuri otse manipuleerida, lohistades renderdatud elemente üle DOM-puu. Sa saad vahetada nuppude järjekorda, pöörata sektsioone ja testida erinevaid ruudustiku konfiguratsioone ilma konteksti vahetamata. Kui visuaalne disain vastab su mõtetele, ütle agendile, et see rakendaks – agent leiab asjakohased komponendid ja uuendab sinu eest aluskoodi.

Komponentide olekute otse testimine

Kaasaegsed Reactiga loodud rakendused kasutavad komponentide omadusi erinevate olekute juhtimiseks. Visuaalne redaktor kuvab need omadused külgribal, muutes variantide vahel vahetamise ja igaühe renderduse nägemise lihtsaks. See annab kohest tagasisidet, kuidas komponendid erinevates tingimustes käituvad.

Omaduste kohandamine visuaalsete juhtnuppudega

Külgribal on liugurid, värvipaletid ja sinu enda disainisüsteemi tokenid stiilide täpseks häälestamiseks. Iga muudatus on täielikult interaktiivne: reaalajas värvivalijad eelvaatavad su valikuid ja juhtnupud võimaldavad täpselt ümber korraldada ruudustikke, flexbox-paigutusi ja tüpograafiat. Muudatused ilmuvad brauseris koheselt.

Osuta ja käsi

Klõpsa mis tahes elemendil oma liideses ja kirjelda, mida soovid muuta. Võid klõpsata ühel elemendil ja öelda "tee see suuremaks", klõpsata teisel ja käsida "muuda see punaseks" ning kolmandal tippida "vaheta nende järjekord". Agendid töötavad paralleelselt ja mõne sekundi jooksul on su muudatused elus.

Mis paistab silma

"Visuaalne redaktor ühendab su töö disaini ja koodi vahel, aidates sul paremini sõnastada, mida soovid, nii et teostus ei oleks piiratud mehaaniliste oskustega."

See on põhiline arusaam: selle asemel, et sundida sind visuaalseid ideid käsitsi koodiks tõlkima, laseb Visual Editor sul muudatusi loomulikult väljendada lohistamise, osutamise ja loomuliku keele kaudu. Agent hoolitseb koodi tõlkimise eest, nii et sa keskendud disaini eesmärgile, mitte teostuse üksikasjadele. See on samm tuleviku suunas, kus agendid on sügavalt seotud rakenduste loomisega ja inimesed väljendavad ideid liideste kaudu, mis ühendavad mõtte ja koodi otse.

Tasub proovida, kui…

Sa ehitad veebirakendusi ja soovid kiirendada oma kasutajaliidese iteratsioonitsüklit. Kui oled väsinud brauseri, koodiredaktori ja disainitööriistade vahel vahetamisest lihtsate paigutuse või stiili muudatuste tegemiseks, pakub Visual Editor ühtset lähenemist. See on eriti väärtuslik, kui töötad Reacti komponentidega ja pead testima mitut olekut või kui teed koostööd disaineritega, kes soovivad muudatusi reaalajas näha.