靜態原型分割器

靜態原型分割器 是做什麼的？

使用此技能將一個完成或半完成的靜態原型，轉換為更乾淨的交付成果，適用於演示、迭代、遷移或交接。

目標不是重新設計產品。保留現有視覺方向與互動意圖，同時讓原型更易於打開、檢查、修改和遷移。

範圍與交接

• 針對現有靜態原型的新分割、元件化或交接交付成果使用此技能。對於已組織好的原型的持續編輯，請使用 prototype-maintenance（如有提供）；它並非必需的依賴。
• 對於微小的複製或樣式變更，請直接修改，無需重構原型。
• 保留現有框架專案在其既定的技術棧中；除非要求，否則不要將 React/Vue 或類似專案扁平化為靜態 HTML。
• 遵循使用者的檔案取代、配置、依賴項、網路存取、本機伺服器和儲存資料的授權規則。此技能不授予這些權限。

預設原則

• 保留原始檔案。除非使用者明確要求，否則不要覆蓋原始原型。
• 為生成的交付成果建立帶有時間戳記的輸出資料夾。
• 保持編輯重點在結構、路徑、可重複使用的資源和基本的互動接線。
• 維持原始語言、產品術語、視覺風格和頁面層級結構。
• 除非使用者要求框架，否則優先使用純靜態 HTML/CSS/JS。
• 避免不相關的重新設計、安裝依賴項、建置工具或框架遷移。
• 當原型同時需要分割頁面與完整預覽時，將分割頁面檔案視為單一事實來源。避免在組合的進入點中維護第二份不一致的頁面內容或互動邏輯副本。
• 組合的進入點應透過路由、模板、共享模組或小型建置/同步腳本，從分割頁面來源進行組合、載入或生成。如果為確保可靠性需要暫時的組合實作，請指出重複之處，並建議在繼續逐頁迭代之前進行協調。
• 對於後續的頁面編輯，請先修改特定的分割頁面及其頁面級腳本，然後重新整理或重新生成組合預覽，以避免使用者需要重複執行相同的更改。

觸發時機

當使用者要求以下事項時觸發此技能：

• 將大型 HTML 原型分割成獨立頁面。
• 將靜態原型組織成交付資料夾。
• 將靜態 HTML 原型元件化。
• 將原型打包以供交接或演示。
• 建立產品設計原型的更乾淨版本。
• 將單檔案靜態應用程式轉換為多頁面或靜態元件結構。
• 準備將原型遷移到 Vue、React、Taro、uni-app、微信小程式或其他前端技術棧。

建議的輸出結構

根據需求選擇一種或多種結構。

分割檔案版本

當使用者需要易於使用的靜態演示頁面或逐頁設計迭代時使用。

建議結構：

输出目录_YYYYMMDD-HHMMSS/
├── 拆分文件版/
│   ├── index.html
│   ├── page-a.html
│   ├── page-b.html
│   └── assets/
│       ├── styles.css
│       └── app.js
└── README.md

指南：

• 每個主要視圖變成一個 HTML 檔案。
• 儘可能透過普通連結保留頁面導航。
• 將共享的 CSS 和輕量級 JS 提取到 assets/ 中。
• 保持每個頁面獨立可在瀏覽器中打開。
• 保持頁面名稱有意義且穩定。

元件化靜態版本

當原型應易於後續遷移到前端框架時使用。

建議結構：

输出目录_YYYYMMDD-HHMMSS/
├── 组件化版/
│   ├── index.html
│   └── assets/
│       ├── styles.css
│       ├── components.js
│       ├── data.js
│       └── app.js
└── README.md

指南：

• index.html：外殼、根容器、腳本/樣式引用。
• assets/styles.css：共享樣式。
• assets/data.js：模擬數據和業務數據（適用時）。
• assets/components.js：可重複使用的 HTML 渲染函數或元件模板。
• assets/app.js：路由切換、狀態、事件綁定和簡單互動。
• 除非使用者要求特定框架，否則保持此版本無框架依賴。
• 如果同時存在分割的 HTML 頁面，請不要手動將其內容複製到 app.js 中。優先導入共享模板、載入頁面片段或使用確定性同步步驟，使分割頁面保持為維護來源。

從分割頁面產生的合併預覽

當使用者希望每個頁面可獨立編輯，同時也需要一個完整的互動預覽時使用。

建議結構：

prototype/
├── app.html                  # 完整預覽外殼
├── pages/
│   ├── welcome.html
│   ├── templates.html
│   └── ...
├── assets/
│   ├── css/styles.css
│   ├── js/common.js
│   ├── js/router.js          # 僅用於預覽路由 / 組合
│   └── js/pages/
│       ├── templates.js
│       └── ...
└── README.md

指南：

• 將頁面標記和頁面特定行為保留在 pages/ 和 assets/js/pages/ 中。
• 將 app.html 保持為外殼：裝置框架、導航、路由容器和共享腳本/樣式引用。
• 將 router.js 專注於載入頁面、綁定共享導航、保留狀態以及僅與預覽相關的關注點。
• 避免使用一個冗長的 app-combined.js 手動重寫每個頁面。如果作為短期解決方案存在此類檔案，請將其標記為生成或暫時的，並在進行大量頁面編輯之前將其與分割頁面協調一致。
• 當使用者要求修改一個頁面時，僅編輯該頁面及其頁面腳本，除非預覽外殼或共享樣式確實需要調整。

打包交付資料夾

當使用者要求完整的套件或交付捆綁包時使用。

建議結構：

产品原型完整包_YYYYMMDD-HHMMSS/
├── 使用說明.md
├── 原始文件/
├── 拆分文件版/
└── 组件化版/

指南：

• 僅包含演示和交接所需的檔案。
• 保持原始檔案名稱可辨識。
• 如果建立壓縮檔案，請使用帶有時間戳記的名稱。
• 除非使用者確認，否則不要刪除中間生成的資料夾。

工作流程

1. 檢查原型檔案。

   • 識別進入點檔案、主要視圖、共享 CSS、共享 JS、內聯事件處理器、資源、外部 CDN 依賴、對話框、抽屜、標籤和頁面導航。
   • 在編輯前使用 rg --files 和目標讀取。

2. 決定輸出結構。

   • 如果使用者僅要求分割：建立 拆分文件版。
   • 如果使用者要求遷移就緒或元件化：建立 组件化版。
   • 如果使用者要求交付：建立包含使用說明的完整套件。
   • 如果不確定，選擇能滿足需求的最小輸出。僅在確有需要時建立多個版本；為共享內容和行為保持一個權威來源。

3. 建立帶有時間戳記的輸出資料夾。

   • 建議時間戳記格式：YYYYMMDD-HHMMSS。
   • 保留原始檔案不變。

4. 提取並組織。

   • 將共享 CSS 移至共同樣式表。
   • 將共享 JS 移至共同腳本。
   • 規範化資源路徑。
   • 將主要視圖轉換為獨立的 HTML 檔案或元件模板。
   • 保留對演示重要的互動：導航、標籤、抽屜、模態框、切換、列表-詳細資訊轉換、基本表單和檔案輸入。

5. 解決執行時間和提取細節。

   • 在實作前選擇開啟模式：直接 file:// 頁面，或使用擷取片段或 ES 模組時使用 HTTP 預覽。對於需要 HTTP 的設計，不要承諾雙擊操作。盡可能重用現有的預覽伺服器；啟動伺服器需遵循使用者的授權規則。
   • 區分完整的 HTML 文件和可載入的片段。將片段載入到外殼時，將其相對資源和導航 URL 正規化到外殼的基準；原始片段插入不會保留來源文件的基準 URL，也無法可靠地執行其腳本。
   • 將內聯 CSS 移至樣式表時，重新調整 url(...)、字型和導入路徑相對於新樣式表的路徑。保留級聯順序、特異性和響應式行為。
   • 保持一個連貫的腳本模型。對於經典腳本，保留載入順序和共享狀態；對於模組，保留導入/匯出邊界。內聯處理器在沒有顯式橋接的情況下無法存取模組區域函數。
   • 明確掛載頁面行為，並在離開視圖時清理監聽器或計時器。驗證重新訪問頁面不會重複註冊操作。
   • 在分割之前盤點現有的儲存金鑰和狀態轉換。不要為了使演示運作而清除儲存或靜默覆蓋使用者建立的數據。

6. 撰寫交接文件。

   • 包括來源檔案、生成時間、進入點頁面、資料夾用途和建議的後續步驟。
   • 保持文件簡短且有用。

7. 驗證。

   • 檢查進入點 HTML 檔案是否存在。
   • 檢查連結的 CSS/JS 路徑、CSS 資源 URL、片段資源以及每個進入點或組合視圖的導航目標。
   • 在可行時在本機打開或預覽。
   • 對於視覺原型，如果瀏覽器工具可用，請驗證桌面/行動版佈局。
   • 比較關鍵路由和互動與原始的對比：初始渲染、前進/後退導航、重新訪問視圖、模態框確認/取消，以及重新整理後適用的保存狀態。
   • 提及任何未驗證的行為或外部 CDN 依賴風險。未檢查外部資源前，不要聲稱支援離線。

README / 使用說明模板

使用使用者或專案的語言撰寫簡潔的 README。以下中文範例可酌情修改；僅列出實際生成的條目，並說明是否需要 HTTP：

# 项目原型整理

生成时间：YYYY-MM-DD HH:mm:ss

来源文件：原始文件名.html

## 推荐打开

- `拆分文件版/index.html`
- `组件化版/index.html`

## 拆分文件版

适合静态原型演示和逐页设计调整。每个页面是独立 HTML，页面之间通过文件链接跳转。

## 组件化版

适合继续演进为 Vue、React、Taro、uni-app、微信小程序或其他前端结构。

## 说明

- 原始文件未被修改。
- 公共样式和脚本已整理到 `assets/`。
- 如需继续工程化，可优先迁移 `components.js`、`data.js` 和 `app.js`。

品質檢查清單

在最終回應前，請檢查：

• 原始來源檔案已保留。
• 輸出資料夾帶有時間戳記。
• 進入點檔案命名清晰。
• 資源路徑相對於每個 HTML 檔案都能正常運作。
• 頁面或視圖之間的導航仍正常運作。
• 重要的互動未遺失。
• README 或使用說明解釋了要打開的內容。
• 最終回應包含保存的路徑和驗證結果。