Build mode: muokkaa oikeaa käyttöliittymääsi visuaalisesti

Build mode muuttaa adoptoidun codebasen esikatselun visuaaliseksi editoriksi: klikkaa elementtiä ajossa olevassa sovelluksessasi, muuta sitä ruudulla — teksti, välit, väri — ja muutos kirjoittuu takaisin todelliseen koodiin 1design/<slug> -haaralla. Se on käyttöliittymän muokkausta siellä, missä käyttöliittymä elää.

Avaaminen

Codebase-projektissa Build-välilehti Previewn ja Sketchin vieressä vaihtaa paneelin Build modeen: sovelluksesi renderöityy livenä ja edit-layer aktivoituu sen päälle. Hover korostaa elementin kursorin alla; klikkaus valitsee sen ja avaa sen edit-pinnan — ominaisuudet, joita elementti paljastaa, muokattavina paikallaan.

Build mode — ajossa oleva sovellus, elementti valittuna muokkaukseen

Muokkaus ruudulla

Edit-pinta kattaa ominaisuudet, jotka ovat järkeviä visuaalisesti:

  • Teksti — klikkaa kopiota, kirjoita korvaava
  • Välit — padding ja gap valitulla elementillä
  • Väri — täyttö tai tekstiväri, projektin tokeneista
  • Tyyppi — koko, paino, perhe tekstielementeillä

Muutokset pätevät livenä esikatselussa — näet muokkauksen siellä, missä se laskeutuu, ei ominaisuuspaneelissa, joka on irrotettu tuloksesta.

Takaisin koodiin kirjoittaminen

Visuaalinen muokkaus ei ole mock-overlay — se kartoittuu elementin todellisiin tyyleihin ja kirjoittaa muutoksen tiedostoon, joka omistaa ne, 1design/<slug>-haaralla. Seuraava turn tai seuraava build lukee sitä kuten mitä tahansa koodimuutosta — worktree-diff kasvaa tasan tekemälläsi muokkauksella.

Adoptoi repo, lähetä turn, branch bar näyttää commitin ahead.

Diff-scoped tarkistus

Codebase-projektit verifioivat diffin, eivät koko codebase'ta — turnin (tai muokkauksen) muuttuneet tiedostot tarkistetaan, ja branch barin Review changes näyttää tarkalleen, mikä liikkui. Visuaalinen muokkaus on diff kuten mikä tahansa muu — se laskeutuu haaralle, rajattuna tiedostoihin, joita se kosketti.

Build vs Preview vs Sketch

  • Preview — katso ajossa olevaa sovellusta; ohjaa kommenteilla ja pinneillä
  • Build — muokkaa käyttöliittymää visuaalisesti, muutokset kirjoittuvat koodiin
  • Sketch — pudota .1d-luonnoksia, jotka kartoittuvat komponentteihin

Build mode on sille muokkaukselle, jonka voit nähdä — painike, jonka pitäisi olla isompi, otsikko, jonka pitäisi olla tiukempi. Kun muutos on uusi virta tai monen elementin uudelleenjärjestely, briefi on edelleen työkalu.

Review ja merge

Build-mode-muokkaukset elävät samalla worktree-haaralla kuin agentin turnit — branch bar seuraa ahead-commiteja, Review changes näyttää työn tuottaman diffin, ja Merge into main tuo sen takaisin, kun se on oikein. Muokkaus-koodiin-reitti on todellinen, joten merge on todellinen merge.

Missä se on hyvä

  • Visuaaliset kierrokset — välit, väri, tyyppi koko sovelluksen yli, muokattuna paikallaan
  • Kopimuokkaukset — korjaa sanat ruudulla itsessään
  • Token-säätö — hienosäädä väriä tai kokoa ja katso sen laskeutuvan koodiin
  • Viimeinen maili — polish-kierros, jossa briefi on overkilleä

Vinkki: Build mode -muokkaukset ovat koodia, joten tarkista diffi ennen mergeämistä — visuaalinen tweakaus on rehellistä koodia, mutta "näyttää oikealta ruudulla" ja "lukeutuu oikein tiedostossa" ovat molemmat tarkistamisen arvoisia ennen kuin haara mergee.

Katso myös