From 5ca246a37c9871ecc9d6308029d39d5cb06a0b85 Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Mon, 13 Oct 2025 11:03:35 +0800
Subject: [PATCH] docs: clarify UI preview system works without server
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updated README documentation to emphasize that index.html and compare.html
can be opened directly in browser without requiring a local server.
Reorganized preview instructions to highlight direct browser preview as
the recommended approach, with local server as optional for advanced features.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 README.md    | 19 ++++++++++++-------
 README_CN.md | 19 ++++++++++++-------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index e604054b..a672dbed 100644
--- a/README.md
+++ b/README.md
@@ -662,22 +662,26 @@ URL/Images → capture/explore-layers
 
 #### Preview System
 
-After running `ui-generate`, you get interactive preview tools:
+After running `ui-generate`, you get interactive preview tools that **work directly in the browser without requiring a server**:
 
-**Quick Preview** (Direct Browser):
+**Direct Browser Preview** (Recommended - No Server Required):
 ```bash
 # Navigate to prototypes directory
 cd .workflow/WFS-auth/.design/prototypes
-# Open index.html in browser (double-click or):
+
+# Open in browser (double-click the file, or use command):
 open index.html  # macOS
 start index.html  # Windows
 xdg-open index.html  # Linux
+
+# Both index.html and compare.html work directly without a server
+open compare.html  # Open comparison view directly
 ```
 
-**Full Preview** (Local Server - Recommended):
+**Optional: Local Server** (For advanced features):
 ```bash
 cd .workflow/WFS-auth/.design/prototypes
-# Choose one:
+# Choose one if you need server-side features:
 python -m http.server 8080      # Python
 npx http-server -p 8080         # Node.js
 php -S localhost:8080           # PHP
@@ -685,11 +689,12 @@ php -S localhost:8080           # PHP
 ```
 
 **Preview Features**:
-- `index.html`: Master navigation with all prototypes
-- `compare.html`: Side-by-side comparison with viewport controls (Desktop/Tablet/Mobile)
+- `index.html`: Master navigation with all prototypes (works offline)
+- `compare.html`: Side-by-side comparison with viewport controls (works offline)
 - Synchronized scrolling for layout comparison
 - Dynamic page switching
 - Real-time responsive testing
+- **No server required** - all features work by opening files directly in browser
 
 #### 📦 Output Structure
 
diff --git a/README_CN.md b/README_CN.md
index a2ec02ce..5f645fd1 100644
--- a/README_CN.md
+++ b/README_CN.md
@@ -662,22 +662,26 @@ URL/图像 → capture/explore-layers
 
 #### 预览系统
 
-运行 `ui-generate` 后，您将获得交互式预览工具：
+运行 `ui-generate` 后，您将获得交互式预览工具，**无需启动服务器即可直接在浏览器中使用**：
 
-**快速预览**（直接浏览器）:
+**直接浏览器预览**（推荐 - 无需服务器）:
 ```bash
 # 导航到原型目录
 cd .workflow/WFS-auth/.design/prototypes
-# 在浏览器中打开 index.html（双击或执行）:
+
+# 在浏览器中打开（双击文件或使用命令）:
 open index.html  # macOS
 start index.html  # Windows
 xdg-open index.html  # Linux
+
+# index.html 和 compare.html 都可以直接打开，无需服务器
+open compare.html  # 直接打开对比视图
 ```
 
-**完整预览**（本地服务器 - 推荐）:
+**可选：本地服务器**（用于高级功能）:
 ```bash
 cd .workflow/WFS-auth/.design/prototypes
-# 选择一个:
+# 如果需要服务器端功能，可选择一个:
 python -m http.server 8080      # Python
 npx http-server -p 8080         # Node.js
 php -S localhost:8080           # PHP
@@ -685,11 +689,12 @@ php -S localhost:8080           # PHP
 ```
 
 **预览功能**:
-- `index.html`: 包含所有原型的主导航
-- `compare.html`: 带视口控制的并排对比（桌面/平板/移动）
+- `index.html`: 包含所有原型的主导航（离线可用）
+- `compare.html`: 带视口控制的并排对比（离线可用）
 - 同步滚动用于布局对比
 - 动态页面切换
 - 实时响应式测试
+- **无需服务器** - 所有功能都可通过直接在浏览器中打开文件来使用
 
 #### 📦 输出结构