iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Vibe Coding

看得懂、叫得出、驗得過:30 天 VibeCoding UI 元件實戰 系列

AI 生成的介面常常看起來漂亮,卻把 Button、Link、Input、Dialog 混在一起,互動狀態也漏了一半。
這個系列用 30 次 UI 驗收實驗,帶你認識常見 UI 元件、適用場景、互動狀態與選型差異,並把「做得像 SaaS」這類模糊需求,改寫成 AI 聽得懂、做完能檢查的規格。
文章搭配網站截圖、錯誤案例、修正版 Prompt 與可操作的繁體中文 UI 元件百科,讓不熟前端的 Vibe Coder 也能清楚說出自己要什麼。

參賽天數 3 天 | 共 3 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1|AI 不是不會做,是你只說「做得好看一點」

Day 1|AI 不是不會做,是你只說「做得好看一點」 安安~我是ChiYu~ 我把一句很有 Vibe Coding 味道的 Prompt 交給 AI: 幫我...

2026-09-01 ‧ 由 ChiYu 小艾 分享
DAY 2

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

Day 2|這些東西到底叫什麼?Component、Pattern、Layout 與 Template 安安~我是ChiYu~ 昨天留下來的後台有一個很麻煩的問...

2026-09-02 ‧ 由 ChiYu 小艾 分享
DAY 3

Day 3|一份 AI 看得懂的 UI Spec,至少要交代這 8 件事

Day 3|一份 AI 看得懂的 UI Spec,至少要交代這 8 件事 安安~我是ChiYu~ 昨天我把成員管理頁拆成 Component、Pattern 和...

2026-09-03 ‧ 由 ChiYu 小艾 分享