Skillry 嚴選
活潑風 UI/UX 作品集v1.0.2
使用這個 Skill：建置網頁。
人氣上升
5.032 次下載1 個喜歡0 次收藏
$4.99
購買這個 Skill 可以得到什麼？打造一個活潑的 UI/UX 作品集：黑色展示字母在插畫人像周圍彈跳、掛繩識別證、三欄式經歷與聯絡區塊，以及巨大的鏤空內容索引，下方是五欄依序編號、色彩鮮明的裝置框產品畫面。包含首頁、關於我、作品（含五個案例研究頁）、履歷與聯絡頁，具備篩選、成果數據與附驗證的聯絡表單。預設是一個可離線開啟的獨立檔案，專為產品與互動設計師打造。
更新於 2026年10月3日
效果預覽
相似的 Skills
查看所有 Skills
你將獲得
- 以虛構人物 Ines Okafor 為主的 11 路由範例：首頁、關於我、作品（含五個案例研究頁）、履歷、聯絡，以及精心設計的 404 頁。
- 以即時介面建立、放在手機、平板與筆電外框中的產品畫面，另有作品篩選、搜尋、排序、引言輪播、FAQ，以及含成功狀態的聯絡表單。
- 一個內嵌 Unbounded、Figtree 與 Geist Mono 的獨立檔案，附真正透明背景的扁平插畫人像與內建檢查。
適合
- 想要溫暖親切、又能展現專業作品質感的產品與互動設計師。
- 案例研究是 App、結帳流程或 Dashboard，可以用即時畫面呈現的設計師。
- 能把研究或專案對應到相同案例頁結構的 UX 研究員或小型工作室。
不適合
- 主要需要大量展示自己圖片圖庫的攝影師或藝術家。
- 極簡、單色的個人品牌；這個網站使用五種明亮的欄位色彩與彈跳字母。
- 開箱即可收訊息：在串接後端前，聯絡表單只會在頁面上顯示確認。
品牌設計與視覺規範網頁設計與數位體驗建置網頁建置作品集網站風格鎖定成果可編輯彈跳展示字母裝置樣機扁平插畫肖像掛繩識別證編號色欄
關於此 Skill
把你的故事和三到六個案例研究交給這個 Skill，它會打造一個作品集，感覺就像一位也會寫軟體的人精心製作的自我宣傳海報：展示字母在插畫人像周圍彈跳、掛繩識別證，以及依序編號、色彩明亮的產品畫面欄位。完整範例是虛構產品設計師 Ines Okafor，共有 11 個互相連結的路由。預設成果是一個可在任何瀏覽器離線開啟的獨立檔案。
你會得到
- 首頁：字母 Hero、識別證與問候語、經歷／社群／聯絡三欄、內容索引、流程步驟、客戶引言，以及 CTA 橫幅
- 案例研究頁：專案簡述、研究發現、流程、三畫面圖庫、成果數據、客戶引言，以及上一篇與下一篇連結
- 關於我、附技能標籤的履歷，以及含 FAQ 與驗證表單的聯絡頁
- Unbounded、Figtree 與 Geist Mono 皆內嵌於檔案中，不會從網路載入任何資源
使用方式
- 提供你的姓名、專業領域、城市、一段簡短問候、經歷，以及三到六個附簡述、流程與成果的案例研究。
- 你的 Agent 會建立每個產品畫面、依你的照片製作插畫，並執行內建檢查。
- 在桌機與手機上逐一點閱每個頁面與表單，再提出修改需求。
使用 Agent 的生圖工具製作插畫，可能會產生該工具的使用費用。聯絡表單只會在頁面上顯示確認，在串接後端前不會送出任何資料。
開始前需要準備什麼
- 你需要提供
- 姓名、專業領域、城市、接案狀態，以及一段第一人稱的簡短問候 · 三到六個案例研究，附專案簡述、研究發現、流程步驟、成果與客戶引言 · 經歷、技能、聯絡方式，以及用於製作插畫的個人照片
- 相依項目
- Agent 所在電腦需安裝 Node.js 18 以上版本，用來執行內建腳本產生單一離線檔案 · 產生檔案時需要網路連線，以便下載一次字型並內嵌 · Agent 中可用於製作插畫人像與工作室場景的生圖工具
- 外部費用
- 使用 Agent 的生圖工具製作插畫人像與場景，可能會產生該工具的使用費用。產品畫面直接在頁面中建立，不需要生圖。
- 最近實測
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
使用者評價
正在載入評價…