ChiYu Code Journey

tag

UX/UI

這裡整理與「UX/UI」相關的已發布文章，依最新更新排序。

36 篇文章

Latest first

文章列表

一般更新 前端開發 2026-09-30 10 分鐘閱讀 點閱 0

Day 30｜AI 交出畫面不等於完成：30 天後，我改用任務驗收 UI

2026 iThome 鐵人賽 Vibe Coding UI Day 30：安安～我是ChiYu～ 重新驗收 LumenDesk 成員管理後台後，我開始寫這個系列的最後一篇。 第一版很快就完成了。 七段工作回顧、四步驟流程、三輪 Prompt、八題檢查表，全部排得整整齊齊。該有的都有。 我從頭讀了一次。 很…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-29 10 分鐘閱讀 點閱 0

Day 29｜同一句「幫我做後台」，28 天後我不再先看畫面

2026 iThome 鐵人賽 Vibe Coding UI Day 29：安安～我是ChiYu～ 我重新打開第一天做的 LumenDesk 成員管理後台，在搜尋框輸入 Orbit。 三筆資料，一筆都沒動。 下面是依照第一版需求重建的錯誤現場。畫面使用固定的虛構成員資料，不含真實個資： 側欄、摘要卡、搜尋、…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-28 12 分鐘閱讀 點閱 0

Day 28｜圖片要展示、選擇、輪播還是放大？七種媒體元件怎麼分工

2026 iThome 鐵人賽 Vibe Coding UI Day 28：安安～我是ChiYu～ 從 Data Table 進入一筆活動專案後，詳細頁要放六張場地照片和一段教學影片。我把需求交給 AI： 做一個有圖片輪播和影片的漂亮產品頁。 下面是依照第一版需求重建的錯誤現場。畫面使用虛構活動資料與示意媒…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-26 11 分鐘閱讀 點閱 0

Day 26｜小型標記怎麼分工？Badge、Tag、Chip、Filter Chip、Status 與 Avatar

2026 iThome 鐵人賽 Vibe Coding UI Day 26：安安～我是ChiYu～ 近期專案改成 List 後，名稱、負責人和里程碑終於排整齊了。結果每列旁邊又冒出一整排小膠囊：紅底的「3」、藍底的「設計系統」、可以移除的「陳怡安 ×」，還有綠色的「已同步」。 我給 AI 的追加需求是： 請…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-25 12 分鐘閱讀 點閱 0

Day 25｜Card 不是比較漂亮的 List：內容容器怎麼選才讀得懂

2026 iThome 鐵人賽 Vibe Coding UI Day 25：安安～我是ChiYu～ 專案資料恢復後，AI 很貼心地替每一筆套上圓角、陰影和滑過去會浮起來的效果。三張 Card 排在一起，SaaS 感可以說是相當充足。 我當時給的需求只有一句： 請把近期專案做成現代、好看的 Card。 結果同…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-24 10 分鐘閱讀 點閱 0

Day 24｜畫面空白，不代表沒有資料：Empty、Error、Offline、Permission 與 Success State

2026 iThome 鐵人賽 Vibe Coding UI Day 24：安安～我是ChiYu～ Loading 跑完後，LumenDesk 的「專案」頁面只剩一句： 目前沒有資料。 我當時給 AI 的需求也差不多簡短： 沒有資料時顯示「目前沒有資料」，並提供重新載入。 結果篩選零筆、API 失敗、離線、…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-22 10 分鐘閱讀 點閱 0

Day 22｜訊息可以自己消失嗎？Toast、Snackbar 與 Notification

2026 iThome 鐵人賽 Vibe Coding UI Day 22：安安～我是ChiYu～ 訊息站對位置後，LumenDesk 接著發生三件事： - 成員角色儲存成功。 - 「八月活動文案」被移除。 - 有人送來新的專案申請。 我把三件事縮成一句： 儲存完成後跳一個通知；刪除草稿後也跳同一種。新的申…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-21 10 分鐘閱讀 點閱 0

Day 21｜重要訊息到底該放在哪裡？Alert、Banner 與 Callout

2026 iThome 鐵人賽 Vibe Coding UI Day 21：安安～我是ChiYu～ 管理員準備儲存成員角色時，畫面同時冒出三則訊息： - 通知管道尚未選擇，設定無法儲存。 - 系統今晚會維護一小時。 - 新成員最好先從最小權限開始。 我當時留給 AI 的需求只有一句： 系統有錯誤或提醒時，顯…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-20 10 分鐘閱讀 點閱 0

Day 20｜滑過去出現的，不一定是 Tooltip：Tooltip、Popover 與 Hover Card

2026 iThome 鐵人賽 Vibe Coding UI Day 20：安安～我是ChiYu～ 昨天，我把林子安的詳細資料放進 Drawer，總算不用每看一位成員，就把整張清單蓋起來一次。 清單脈絡保住了，Drawer 裡卻又冒出三個需求： - 角色欄位旁的問號，要解釋權限規則。 - 管理員要能繼續變更…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-19 9 分鐘閱讀 點閱 0

Day 19｜點資料表一列後，不一定要跳 Modal：Drawer、Sheet 與 Bottom Sheet

2026 iThome 鐵人賽 Vibe Coding UI Day 19：安安～我是ChiYu～ 昨天，我用 Escape 取消了「停用林子安」這個危險動作。帳號保住了，管理員也沒有因此下班，反而接著問： 那我可以先看一下林子安的部門、角色和目前專案嗎？ 很合理。停用帳號以前先把資料看完，總比按下去之後才…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-18 9 分鐘閱讀 點閱 0

Day 18｜彈窗要不要鎖住背景？Modal、Non-modal、Alert Dialog 與危險確認

2026 iThome 鐵人賽 Vibe Coding UI Day 18：安安～我是ChiYu～ 專案結構整理清楚後，我按下成員列上的「停用帳號」。畫面中央立刻出現一張白色卡片，後面有灰色遮罩，右下角還放了一顆紅色按鈕。 看起來非常像完成品。 下面是依照第一版問題重建的錯誤現場，不含真實帳號與個人資料： …

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-17 10 分鐘閱讀 點閱 0

Day 17｜資料有層級時，別只用縮排：Tree View、Nested List、Treegrid 與 Expandable Row

2026 iThome 鐵人賽 Vibe Coding UI Day 17：安安～我是ChiYu～ 昨天把資料值和命令分開後，我從 Command Palette 執行「檢視專案結構」。AI 很快交出一張有箭頭、有縮排，點下去也會展開的畫面。 乍看就是一棵樹。 再看仔細一點，子專案、附件、檢核紀錄和備註全部…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-16 11 分鐘閱讀 點閱 0

Day 16｜選一個值，還是執行命令？Select、Menu、Overflow Menu 與 Command Palette

2026 iThome 鐵人賽 Vibe Coding UI Day 16：安安～我是ChiYu～ 工作區設定整理完後，我回到專案列表。最後一欄只放了一顆三點按鈕，展開後依序出現： 進行中、編輯、刪除。 畫面排得很整齊，行為卻像一道突襲測驗。 「進行中」會保存任務狀態；「編輯」應該開啟編輯介面；「刪除」則可…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-14 10 分鐘閱讀 點閱 0

Day 14｜使用者走到哪裡了？Breadcrumb、Pagination、Stepper、Progress 與頁內導覽

2026 iThome 鐵人賽 Vibe Coding UI Day 14：安安～我是ChiYu～ 昨天把桌面和手機導覽重新分工後，我終於順利進入 LumenDesk 的帳號申請頁。這次沒有迷路，頁面裡卻一次冒出五種「我現在到哪裡」。 我想知道目前位在系統哪一層、申請做到第幾步、紀錄還有幾頁、文件完成多少；…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-13 11 分鐘閱讀 點閱 0

Day 13｜手機版不是把 Sidebar 縮小：Header、Navbar、Sidebar 與 Bottom Navigation 怎麼分工

2026 iThome 鐵人賽 Vibe Coding UI Day 13：安安～我是ChiYu～ 昨天把邀請成員和建立活動的輸入流程接起來後，我順手把瀏覽器縮到 360px。桌面那條 Sidebar 依然很有自己的想法，硬是占著半張畫面。 內容區已經快被擠成收據了，它還站得筆直。 問題來自一開始的需求： …

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-12 8 分鐘閱讀 點閱 0

Day 12｜進階輸入不是越多越完整：OTP、Tag Input、Color Picker 與兩種 Editor

2026 iThome 鐵人賽 Vibe Coding UI Day 12：安安～我是ChiYu～ 昨天，表單終於能把人從錯誤帶回完成。接著輪到活動內容，AI 很自然地提出一份「功能完整」的升級方案：六格驗證碼、標籤膠囊、色盤，外加一整排編輯工具。 回頭看需求，這扇門確實是我自己打開的： 幫我做一個功能完整…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-11 8 分鐘閱讀 點閱 0

Day 11｜表單錯了，怎麼帶人修回來？從 Label 到 Validation Summary 的修正路徑

2026 iThome 鐵人賽 Vibe Coding UI Day 11：安安～我是ChiYu～ 昨天，三份附件終於可以各自上傳、失敗與重試。我把活動名稱留空、Email 填錯，再按下「發布」，整份表單卻只亮起幾個紅框。 為了排除活動頁自己的問題，我又把前幾天完成的「新增成員」表單抓回來重測。原始需求同樣…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-10 9 分鐘閱讀 點閱 1

Day 10｜檔案不是選完就好：上傳流程的完整狀態

2026 iThome 鐵人賽 Vibe Coding UI Day 10：安安～我是ChiYu～ 昨天，活動日期和預約時段終於各自歸位。接下來只剩把海報、參與名單和場地照片傳上去，我原本想得很簡單：畫一個框，讓管理員把檔案拖進去，收工。 幫我做一個漂亮的檔案上傳區，要能拖進去。 AI 很配合。虛線框、上傳…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-09 8 分鐘閱讀 點閱 0

Day 9｜輸入日期、選時間還是看整月？五種日期時間元件怎麼選

2026 iThome 鐵人賽 Vibe Coding UI Day 9：安安～我是ChiYu～ 昨天，LumenDesk 的活動預算、人數和餐點數量終於各自找到適合的控制。沒想到我一按下「下一步」，AI 又端出一張佔掉快半頁的月曆。 活動日期找它、報名期間找它、預約時段還是找它。這張 Calendar 一…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-08 7 分鐘閱讀 點閱 0

Day 8｜數值要輸入、拖曳還是評分？六種數值控制的選型

2026 iThome 鐵人賽 Vibe Coding UI Day 8：安安～我是ChiYu～ 昨天，LumenDesk 的邀請成員流程終於走完。新團隊接到的第一個工作是建立內部活動，畫面裡馬上出現一大群數字：48,000 元預算、每組人數、配送距離、餐點數量，活動結束後還要收滿意度。 我把需求濃縮成一句…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-07 7 分鐘閱讀 點閱 2

Day 7｜別再把所有下拉都叫 Dropdown：從 Select 到 Multi-select 的選型指南

2026 iThome 鐵人賽 Vibe Coding UI Day 7：安安～我是ChiYu～ 昨天把通知設定拆成 Checkbox、Radio 與 Switch 後，邀請成員流程只剩兩個欄位：「所屬部門」和「協作者」。 部門要能搜尋，但只能從既有資料選一筆；協作者同樣要搜尋，卻可以留下多筆結果。AI 第…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-06 8 分鐘閱讀 點閱 1

Day 6｜五種選擇控制怎麼分？Checkbox、Radio、Switch、Toggle Button 與 Segmented Control

2026 iThome 鐵人賽 Vibe Coding UI Day 6：安安～我是ChiYu～ 昨天才把帳號、密碼、搜尋與備註送回各自的輸入元件，我繼續往下填邀請表單，AI 又替我準備了一排整整齊齊的開關。 Email、站內通知、通知頻率，連「邀請後立即啟用」都長得一樣。畫面很有設定頁的樣子，至於可以選幾…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-05 7 分鐘閱讀 點閱 0

Day 5｜輸入文字也有分工：Text Field、Textarea、Password 與 Search

2026 iThome 鐵人賽 Vibe Coding UI Day 5：安安～我是ChiYu～ 昨天才把邀請 Dialog 的操作區分清楚：送出用 Button，權限說明用 Link。按鈕總算不再互相冒充，我把視線往上一移，新的問題已經排好隊等我了。 帳號、密碼、搜尋和備註，一人分到一個長方形輸入框。AI…

Vibe Coding UX/UI Frontend
一般更新 前端開發 2026-09-02 8 分鐘閱讀 點閱 0

Day 2｜這些東西到底叫什麼？Component、Pattern、Layout 與 Template

2026 iThome 鐵人賽 Vibe Coding UI Day 2：安安～我是ChiYu～ 昨天留下來的後台有一個很麻煩的問題。 我知道搜尋沒反應、手機版壞掉，停用按鈕也像裝飾品；真的要叫 AI 修改時，我卻只說得出：「那個東西幫我改一下。」 既然叫不出名字，我乾脆先請 AI 幫忙點名。還是同一張 L…

Vibe Coding UX/UI Frontend