01 說明頁面需求
使用 ai-ui-designer 技能。 設計一個商品海報工具頁面，包含商品名稱、賣點、尺寸選擇、產生按鈕與成果網格。
先說清楚使用者要完成的事，以及必要的欄位。
開發前先對齊畫面 · Codex / Claude Code
用免費 UI 設計 Skill，把構想整理成介面設計稿
想做產品頁面，卻還沒決定資訊怎麼排？把需求交給 Codex 或 Claude Code，透過 UI 設計 Skill 先產出靜態 SVG 線框稿，再調整視覺細節。不必先購買情境包。
下載免登入。輸出為靜態 SVG；程式助理與模型使用費用另計。
先討論版面，再決定視覺
從頁面目的、欄位與主要操作開始，逐步確認畫面。
看需求如何變成可檢視的設計稿
以商品海報工具示範免費技能：欄位、尺寸選項和結果區先在線框稿確認，再延續到彩色設計。兩份 SVG 都能開啟檢視，不需付費情境包。
安裝 UI 設計 Skill，畫出第一份線框稿
下載並解壓縮，將 ai-ui-designer 資料夾放進現有 Codex 或 Claude Code 的技能目錄。
1.放入技能檔案
SKILL.md 必須直接放在 ai-ui-designer 資料夾中。下載包已包含設計指令、參考資料與輔助腳本。
- Codex
- ~/.agents/skills/ai-ui-designer/
- Claude Code
- ~/.claude/skills/ai-ui-designer/
確認解壓縮後沒有多出一層巢狀資料夾。
2.交代頁面用途與主要操作
在助理中呼叫技能，說明目標使用者及必備內容。
Codex: $ai-ui-designer Claude Code: /ai-ui-designer 為我的產品首頁設計 SVG 線框稿，包含價值主張、功能介紹與註冊入口。
3.開啟 SVG，給出具體回饋
以瀏覽器或 SVG 檢視器查看成果，再要求調整標題層級、主要按鈕或區塊間距。
若找不到技能，先檢查目錄與 SKILL.md。Codex 會自動偵測變更，仍未顯示可重新啟動；Claude Code 請查看 / 選單。
請自備程式助理與模型存取權。本機情境包輔助腳本需 Python 3.9 以上版本；本站選用情境包的下載需有效付費訂閱。
把介面決策分段確認
先釐清資訊架構
用這項技能安排內容區塊、表單欄位和主要操作，透過灰階線框稿確認版面。
再建立視覺方向
沿用確認過的結構，調整字體、留白、配色與插圖。
在同一份稿上持續修訂
將 SVG 留在專案裡，需求更清楚時，再請助理修改對應區域。
免費版提供哪些內容？
從自己的需求出發
免費技能包含線框稿、彩色介面設計、主題套用與本機情境包管理。
情境包是選用的設計參考，不下載也能開始。
設計稿不等於運作中的應用程式
交付內容為靜態 SVG 與設計說明；畫面上的登入、付款或產生按鈕不會執行實際操作。
程式碼、後端服務與互動功能需另行開發。助理的可用性和模型計費依各工具條款辦理。
開始前想知道的事
- UI 設計 Skill 需要訂閱嗎？
- Skill 本身可免費下載，也能直接依需求設計。只有下載本站選用情境包才需有效付費訂閱；助理與模型費用另計。
- 如何在 Codex、Claude Code 呼叫？
- 安裝至對應目錄後，Codex 使用 $ai-ui-designer，Claude Code 使用 /ai-ui-designer，接著描述設計需求。
- 可以直接做出能上線的網站嗎？
- 這個流程產出靜態 SVG 線框稿與介面設計稿。可運作的網站、後端與實際互動需要獨立實作。
- 為什麼安裝後沒有出現？
- 確認 ai-ui-designer 資料夾直接包含 SKILL.md，並位於正確目錄。Codex 可嘗試重新啟動；Claude Code 請檢查 /ai-ui-designer 指令。
先把下一個頁面想清楚
下載 UI 設計 Skill，裝進程式助理。讓需求先成為可檢視、可修訂的 SVG 版面，再往開發前進。