前端交接與程式碼 使用說明

用途

把頁面或元件寫成工程師能直接用的東西：行為規格表（點了什麼、出現什麼、失敗怎麼辦）、各種狀態，以及可以貼上的 HTML／CSS 和 CSS 變數。

適合誰

• 要把設計交給工程師的設計師與接案者。
• 自己要把畫面做出來的工程師。
• 已經有程式碼、想補齊狀態和例外處理的人。

怎麼用

1. 把這個 Skill 加進你的 AI 工具。
2. 說你用什麼做（純 HTML、React、Vue，或開店平台的自訂區塊）；有現有程式碼就貼上來。沒說就給純 HTML／CSS。
3. 直接說你要什麼，例如「幫我寫預約表單的規格和程式碼」。

範例

你這樣說：「幫我寫一個『送出預約』按鈕，按下去要有處理中的樣子，失敗要能再試一次。」

你會得到：一張行為規格表（入口、動作、結果、失敗時），一張狀態表（預設、滑過、按下、鍵盤焦點、停用、處理中），一段可以貼上的 HTML 和 CSS。顏色和字級用變數，不連外部資源，送出後鎖住按鈕避免重複送出。最後附 3 到 5 個要你自己測的動作。

注意

• 只寫前端畫面與互動，不做後端、資料庫、金流串接。
• 沒有執行環境，程式沒有實際跑過，貼上後請在瀏覽器測一次。
• 前端擋重複送出不能取代後端的防重複，請工程師另外處理。
• 有現有程式碼時，沒要求改的地方不動。

技序 Jixu AI 出品