Eén bestand voor UI-ontwerp: hoe één enkel geopend bestand Handoff vervangt
Een UI-ontwerpworkflow uit één bestand houdt lay-out, statussen, beweging, logica en gegevensbindingen in één enkel geopend bestand. Wat het verandert, wat het niet oplost en hoe ExodeUI het gebruikt.
Kern afhaalmaaltijd
Een UI-ontwerpworkflow uit één bestand houdt de lay-out, interactiestatussen, beweging, logica en databindingen van een component in één open bestand in plaats van ze te verspreiden over een ontwerpbestand, een prototype en een codebase. Het bestand wordt het ding dat ontwerpers bewerken, ontwikkelaars beoordelen en AI-agenten kunnen lezen. ExodeUI gebruikt dit model: een .exode-bestand beschrijft een component, en runtime-pakketten spelen deze af in de app.
Wat betekent "één bestand" in UI-ontwerp?
Het betekent dat de component één gezaghebbende bron heeft. De tekengebieden, de hover- en ingedrukte statussen, de veerwaarden, de voorwaarden die bepalen welke status daarna komt, en de invoer die uw app kan instellen, zijn allemaal live in hetzelfde document te vinden. Er wordt niets belangrijks achtergelaten in een afzonderlijk overdrachtsbriefje. Wanneer het bestand verandert, verandert de component.
Het overdrachtsprobleem wordt met één bestand opgelost
Bij een typische overdracht levert de ontwerper een statisch bestand plus een prototype en een schriftelijke beschrijving van de beweging. Een ontwikkelaar bouwt die beweging opnieuw op in code, en de twee versies drijven onmiddellijk uiteen. Bij een workflow met één bestand hoeft u de stap voor het opnieuw opbouwen niet meer uit te voeren voor de onderdelen die onder het bestand vallen. Het neemt de noodzaak van beoordeling niet weg, maar het geeft recensenten hetzelfde artefact in plaats van twee beschrijvingen ervan.
Wat gaat er in een open UI-ontwerpbestand?
De exacte structuur hangt af van de tool, maar een handig bestand omvat dezelfde taken:
- Lay-out, inclusief breekpunten en hoe de component opnieuw verloopt
- Interactiestatussen zoals inactief, zweven, ingedrukt, laden, succes en fout
- Beweging, inclusief tijdlijnen, veerfysica en overgangen tussen toestanden
- Logica en voorwaarden die bepalen welke status actief is
- Invoer en gebeurtenissen zodat applicatiecode de component kan aansturen en erop kan reageren
- Gegevensbindingen voor waarden die tijdens runtime uit de app komen
Wat buiten het bestand blijft
Een componentbestand is niet de hele applicatie. Routing, authenticatie, gegevens ophalen, machtigingen, analyses en de toegankelijkheidsverpakking rond een interactieve controle blijven in uw codebase. Platformnavigatie en systeemgebaren blijven meestal ook platformspecifiek. Het is belangrijk om duidelijk te zijn over die grens: een workflow die uit één bestand bestaat, is gemakkelijker te implementeren als deze de interactieve component afhandelt en de zorgen over de applicatie aan de applicatie overlaat.
Kan een team één bestand beoordelen?
Ja, als het formaat open en leesbaar is. ExodeUI slaat een component op in een open .exode JSON-bestand, zodat wijzigingen kunnen worden doorgevoerd, beoordeeld en in versiebeheer kunnen worden bewaard. Dat is een praktisch voordeel ten opzichte van binaire ontwerpbestanden: een recensent kan zien wat er in het bestand is veranderd, en een AI-coderingstool kan het lezen zonder een eigen decoder. Openheid beantwoordt niet iedere governancevraag, maar maakt wel toetsing mogelijk.
Hoe ExodeUI één bestand gebruikt
In ExodeUI kan een .exode-bestand lay-out, breekpunten, tijdlijnen, toestandsmachines, veerfysica, logica, invoer en gegevensbindingen bevatten. Runtime-pakketten spelen het bestand af in React, Vue, Svelte, Angular, Solid, React Native, SwiftUI en Flutter. Uw code geeft invoer door en ontvangt gebeurtenissen terug in plaats van de beweging opnieuw uit te voeren. Hetzelfde bestand kan worden geopend in de browser of desktopeditor, en AI-coderingstools kunnen het bewerken via de MCP-server.
Wanneer één bestand de verkeerde keuze is
Eén bestand is slecht geschikt voor werk dat geen interactief onderdeel is: lange video, zware 3D-scènes of een whiteboard met vrije vorm voor vroege ideeën. Het past ook niet goed als een team geen beoordelingsproces heeft en één bestand nodig heeft om zelf de normen af te dwingen. Het formaat kan goede praktijken eenvoudiger maken. Het kan de praktijk niet vervangen.
Productie-implementatiefragment
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()}
/>
);
}Toets Principles in om te onthouden
- Een workflow van één bestand houdt de lay-out, status, beweging, logica en invoer in één gezaghebbend document
- Het verwijdert de herbouwstap voor de interactieve component, niet de noodzaak van beoordeling
- Applicatieproblemen zoals routing, authenticatie en het ophalen van gegevens blijven in uw codebase
- Een open JSON-bronbestand kan worden gedifferentieerd, geversieerd en gelezen door AI-tools
- ExodeUI speelt hetzelfde .exode-bestand af via runtimes op web-, mobiele en desktopframeworks