iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Vibe Coding

Vibe Coding的30天,自然語言與AI共舞,從Prompt到高品質原型落地 系列

主打從提示詞工程走向人機流暢協作。30天完整規劃涵蓋5大核心階段:從AI開發環境與心法建立、快速前端UI/UX生成、全棧後端與資料庫串接、程式碼品質控管與重構,到最終的部署上線與反思。內容會著重於規格溝通、脈絡管理與AI驗收,帶領讀者擺脫盲目堆疊程式碼,轉型為掌控系統架構的Director,打造可落地的高品質專案。

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day 21|Markdown學習筆記系統實作CRUD與富文本即時預覽

在Day20中,我們建置了VibePulse的單一技能詳細頁面/skills/[id],並透過Next.js的ServerComponent(RSC)與Clie...

2026-08-24 ‧ 由 Liu Po Yi 分享
DAY 22

Day 22|練習日誌與數據視覺化整合Recharts圖表與打卡機制

在Day21中,我們成功為單一技能詳細頁(/skills/[id])加入了Markdown學習筆記系統,並實作了語法高亮與雙欄即時預覽。 今天(Day22),我...

2026-08-25 ‧ 由 Liu Po Yi 分享
DAY 23

Day 23|全站Dashboard數據儀表板總結統計KPI與Recharts綜合圖表

在Day22中,我們完成了單一技能詳細頁(/skills/[id])中的練習日誌打卡與Recharts圖表,讓使用者能夠量化單一技能的累積進度。 今天(Day2...

2026-08-26 ‧ 由 Liu Po Yi 分享
DAY 24

Day 24|Next.js效能優化與PWA支援:Lighthouse滿分挑戰

在Day23中,我們成功完成了全站Dashboard數據儀表板,整合了全站KPI指標與Recharts雙維度視覺化圖表。 今天(Day24),我們將聚焦於產品邁...

2026-08-27 ‧ 由 Liu Po Yi 分享
DAY 25

Day 25|Vercel自動化CI/CD部署與Neon PostgreSQL上雲

在Day24中,我們完成了Next.js效能優化、動態OG社交卡片與PWA離線支援,讓VibePulse在體驗與效能上達到生產等級。 今天(Day25),我們將...

2026-08-28 ‧ 由 Liu Po Yi 分享
DAY 26

Day 26|多語系國際化(i18n)next-intl整合與語系切換

在Day25中,我們成功完成了Vercel自動化CI/CD部署與NeonPostgreSQL雲端上雲,讓VibePulse正式進入生產環境。 今天(Day26)...

2026-08-29 ‧ 由 Liu Po Yi 分享
DAY 27

Day 27|AI 智能助手整合使用Vercel AI SDK與Gemini打造技能教練

在Day26中,我們成功完成了next-intl多語系國際化架構,讓VibePulse具備了雙語切換能力。 今天(Day27),我們將為VibePulse注入最...

2026-08-30 ‧ 由 Liu Po Yi 分享
DAY 28

Day 28|進階AI功能自動生成技能學習路線圖(Roadmap Generation)

在Day27中,我們成功整合了VercelAISDK與GoogleGeminiAPI,為VibePulse打造了具備脈絡感知的AI技能學習教練」。 今天(Day...

2026-08-31 ‧ 由 Liu Po Yi 分享
DAY 29

Day 29|全站端到端測試與錯誤監控Playwright E2E+Sentry整合

在Day28中,我們成功利用VercelAISDK的generateObject與ZodSchema實作了AI技能學習路線圖(Roadmap)一鍵自動生成。 今...

2026-09-01 ‧ 由 Liu Po Yi 分享
DAY 30

Day 30|完賽總結VibePulse全棧技術架構回顧與未來展望

歷經30天的連續開發,我們成功從零到一打造出現代化的全棧AI技能追蹤與學習平台-VibePulse! 從最開始的產品定位、資料庫模型設計、現代化UI設計系統,到...

2026-09-02 ‧ 由 Liu Po Yi 分享