Vibe Coding TW Hackathon 2025

教學心得分享- 開發SmartSum 產品

發表日期:2025-05-01

累積觀看閱讀次數: 479

作者: Jason / Abbie / Sky

教學文網址:

https://chuangtc.com/vibecodingtw-2025/

教學文pdf下載網址:

https://chuangtc.com/vibecodingtw-2025/SmartSum-tutorial.pdf

前言

在這次的 Vibe Coding Hackathon 中，我們團隊接受了 Jason 的挑戰設定：

主要目標

「假設你現在是一間新創公司，寫的每一行 code 都是為了賺錢。

請找出一個有人願意掏錢的市場痛點，並用 AI 協助解決。」

為了快速找到可切入的市場機會，工程師與 AI PM 從市場需求出發，攜手規劃出新創產品概念 —— SmartSum：AI 協助整理重點的筆記幫手。

產品目的與願景

在資訊爆炸的時代，學習者渴望更聰明且高效的吸收方式，但市面工具普遍操作繁瑣、來源分散，反而增加學習負擔。

SmartSum 的目標是：

利用 AI 協助使用者從 YouTube 影片中快速提煉出重點
幫助用戶以最短時間吸收有價值資訊
降低資訊焦慮，提升學習效率

Jason 作為開發者，也給自己設定了一個目標：

選用最新、穩定且功能完善的 framework, library 和工具，藉此利用新 features、減少 bugs，加快開發速度。

市場探索與驗證

透過 Reddit 探討與關鍵字搜尋，我們發現許多人推薦 YouTube 摘要工具 Recall.ai，同時，也發現許多使用者抱怨：

「即使付費了，仍有限制使用次數。」

這些反饋顯示：

市場對快速摘要工具有真實且大量的需求
使用者希望更高的自由度與更少限制

雖然取消使用配額未必能直接轉換市場份額，但這些洞察足以作為本次 Hackathon 的出發點 —— 從「痛點 + 自身需求」開始動手開發，更再次說明我們選題的實用性與原創度。

PM 的角色與前期準備

PM 在本次 Hackathon 中，負責：

需求探索
市場驗證
概念聚焦

傳統開發流程常需耗費大量時間訪談與畫原型，但這次我們充分活用熟悉的 AI Agent 工具， 省略 Figma，可以事前快速收斂資料、整理競品比較，大幅壓縮前期作業，花不到 2 小時就完成了需求對焦和核心功能確認。因為資訊準備得更快，每個人都能直接進入策略層級的討論，PM 帶會議的節奏也變得更輕鬆。

PM 引導團隊進行快速定義與意見收斂的步驟如下：

明確定義主題
要求每位成員用自己熟悉的 AI 工具探索概念
共同討論、聚焦核心功能

雖然 AI 工具讓開發前期變得高效許多，但真正關鍵的需求定義與判斷，仍然需要團隊一起集思廣益。

進入到重點，Engineer實做及用到工具的部分：

工程開發過程與工具選擇

開發工具

AI Coding Editors
- Cursor（有付費每月$20 USD的Pro方案）
- Lovable（免費試用期內）
前端技術選擇：
- Vite 6
- React 19.1
- Tailwind CSS 4.1

在搜尋過程中，發現繁體中文的 Tailwind CSS 官方文件只到 v4.0，而英文官網已有 v4.1，因此決定使用 英文 prompt 與 Cursor 溝通，並附上官方連結。

工程師們都知道新版本通常會帶有新 features 可能比較多功能 more features and enhancement 可以直接 call 來用，而且還有 bug fixes，所以先調查需要的 tailwindcss 最新版是什麼?

從繁體中文只看到了 v4.0, 但是英文版卻有最新的 v4.1，這激發了我們要用tailwind v4.1，所以之後都是用英文與 Cursor 對話。

繁體中文的 tailwindcss 官方文件只有到 v4.0 — Fig 1：繁體中文的 Tailwind CSS 官方文件只到 v4.0

英文版的 tailwindcss 官方文件就有到 v4.1 — Fig 2：英文版的 Tailwind CSS 官方文件已有 v4.1

Prompt #1：建立前端專案模板 :


I want to use the latest stable version of
vite 6, react 19.1 and tailwindcss 4.1
to generate a demo site template . 
For react 19.1 , refer to this site.
https://react.dev/learn/typescript#installation
For tailwindcss 4.1 , refer to this site.
https://tailwindcss.com/docs/installation/using-vite

一開始只要求最新穩定版本，他產生的是 React 19-alpha 版，所以這又提醒了我們應該要用英文下 prompt，並貼上參考網址給 Cursor 去產生 code。

在一連串的自動產生 code 後，以下是最終的 Summary response….

We have successfully created a template project with:

Vite 6 as the build tool
React 19.1 as the UI library
Tailwind CSS 4.1 for styling
TypeScript for type safety

The project includes:

A modern UI with dark mode support
Reusable components (Button, Card)
Proper configuration for all technologies
A comprehensive README with instructions
Proper project structure

The template can now be used as a starting point for your application development. The development server is running in the background, and you can access your application at http://localhost:5173.If you want to build upon this template, you can:

Create more reusable components in the src/components directory
Add page components for routing
Integrate state management solutions like Redux or Zustand
Add more Tailwind plugins or customize the Tailwind configuration

結果：成功產出具備以下條件的專案模板：

使用 Vite、React 19.1、Tailwind CSS 4.1
支援 Dark Mode
包含可重用元件（Button, Card）
設定完善、附有完整 README
支援TypeScript

網站打開起來像下圖

小結論#1: 要跟上世界上最新的技術發展，要多看英文網站，要多用英文下prompt 或搜尋資料，再貼文件給Cursor時也先去找到最新的文件說明 (這通常是英文版)。

讓我們再看一次package.json

這樣做後，這個專案模板不僅滿足我們的需求，還提供了許多額外的功能和彈性，讓我們可以輕鬆地進行擴展和修改。

後端設計與 API 開發

技術架構

後端框架： FastAPI 0.115.12
資料庫： MongoDB
部署：Zeabur

使用 .env 隱藏連線資訊，排除 Pydantic，以純 JSON 方式串接 API。

然後登入 Zeabur 網站把 frontend 連接上 github repo for UI，並在上面建立 MongoDB。

回到本機電腦下了以下 prompt 要建立 FastAPI Python project for backend connection。

Prompt #2


Create a project template for python fastapi
0.115.12 and connect to a remote mongodb
by using python-dotenv 1.1.0 to hide .env 
environment variable, and I also want 
venv directory name .venv, and I don't want
to use pydantic. All I need is retrieving 
json data from MongoDB and send back 
json data for a RESTful API

在一連串的自動產生 code 後，這是最終的 Summary response…

prompt #2 的 response — Fig 7. Prompt # 2 在執行後的最終結論

這樣就完成了 FastAPI 的後端設計，並且連接到遠端的 MongoDB，使用 python-dotenv 1.1.0 隱藏 .env 環境變量，並且不要使用 pydantic。

一開始的prompt有產生下面的抱怨：

"Cargo, the Rust package manager, is not installed or is not on PATH. This package requires Rust and Cargo to compile extensions. Install it through the system's package manager or via https://rustup.rs/"

初期遇到錯誤訊息：需安裝 Rust/Cargo，經查為 Pydantic v2 所需，因未使用該框架，後來已排除問題。