tag
這裡整理與「Frontend」相關的已發布文章，依最新更新排序。
Latest first
2026 iThome 鐵人賽 Vibe Coding UI Day 17：安安～我是ChiYu～ 昨天把資料值和命令分開後，我從 Command Palette 執行「檢視專案結構」。AI 很快交出一張有箭頭、有縮排，點下去也會展開的畫面。 昨天結尾先停在這個錯誤現場。這張圖是依照第一版問題重建的畫面，不…
2026 iThome 鐵人賽 Vibe Coding UI Day 16：安安～我是ChiYu～ 昨天把工作區設定整理完後，我回到專案列表處理任務。內容切換終於不再全部交給 Tabs，最後一欄卻只剩一顆三點按鈕。 昨天結尾先停在這個錯誤現場。這張圖是依照第一版問題重建的畫面，不含真實資料： 三點按鈕展開後…
2026 iThome 鐵人賽 Vibe Coding UI Day 15：安安～我是ChiYu～ 昨天，我把帳號申請頁上的 Breadcrumb、Stepper、Pagination 和進度資訊分開後，總算不會再用一條藍線回答所有問題。結果文章才剛收尾，工作區設定又送來一排看起來很整齊的 Tabs。 先把…
2026 iThome 鐵人賽 Vibe Coding UI Day 14：安安～我是ChiYu～ 昨天把桌面和手機的導覽重新分工後，我終於順利進入 LumenDesk 的帳號申請頁。這次沒有迷路，頁面裡卻一次冒出五類「我現在到哪裡」。 我想知道目前位在系統哪一層、申請做到第幾步、紀錄還有幾頁、文件完成多少…
2026 iThome 鐵人賽 Vibe Coding UI Day 13：安安～我是ChiYu～ 昨天，我把邀請成員和建立活動的流程接了起來。想說順手切到手機尺寸看一下，瀏覽器才剛縮到 360px，桌面那條 Sidebar 依然很有自己的想法，硬是占著半張畫面。 內容區已經快被擠成收據了，它還站得筆直。 …
2026 iThome 鐵人賽 Vibe Coding UI Day 11：安安～我是ChiYu～ 昨天，三份附件終於可以各自上傳、失敗與重試。可是我把活動名稱留空、Email 填錯，再按下「發布」，整份表單只亮起幾個紅框。為了排除活動頁自己的問題，我又把前幾天完成的「新增成員」表單抓回來重測，原始需求同樣…
2026 iThome 鐵人賽 Vibe Coding UI Day 10：安安～我是ChiYu～ 昨天，活動日期和預約時段終於各自歸位。接下來只剩把海報、參與名單和場地照片傳上去，我原本想得很簡單：畫一個框，讓管理員把檔案拖進去，收工。 幫我做一個漂亮的檔案上傳區，要能拖進去。 昨天結尾留下的，就是這個版…
2026 iThome 鐵人賽 Vibe Coding UI Day 9：安安～我是ChiYu～ 昨天，LumenDesk 的活動預算、人數和餐點數量終於各自找到適合的控制。沒想到我一按下「下一步」，AI 又端出一張佔掉快半頁的月曆。 昨天結尾留下的，就是這張同時身兼四職的 Calendar。 活動日期找它…
2026 iThome 鐵人賽 Vibe Coding UI Day 8：安安～我是ChiYu～ 昨天，LumenDesk 的邀請成員流程終於走完。新團隊接到的第一個工作是建立內部活動，畫面裡馬上出現一大群數字：48,000 元預算、每組人數、配送距離、餐點數量，活動結束後還要收滿意度。 我把需求濃縮成一句…
2026 iThome 鐵人賽 Vibe Coding UI Day 7：安安～我是ChiYu～ 昨天把通知設定拆成 Checkbox、Radio 與 Switch 後，邀請成員流程只剩兩個欄位：「所屬部門」和「協作者」。 部門要能搜尋，但只能從既有資料選一筆；協作者也要搜尋，卻能保留多筆結果。AI 第一版…
2026 iThome 鐵人賽 Vibe Coding UI Day 6：安安～我是ChiYu～ 昨天才把帳號、密碼、搜尋與備註送回各自的輸入元件，我繼續往下填邀請表單，AI 又替我準備了一排整整齊齊的開關。 Email、站內通知、通知頻率，連「邀請後立即啟用」都長得一樣。畫面很有設定頁的樣子，至於可以選幾…
2026 iThome 鐵人賽 Vibe Coding UI Day 5：安安～我是ChiYu～ 昨天才把邀請 Dialog 的操作區分清楚：送出用 Button，權限說明用 Link。按鈕總算不再互相冒充，我把視線往上一移，新的問題已經排好隊等我了。 帳號、密碼、搜尋和備註，一人分到一個長方形輸入框。AI…
2026 iThome 鐵人賽 Vibe Coding UI Day 4：安安～我是ChiYu～ 昨天，我們整理出一張八格 UI Spec，終於可以把「好用一點」拆成資料、操作、狀態與驗收條件。今天準備拿它處理 LumenDesk 的第一個完整任務：邀請成員。 不過在正式拆 Button 與 Link 之前…
2026 iThome 鐵人賽 Vibe Coding UI Day 3：安安～我是ChiYu～ 昨天，我把成員管理頁拆成 Component、Pattern 和 Layout，總算能指出：「這次只改部門篩選，不動整張頁面。」 修改範圍有了，照理說可以叫 AI 開工了吧？ 還不行。因為我手上只剩下這句需求：…
2026 iThome 鐵人賽 Vibe Coding UI Day 2：安安～我是祈豫～ 昨天留下來的後台有一個很麻煩的問題。 我知道搜尋沒反應、手機版壞掉，停用按鈕也像裝飾品，但真的要叫 AI 修改時，我只說得出：「那個東西幫我改一下。」 既然叫不出名字，我乾脆先請 AI 幫忙點名。還是同一張 Lume…
2026 iThome 鐵人賽 Vibe Coding UI Day 1：安安，我是 ChiYu！ 今年的第一篇，我想先從一句非常有 Vibe Coding 味道的 Prompt 開始。 這句話看起來有講需求、有講風格，甚至還很貼心地補了「好用」： 幫我做一個現代、漂亮、好用的工作區成員管理後台。 我在 2…
今天我們將迎來前端整合的最終章！嚴格依據流程圖實現認證系統，為 App 裝上大門與門鎖。
今天我們將進行第二個前端的 DDD 循環，扮演「資安架構師」，為專案撰寫一份清晰、專業的「前端認證流程規格書」。
今天我們將正式拿起工具，嚴格依據昨天的這份《圖表元件規格書》，指揮 AI 和 Chart.js，將這幅數據的畫布，變成真實、可互動的前端程式碼！
今天我們將重拾文件驅動開發，為最複雜的「關聯性洞察」功能，撰寫一份清晰、專業的「圖表元件規格書」。
今天我們將為 App 注入「同理心」，教它如何與使用者溝通，優雅地處理「載入中」和「錯誤」狀態。
今天我們將火力全開，搞定所有習慣的「增、刪、改、查」與「打卡」功能，讓 App 真正地動起來。
今天我們將深入探討狀態管理的心法，並引入一個輕量的狀態中心模式，讓我們的 UI 成為數據最忠實的鏡子。
今天我們將深入前端開發中最核心的觀念——非同步程式設計，並學習如何使用 Fetch API 讓前後端進行對話。
今天我們將繼續指揮 AI 助手，根據所有設計藍圖，在現有專案基礎上，將 MVP 所需的所有靜態 UI 元素全部建造完成。
今天我們將扮演「結構工程師」，將昨天生成的 UI 原型進行專業級的「大改造」，落實關注點分離原則。
今天我們將使用 Gemini Canvas 功能，直接從「建築工人」升級成「魔法建築師」，瞬間召喚出一棟功能完整、外觀精美的 UI 原型！
今天我們將化身為「UI 架構師」，指揮 Gemini 設計出網站的主要佈局，並將介面拆解成清晰的元件清單。
今天，我們將回歸本心，認識一下構成生命的三大基本元素：HTML, CSS, 與 JavaScript。