Figma 轉前端頁面
成果與範圍
在現有專案中實作所選設計，並在瀏覽器中驗證結果。通常只需提供 Figma 網址即可開始；請從儲存庫中推斷專案慣例。當無法存取設計稿時，可接受提供的螢幕截圖或匯出檔案作為備用依據。
使用者指示優先於這些指南。保留現有變更，並將編輯範圍限制在請求的範圍內。在選擇檔案或路由之前，請先確認任務是新頁面、既有頁面更新、區塊還是可重複使用的元件。不要將元件或局部修正轉變為新頁面。
核心限制
- 在編輯前先閱讀相關的儲存庫程式碼。適當時重複使用其框架、路由器、樣式、代碼權杖、元件、資產和資料慣例。
- 將設計幾何形狀轉換為佈局規則。優先使用普通流、彈性盒和網格；僅在實際重疊、裝飾或覆蓋層時才使用絕對定位。Figma 群組是參考依據，而非強制性的元件邊界。
- 重複使用相同的資產和合適的已對應元件。保留獨特的圖像和圖示，不要用近似符號替代。不要將整個互動區塊渲染為螢幕截圖。
- 僅實作需求、原型或現有產品行為所支援的功能。不要僅憑外觀推斷粘性定位、篩選語義、API 合約或導航目的地。
- 保留語義化控制項、可存取的名稱、鍵盤操作和適當的焦點行為。除非要求，否則排除裝置 chrome（例如作業系統狀態列）。
- 未將實作目標與設計進行比較之前，不得聲稱視覺一致性。明確報告受阻或未經驗證的需求。
CSS 相容性
- 在彈性盒、網格和重複項目之間使用
margin進行間距。請勿使用gap、row-gap或column-gap。將間距設定在具名項目類別上；當第一個或最後一個項目的外邊距不同時，為其指定明確的修飾類別。不要使用像是> * + *、:first-child或:last-child之類的選擇器來取代gap。 - 針對明確的元件類別撰寫選擇器。在可能編譯為 WXSS 的樣式中，避免使用通用選擇器和相鄰兄弟選擇器（
+、~）。在使用其他偽類或組合子之前，請檢查目標平台是否支援該選擇器；不要假設瀏覽器 CSS 支援就等同於 WXSS 支援。 - 對於遮罩和固定面板，請使用明確的
top、right、bottom和left宣告，而不是inset。使用env(safe-area-inset-*)時，請在包含env()的宣告之前立即放置純值備用方案。在固定寬度和內邊距需要配合的地方設定box-sizing: border-box。 - 在 Taro H5 中，內建的
taro-button-core:active樣式即使按鈕的懸停類別已被禁用，也可能使按下的按鈕變灰。如果設計沒有按下顏色變更，請覆蓋特定按鈕類別的作用中背景和文字顏色，同時保留每個按鈕的正常顏色。不要全域重設按鈕或變更禁用樣式。
證據與決策
在收集或更新設計證據時，請閱讀 design-evidence.md。保留一份關於目標、專案慣例、資產對應、適用功能和不明確之處的精簡工作摘要。對於小任務，上下文筆記就足夠了；除非有用或要求，否則不要產生規格文件。
分類決策：
- 已確認： 明確的使用者需求、所選設計屬性、原型行為或相關現有產品合約。
- 推斷： 與專案一致的普通佈局調整、換行和局部元件邊界。選擇最小合理的實作方式，並揭露重大假設。
- 未知： 缺少提交合約、模糊的目標位置、衝突的目標框架或重要的業務行為。首先檢查可用證據；如果仍有需要，則提出一個重點問題。在等待答案的同時繼續獨立工作。
可見的控制項本身並不能確定其業務行為。不要偽造成功的提交、發明端點或默默地用模擬行為替代。僅在任務或現有預覽慣例支援的情況下使用固定測試資料，並標明該限制。
執行
遵循依賴關係，而不是重複固定順序。對於局部修正，重複使用仍然有效的證據，並檢查修改區域加上受影響的共享行為。獨立的儲存庫和設計讀取可以批次進行。
1. 識別目標與專案
解析檔案金鑰和節點 ID。檢查所選節點的類型、尺寸和周圍上下文。如果節點 ID 不存在，請檢查頂層候選項；僅在目標明確時才選擇。
使用目標明確的搜尋和讀取來確定：
- 適用的儲存庫指示和目前的變更；
- 套件管理員、開發與驗證命令；
- 可能的目標檔案和最近的現有實作；
- 路由器、樣式、代碼權杖、字型、視口/單位處理和元件慣例；
- 現有的設計到程式碼的對應和資產（如果可用）。
對於既有頁面或元件的工作，請保留其進入點。對於新頁面，請遵循現有的路由系列和參數慣例，並檢查衝突。僅將框架名稱用作備用命名提示；不要強加一個通用細節路由。
2. 取得足夠的設計證據
優先使用可用的 Figma 工具來獲取元數據、螢幕截圖、變數、元件對應和資產。在呼叫這些工具之前，請遵循任何所需的特定於工具的技能先決條件。如果存取失敗，請嘗試可用的已驗證瀏覽器，然後是提供的螢幕截圖或匯出檔案。不要使用網路搜尋來替代實際設計。
從目標螢幕截圖和結構概覽開始，然後取得相關子樹的詳細資訊。檢查折疊內容。不要重複檢索整個檔案或無關的框架。將不可用的測量值或狀態記錄為不確定性，而不是確切事實。
3. 映射與實作
將設計映射為有意義的模組，在現有元件的行為和外觀合適時選擇它們。當重複使用、獨立行為或複雜性證明合理時，提取一個元件；不要拆分每個包裝器或為一個頁面建立設計系統。
及早解決字型和主要資產問題。保留資產的長寬比、透明度和適當的解析度；使用儲存庫儲存慣例和語義化檔案名稱。檢查運行時資產是否從專案支援的持久位置載入。
根據提供的變體和現有專案行為推導流體尺寸、最大寬度、換行和中斷點。只有一個設計尺寸時，實作一個保守的適配方案，並將其與設計師指定的響應式佈局區分開來。測試請求的平台；不要建立未經請求的桌面或行動重新設計。
對於在 H5 和小程式建置之間共享樣式的 Taro 專案，請檢查生成的 WXSS 以及原始樣式表。當可用時，在每個請求的運行時驗證間距和按下狀態。
啟用僅相關的行為分支：
- 導航：使用既有的目的和路由行為。
- 表單和集合：使用現有的資料合約；實作必要的驗證、載入、空白、錯誤和成功狀態。
- 標籤頁和篩選器：從證據中確定狀態所有權和選擇語義。僅在支援時才應用草稿/提交行為。
- 表格：保留對齊方式和顯示的邊框；提供適合目標視口的溢出處理。
- 覆蓋層或粘性 UI：閱讀 overlays-and-sticky.md。
- 動畫或多媒體：重現已確認的行為，並在適用的情況下處理載入和減少動畫。
4. 驗證與迭代
重複使用合適的執行中伺服器，或在可用連接埠上啟動記載的開發指令。使用可用的瀏覽器自動化工具，在適當時優先使用應用程式內瀏覽器，然後是已驗證的外部瀏覽器或專案的瀏覽器工具。檢查相關路由或現有元件預覽。
閱讀 acceptance-checklist.md 以進行視覺比較、適用的互動檢查和完成標準。在進行局部修飾之前，先修正大的結構差異。每次變更後，請驗證受影響的區域；最後對整個目標進行最終檢查。
執行相關的儲存庫檢查，檢查最終的差異，並區分預先存在的失敗與引入的失敗。避免僅為執行驗證而添加依賴項或進行大規模重構。保留預先存在的伺服器會話，並使為此任務啟動的任何伺服器的狀態保持明確。
復原與完成
如果存取或執行時驗證失敗，請檢查具體錯誤並嘗試可用的相關替代方案。在沒有新證據的情況下，停止重複未改變的失敗。繼續可以獨立完成的工作，然後報告確切的阻礙因素、已實作的內容以及仍未驗證的內容。缺少工具或憑證並非成功驗證的證據。
當請求的目標已實作、適用的檢查通過且沒有已知的必須缺陷時，即視為完成。可以記錄微小的渲染差異；未解決的佈局錯誤、缺少必需的行為或受阻的瀏覽器檢查不得呈現為完全完成。
簡潔報告：
- 已實作的目標和進入點，僅在適用時包含路由；
- 有意義的行為和元件變更；
- 預覽位置和實際執行的檢查；
- 重大假設、未解決的差異或阻礙因素。