Vibe Coding

航海日誌：機率論的視覺化遠征，打造開源的數位賭場與教室

把抽象的機率公式變成可以動手玩的數位賭場與教室——鐘形曲線、二項分配、賭場期望值到骰寶模擬六大模組。也示範當專案變大、聊天機器人上下文不夠用時，怎麼用 requirement.md＋Cursor 接手。

Captain Balung

— 閱讀時間 8 分鐘
分享
航海日誌：機率論的視覺化遠征，打造開源的數位賭場與教室

作為一名統計學的航海者，我們深知機率論最容易擱淺的地方，就是那一堆抽象的公式。為了讓教學不再紙上談兵，接續上一篇網誌用 Gemini 開發常態分佈視覺化，以及線性迴歸分析的網頁程式，這次我用類似的方式，開發機率理論裡幾個常用的小程式，並將這些互動模組整理成開源專案probability，讓學生能透過實驗來理解機率。這個開源專案有個小小的網站，雖然規模不大，但是不能直接用聊天機器人一次產生，因為聊天機器人會有上下文過長的問題。所以這篇網誌也示範怎麼用進階的工具 Cursor.AI 來產出這整個網站。

一、航海攻略：如何用「提示詞」召喚模組？

鐘形曲線、二項分配、賭場優勢、固定下注、馬丁格爾、骰寶六模組一覽
六個能動手玩的模組，把機率從公式變成實驗。

首先我們練習一下，跟上次一樣，直接跟聊天機器人 Gemini 對話，來產生這些視覺化統計、機率概念的小模組。這些模組的靈魂在於「Vibe Coding」，以下是開發它們的指令與線上航行入口：

  • 鐘形曲線視覺化：
「請使用組合數公式 $C(n, k)$ 計算硬幣投擲的機率分佈，並以 CSS Flexbox 製作垂直長條圖。」
  • 硬幣二項分配分析：
「請開發一個工具讓學生輸入硬幣數量，系統窮舉所有 $2^n$ 種可能性並自動分類，使用卡片式設計顯示機率百分比條。」

  • 賭場優勢：
「製作展示賭場優勢的互動網頁，比較玩家與莊家勝率，並透過動畫呈現數學期望值 $E$ 的變化。」

  • 真實賭場骰寶體驗：
「請開發一個工具讓學生輸入硬幣數量，系統窮舉所有 $2^n$ 種可能性並自動分類，使用卡片式設計顯示機率百分比條。」

二、 從隨意航行到航海藍圖：生成需求文件 requirement.md

從 Gemini 單次聊天升級到 requirement.md 加 Cursor 的流程圖
專案一變大，單次聊天就「上下文過長」——於是先寫 requirement.md，再交給 Cursor。

用聊天機器人單次生產小的程式頁面，在專案逐漸變大時會變得不可行，主要是因為聊天機器人會有上下文過長的問題，軟體開發過程中，也不容易紀錄需求變更和版本別等問題。因此，接下來的階段，我們改用更專業的 vibe coding 軟體 – Cursor 來進行開發。在將專案交付給 Cursor 之前，我會先與 Gemini 進行一場「戰術會議」，將我的教學理念轉化為結構化的需求文件。

我與副官（Gemini）的戰術對話：

我： 「我有一些統計模組，想整合為一個教學網站，請幫我擬定一份 requirement.md，要求包含首頁導航、統一風格與模組化結構。我後續要交接給 Cursor AI 進行開發。」

Gemini： 「沒問題，船長。這份文件能確保 Cursor 開發時保持架構的一致性。」

產出的 requirement.md：


# 專案需求文件：機率統計教學互動網站 (升級版)

## 1. 專案概述
將六大教學模組整合為統一入口網站，確保邏輯分離且樣式一致。

## 2. 目錄結構
- `/index.html`: 統一導航入口。
- `/css/style.css`: 全域樣式定義。
- `/js/main.js`: 共用互動邏輯。
- `/modules/`: 存放以下六大功能模組。

## 3. 六大頁面詳細功能要求

### A. 鐘形曲線視覺化 (bell_curve.html)
- 功能：輸入硬幣數量 (1-150)，計算 $C(n, k)$ 組合數。
- 繪圖：CSS Flexbox 長條圖，需處理數值巨大時的科學記號轉換（如 K, M）。
- 互動：自動偵測硬幣數 > 20 時啟用 dense-mode (隱藏細部標籤)，優化視覺效能。

### B. 硬幣二項分配分析 (coin.html)
- 功能：輸入硬幣數量，系統窮舉所有 $2^n$ 組合。
- 邏輯：依據 H 出現次數分類，計算機率百分比。
- 視覺：卡片式列表，具備長條圖進度條回饋。

### C. 賭場優勢魔術 (casino.html)
- 功能：呈現骰寶期望值 $E$ 的運算公式。
- 關鍵互動：具備「魔術按鈕」，點擊後觸發動畫，將「豹子」區塊視覺化移動至賭場勝率區，即時更新 $E$ 值至 -0.0278。

### D. 賭場連續下注模擬 A (sicbo.html)
- 功能：固定金額下注，模擬連續執行 (1-500次)。
- 統計：即時記錄總局數、豹子出現次數、總損益。
- 繪圖：D3.js 即時走勢圖，正損益顯示綠色，負損益顯示紅色。

### E. 賭場連續下注模擬 B (sicbo2.html)
- 功能：馬丁格爾策略（輸了金額加倍，贏了重置）。
- 統計：同 A，但需處理破產條件下的中途強迫停止邏輯。

### F. 真實骰子遊戲體驗 (sibo3.html)
- 功能：模擬真實賭桌介面。
- 互動：提供點擊下注區 (Cell) 的即時回饋 (active class)，動畫模擬擲骰過程 (90ms interval)，並依據賠率表結算。

## 4. 統一標準
- 所有頁面引入共用的導航欄 (Navigation Bar)。
- D3.js 引用需維持穩定，統一 CDN 版本 (v7)。
- 確保所有模組路徑調整為 `/modules/...` 後，CSS 與 JS 引用路徑能自動修正。

三、 航海新手的 Cursor 裝備指南

鐘形曲線視覺化模組的操作畫面
輸入硬幣數，鐘形曲線即時長出來。

Cursor 就像你的「自動駕駛系統」，你不需是程式碼專家，只要會指揮即可。

  1. 軟體安裝： 前往Cursor 官網下載並安裝。
  2. 付費與免費： 免費版已足夠大多數教學開發使用。
  3. 指揮 Cursor： 按下 Ctrl+I (或 Cmd+I) 開啟 Composer，貼上：「請根據 requirement.md 的要求，幫我整併這些統計模組並建立網站結構。」，AI 就會自動幫你寫好檔案。
  4. 本機預覽： 安裝「Live Server」擴充套件，開啟 index.html 後點擊右下角「Go Live」，即可在瀏覽器預覽成果。

四、 部署到網際網路：讓網站線上航行 (GitHub 操作篇)

GitHub Pages 四步視覺化部署流程
不碰指令列，四步讓網站線上航行。

不用碰複雜的代碼，我們可以直接透過 GitHub 的視覺化介面完成佈署：

  1. 建立儲存庫： 在 GitHub 登入後，點擊右上角「+」號選擇 New repository，命名後點擊 Create。
  2. 上傳檔案： 在你的儲存庫頁面，點擊 uploading an existing file，將你 Cursor 資料夾中所有的程式碼拖曳進去，最後點擊 Commit changes。
  3. 啟動 Pages： 進入 Settings > Pages，在 Build and deployment 下方將 Branch 選擇為 main，並設定目錄為 / (root)，點擊 Save。
  4. 見證成果： 幾分鐘後，GitHub 會在頁面頂端提供一組公開網址，那就是你的教學網站！
航海小語： 我們這次透過 GitHub 介面完成了佈署，但如果你想進一步自動化，未來我們可以使用 CLI (Command Line Interface) 指令來與 Cursor 完美串接。這不僅能大幅提升開發速度，也是我們下一篇「自動化航行」即將探索的神秘領域。

教學是一場永無止境的航行，透過這些工具，我們不再是被程式碼限制的老師，而是定義教育體驗的船長。歡迎來到GitHub 專案交流，讓我們一起在這片隨機性的汪洋中，找到屬於教學的羅盤。

Read more