一個檔案進行 UI 設計：單一開啟檔案如何取代切換
單一檔案 UI 設計工作流程將佈局、狀態、動作、邏輯和資料綁定保存在單一開啟的檔案中。它改變了什麼，它沒有解決什麼，以及ExodeUI如何使用它。
核心要點
單一檔案 UI 設計工作流程將元件的佈局、互動狀態、動作、邏輯和資料綁定保留在一個開啟的檔案中，而不是將它們分散在設計檔案、原型和程式碼庫中。該文件成為設計人員編輯、開發人員審查和人工智慧代理可以讀取的內容。 ExodeUI 使用此模型：.exode 檔案描述元件，運行時套件在應用程式中播放它。
UI設計中的「一個檔案」是什麼意思？
这意味着该组件有一个权威来源。畫板、懸停和按下狀態、彈簧值、決定接下來出現哪個狀態的條件以及應用程式可以設定的輸入都在同一個文件中。單獨的交接記錄中沒有留下任何重要內容。当文件更改时，组件也会更改。
The handoff problem one file removes
在典型的交接中，設計人員會提供靜態文件以及原型和運動的書面描述。開發人員在程式碼中重建該動作，兩個版本立即變更。單一文件工作流程消除了文件所覆蓋部分的重建步驟。它並沒有消除審查的需要，但它為審查者提供了相同的工件，而不是對其的兩個描述。
What goes into an open UI design file
確切的結構取決於工具，但有用的文件涵蓋相同的工作：
- Layout, including breakpoints and how the component reflows
- 互動狀態，如空閒、懸停、按下、載入、成功和錯誤
- 運動，包括時間軸、彈簧物理和狀態之間的轉換
- 決定哪個狀態處於活動狀態的邏輯和條件
- 輸入和事件，以便應用程式程式碼可以驅動元件並對其做出反應
- Data bindings for values that come from the app at runtime
文件以外的內容
組件文件不是整個應用程式。路由、身份驗證、資料獲取、權限、分析和圍繞互動式控制項的可訪問性包裝器保留在您的程式碼庫中。平台導航和系統手勢通常也保持特定於平台。明確這一邊界很重要：當單一文件工作流程處理互動式元件並將應用程式問題留給應用程式時，它更容易採用。
一個團隊可以審查一份文件嗎？
是的，如果格式是開放且可讀的。 ExodeUI 將元件儲存在開啟的 .exode JSON 檔案中，因此可以對變更進行比較、審查並將其保留在版本控制中。這是相對於二進位設計檔案的實際優勢：審閱者可以看到檔案中發生了什麼變化，而人工智慧編碼工具可以在沒有專有解碼器的情況下讀取它。開放性並不能回答所有治理問題，但它使審查成為可能。
ExodeUI如何使用一個文件
在 ExodeUI 中，.exode 檔案可以保存佈局、斷點、時間軸、狀態機、彈簧物理、邏輯、輸入和資料綁定。運行時包播放 React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和 Flutter 中的檔案。您的程式碼傳入輸入並接收返回的事件，而不是重述動作。相同的檔案可以在瀏覽器或桌面編輯器中打開，AI編碼工具可以透過MCP伺服器對其進行編輯。
當一個文件是錯誤的選擇時
一個檔案不太適合非互動式元件的工作：長格式影片、大量 3D 場景或用於早期構思的自由格式白板。當團隊沒有審查流程並且需要一個文件來自行執行標準時，它也不適合。這種格式可以使良好的實踐變得更加容易。它不能取代實踐。
生產實施片段
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()}
/>
);
}要記住的關鍵 Principle
- 單一文件工作流程將佈局、狀態、動作、邏輯和輸入保存在一份權威文件中
- 它消除了互動式元件的重建步驟，而不需要審查
- 路由、身份驗證和資料獲取等應用程式問題保留在您的程式碼庫中
- 開放的 JSON 原始檔可以透過 AI 工具進行比較、版本控制和讀取
- ExodeUI 透過 Web、行動裝置和桌面框架上的執行時間播放相同的 .exode 文件