diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/design_doc/mod.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/design_doc/mod.rs
index 55350a4a0..613eaa7be 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/design_doc/mod.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/design_doc/mod.rs
@@ -1,5 +1,6 @@
 mod checkpoint;
 mod creation;
+mod steps;
 
 pub(crate) use creation::{
     create_ui_design_doc_from_images, next_ui_design_path, CreateUiDesignDocFromImagesInput,
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/design_doc/steps/mod.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/design_doc/steps/mod.rs
new file mode 100644
index 000000000..e12827440
--- /dev/null
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/design_doc/steps/mod.rs
@@ -0,0 +1 @@
+pub(crate) mod recognize;
diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/design_doc/steps/recognize.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/design_doc/steps/recognize.rs
new file mode 100644
index 000000000..8fa039111
--- /dev/null
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/design_doc/steps/recognize.rs
@@ -0,0 +1,180 @@
+//! 结构识别结果落到 State。镜像前端 `features/ui-editor/recognition.ts` 的
+//! `applyRecognitionResult` 与 `features/ui-editor/useUiEditorState.ts` 的
+//! `createTree` / `deriveTreeOffset` / `treeSize`。
+
+use crate::ui_editor::commands::RecognitionDTO;
+use crate::ui_editor::layout::offset::NodeOffset;
+use crate::ui_editor::state::{State, UITree};
+use crate::ui_editor::utils::UIDesignImageId;
+
+/// 树与树之间的横向间距，与前端 `UI_TREE_PADDING` 一致。
+pub(crate) const UI_TREE_PADDING: f32 = 48.0;
+
+/// 识别结果是整棵结构草稿树的替换结果，不与旧树逐节点合并；每棵树按 DTO 顺序
+/// 依次重新推导横向偏移，所以先落位的树会把后面的树推到右边。
+pub(crate) fn apply_recognition(state: &mut State, dto: &RecognitionDTO) -> Result<(), String> {
+    let recognized = dto.ui_trees.clone();
+    state.ui_trees = Vec::with_capacity(recognized.len());
+    for tree in recognized {
+        let UITree {
+            src_ui_design,
+            mut root,
+        } = tree;
+        root.offset = derive_tree_offset(state, &src_ui_design)?;
+        state.ui_trees.push(UITree {
+            src_ui_design,
+            root,
+        });
+    }
+    Ok(())
+}
+
+fn derive_tree_offset(state: &State, tree_id: &UIDesignImageId) -> Result<NodeOffset, String> {
+    let [width, height] = tree_size(state, tree_id)?;
+    let existing = state
+        .ui_trees
+        .iter()
+        .filter(|tree| &tree.src_ui_design != tree_id)
+        .collect::<Vec<_>>();
+    if existing.is_empty() {
+        return Ok(NodeOffset {
+            min: [0.0, 0.0],
+            max: [width, height],
+        });
+    }
+    let mut max_x = f32::MIN;
+    let mut min_y = f32::MAX;
+    for tree in existing {
+        let [existing_width, _] = tree_size(state, &tree.src_ui_design)?;
+        max_x = max_x.max(tree.root.offset.min[0] + existing_width);
+        min_y = min_y.min(tree.root.offset.min[1]);
+    }
+    let min_x = max_x + UI_TREE_PADDING;
+    Ok(NodeOffset {
+        min: [min_x, min_y],
+        max: [min_x + width, min_y + height],
+    })
+}
+
+fn tree_size(state: &State, tree_id: &UIDesignImageId) -> Result<[f32; 2], String> {
+    let image = state
+        .ui_design_images
+        .get(tree_id)
+        .ok_or_else(|| format!("界面图 {} 缺少合法尺寸", tree_id.as_str()))?;
+    let pixels_per_unit = image.pixels_per_unit.get();
+    if !pixels_per_unit.is_finite() || pixels_per_unit <= 0.0 {
+        return Err(format!("界面图 {} 缺少合法尺寸", tree_id.as_str()));
+    }
+    Ok([
+        image.pixel_size.x / pixels_per_unit,
+        image.pixel_size.y / pixels_per_unit,
+    ])
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::ui_editor::layout::children_display_mode::ChildrenDisplayMode;
+    use crate::ui_editor::layout::control_layout::ControlLayout;
+    use crate::ui_editor::layout::node::{Node, NodeMetadata, NodeSource, StageStatus};
+    use crate::ui_editor::resource::ui_design_image::UIDesignImage;
+    use nalgebra::Vector2;
+    use std::collections::HashMap;
+    use typed_floats::tf32::StrictlyPositiveFinite;
+
+    fn image(width: f32, height: f32) -> UIDesignImage {
+        UIDesignImage {
+            path: format!("assets/{width}x{height}.png"),
+            pixel_size: Vector2::new(width, height),
+            pixels_per_unit: StrictlyPositiveFinite::new(1.0).expect("pixels per unit"),
+        }
+    }
+
+    fn state_with(images: &[(&str, f32, f32)]) -> State {
+        let mut ui_design_images = HashMap::new();
+        for (id, width, height) in images {
+            ui_design_images.insert(
+                UIDesignImageId::new(id.to_string()).expect("image id"),
+                image(*width, *height),
+            );
+        }
+        State {
+            ui_trees: Vec::new(),
+            ui_design_images,
+            sprite_assets: HashMap::new(),
+            font_assets: HashMap::new(),
+        }
+    }
+
+    fn root(id: &str) -> Node {
+        Node {
+            id: crate::ui_editor::utils::NodeId::new(id.to_string()).expect("node id"),
+            layout: ControlLayout::default(),
+            metadata: NodeMetadata {
+                name: "页面根节点".to_string(),
+                description: String::new(),
+                layout_status: StageStatus::NoProblem,
+                component_status: StageStatus::NoProblem,
+                allow_llm_edit_layout: true,
+                allow_llm_edit_component: true,
+                source: NodeSource::System,
+            },
+            component: None,
+            children_display_mode: ChildrenDisplayMode::Stack,
+            children: Vec::new(),
+            offset: NodeOffset::default(),
+        }
+    }
+
+    fn dto(trees: &[(&str, &str)]) -> RecognitionDTO {
+        RecognitionDTO {
+            ui_trees: trees
+                .iter()
+                .map(|(tree_id, node_id)| UITree {
+                    src_ui_design: UIDesignImageId::new(tree_id.to_string()).expect("tree id"),
+                    root: root(node_id),
+                })
+                .collect(),
+        }
+    }
+
+    #[test]
+    fn trees_are_replaced_and_laid_out_left_to_right() {
+        let mut state = state_with(&[("page-a", 120.0, 80.0), ("page-b", 60.0, 40.0)]);
+        apply_recognition(
+            &mut state,
+            &dto(&[("page-a", "root-a"), ("page-b", "root-b")]),
+        )
+        .expect("apply recognition");
+        assert_eq!(state.ui_trees.len(), 2);
+        assert_eq!(state.ui_trees[0].root.offset.min, [0.0, 0.0]);
+        assert_eq!(state.ui_trees[0].root.offset.max, [120.0, 80.0]);
+        assert_eq!(state.ui_trees[1].root.offset.min, [168.0, 0.0]);
+        assert_eq!(state.ui_trees[1].root.offset.max, [228.0, 40.0]);
+    }
+
+    #[test]
+    fn recognition_replaces_the_whole_tree_list() {
+        let mut state = state_with(&[("page-a", 100.0, 50.0)]);
+        apply_recognition(&mut state, &dto(&[("page-a", "root-a")])).expect("first apply");
+        apply_recognition(&mut state, &dto(&[("page-a", "root-b")])).expect("second apply");
+        assert_eq!(state.ui_trees.len(), 1);
+        assert_eq!(
+            state.ui_trees[0].root.id.as_str(),
+            crate::ui_editor::utils::NodeId::new("root-b".to_string())
+                .expect("node id")
+                .as_str()
+        );
+    }
+
+    #[test]
+    fn tree_without_design_image_fails() {
+        let mut state = state_with(&[("page-a", 100.0, 50.0)]);
+        let error = apply_recognition(
+            &mut state,
+            &dto(&[("page-a", "root-a"), ("page-x", "root-x")]),
+        )
+        .expect_err("missing design image must fail");
+        assert!(error.contains("page-x"));
+    }
+}