iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Vibe Coding

別再只叫 AI 做漂亮一點:30 天 Vibe Coding UI 元件驗收實驗 系列

你看得到一個 UI,卻說不出它叫什麼;在 Vibe Coding 裡,只告訴 AI「做得漂亮、像 SaaS」,得到的畫面也常常能看不能用。這 30 天,我會進行 30 次 UI 驗收實驗,帶你認識常見元件的名稱、用途、適合情境與選擇方式。每篇都從模糊需求出發,實際操作 AI 產生的介面,找出遺漏的狀態、互動與例外,再把需求改寫成可驗收的 Prompt。系列幾乎不談程式碼,並搭配可操作的繁體中文 UI 元件百科,讓不熟前端的 Vibe Coder,也能清楚描述想要的畫面,判斷 AI 是否真的完成需求。

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

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

Day 1|AI 不是不會做,是你只說「做得好看一點」 「幫我做一個現代、漂亮、好用的工作區成員管理後台。」 我把這句話原封不動交給 AI,沒有補資料欄位、操作...

2026-08-02 ‧ 由 ChiYu 分享
DAY 2

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

Day 2|這些東西到底叫什麼?Component、Pattern、Layout 與 Template 先看一張昨天留下來的畫面。 圖 1:請先不要往下看答案...

2026-08-03 ‧ 由 ChiYu 分享
DAY 3

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

Day 3|一份 AI 看得懂的 UI Spec,至少要交代這 8 件事 「做一個好用、漂亮、可以搜尋的下拉選單。」 只看這句話,我腦中已經會冒出不少問題:可以...

2026-08-04 ‧ 由 ChiYu 分享
DAY 4

Day 4|按鈕不只是藍色方塊:Button、Link 與操作元件

Day 4|按鈕不只是藍色方塊:Button、Link 與操作元件 在今天正式開始介紹按鈕與連結的元件之前,先讓我介紹一下這個網站。 這個系列會用 30 天把...

2026-08-05 ‧ 由 ChiYu 分享