AI 介面設計，先看懂畫面再動手開發
需求寫得再詳細，也可能對版面有不同想像。用免費 Skill 在 Codex 或 Claude Code 中產出可編輯 SVG，一邊討論產品，一邊檢視線框稿與 UI，確認後再進入實作。
把需求放到畫面上討論
給產品討論用的 AI 介面設計 Skill
AI 介面設計，從當下要決定的畫面開始
先釐清主要版面，再視需要補上狀態與行動版，讓每次討論都有明確焦點。
資訊與版面
檢查主要操作、輸入欄位及結果區的位置，確認使用者進入畫面後知道從哪裡開始。
視覺方向
在具體設計稿上討論字體、留白、色彩與圖片；可以先做線框稿，也能直接探索彩色 UI。
介面狀態
補充空白、載入中、成功與失敗畫面，釐清資料不足或操作失敗時該提供什麼引導。
行動版配置
檢視小螢幕上的內容順序與操作入口，讓重要欄位和主要行動有合適的呈現方式。
把 AI 介面設計接進既有工作流程
在熟悉的程式開發環境中延續需求討論，開啟設計檔確認方向，再把確認版本交給實作任務。
安裝免費 Skill
依照 Codex 或 Claude Code 安裝指南設定。下載 Skill 不用註冊本站帳號，AI 程式開發助手與模型存取需自行準備。
看稿、回饋、繼續調整
說明產品用途及主要操作。開啟 SVG，指出想調整的區域，沿用現有設計繼續釐清需求。
用確認稿進入實作
提供設計檔與需求說明，完成開發後再核對關鍵畫面。Skill 不會自動保證實作結果與設計一致。
若目前的規劃模式禁止修改檔案，應先遵守該限制，再於允許寫入的環境產出設計稿。
需求討論有畫面，差在哪裡？
用 AI 介面設計把版面具體呈現，方便指出問題，也讓開發任務取得可對照的版本。
| 規劃工作 | 只用文字 | 搭配設計稿 |
|---|---|---|
確認版面 | 用文字描述畫面，各自想像配置。 | 直接查看欄位、主要操作與結果的位置。 |
溝通修改 | 繼續解釋預期的樣貌。 | 指出特定區域、欄位或狀態，說明調整方向。 |
準備實作 | 提供文字需求作為依據。 | 同時提供文字需求及確認後的 SVG。 |
從現成場景參考開始規劃
免費 Skill 可單獨使用；本站場景包下載需有有效的付費訂閱。
AI 介面設計常見問題
免費 Skill 包含哪些功能？
可從自己的需求製作與修改設計稿，也可匯入相容場景包。AI 程式開發助手和模型使用費用另計。本站場景包下載需有效付費訂閱，核心設計流程不以購買為前提。
要怎麼在 Codex 或 Claude Code 使用？
將 Skill 安裝到對應工具的技能目錄，再以產品需求呼叫。指南涵蓋兩種環境；本機場景包輔助程式需 Python 3.9 以上。
可以在討論產品時直接看稿嗎？
可以，只要環境允許建立及顯示設計檔。開啟 SVG 後就能繼續討論。若規劃模式禁止寫入，仍須遵守限制；預覽方式依工具環境而定。
能沿用上一版繼續改嗎？
可以指定現有設計提出局部回饋。Skill 提供延續任務與保留確認內容的工作規則；調整後仍需自行檢視檔案。
產出的原型可以點擊操作嗎？
這個流程產出靜態 SVG。畫面中的按鈕與表單呈現設計意圖，不會執行登入、付款等功能；應用程式開發與測試需另行完成。
一定要買場景包嗎？
不用，可直接從產品需求開始。場景包補充特定業務的頁面、流程、狀態及主題，先預覽內容再判斷是否適合。
先確認畫面，再開始下一段開發
透過 AI 介面設計檢視版面、調整細節，把確認後的 SVG 與需求說明交給後續實作任務。
免費 Skill · Codex、Claude Code · 可編輯 SVG