diff --git a/apps/ai-game-creator-shell/src-tauri/Cargo.lock b/apps/ai-game-creator-shell/src-tauri/Cargo.lock
index b79d2596b..98aa5134d 100644
--- a/apps/ai-game-creator-shell/src-tauri/Cargo.lock
+++ b/apps/ai-game-creator-shell/src-tauri/Cargo.lock
@@ -2762,6 +2762,7 @@ dependencies = [
  "num-complex",
  "num-rational",
  "num-traits",
+ "serde",
  "simba",
  "typenum",
 ]
@@ -2910,6 +2911,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "73f88a1307638156682bada9d7604135552957b7818057dcef22705b4d509495"
 dependencies = [
  "num-traits",
+ "serde",
 ]
 
 [[package]]
@@ -5982,6 +5984,7 @@ checksum = "436de2fdc42c0f07890f4b51dcc90a468b0b12280f49caff1cf57ce2e646817c"
 dependencies = [
  "const_fn",
  "rustversion",
+ "serde",
  "typed_floats_macros",
 ]
 
diff --git a/apps/ai-game-creator-shell/src-tauri/Cargo.toml b/apps/ai-game-creator-shell/src-tauri/Cargo.toml
index 53c7af709..55ec23f55 100644
--- a/apps/ai-game-creator-shell/src-tauri/Cargo.toml
+++ b/apps/ai-game-creator-shell/src-tauri/Cargo.toml
@@ -16,8 +16,8 @@ tauri-build = { version = "2.6.2", features = [] }
 
 [dependencies]
 ts-rs = "12.0.1"
-typed_floats = "1.0.7"
-nalgebra = "0.35.0"
+typed_floats = { version = "1.0.7", features = ["serde"] }
+nalgebra = { version = "0.35.0", features = ["serde-serialize"] }
 agent-runtime-core = { path = "../../../server-rs/crates/agent-runtime-core" }
 base64 = "0.22"
 chromiumoxide = "0.9.1"
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/bindings.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/bindings.rs
deleted file mode 100644
index 0c0f2209d..000000000
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/bindings.rs
+++ /dev/null
@@ -1,68 +0,0 @@
-use std::{fs, io, path::PathBuf};
-
-use ts_rs::{Config, TS};
-
-use super::{
-    component::{
-        image::{
-            FillMethod, HorizontalFillOrigin, ImageComponent, ImageType, Radial180Origin,
-            Radial360Origin, Radial90Origin, VerticalFillOrigin,
-        },
-        text::{
-            BestFitFontSize, FontSizing, FontStyle, HorizontalTextOverflow, TextAlignment,
-            TextComponent, VerticalTextOverflow,
-        },
-        Component,
-    },
-    layout::{dimension::UIRect, node::Node, transform::Transform},
-    resource::{
-        asset_id::{FontAssetId, SpriteAssetId},
-        sprite::{SpriteAsset, SpriteBorder},
-    },
-};
-
-const GENERATED_HEADER: &str =
-    "// This file was generated by ts-rs. Do not edit this file manually.";
-
-fn typescript_bindings() -> String {
-    let config = Config::default();
-    let declarations = [
-        FontAssetId::decl(&config),
-        SpriteAssetId::decl(&config),
-        SpriteBorder::decl(&config),
-        SpriteAsset::decl(&config),
-        UIRect::decl(&config),
-        Transform::decl(&config),
-        HorizontalFillOrigin::decl(&config),
-        VerticalFillOrigin::decl(&config),
-        Radial90Origin::decl(&config),
-        Radial180Origin::decl(&config),
-        Radial360Origin::decl(&config),
-        FillMethod::decl(&config),
-        ImageType::decl(&config),
-        ImageComponent::decl(&config),
-        FontStyle::decl(&config),
-        TextAlignment::decl(&config),
-        HorizontalTextOverflow::decl(&config),
-        VerticalTextOverflow::decl(&config),
-        BestFitFontSize::decl(&config),
-        FontSizing::decl(&config),
-        TextComponent::decl(&config),
-        Component::decl(&config),
-        Node::decl(&config),
-    ];
-
-    format!(
-        "{GENERATED_HEADER}\n\nexport {}\n",
-        declarations.join("\n\nexport ")
-    )
-}
-
-fn bindings_path() -> PathBuf {
-    PathBuf::from(env!("CARGO_MANIFEST_DIR")).join("../src/features/ui-editor/types.ts")
-}
-
-#[test]
-fn export_typescript_bindings() -> io::Result<()> {
-    fs::write(bindings_path(), typescript_bindings())
-}
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/component/image.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/component/image.rs
index 66c9fffb2..962ed75c7 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/component/image.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/component/image.rs
@@ -4,22 +4,26 @@ use crate::ui_editor::component::common::error::ComponentValueError;
 use crate::ui_editor::layout::transform::Transform;
 use crate::ui_editor::resource::sprite::SpriteAsset;
 use nalgebra::Vector2;
+use serde::{Deserialize, Serialize};
 use ts_rs::TS;
 use typed_floats::tf32::StrictlyPositiveFinite;
 
-#[derive(Clone, Copy, Debug, Eq, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub enum HorizontalFillOrigin {
     Left,
     Right,
 }
 
-#[derive(Clone, Copy, Debug, Eq, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub enum VerticalFillOrigin {
     Bottom,
     Top,
 }
 
-#[derive(Clone, Copy, Debug, Eq, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub enum Radial90Origin {
     BottomLeft,
     TopLeft,
@@ -27,7 +31,8 @@ pub enum Radial90Origin {
     BottomRight,
 }
 
-#[derive(Clone, Copy, Debug, Eq, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub enum Radial180Origin {
     Bottom,
     Left,
@@ -35,7 +40,8 @@ pub enum Radial180Origin {
     Right,
 }
 
-#[derive(Clone, Copy, Debug, Eq, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub enum Radial360Origin {
     Bottom,
     Right,
@@ -43,7 +49,8 @@ pub enum Radial360Origin {
     Left,
 }
 
-#[derive(Clone, Copy, Debug, Eq, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub enum FillMethod {
     Horizontal(HorizontalFillOrigin),
     Vertical(VerticalFillOrigin),
@@ -71,7 +78,8 @@ fn validate_fill_amount(amount: f32) -> Result<(), ComponentValueError> {
     Ok(())
 }
 
-#[derive(Clone, Copy, Debug, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub enum ImageType {
     Simple {
         preserve_aspect: bool,
@@ -173,7 +181,8 @@ impl fmt::Display for SetNativeSizeError {
 impl Error for SetNativeSizeError {}
 
 /// Image 渲染组件；布局由同一 Entity 上独立的 `Control` 提供。
-#[derive(Clone, Debug, PartialEq, TS)]
+#[derive(Clone, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub struct ImageComponent {
     pub target_graphic: Option<SpriteAsset>,
     pub image_type: ImageType,
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/component/mod.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/component/mod.rs
index abc4cdd28..e31b384ba 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/component/mod.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/component/mod.rs
@@ -1,7 +1,8 @@
 pub mod common;
 pub mod image;
 pub mod text;
-#[derive(ts_rs::TS)]
+#[derive(Clone, Debug, PartialEq, serde::Deserialize, serde::Serialize, ts_rs::TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub enum Component {
     Image(image::ImageComponent),
     Text(text::TextComponent),
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/component/text.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/component/text.rs
index abf5ccae5..85005bc05 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/component/text.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/component/text.rs
@@ -1,11 +1,13 @@
 use crate::ui_editor::component::common::error::ComponentValueError;
 use crate::ui_editor::resource::asset_id::FontAssetId;
 use crate::ui_editor::resource::sprite::{Color, WHITE};
+use serde::{Deserialize, Serialize};
 use std::num::NonZeroU32;
 use ts_rs::TS;
 use typed_floats::tf32::StrictlyPositiveFinite;
 
-#[derive(Clone, Copy, Debug, Eq, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub enum FontStyle {
     Normal,
     Bold,
@@ -13,7 +15,8 @@ pub enum FontStyle {
     BoldItalic,
 }
 
-#[derive(Clone, Copy, Debug, Eq, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub enum TextAlignment {
     UpperLeft,
     UpperCenter,
@@ -26,19 +29,22 @@ pub enum TextAlignment {
     LowerRight,
 }
 
-#[derive(Clone, Copy, Debug, Eq, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub enum HorizontalTextOverflow {
     Wrap,
     Overflow,
 }
 
-#[derive(Clone, Copy, Debug, Eq, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub enum VerticalTextOverflow {
     Truncate,
     Overflow,
 }
 
-#[derive(Clone, Copy, Debug, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub struct BestFitFontSize {
     min: NonZeroU32,
     max: NonZeroU32,
@@ -61,7 +67,8 @@ impl BestFitFontSize {
     }
 }
 
-#[derive(Clone, Copy, Debug, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub enum FontSizing {
     Fixed(NonZeroU32),
     BestFit(BestFitFontSize),
@@ -74,7 +81,8 @@ impl Default for FontSizing {
 }
 
 /// Text / Label 渲染组件；布局由同一 Entity 上独立的 `Control` 提供。
-#[derive(Clone, Debug, PartialEq, TS)]
+#[derive(Clone, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub struct TextComponent {
     pub content: String,
     pub font: Option<FontAssetId>,
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/import/mod.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/import/mod.rs
deleted file mode 100644
index 1604b39b6..000000000
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/import/mod.rs
+++ /dev/null
@@ -1,2 +0,0 @@
-pub mod ui_design_image;
-
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/import/ui_design_image.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/import/ui_design_image.rs
deleted file mode 100644
index 11511d4ae..000000000
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/import/ui_design_image.rs
+++ /dev/null
@@ -1,10 +0,0 @@
-pub enum UIDesignImageRole{
-  Page,
-  Section,
-  Modal,
-  Drawer,
-  Popover,
-  State,
-  Scrolled,
-  Detail,
-}
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/dimension.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/dimension.rs
index fd316e5f4..d21c36eab 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/dimension.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/dimension.rs
@@ -1,11 +1,13 @@
 use nalgebra::{Point2, Vector2};
+use serde::{Deserialize, Serialize};
 use ts_rs::TS;
 
 /// UI 布局在父级坐标系中的轴对齐矩形。
 ///
 /// `min` 是矩形的最小角，`size` 是沿两个坐标轴的尺寸。这里不规定 Y 轴方向，
 /// 因而既能用于 Y 轴向上的游戏坐标，也能用于 Y 轴向下的画布坐标。
-#[derive(Clone, Copy, Debug, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub struct UIRect {
     #[ts(as = "[f32; 2]")]
     pub min: Point2<f32>,
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/node.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/node.rs
index 94a423dc2..77bf60d2d 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/node.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/node.rs
@@ -1,10 +1,22 @@
 use crate::ui_editor::component::Component;
 use crate::ui_editor::layout::transform::Transform;
+use serde::{Deserialize, Serialize};
 use ts_rs::TS;
 
-#[derive(TS)]
+#[derive(Clone, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub struct Node {
     transform: Transform,
+    metadata: NodeMetadata,
     components: Vec<Component>,
     children: Vec<Node>,
 }
+
+#[derive(Clone, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
+pub struct NodeMetadata {
+    name: String,
+    description: String,
+    // TODO
+    from: String,
+}
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/transform.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/transform.rs
index 4621ea4fa..23f390317 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/transform.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/layout/transform.rs
@@ -1,8 +1,10 @@
 use crate::ui_editor::layout::dimension::UIRect;
 use nalgebra::Vector2;
+use serde::{Deserialize, Serialize};
 use ts_rs::TS;
 
-#[derive(Clone, Copy, Debug, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub struct Transform {
     #[ts(as = "[f32; 2]")]
     pub anchor_min: Vector2<f32>,
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/mod.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/mod.rs
index 5bb17c7ad..f7b7b2cec 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/mod.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/mod.rs
@@ -2,6 +2,5 @@ pub mod component;
 pub mod layout;
 pub mod resource;
 
-#[cfg(test)]
-mod bindings;
-pub mod import;
+pub mod agent;
+pub mod state;
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/asset_id.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/asset_id.rs
index cc5ae75b9..da99dffce 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/asset_id.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/asset_id.rs
@@ -2,7 +2,19 @@ use crate::ui_editor::component::common::error::ComponentValueError;
 
 macro_rules! define_asset_id {
     ($name:ident) => {
-        #[derive(Clone, Debug, Eq, Hash, Ord, PartialEq, PartialOrd, ts_rs::TS)]
+        #[derive(
+            Clone,
+            Debug,
+            Eq,
+            Hash,
+            Ord,
+            PartialEq,
+            PartialOrd,
+            serde::Deserialize,
+            serde::Serialize,
+            ts_rs::TS,
+        )]
+        #[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
         pub struct $name(String);
 
         impl $name {
@@ -29,3 +41,4 @@ macro_rules! define_asset_id {
 
 define_asset_id!(FontAssetId);
 define_asset_id!(SpriteAssetId);
+define_asset_id!(UIDesignImageId);
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/font.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/font.rs
new file mode 100644
index 000000000..d3599ab5b
--- /dev/null
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/font.rs
@@ -0,0 +1,10 @@
+use crate::ui_editor::resource::asset_id::FontAssetId;
+use serde::{Deserialize, Serialize};
+use ts_rs::TS;
+
+// TODO
+#[derive(Clone, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
+pub struct FontAsset {
+    asset_id: FontAssetId,
+}
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/mod.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/mod.rs
index 1b05831a4..e4072d7cb 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/mod.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/mod.rs
@@ -1,2 +1,4 @@
 pub mod asset_id;
+pub mod font;
 pub mod sprite;
+pub mod ui_design_image;
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/sprite.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/sprite.rs
index 6220bf1bb..097501636 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/sprite.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/sprite.rs
@@ -1,15 +1,16 @@
 use crate::ui_editor::component::common::error::ComponentValueError;
 use crate::ui_editor::resource::asset_id::SpriteAssetId;
-use image::Rgba;
 use nalgebra::Vector2;
+use serde::{Deserialize, Serialize};
 use ts_rs::TS;
 use typed_floats::tf32::StrictlyPositiveFinite;
 
-pub type Color = Rgba<u8>;
+pub type Color = [u8; 4];
 
-pub(in crate::ui_editor) const WHITE: Color = Rgba([255, 255, 255, 255]);
+pub(in crate::ui_editor) const WHITE: Color = [255, 255, 255, 255];
 
-#[derive(Clone, Copy, Debug, PartialEq, TS)]
+#[derive(Clone, Copy, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub struct SpriteBorder {
     left: f32,
     right: f32,
@@ -68,10 +69,20 @@ impl Default for SpriteBorder {
     }
 }
 
-/// UI Sprite 引用以及 `Set Native Size` / 9-slice 所需的导入元数据。
-#[derive(Clone, Debug, PartialEq, TS)]
+#[derive(Clone, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
+pub struct SpriteAssetMetadata {
+    name: String,
+    // TODO
+    asset_type: String,
+}
+#[derive(Clone, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
 pub struct SpriteAsset {
     asset_id: SpriteAssetId,
+    metadata: SpriteAssetMetadata,
+    // TODO
+    path: String,
     #[ts(as = "[f32; 2]")]
     pixel_size: Vector2<f32>,
     #[ts(as = "f32")]
@@ -97,6 +108,11 @@ impl SpriteAsset {
         }
         Ok(Self {
             asset_id,
+            metadata: SpriteAssetMetadata {
+                name: String::new(),
+                asset_type: String::new(),
+            },
+            path: String::new(),
             pixel_size,
             pixels_per_unit,
             border,
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/ui_design_image.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/ui_design_image.rs
new file mode 100644
index 000000000..4ebfcc209
--- /dev/null
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/resource/ui_design_image.rs
@@ -0,0 +1,35 @@
+use nalgebra::Vector2;
+use crate::ui_editor::resource::asset_id::UIDesignImageId;
+use serde::{Deserialize, Serialize};
+use ts_rs::TS;
+use typed_floats::tf32::StrictlyPositiveFinite;
+
+#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
+pub enum UIDesignImageRole {
+    Page,
+    Section,
+    Modal,
+    Drawer,
+    Popover,
+    State,
+    Scrolled,
+    Detail,
+}
+
+#[derive(Clone, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
+pub struct UIDesignImage {
+    path: String,
+    #[ts(as = "[f32; 2]")]
+    pixel_size: Vector2<f32>,
+    #[ts(as = "f32")]
+    pixels_per_unit: StrictlyPositiveFinite,
+}
+#[derive(Clone, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
+pub struct UIDesignImageMetadata {
+    name: String,
+    role: Option<UIDesignImageRole>,
+    slave_to: UIDesignImageId,
+}
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/state/mod.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/state/mod.rs
new file mode 100644
index 000000000..38703c2c5
--- /dev/null
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/state/mod.rs
@@ -0,0 +1,24 @@
+use crate::ui_editor::layout::node::Node;
+use crate::ui_editor::resource::asset_id::{FontAssetId, SpriteAssetId, UIDesignImageId};
+use crate::ui_editor::resource::font::FontAsset;
+use crate::ui_editor::resource::sprite::SpriteAsset;
+use crate::ui_editor::resource::ui_design_image::UIDesignImage;
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use ts_rs::TS;
+
+#[derive(Clone, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
+pub struct UITree {
+    src_ui_design: UIDesignImageId,
+    children: Vec<Node>,
+}
+
+#[derive(Clone, Debug, Deserialize, PartialEq, Serialize, TS)]
+#[ts(export, export_to = concat!(env!("CARGO_MANIFEST_DIR"), "/../src/features/ui-editor/types/"))]
+pub struct State {
+    ui_trees: Vec<UITree>,
+    ui_design_images: HashMap<UIDesignImageId, UIDesignImage>,
+    sprite_assets: HashMap<SpriteAssetId, SpriteAsset>,
+    font_assets: HashMap<FontAssetId, FontAsset>,
+}
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types.ts
deleted file mode 100644
index 00b98581f..000000000
--- a/apps/ai-game-creator-shell/src/features/ui-editor/types.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// This file was generated by ts-rs. Do not edit this file manually.
-
-export type FontAssetId = string;
-
-export type SpriteAssetId = string;
-
-export type SpriteBorder = { left: number, right: number, top: number, bottom: number, };
-
-export type SpriteAsset = { asset_id: SpriteAssetId, pixel_size: [number, number], pixels_per_unit: number, border: SpriteBorder, };
-
-export type UIRect = { min: [number, number], size: [number, number], };
-
-export type Transform = { anchor_min: [number, number], anchor_max: [number, number], offset_min: [number, number], offset_max: [number, number], };
-
-export type HorizontalFillOrigin = "Left" | "Right";
-
-export type VerticalFillOrigin = "Bottom" | "Top";
-
-export type Radial90Origin = "BottomLeft" | "TopLeft" | "TopRight" | "BottomRight";
-
-export type Radial180Origin = "Bottom" | "Left" | "Top" | "Right";
-
-export type Radial360Origin = "Bottom" | "Right" | "Top" | "Left";
-
-export type FillMethod = { "Horizontal": HorizontalFillOrigin } | { "Vertical": VerticalFillOrigin } | { "Radial90": { origin: Radial90Origin, clockwise: boolean, } } | { "Radial180": { origin: Radial180Origin, clockwise: boolean, } } | { "Radial360": { origin: Radial360Origin, clockwise: boolean, } };
-
-export type ImageType = { "Simple": { preserve_aspect: boolean, } } | { "Sliced": { fill_center: boolean, pixels_per_unit_multiplier: number, } } | { "Tiled": { fill_center: boolean, pixels_per_unit_multiplier: number, } } | { "Filled": { preserve_aspect: boolean, method: FillMethod, amount: number, } };
-
-export type ImageComponent = { target_graphic: SpriteAsset | null, image_type: ImageType, };
-
-export type FontStyle = "Normal" | "Bold" | "Italic" | "BoldItalic";
-
-export type TextAlignment = "UpperLeft" | "UpperCenter" | "UpperRight" | "MiddleLeft" | "MiddleCenter" | "MiddleRight" | "LowerLeft" | "LowerCenter" | "LowerRight";
-
-export type HorizontalTextOverflow = "Wrap" | "Overflow";
-
-export type VerticalTextOverflow = "Truncate" | "Overflow";
-
-export type BestFitFontSize = { min: number, max: number, };
-
-export type FontSizing = { "Fixed": number } | { "BestFit": BestFitFontSize };
-
-export type TextComponent = { content: string, font: FontAssetId | null, font_style: FontStyle, font_sizing: FontSizing, color: [number, number, number, number], alignment: TextAlignment, horizontal_overflow: HorizontalTextOverflow, vertical_overflow: VerticalTextOverflow, line_spacing: number, };
-
-export type Component = { "Image": ImageComponent } | { "Text": TextComponent };
-
-export type Node = { transform: Transform, components: Array<Component>, children: Array<Node>, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/BestFitFontSize.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/BestFitFontSize.ts
new file mode 100644
index 000000000..c93fd9fee
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/BestFitFontSize.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type BestFitFontSize = { min: number, max: number, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/Component.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/Component.ts
new file mode 100644
index 000000000..8698056d8
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/Component.ts
@@ -0,0 +1,5 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { ImageComponent } from "./ImageComponent";
+import type { TextComponent } from "./TextComponent";
+
+export type Component = { "Image": ImageComponent } | { "Text": TextComponent };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/FillMethod.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/FillMethod.ts
new file mode 100644
index 000000000..1651dbbee
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/FillMethod.ts
@@ -0,0 +1,8 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { HorizontalFillOrigin } from "./HorizontalFillOrigin";
+import type { Radial180Origin } from "./Radial180Origin";
+import type { Radial360Origin } from "./Radial360Origin";
+import type { Radial90Origin } from "./Radial90Origin";
+import type { VerticalFillOrigin } from "./VerticalFillOrigin";
+
+export type FillMethod = { "Horizontal": HorizontalFillOrigin } | { "Vertical": VerticalFillOrigin } | { "Radial90": { origin: Radial90Origin, clockwise: boolean, } } | { "Radial180": { origin: Radial180Origin, clockwise: boolean, } } | { "Radial360": { origin: Radial360Origin, clockwise: boolean, } };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/FontAsset.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/FontAsset.ts
new file mode 100644
index 000000000..86dc7f512
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/FontAsset.ts
@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { FontAssetId } from "./FontAssetId";
+
+export type FontAsset = { asset_id: FontAssetId, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/FontAssetId.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/FontAssetId.ts
new file mode 100644
index 000000000..a6c33af60
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/FontAssetId.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type FontAssetId = string;
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/FontSizing.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/FontSizing.ts
new file mode 100644
index 000000000..38e9a2b2a
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/FontSizing.ts
@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { BestFitFontSize } from "./BestFitFontSize";
+
+export type FontSizing = { "Fixed": number } | { "BestFit": BestFitFontSize };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/FontStyle.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/FontStyle.ts
new file mode 100644
index 000000000..441a8c28c
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/FontStyle.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type FontStyle = "Normal" | "Bold" | "Italic" | "BoldItalic";
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/HorizontalFillOrigin.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/HorizontalFillOrigin.ts
new file mode 100644
index 000000000..d99431951
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/HorizontalFillOrigin.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type HorizontalFillOrigin = "Left" | "Right";
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/HorizontalTextOverflow.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/HorizontalTextOverflow.ts
new file mode 100644
index 000000000..19617d809
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/HorizontalTextOverflow.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type HorizontalTextOverflow = "Wrap" | "Overflow";
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/ImageComponent.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/ImageComponent.ts
new file mode 100644
index 000000000..ae11f76e3
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/ImageComponent.ts
@@ -0,0 +1,8 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { ImageType } from "./ImageType";
+import type { SpriteAsset } from "./SpriteAsset";
+
+/**
+ * Image 渲染组件；布局由同一 Entity 上独立的 `Control` 提供。
+ */
+export type ImageComponent = { target_graphic: SpriteAsset | null, image_type: ImageType, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/ImageType.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/ImageType.ts
new file mode 100644
index 000000000..88d0452af
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/ImageType.ts
@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { FillMethod } from "./FillMethod";
+
+export type ImageType = { "Simple": { preserve_aspect: boolean, } } | { "Sliced": { fill_center: boolean, pixels_per_unit_multiplier: number, } } | { "Tiled": { fill_center: boolean, pixels_per_unit_multiplier: number, } } | { "Filled": { preserve_aspect: boolean, method: FillMethod, amount: number, } };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/Node.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/Node.ts
new file mode 100644
index 000000000..af2154061
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/Node.ts
@@ -0,0 +1,6 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Component } from "./Component";
+import type { NodeMetadata } from "./NodeMetadata";
+import type { Transform } from "./Transform";
+
+export type Node = { transform: Transform, metadata: NodeMetadata, components: Array<Component>, children: Array<Node>, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/NodeMetadata.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/NodeMetadata.ts
new file mode 100644
index 000000000..31627a3ff
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/NodeMetadata.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type NodeMetadata = { name: string, description: string, from: string, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/Radial180Origin.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/Radial180Origin.ts
new file mode 100644
index 000000000..bc15a5f67
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/Radial180Origin.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type Radial180Origin = "Bottom" | "Left" | "Top" | "Right";
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/Radial360Origin.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/Radial360Origin.ts
new file mode 100644
index 000000000..6010e8fa2
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/Radial360Origin.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type Radial360Origin = "Bottom" | "Right" | "Top" | "Left";
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/Radial90Origin.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/Radial90Origin.ts
new file mode 100644
index 000000000..fcbffe0e6
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/Radial90Origin.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type Radial90Origin = "BottomLeft" | "TopLeft" | "TopRight" | "BottomRight";
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/SpriteAsset.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/SpriteAsset.ts
new file mode 100644
index 000000000..2f89253cc
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/SpriteAsset.ts
@@ -0,0 +1,6 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { SpriteAssetId } from "./SpriteAssetId";
+import type { SpriteAssetMetadata } from "./SpriteAssetMetadata";
+import type { SpriteBorder } from "./SpriteBorder";
+
+export type SpriteAsset = { asset_id: SpriteAssetId, metadata: SpriteAssetMetadata, path: string, pixel_size: [number, number], pixels_per_unit: number, border: SpriteBorder, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/SpriteAssetId.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/SpriteAssetId.ts
new file mode 100644
index 000000000..444bec042
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/SpriteAssetId.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type SpriteAssetId = string;
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/SpriteAssetMetadata.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/SpriteAssetMetadata.ts
new file mode 100644
index 000000000..abaa0968a
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/SpriteAssetMetadata.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type SpriteAssetMetadata = { name: string, asset_type: string, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/SpriteBorder.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/SpriteBorder.ts
new file mode 100644
index 000000000..cd1b63e38
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/SpriteBorder.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type SpriteBorder = { left: number, right: number, top: number, bottom: number, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/State.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/State.ts
new file mode 100644
index 000000000..c13126399
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/State.ts
@@ -0,0 +1,10 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { FontAsset } from "./FontAsset";
+import type { FontAssetId } from "./FontAssetId";
+import type { SpriteAsset } from "./SpriteAsset";
+import type { SpriteAssetId } from "./SpriteAssetId";
+import type { UIDesignImage } from "./UIDesignImage";
+import type { UIDesignImageId } from "./UIDesignImageId";
+import type { UITree } from "./UITree";
+
+export type State = { ui_trees: Array<UITree>, ui_design_images: { [key in UIDesignImageId]: UIDesignImage }, sprite_assets: { [key in SpriteAssetId]: SpriteAsset }, font_assets: { [key in FontAssetId]: FontAsset }, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/TextAlignment.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/TextAlignment.ts
new file mode 100644
index 000000000..0bb35743b
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/TextAlignment.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type TextAlignment = "UpperLeft" | "UpperCenter" | "UpperRight" | "MiddleLeft" | "MiddleCenter" | "MiddleRight" | "LowerLeft" | "LowerCenter" | "LowerRight";
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/TextComponent.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/TextComponent.ts
new file mode 100644
index 000000000..e3f8d35fd
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/TextComponent.ts
@@ -0,0 +1,12 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { FontAssetId } from "./FontAssetId";
+import type { FontSizing } from "./FontSizing";
+import type { FontStyle } from "./FontStyle";
+import type { HorizontalTextOverflow } from "./HorizontalTextOverflow";
+import type { TextAlignment } from "./TextAlignment";
+import type { VerticalTextOverflow } from "./VerticalTextOverflow";
+
+/**
+ * Text / Label 渲染组件；布局由同一 Entity 上独立的 `Control` 提供。
+ */
+export type TextComponent = { content: string, font: FontAssetId | null, font_style: FontStyle, font_sizing: FontSizing, color: [number, number, number, number], alignment: TextAlignment, horizontal_overflow: HorizontalTextOverflow, vertical_overflow: VerticalTextOverflow, line_spacing: number, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/Transform.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/Transform.ts
new file mode 100644
index 000000000..45ced8465
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/Transform.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type Transform = { anchor_min: [number, number], anchor_max: [number, number], offset_min: [number, number], offset_max: [number, number], };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/UIDesignImage.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/UIDesignImage.ts
new file mode 100644
index 000000000..c4cf6dbd5
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/UIDesignImage.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type UIDesignImage = { path: string, pixel_size: [number, number], pixels_per_unit: number, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/UIDesignImageId.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/UIDesignImageId.ts
new file mode 100644
index 000000000..9826cd650
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/UIDesignImageId.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type UIDesignImageId = string;
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/UIDesignImageMetadata.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/UIDesignImageMetadata.ts
new file mode 100644
index 000000000..f4b97fdf7
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/UIDesignImageMetadata.ts
@@ -0,0 +1,5 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { UIDesignImageId } from "./UIDesignImageId";
+import type { UIDesignImageRole } from "./UIDesignImageRole";
+
+export type UIDesignImageMetadata = { name: string, role: UIDesignImageRole | null, slave_to: UIDesignImageId, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/UIDesignImageRole.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/UIDesignImageRole.ts
new file mode 100644
index 000000000..131b0860b
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/UIDesignImageRole.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type UIDesignImageRole = "Page" | "Section" | "Modal" | "Drawer" | "Popover" | "State" | "Scrolled" | "Detail";
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/UIRect.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/UIRect.ts
new file mode 100644
index 000000000..d1db67fd7
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/UIRect.ts
@@ -0,0 +1,9 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+/**
+ * UI 布局在父级坐标系中的轴对齐矩形。
+ *
+ * `min` 是矩形的最小角，`size` 是沿两个坐标轴的尺寸。这里不规定 Y 轴方向，
+ * 因而既能用于 Y 轴向上的游戏坐标，也能用于 Y 轴向下的画布坐标。
+ */
+export type UIRect = { min: [number, number], size: [number, number], };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/UITree.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/UITree.ts
new file mode 100644
index 000000000..77adcb4d6
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/UITree.ts
@@ -0,0 +1,5 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Node } from "./Node";
+import type { UIDesignImageId } from "./UIDesignImageId";
+
+export type UITree = { src_ui_design: UIDesignImageId, children: Array<Node>, };
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/VerticalFillOrigin.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/VerticalFillOrigin.ts
new file mode 100644
index 000000000..06f94fc6c
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/VerticalFillOrigin.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type VerticalFillOrigin = "Bottom" | "Top";
diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/types/VerticalTextOverflow.ts b/apps/ai-game-creator-shell/src/features/ui-editor/types/VerticalTextOverflow.ts
new file mode 100644
index 000000000..8fe6a77dc
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/types/VerticalTextOverflow.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type VerticalTextOverflow = "Truncate" | "Overflow";