# Vibe Coding 終章｜資料與智慧化


## 案例 1 書籍資料分析 (網頁爬蟲)

### 步驟 1

我想寫一個 Python script，幫我去 [http://books.toscrape.com/](http://books.toscrape.com/) 把首頁所有的書抓下來。我要書名、價格還有它的評分（幾顆星）。寫完直接給我可以執行的 codec 和把結果存成 `books.csv`，用 `requests` 和 `beautifulsoup`。

### 步驟 2

針對 `books.csv` 進行資料清整：

1. 「確認有沒有漏抓的資料（空值）。」
2. 「確認價格是不是真的是數字（而不是文字格式）。」
3. 「多加一個欄位，把書分成『平價』、『中價』、『高價』」

### 步驟 3

請設計一個網站，使用 D3.js 將 `books.csv` 中的資料進行視覺化 (Visualization)：

1. 這家書店的書，價格大約落在多少錢？（用 **直方圖**）。
2. 每一種星級評分（1~5星）各有多少本書？（用 **Bar Chart 長條圖**）。
3. 關聯 (Correlation)： 越貴的書，評分會越高嗎？（用 **Box Plot 箱型圖**）。

> **補充：** `claude --dangerously-skip-permissions`


---

## 案例 2 房屋實價登錄分析 (檔案解析)

### 步驟 1

我要分析台灣實價登錄資料。幫我寫一個 Python script，自動去內政部公開資料平台下載最新的「本期」資料包 (zip 檔)。
網址是 `https://plvr.land.moi.gov.tw/Download?type=zip&fileName=lvr_landcsv.zip`。
下載後，解壓縮，並讀取其中的不動產買賣 (檔名通常包含 `h_lvr_land_a.csv`)。
使用 Pandas 讀取時要注意編碼通常是 `utf-8` 或 `big5`，header 在第一行（我要用中文當 header）。處理好後幫我存成 `house.csv`。

### 步驟 2

現在幫我做資料清洗，我要分析「住宅」的房價：

* **過濾：** 只要「主要用途」包含「住」字的資料。剔除「備註欄」有內容的（通常是特殊交易）。
* **單位轉換：** 建立一個新欄位 `單價_萬元_坪`。
* 原始 `總價元` 要除以 10000。
* 原始 `建物移轉總面積平方公尺` 要換算成坪 (乘以 0.3025)。
* 算出每坪單價。

* **年份轉換：** 原始 `建築完成年月` 是民國年 (如 0890203)，請轉成西元年的數字 (如 2000)，若是空值或格式錯誤就丟棄。
* **屋齡計算：** 用「現在年份」減去「建築完成年」得到 `屋齡`。

### 步驟 3

請設計一個網站，使用 D3.js 分析桃園房市：

1. **各行政區房價行情：** 用 Bar Chart 畫出各 鄉鎮市區 的平均 `單價_萬元_坪`，由高到低排序。
2. **屋齡與價格關係：** 用 Scatter Plot，X 軸是 `屋齡`，Y 軸是 `單價_萬元_坪`，看看老房子是不是比較便宜。
3. **價格熱區分佈：** 用 Box Plot 畫出各行政區的價格分佈範圍。

---

## 案例 3 使用 SDD 的觀念開發智慧能源戰情室

npm install -g @github/spec-kit
specify init .

### 步驟 1：憲法配置

指令：`/speckit.constitution`

> 「本專案為智慧能源戰情室。技術選用：Next.js (App Router) + Tailwind CSS + shadcn ui。資料庫使用 PostgreSQL。圖表庫固定使用 Recharts。通訊協定需考量 MQTT 接入與 REST API。所有組件需支援 Dark Mode（深色模式優先），請建立高品質的專案，可被 testable，mininum viable product(MVP)，不要 overdesign，一率使用正體中文。」

### 步驟 2：定義規格


指令：`/speckit.specify`

> 「定義智慧能源戰情室規格：
> 核心指標 (KPI)：即時總用電量 (kW)、當月累積電費、PUE (電力使用效率)、太陽能發電佔比。
> 視覺化組件：需包含 24 小時負載曲線圖、各區域能耗比例圓餅圖、設備警報即時列表。
> 交互功能：點擊區域可下鑽 (Drill-down) 檢視單一設備能耗。
> 告警系統：當負載超過預設閾值時，組件外框需閃爍紅色。」

### 步驟 3：技術規劃

指令：`/speckit.plan`

> 「請根據規格設計系統架構。重點規劃：
> Schema 設計：包含 power_readings (電力讀值) 與 energy_meters (電表定義) 的資料表。
> Mock API：在後端尚未對接前，先設計一個能每秒產生隨機數值的數據模擬器。
> WebSocket 方案：評估如何即時將資料推送至前端圖表。」

### 步驟 4：任務拆解

指令：`/speckit.tasks`

### 步驟 5：開始實作

指令：`/speckit.implement`

---

## 故事的尾聲

1. **Vibe Coding 的核心觀念：** 意圖 + 心流 + 限制條件(md)
2. **產品化的核心：**
* (1) 什麼樣的功能值得導入
* (2) 如何導入才「好用」
* (3) 如何確保人員可以「倚賴」系統
* (4) 從「工具」進化為「夥伴」

3. **Agent 的核心：**
* (1) Workflow 的定義
* (2) 實作的能力 (MCP、SKILL)

4. **其他注意事項：**
* (1) 開發時的連續執行能力
* (2) Vibe Coding 的成本
* (3) 部屬環境的雲端方案 (Oracle Cloud、Hetzner、Hostinger、AWS、GCP)