前端原型重建 是做什麼的？
啟用條件
僅在以下兩點皆成立時使用此技能：
- 使用者提供或明確參照頁面圖片、截圖、模型或原型。
- 使用者明確要求生成、重建、轉換、實作或還原相關前端頁面。
如果使用者只要求查看或描述圖片，除非有明確指示，否則不要實作程式碼。
工作流程
-
首先檢查原型圖片。
- 識別頁面類型、視口、主要佈局區域、對齊網格、間距節奏、字體尺度、密度和視覺層級。
- 提取可見元素：導覽、表單、按鈕、表格、卡片、列表、分頁標籤、篩選器、媒體、空狀態、狀態指示器和圖示。
- 僅從可見的提示中推斷可能的互動，例如可懸停的操作、選中的分頁標籤、下拉選單、切換開關、篩選器、模態框、分頁或輸入狀態。
- 除非使用者要求功能行為，否則將不明確的內容視為靜態顯示。
-
在編寫程式碼之前檢查本地前端專案。
- 識別框架、路由、元件慣例、樣式方法、主題 token、CSS 變數、Tailwind 配置、設計系統、圖示庫和現有頁面模式。
- 優先使用現有元件、間距尺度、字體工具類、顏色 token 和佈局基本元素。
- 若與原型不衝突，盡量匹配最接近的現有頁面或元件模式。
-
規劃實作範圍。
- 選擇最符合專案慣例的最小檔案/元件結構。
- 除非專案有既定的測試資料或模擬資料模式，否則將靜態原型資料保持本地且明顯。
- 不要為了重建靜態頁面而引入新的狀態管理、元件庫、CSS 框架或全域主題變更。
-
實作頁面。
- 使用語義化 HTML 和專案原生元件重建佈局和視覺結構。
- 使用 CSS 處理佈局、大小、間距、響應式行為、hover/focus 狀態、過渡效果、圖層和簡單的視覺狀態。
- 僅在行為確實需要狀態或事件處理時才使用 JavaScript。
- 保持程式碼高效、可讀且符合產品級標準：清晰的元件邊界、最少重複、不引入使頁面難以理解的一次性抽象。
-
視覺驗證結果。
- 必要時啟動相關的本地開發伺服器或靜態預覽。
- 在目標視口以及至少一個響應式中斷點（若適用）下，將渲染後的頁面與原型進行比較。
- 在完成前修正在間距、層級、顏色、大小和溢出方面的明顯差異。
主題與顏色規則
以本地專案的主題為唯一真理來源：
- 優先使用專案 token、CSS 變數、Tailwind 主題值、設計系統屬性和現有元件變體。
- 若專案有匹配的語意 token，即使截圖顏色略有不同也應使用它。
- 若專案沒有合適的 token，則直接使用截圖顏色，並將其限制在重建的頁面/元件內。
- 除非使用者明確要求，否則不要僅為匹配一張截圖而修改全域主題檔案。
- 當本地主題意圖明確時，應優先保持品牌一致性，而非追求像素級精確的顏色複製。
佈局與元素提取
在編寫程式碼前記錄以下細節：
- 頁面外殼：頁首、側邊欄、頁尾、內容寬度、滾動區域、固定區域。
- 網格：欄、行、間距、卡片/表格/列表節奏、中斷點行為。
- 字體：標題/正文/說明文字尺度、字重、行高、截斷。
- 控制項：按鈕大小、輸入框高度、選中/禁用/載入狀態、圖示、徽章。
- 內容忠實度：標籤、可見文字、數字、日期、頭像、圖片佔位符和空狀態。
- 圖層：陰影、邊框、分隔線、覆蓋層、彈出視窗和 z-index 關係。
不要過度使用絕對定位。優先使用 flex、grid、內在尺寸、aspect-ratio、min/max 約束條件和基於容器的響應式規則。僅在處理覆蓋層、徽章、裝飾性錨點或無法以其他方式乾淨表達的截圖特定圖層時，才使用絕對定位。
互動指引
對於靜態頁面重建，僅在請求暗示的程度內實作互動：
- 當原型暗示有可訪問的 hover、focus、active、selected、disabled 和 loading 視覺效果時，務必包含。
- 僅在使用者要求互動行為或原型明顯依賴於它時，才實作簡單的開啟/關閉、分頁切換、選擇或篩選。
- 對於簡單的互動，盡可能優先使用 CSS 選擇器和原生 HTML 行為。
- 避免僅為修補佈局、間距、截斷、顏色或響應式行為而使用 JavaScript。應使用 CSS 解決這些問題。
程式碼品質規則
遵循大型程式碼庫的前端實務：
- 保持元件內聚力強，並按其領域或可見角色命名，而非模糊的視覺片段。
- 除非有真正獨立的職責，否則避免將頁面拆分為許多小元件。
- 若專案使用 TypeScript，靜態範例資料應有型別。
- 使用現有圖示庫而非手寫 SVG。
- 在適當的地方添加替代文字、標籤、鍵盤焦點樣式和語義結構。
- 當專案有間距、尺寸或顏色 token 時，避免使用硬編碼的魔術數字。
- 不要為 CSS 或現有工具即可處理的效果添加依賴項。
完成檢查清單
在最終回應前，確認以下事項：
- 已檢查圖片的佈局、元素、主題和隱含互動。
- 已檢查現有專案主題和前端慣例。
- 顏色優先使用本地 token，僅在缺少 token 時使用截圖顏色。
- 盡可能使用 CSS 處理視覺佈局和狀態。
- 已預覽渲染後的頁面，或說明無法預覽的原因。