SHOWREEL · 作品輯
My Design Process
設計流程介紹
SCROLL TO EXPLORE
Design has never been just about making screens look good — it’s about solving problems, and I care most about the how. In the AI era, the craft is shifting from Figma to Claude Code, and what one designer can ship keeps expanding. This year, I’m learning every new way to get design done.
設計從來不只是把畫面變好看。主要在於解決問題，因此更專注於如何解決，在大AI時代，從 Figma 到 Claude Code 製作上開始轉變，設計師能完成的範圍也逐漸變廣，今年也努力多學習不同的方式完成設計任務。
定義問題
A request lands — I do not draw yet. I read the current UI, question whether the ask makes sense, and keep asking AI why until the problem is sharp.
收到需求，先不急著動手——我會先看現有的 UI、判斷需求合不合理，並且反覆問 AI「為什麼要這樣做」，把問題定義清楚。
需求釐清 · Define
現有 UI 檢視 · UI Review
合理性判斷 · Sanity Check
AI 需求拆解 · Problem Probing
I sweep real product screens on Mobbin — how do the best solve this? Knowing the patterns well is what earns the right to break them.
用 Mobbin 掃過競品的真實畫面，看同類產品怎麼解這題；把模式看熟，才知道哪些慣例該跟、哪些該打破。
Mobbin 競品掃描 · Mobbin Sweep
設計定義 · Patterns
AI 模式歸納 · Pattern Synthesis
競品研究
AI 打底
Claude Code builds the UI for me — working screens, not mockups. I judge what comes back: keep what is right, rerun what is not.
讓 Claude Code 直接把 UI 做出來——不是示意圖，是能跑的畫面。生成後由我判斷：對的留下，不對的重來。
Claude Code 生成 · Build
Figma 製作 · Build
多版本嘗試 · Variants
AI 可用初版 · Working Drafts
Then my hands take over in Figma — type, spacing, states — until every detail holds. Approved work becomes components, built by Claude Code or by me.
接著進 Figma 親手細修——字級、間距、狀態，直到每個細節都站得住；確認後交給 Claude Code 建立元件，偶爾我自己動手。
Figma 細修 · Hand Refinement
設計系統對齊 · Design System Fit
AI 元件建置 · Component Build
手工細修
交付迭代
I present, then ship — front-end edits by Claude Code or handed to engineers. Launch is not the finish line; testing and iteration are the routine.
完成後開會報告，接著交付——前端有時我用 Claude Code 自己改，有時交給工程師。上線不是終點，測試與迭代才是日常。
Claude Code 改前端 · FE Edits
工程協作 · Handoff
測試迭代 · Iterate
AI 前端實作 · Code Changes