一个文件进行 UI 设计：单个打开文件如何取代切换
单文件 UI 设计工作流程将布局、状态、运动、逻辑和数据绑定保存在单个打开的文件中。它改变了什么，它没有解决什么，以及ExodeUI如何使用它。
核心要点
单文件 UI 设计工作流程将组件的布局、交互状态、运动、逻辑和数据绑定保留在一个打开的文件中，而不是将它们分散在设计文件、原型和代码库中。该文件成为设计人员编辑、开发人员审查和人工智能代理可以读取的内容。 ExodeUI 使用此模型：.exode 文件描述组件，运行时包在应用程序中播放它。
UI设计中的“一个文件”是什么意思？
这意味着该组件有一个权威来源。画板、悬停和按下状态、弹簧值、决定接下来出现哪个状态的条件以及应用程序可以设置的输入都在同一个文档中。单独的交接记录中没有留下任何重要内容。当文件更改时，组件也会更改。
一个文件即可消除切换问题
在典型的交接中，设计人员会提供静态文件以及原型和运动的书面描述。开发人员在代码中重建该动作，两个版本立即发生变化。单文件工作流程消除了文件所覆盖部分的重建步骤。它并没有消除审查的需要，但它为审查者提供了相同的工件，而不是对其的两个描述。
打开的 UI 设计文件包含哪些内容
确切的结构取决于工具，但有用的文件涵盖相同的工作：
- 布局，包括断点以及组件如何回流
- 交互状态，如空闲、悬停、按下、加载、成功和错误
- 运动，包括时间线、弹簧物理和状态之间的转换
- 决定哪个状态处于活动状态的逻辑和条件
- 输入和事件，以便应用程序代码可以驱动组件并对其做出反应
- 运行时来自应用程序的值的数据绑定
文件之外的内容
组件文件不是整个应用程序。路由、身份验证、数据获取、权限、分析和围绕交互式控件的可访问性包装器保留在您的代码库中。平台导航和系统手势通常也保持特定于平台。明确这一边界很重要：当单文件工作流程处理交互式组件并将应用程序问题留给应用程序时，它更容易采用。
一个团队可以审查一份文件吗？
是的，如果格式是开放且可读的。 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 文件