用「Vibe Coding」10–30 分鐘做出一個能跑的股票分析 POC

用「Vibe Coding」10–30 分鐘做出一個能跑的股票分析 POC（超快）

你可能跟我一樣：想做個能 demo 的網頁，但不想在前後端、排版與資料串接上花一整天。這篇文章示範 「Vibe Coding」 的做法——用清楚的 需求敘述（prompt） 帶著 AI 生成骨架，再用少量人工補齊關鍵細節。

結論先講：做一個可互動、可回測的股票分析 POC，10–30 分鐘就能跑起來。

我這裡提供一個簡單的案例: https://github.com/matthewHsieh/Stock

什麼是 Vibe Coding（我的定義）

一句話：

用對話描述你要的「感覺與邏輯」，讓 AI 先把 80% 骨架生出來，你只負責補上 20% 關鍵。

適合的場景：

• 想要 快速驗證想法（POC / MVP demo）
• 有 明確的頁面區塊與互動流程
• 能接受先從「可用」開始，再逐步優化

這個 POC 要做到什麼？（最小可行）

• 一頁式網站（Bootstrap）
• 股票代碼 + 日期區間輸入
• 按下「取得資料」→ 顯示現價、MA20、MA50、RSI、成交量
• 顯示一張可縮放的價格／均線圖（Plotly）
• 按下「執行回測」→ 回傳 總收益率、年化收益率、夏普比率、最大回撤、勝率 與一條權益曲線
• 至少 1 種策略（例如：移動平均策略 MA）

後端：Flask + pandas；資料源可先用 yfinance。

前端：Bootstrap + jQuery + Plotly。 介面中文、能在本機 python app.py 直接跑。

我給 Claude Code 的關鍵 Prompt（直接複製用）

這段是「一次到位」版，描述了目標、區塊、API、回傳、例外處理與專案結構。

你可以把 策略 留一種（MA）就好，POC 更快。

請用 Python + Flask 產生一個中文「股票分析回測 POC」單頁網站，前端 Bootstrap 5 + jQuery + Plotly，後端提供 JSON API。需求如下：

1) 頁面
- 上方導覽列 + 主卡片（標題：股票分析與回測 POC）。
- 表單：股票代碼(預設 2330 或 AAPL)、開始/結束日期(預設近一年)、按鈕「取得資料」。
- 取得資料成功後顯示：現價、MA20、MA50、RSI、成交量。
- 下方放一張 Plotly 圖：K 線 + MA20/MA50。
- 一個策略區塊（只要「移動平均策略」），提供短期/長期視窗兩個參數與「執行回測」按鈕。
- 回測完成後顯示：總收益率、年化收益率、夏普比率、最大回撤、勝率 + 一張權益曲線圖。

2) API
- GET /api/strategies：回傳一個策略（名稱、參數範圍）。
- POST /api/fetch_data：入參 {symbol, start_date, end_date}；抓 yfinance，回傳指標與繪圖需要的資料（JSON）。
- POST /api/backtest：入參 {symbol, start_date, end_date, strategy:'ma', params:{short_window,int; long_window,int}}；回傳績效指標與權益曲線。
- 錯誤處理：股票代碼錯誤、無資料、日期不合法，皆回傳 {success:false, error:'訊息'}。

3) 回測邏輯（簡化）
- 使用收盤價。
- MA策略：短期上穿長期→買入；短期下穿長期→賣出；單筆持有，忽略滑價手續費（POC）。
- 計算總收益率、年化收益率、夏普比率、最大回撤、勝率，並輸出每日權益曲線。

4) 前端互動
- 表單按鈕按下後 disable + 顯示 loading，完成或失敗再恢復。
- 取得資料後更新指標與圖；回測後更新績效與權益曲線。
- 盡量寫清楚 JS 事件流程（使用 jQuery）。

5) 專案結構與啟動
- requirements.txt 列 Flask、pandas、yfinance、plotly 等。
- README 說明如何安裝、啟動（python app.py）、預設網址。
- 產生可直接執行的程式碼（含 templates 與 static）。

完成後請一次輸出所有檔案內容。

想加速：把策略只留「MA」，把日期區間預設好（例如近 365 天），第一次就會更快跑起來。

10–30 分鐘極速流程（我實測）

1. 貼上 Prompt → 生成第一版程式
2. pip install -r requirements.txt
3. python app.py，打開 http://localhost:5000
4. 先測「取得資料」→ 看指標與圖
5. 再測「執行回測」→ 看績效與權益曲線
6. 若報錯：
7. • 股票代碼加後綴（台股 .TW，港股 .HK）
   • 把日期縮短
   • 先關閉手續費、滑價等複雜參數（POC 階段不是必需）

怎麼驗收這個 POC？

• 可用性：輸入代碼 → 有圖、有指標
• 互動性：改參數、改日期 → 能重新繪圖
• 回測性：策略執行 → 產出 5 個績效指標 + 權益曲線
• 穩定性：錯誤處理合理（空資料、代碼錯誤、日期錯誤）
• 簡潔性：單一頁面、單一策略，但能 demo 完整流程

這就是 POC 的精神：跑得起來、說得清楚、可互動。漂亮與完整度放在下一階段。

常見小坑（POC 版快速修）

• yfinance 拿不到資料：代碼帶上市場後綴（例：2330.TW）；或先用美股 AAPL 測試。
• 圖表太慢：先縮短時間範圍（例如 180 天）。
• 交叉點判定抖動：MA 交叉用「前一天＜、今天＞」的嚴格判斷，避免重複訊號。
• 年化計算：POC 先用「每日報酬 × 交易日年化」的近似即可，不糾結精準年化天數。
• 部署：POC 階段用 flask run 就好，正式再上 Gunicorn/Nginx。

如果要把 POC 推到下一步

• 多策略比較（RSI、布林帶等）
• 交易成本、滑價、持倉管理
• 多股票／多市場批次測試
• 儀表板化（多卡片、時間切換）
• 帳號與儲存（儲存策略參數、輸出報告）

結語：為什麼 Vibe Coding 特別適合做 POC？

因為 速度 與 回饋循環。

當你能在 10–30 分鐘把「輸入→分析→回測→圖表→績效」整條鏈打通，溝通與決策就會快非常多。 先把感覺做出來，再談最佳化。 這就是 Vibe Coding 的力量。