Один файл для дизайну інтерфейсу користувача: як один відкритий файл замінює Handoff
Однофайловий робочий процес розробки інтерфейсу користувача зберігає макет, стани, рух, логіку та прив’язки даних в одному відкритому файлі. Що він змінює, що не вирішує і як ExodeUI це використовує.
Основний винос
Однофайловий робочий процес розробки інтерфейсу користувача зберігає макет, стани взаємодії, рух, логіку та прив’язки даних компонента в одному відкритому файлі замість того, щоб розповсюджувати їх у файлі дизайну, прототипі та кодовій базі. Файл стає тим, що редагують дизайнери, переглядають розробники, а агенти ШІ можуть читати. ExodeUI використовує цю модель: файл .exode описує компонент, а пакети виконання відтворюють його в програмі.
Що означає «один файл» у дизайні інтерфейсу користувача?
Це означає, що компонент має одне авторитетне джерело. Монтажні області, стани наведення та натискання, пружинні значення, умови, які визначають, який стан буде наступним, і вхідні дані, які ваша програма може встановити, — усе це живе в одному документі. Нічого важливого не залишається в окремій записці про передачу. Коли змінюється файл, змінюється компонент.
Проблему передачі один файл видаляє
У типовому передачі, дизайнер надає статичний файл плюс прототип і письмовий опис руху. Розробник перебудовує цей рух у коді, і дві версії негайно змінюються. Робочий процес з одним файлом усуває етап відновлення для частин, які охоплює файл. Це не усуває потреби в перегляді, але дає рецензентам той самий артефакт замість двох його описів.
Що входить у відкритий файл дизайну інтерфейсу користувача
Точна структура залежить від інструменту, але корисний файл охоплює ті самі завдання:
- Макет, включаючи точки зупину та спосіб перекомпонування компонента
- Такі стани взаємодії, як неактивність, наведення, натискання, завантаження, успіх і помилка
- Рух, включаючи часові шкали, фізику пружини та переходи між станами
- Логіка та умови, які визначають, який стан є активним
- Вхідні дані та події, щоб код програми міг керувати компонентом і реагувати на нього
- Прив’язки даних для значень, які надходять із програми під час виконання
Що залишається за межами файлу
Файл-компонент - це не вся програма. Маршрутизація, автентифікація, вибірка даних, дозволи, аналітика та оболонка доступності навколо інтерактивного елемента керування залишаються у вашій кодовій базі. Навігація по платформі та системні жести також зазвичай залежать від платформи. Чітко пояснити цю межу має значення: робочий процес з одним файлом легше прийняти, якщо він обробляє інтерактивний компонент і залишає клопоти про програму програмі.
Чи може команда переглянути один файл?
Так, якщо формат відкритий і читабельний. ExodeUI зберігає компонент у відкритому файлі .exode JSON, тому зміни можна відрізняти, переглядати та зберігати в системі керування версіями. Це практична перевага перед файлами бінарного дизайну: рецензент може побачити, що змінилося у файлі, а інструмент кодування AI може прочитати його без власного декодера. Відкритість не дає відповіді на всі питання щодо управління, але робить можливим перегляд.
Як ExodeUI використовує один файл
У ExodeUI файл .exode може містити макет, точки зупину, часові шкали, кінцеві автомати, фізику Spring, логіку, вхідні дані та прив’язки даних. Пакети середовища виконання відтворюють файл у 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 можна змінювати, версії та читати за допомогою інструментів ШІ
- ExodeUI відтворює той самий файл .exode через середовища виконання в веб-фреймворках, мобільних і робочих середовищах