SVG 原始檔可自行修改
文字、圖形與配置皆可編輯。保留原包，另建工作副本，方便比較改稿前後的內容。
AI 圖像生成服務 · SVG 介面素材包
AI 繪圖 UI 素材，先把服務流程想清楚
AI 繪圖 UI 素材適合正在規劃圖像生成服務的獨立開發者與產品團隊。把生成設定、作品紀錄、點數與訂閱方案放在同一套介面中檢視，再透過免費的 AI UI Designer Skill，在 Codex 或 Claude Code 調整 SVG 版面、文字與配色。
有效付費訂閱已包含此情境包，下載不扣點數。
靜態 SVG 設計稿 · 包內中文範例文案 · 不含應用程式碼
- 桌面版頁面
- 6
- 配色主題
- 2
- 行動版參考
- 2
- 可編輯原始檔
- SVG
你的繪圖服務，需要哪些操作頁面？
從首頁引導到作品管理與方案選擇，逐頁檢查使用者會看到什麼。每個桌面頁面皆提供灰階線框稿、淺色稿與深色稿，可先確認資訊層級，再考慮視覺風格。
產品首頁
規劃服務介紹、作品範例與開始生成的入口。
登入與註冊
檢視登入欄位，並參照狀態板安排註冊與錯誤提示。
生成工作區
安排提示詞、模型、圖片比例、張數、點數消耗與結果。
作品紀錄
檢查搜尋、作品詳情、重用參數與刪除確認如何呈現。
方案與點數
參照點數餘額、範例訂閱方案與購買結果的設計。
帳號設定
規劃個人資料編輯、儲存回饋與登出位置。
預覽保留包內中文範例與虛構資料；按鈕、表單及付款畫面均為靜態設計。
AI 繪圖 UI 素材，包含頁面也包含狀態
ZIP 集中收錄可編輯介面、元件與情境說明，方便在調整版面時一併檢查操作回饋。
灰階線框與明暗配色
附上 2 份主題 JSON。先看灰階線框中的資訊優先順序，再選擇淺色或深色設計作為起點。
錯誤、空白與處理中狀態
參考按鈕、輸入框、選單、卡片與對話框；狀態板涵蓋生成中、沒有作品、點數不足、登入錯誤及付款失敗。
行動版參考有明確範圍
生成工作區與作品紀錄提供 390px 寬設計。其他頁面的行動裝置行為寫在情境說明中，沒有獨立行動版稿件。
下載後，交給 Skill 按需求改稿
搭配免費 Skill 使用 AI 繪圖 UI 素材；匯入輔助腳本需要 Python 3.9 以上版本。
- 1
取得素材 ZIP
登入具有效付費訂閱的帳號即可下載。素材包下載包含於訂閱權益，不扣生成點數。
- 2
提供 ZIP 路徑並匯入
在 Codex 或 Claude Code 安裝 AI UI Designer Skill，將 ZIP 的本機路徑交給助手並要求匯入。
- 3
指定改稿需求並檢視
選擇主題，說明要改的內容與配置，再檢視 SVG。持續修改工作副本，保留原始檔。
改稿範例：網拍商品情境圖工作區
請使用圖像生成場景包的淺色主題，把工作區改成網拍商品情境圖工具。將提示詞欄位改為商品名稱與使用情境，提供圖片比例選項，保留點數消耗說明、生成狀態與結果卡片，輸出可編輯 SVG。
免費 Skill 與訂閱素材包怎麼選？
想依自己的需求設計，可先使用免費 Skill；需要現成頁面作為參考，再透過有效付費訂閱下載這套場景包。
- 依需求從頭設計
- 免費 Skill · 免費使用
- 匯入情境包與套用主題
- 免費 Skill · 免費使用
- 下載此組頁面
- 情境包 · 有效付費訂閱
- 繼續使用已下載素材
- 情境包 · 訂閱到期後仍可本機使用
FAQ
下載前，確認檔案與使用條件
先了解設計稿、程式開發與訂閱權益各自涵蓋什麼。
用一套頁面，檢查你的產品操作流程
先預覽 AI 繪圖 UI 素材，檢查工作區、作品紀錄與方案頁面是否符合需求。確認後透過有效付費訂閱下載，再用免費 Skill 修改 SVG 與主題。
下載 SVG 素材包有效付費訂閱已包含此情境包，下載不扣點數。