Jeden soubor pro návrh uživatelského rozhraní: Jak jeden otevřený soubor nahrazuje Handoff
Pracovní postup návrhu uživatelského rozhraní s jedním souborem udržuje rozložení, stavy, pohyb, logiku a datové vazby v jediném otevřeném souboru. Co mění, co neřeší a jak to ExodeUI využívá.
Core Takeaway
Pracovní postup návrhu uživatelského rozhraní s jedním souborem zachovává rozvržení, stavy interakcí, pohyb, logiku a datové vazby komponenty v jednom otevřeném souboru, místo aby je rozkládal v souboru návrhu, prototypu a kódové základně. Soubor se stane věcí, kterou návrháři upravují, vývojáři kontrolují a mohou číst agenti AI. ExodeUI používá tento model: soubor .exode popisuje komponentu a runtime balíčky ji přehrávají v aplikaci.
Co znamená „jeden soubor“ v návrhu uživatelského rozhraní?
To znamená, že komponenta má jeden autoritativní zdroj. Kreslicí plátna, stavy najetí a stisknutí, hodnoty pružin, podmínky, které rozhodují o dalším stavu, a vstupy, které může vaše aplikace nastavit, to vše v jednom dokumentu. Nic důležitého není ponecháno v samostatné předávací poznámce. Když se soubor změní, změní se komponenta.
Problém s předáním jeden soubor odstraní
Při typickém předávání návrhář dodá statický soubor plus prototyp a písemný popis pohybu. Vývojář přestaví tento pohyb v kódu a obě verze se okamžitě posunou. Pracovní postup s jedním souborem odstraňuje krok přestavby pro části, které soubor pokrývá. Neodstraňuje potřebu recenze, ale dává recenzentům stejný artefakt namísto dvou jeho popisů.
Co jde do otevřeného souboru návrhu uživatelského rozhraní
Přesná struktura závisí na nástroji, ale užitečný soubor pokrývá stejné úlohy:
- Rozložení, včetně bodů přerušení a způsobu přeformátování komponenty
- Stavy interakce, jako je nečinnost, visení, stisknuté, načítání, úspěch a chyba
- Pohyb včetně časových os, fyzika pružin a přechody mezi stavy
- Logika a podmínky, které rozhodují o tom, který stav je aktivní
- Vstupy a události, takže kód aplikace může řídit komponentu a reagovat na ni
- Datové vazby pro hodnoty, které pocházejí z aplikace za běhu
Co zůstane mimo soubor
Komponentní soubor není celá aplikace. Směrování, ověřování, načítání dat, oprávnění, analýzy a obal pro usnadnění kolem interaktivního ovládání zůstávají ve vaší kódové základně. Navigace na platformě a systémová gesta obvykle zůstávají také specifické pro platformu. Ujasnit si tuto hranici je důležité: jednosouborový pracovní postup je snazší přijmout, když zpracovává interaktivní komponentu a ponechává starosti s aplikací na aplikaci.
Může tým zkontrolovat jeden soubor?
Ano, pokud je formát otevřený a čitelný. ExodeUI ukládá komponentu do otevřeného souboru .exode JSON, takže změny lze porovnávat, kontrolovat a uchovávat ve správě verzí. To je praktická výhoda oproti binárním souborům návrhu: recenzent může vidět, co se v souboru změnilo, a nástroj pro kódování AI to může přečíst bez proprietárního dekodéru. Otevřenost neodpovídá na každou otázku správy, ale umožňuje kontrolu.
Jak ExodeUI používá jeden soubor
V ExodeUI může soubor .exode obsahovat rozložení, body přerušení, časové osy, stavové stroje, fyziku pružin, logiku, vstupy a datové vazby. Runtime balíčky přehrávají soubor v React, Vue, Svelte, Angular, Solid, React Native, SwiftUI a Flutter. Váš kód předává vstupy a přijímá události zpět místo toho, aby opakoval pohyb. Stejný soubor lze otevřít v prohlížeči nebo desktopovém editoru a nástroje pro kódování AI jej mohou upravovat prostřednictvím serveru MCP.
Když je jeden soubor špatná volba
Jeden soubor se nehodí pro práci, která není interaktivní komponentou: dlouhé video, těžké 3D scény nebo tabule volného tvaru pro rané nápady. Je také špatné, když tým nemá žádný proces kontroly a potřebuje jeden soubor, aby sám prosadil standardy. Formát může usnadnit dobrou praxi. Nemůže nahradit praxi.
Fragment implementace výroby
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()}
/>
);
}Klíč Principle k zapamatování
- Pracovní postup s jedním souborem uchovává rozložení, stavy, pohyb, logiku a vstupy v jednom autoritativním dokumentu
- Odstraňuje krok přestavby pro interaktivní komponentu, nikoli potřebu revize
- Aplikační záležitosti, jako je směrování, ověřování a načítání dat, zůstávají ve vaší kódové základně
- Otevřený zdrojový soubor JSON lze porovnávat, verzovat a číst pomocí nástrojů AI
- ExodeUI přehrává stejný soubor .exode prostřednictvím běhových prostředí na webu, mobilních zařízeních a desktopech