Én fil for UI-design: Hvordan en enkelt åpen fil erstatter Handoff
En arbeidsflyt for UI-design med én fil holder layout, tilstander, bevegelse, logikk og databindinger i en enkelt åpen fil. Hva det endrer, hva det ikke løser, og hvordan ExodeUI bruker det.
Kjerne takeaway
En arbeidsflyt for design av brukergrensesnittet med én fil holder layout, interaksjonstilstander, bevegelse, logikk og databindinger til en komponent i én åpen fil i stedet for å spre dem over en designfil, en prototype og en kodebase. Filen blir ting designere redigerer, utviklere vurderer og AI-agenter kan lese. ExodeUI bruker denne modellen: en .exode-fil beskriver en komponent, og kjøretidspakker spiller den av i appen.
Hva betyr "én fil" i UI-design?
Det betyr at komponenten har én autoritativ kilde. Tegnebrettene, tilstandene for sveve og trykket, fjærverdiene, forholdene som bestemmer hvilken tilstand som kommer neste gang, og inngangene appen din kan sette, alt live i samme dokument. Ingenting viktig er igjen i et eget overleveringsnotat. Når filen endres, endres komponenten.
Overleveringsproblemet en fil fjerner
I en typisk overlevering leverer designeren en statisk fil pluss en prototype og en skriftlig beskrivelse av bevegelsen. En utvikler gjenoppbygger den bevegelsen i kode, og de to versjonene driver umiddelbart. En arbeidsflyt med én fil fjerner gjenoppbyggingstrinnet for delene filen dekker. Det fjerner ikke behovet for gjennomgang, men det gir anmeldere den samme artefakten i stedet for to beskrivelser av den.
Hva går inn i en åpen UI-designfil
Den nøyaktige strukturen avhenger av verktøyet, men en nyttig fil dekker de samme jobbene:
- Layout, inkludert bruddpunkter og hvordan komponenten flyter på nytt
- Interaksjonstilstander som inaktiv, hover, trykket, lasting, suksess og feil
- Bevegelse, inkludert tidslinjer, vårfysikk og overganger mellom tilstander
- Logikk og forhold som bestemmer hvilken tilstand som er aktiv
- Inndata og hendelser slik at applikasjonskode kan drive komponenten og reagere på den
- Databindinger for verdier som kommer fra appen under kjøring
Hva forblir utenfor filen
En komponentfil er ikke hele applikasjonen. Ruting, autentisering, datahenting, tillatelser, analyser og tilgjengelighetsomslaget rundt en interaktiv kontroll blir i kodebasen din. Plattformnavigasjon og systembevegelser forblir vanligvis også plattformspesifikke. Å være tydelig på denne grensen er viktig: en arbeidsflyt med én fil er lettere å ta i bruk når den håndterer den interaktive komponenten og overlater applikasjonsbekymringer til applikasjonen.
Kan et team gjennomgå én fil?
Ja, hvis formatet er åpent og lesbart. ExodeUI lagrer en komponent i en åpen .exode JSON-fil, slik at endringer kan endres, gjennomgås og beholdes i versjonskontroll. Det er en praktisk fordel i forhold til binære designfiler: en anmelder kan se hva som er endret i filen, og et AI-kodeverktøy kan lese den uten en proprietær dekoder. Åpenhet svarer ikke på alle styringsspørsmål, men den gjør gjennomgang mulig.
Hvordan ExodeUI bruker én fil
I ExodeUI kan en .exode-fil inneholde layout, bruddpunkter, tidslinjer, tilstandsmaskiner, fjærfysikk, logikk, innganger og databindinger. Runtime-pakker spiller av filen i React, Vue, Svelte, Angular, Solid, React Native, SwiftUI og Flutter. Koden din sender innganger inn og mottar hendelser tilbake i stedet for å gjenta bevegelsen. Den samme filen kan åpnes i nettleseren eller skrivebordsredigereren, og AI-kodingsverktøy kan redigere den gjennom MCP-serveren.
Når en fil er feil valg
Én fil passer dårlig for arbeid som ikke er en interaktiv komponent: video i lang format, tunge 3D-scener eller en tavle i fri form for tidlige ideer. Det passer også dårlig når et team ikke har noen gjennomgangsprosess og trenger én fil for å håndheve standarder av seg selv. Formatet kan gjøre god praksis enklere. Det kan ikke erstatte praksisen.
Snippet for produksjonsimplementering
import { ExodeUICanvas } from 'exodeui';
// One component, one file. Layout, states, motion and logic stay in the
// .exode file; the app only supplies inputs and handles events.
export function CheckoutButton({ loading, disabled, onComplete }) {
return (
<ExodeUICanvas
src="/checkout_button.exode"
inputs={{ loading, disabled }}
onTrigger={(name) => name === 'complete' && onComplete()}
/>
);
}Tast Principles å huske
- En arbeidsflyt med én fil holder layout, tilstander, bevegelse, logikk og inndata i ett autoritativt dokument
- Det fjerner gjenoppbyggingstrinnet for den interaktive komponenten, ikke behovet for gjennomgang
- Applikasjonsproblemer som ruting, autentisering og datahenting forblir i kodebasen din
- En åpen JSON-kildefil kan endres, versjoneres og leses av AI-verktøy
- ExodeUI spiller den samme .exode-filen gjennom kjøretider på nett-, mobil- og skrivebordsrammer