從零建立前端介面

從零建立前端介面 是做什麼的？

將產品需求轉化為一個功能完整、可觸及且可驗證的介面。當主要目標是建立新的前端（在空白專案或明確要求的新區域中）時，此技能主導全局。它會實作、在可行時執行專案，並報告實際驗證的結果。

邊界與協作

• 新的前端： 此技能主導，即使有參考資料輔助引導原創設計亦然。從參考資料中提取原則，但不得複製第三方品牌、內容或資產。
• 審計現有介面： 請使用 audit-frontend-designer-konvert，該技能為唯讀。若需「審計並修正」，請從該技能開始，並遵循其核可流程。
• 套用參考、直接優化現有介面或實作已核可的報告： 請使用 design-por-referencia-konvert，並遵守其關於範圍、核可與外部依賴的規則。
• 在混合專案中，僅實作被授權的新區域；識別並保留現有的整合與介面。請參閱協作指南以利用其他技能的知識與工具，避免重複造輪。

流程

1. 理解需求與脈絡。 閱讀專案說明、相關檔案、現有技術棧與慣例。識別產品、受眾、主要任務、頁面、資料、品牌識別、限制條件以及交付位置。區分已提供的事實與假設；不要虛構人物誌或研究結果。如果無法推斷出必要的選擇且該選擇具有不可逆的影響，則要求釐清；對於其他決策，則陳述假設並繼續前進。將結果記錄在探索與簡報中。
2. 定義具體提案。 選擇相關的使用者旅程與狀態：初始、載入、空白、成功、錯誤及恢復狀態（若適用）。使用狀態與元件列出每個畫面中的元件與狀態，並將審計師使用的單位作為完成的標準。對於具有多個頁面或類別的專案，使用內容結構與導航定義路徑。定義與受眾和目標一致的内容、層級、導覽與視覺方向，並根據視覺基礎決定設計令牌。當兩種選項會實質改變最終結果時，使用視覺方向探索。使用現有的本地素材，並在可用且相關時，使用審計師的目錄與知識單元。僅引用實際查閱過的參考資料。視覺參考是靈感來源，而非可用性的證據。
3. 規劃建構。 重複使用現有的框架、路由、元件與令牌。在空白專案中，根據技術棧選擇，選擇最適合需求與環境的簡單方案；證明新依賴項的必要性，並在執行前檢查版本與腳本。不要假設已獲得付費服務、發布、外部帳戶或真實數據的授權。根據需求限制後端、身分驗證與整合的範圍；若缺少這些功能，則使用合成數據並清楚標示其限制。
4. 實作。 在授權範圍內建構真實的內容、語義結構、樣式、元件與互動。避免沒有行為的按鈕或偽裝成功能連結的虛假鏈接：實作要求的操作，或清楚標示其不可用性。使用一致的令牌、可見的狀態與響應式佈局。套用內容、SEO、效能與衡量的規則：標示虛構內容、在公開頁面提供基本 SEO，且未經要求不加入分析工具。參考安全性與本地化以保護前端，並在產品支援多種語言或區域時，根據定義的語言環境調整介面。未經必要與適當授權，不得移除或替換使用者的程式碼、數據、整合或檔案。
5. 驗證。 執行與專案相關的檢查，盡可能在本地執行介面並開啟渲染結果。檢查主要任務、內容、導航、鍵盤、焦點、表單、相關狀態、窄螢幕與桌面；在適用時評估對比度與減少動畫設定。使用參考技能提供的腳本（若可用），並配合授權的輸出與合成數據。對於沒有先前版本的創作，不要虛構前後對比：將首次截圖記錄為初始參考，僅比較實際存在的狀態或版本。請參閱驗證。
6. 交付與報告。 檢查完成的定義並使用其中的報告範本。報告已更改的檔案、相關決策與假設、如何執行、已執行檢查及其結果、模擬的功能以及無法驗證的部分。將任務、檢查過的區域、決策與已驗證的標準記錄在授權輸出目錄下的 execution-record.json 檔案中，遵循執行記錄及其驗證器。不要儲存提示或私有 URL。若無證據，不得聲稱已進行使用者測試、完全符合規範、達到某種效能或商業成果。如果瀏覽器無法使用，請明確報告介面未經視覺檢查。

隱私與安全性

僅使用授權的目標與環境。不得讀取或洩露不必要的 .env、憑證、會話或個人資料；使用合成內容並在分享前檢查截圖。尊重截圖工具的保護與限制：檢查會執行 JavaScript，因此不應被用作不受信任網站的沙箱。僅在授權且被 Git 忽略的目錄（或檢出目錄之外）記錄工件；未經必要，不得更改專案的隱私設定。未經授權，不得將數據發送給第三方、建立帳戶或發布。

品質標準

介面必須清楚支援主要任務，具備清晰的視覺層級、一致的內容與有用的反饋。根據上下文關注語義、焦點、無障礙名稱、標籤與回流；不要僅憑自動化檢查就聲明可及性認證。不得虛構轉換指標、推薦信、徽章、價格、整合或功能。寧可在範圍內提供完整且可測試的實作，也不要為了看似令人信服的外觀而提供功能損壞的操作。

完成的定義

僅當主要任務在約定範圍內端到端運作，且完成的定義中的每個項目都已滿足（或提供不適用（附理由）或未驗證（附理由）的狀態）時，交付才算完成。在從零開始的創作中最常失敗的點：

• 未提供除正常狀態之外的狀態（載入中、錯誤、空白、成功與恢復）以供觀察；
• 焦點被移除或遮蔽、僅在占位符中提供標籤、僅透過顏色指示錯誤；
• 未在渲染結果中測量對比度與觸控目標；
• 看起來有功能但實際上無任何作用的按鈕與鏈接；
• 虛構的商業數據、推薦信或整合；
• 未經記錄的決策便添加分析工具或外部字體。

參考資料與範例

資料	使用時機
探索與簡報	開始建構前：具有模式與假設記錄的提問。
技術棧選擇	空白專案，無既定平台。
視覺基礎	可驗證的對比度、目標與焦點令牌及限制。
視覺方向探索	原創方向、具影響力的選項與渲染結果確認。
內容結構與導航	新專案中的路徑、標籤與頁面組織。
狀態與元件	依畫面的清單與作為完成標準的審計師單位。
內容、SEO、效能與衡量	公開頁面、巴西格式、Core Web Vitals 與隱私。
安全性與本地化	動態內容、外部資源，以及（若適用）多語言或區域。
驗證	如何執行與記錄檢查。
協作	何時使用審計師與執行師技能。
完成的定義與交付	在報告交付之前。
登陸頁面簡報範例、電子商務簡報範例 與 交付報告範例	展示預期詳細程度的合成範例。