## Demo : 6hr開發一個具可本地測試的個人化健康保險建議平台

這兩周稍微嘗試使用Claude Code與Cursor做Vibe Coding開發。邏輯上對Vibe Coding定義上在於可以專案草起時，快速開發出一個可維護與可擴展的具商業價值的MVP系統，接著進入AI開發迭帶流程依依快速完成專案。

試驗思維是拿現行的國泰人壽保險平台為對標產品，看能不能快速打造出一樣快可速蒐集潛在保戶需求、即時提供個人化健康保險建議，並引導至諮詢的保險平台，在具體在基礎文件都有的狀況下8hr內完成前後端開發與本地測試，試驗後真正開發時間為6hr(可在更短)。

## 脈絡

試驗流程為

1. 具體分析國壽保險平台現有功能產出初步頁面Prototype，
- Genimi分析具有價值性功能產出MVP PRD.md
- 搭配Claude具體分析網站UX風格，產出web-ux-guide.md
- Feed PRD.md & web-ux-guide.md使用lovable產出前端Prototype

2. 使用Claude 與 Claude Code以API First開發流程產出對應規格文件與User Story。由AI根據PRD產出

- 專案背景與上下文 (project-context.md、business-domain.md、architecture.md)
- .claude/architecture.md : 描述整體架構（後端/前端/API/BFF/資料流/部署位置）
- backend/.claude/architecture.md 說明各自的模組職責、資料流、依賴與通訊點

        .
        ├── .claude/
        │   ├── architecture.md      ← 全域總覽
        │   └── project-context.md   ← 各模組名稱、功能敘述
        ├── backend/
        │   ├── .claude/
        │   │   ├── architecture.md  ← 描述後端內部模組職責、元件對應
        │   │   └── service-context.md
        ├── frontend/
        │   ├── .claude/
        │   │   ├── architecture.md  ← 描述前端頁面、模組區分
        │   │   └── component-map.md

- .claude/project-context.md

        # 專案背景與目的

        本系統為「國泰人壽健康保險諮詢平台」，目的為幫助潛在保戶根據其健康狀況與需求，獲得最適合的保險建議。

        ## 功能模組
        - 問卷評估（Quiz）
        - 商品推薦（Recommendation）
        - 預約諮詢（Booking）
        - 使用者登入與資料管理

        ## 專案目標
        - 提升潛在保戶諮詢轉換率
        - 降低人力諮詢成本

- business-domain.md : 說明名詞、物件、規則

        # 商業領域說明（Business Domain）

        ## 名詞解釋
        - **保戶（Customer）**：使用此平台查詢健康保險商品的人
        - **保險商品（Product）**：由國泰人壽提供的保單項目
        - **健康問卷（Health Quiz）**：由數題健康狀況組成，根據回答提供保單建議
        - **推薦規則（Recommendation Rule）**：根據問卷結果與使用者年齡，推薦對應保單組合

        ## 規則範例
        - 若使用者有「重大疾病」項目勾選 → 排除某些商品
        - 年齡介於 20~35 歲 → 推薦【入門型健康險】

- 開發規範 (coding-standards.md、commit-msg.md、code-review.md、deployment-guide.md...)
- API 規格 (api-contracts.md、api-specs*.yaml)
- api-contracts.md : 語意導向，讓AI更明白

        # API 契約設計說明

        ## 商品服務（ProductService）

        ### [GET] /products
        - 取得所有保險商品列表
        - 可透過 query 參數過濾（如年齡層、疾病風險）

        ### [POST] /products/recommendation
        - 根據使用者填答問卷產生推薦商品
        - 輸入：問卷結果 JSON
        - 輸出：推薦商品列表

        命名慣例：
        - 使用 `snake_case` 命名 response 欄位
        - API 接收 `application/json`

- api-specs.yaml : OpenAPI格式
- UI/UX 樣式定義 (frontend-ux-design-guide.md)
- 文件與說明 ( PRD.md、user-stories.md，目前是放在docs，不是放在claude的memory)
- 任務與產物生成器 (gen-spring-endpoint.md、gen-react-component.md)

        # 任務：產生 Spring Boot API Endpoint

        ## 目標說明
        請根據輸入的 API 規格，自動生成一個 Spring Boot 的 RESTful API，包括：
        - Controller 類別
        - Service interface 與實作
        - DTO（Request / Response）
        - 對應的 Swagger 註解（使用 `@Operation`, `@Schema`, `@ApiResponse`）
        - 單元測試類別（可選）

        ## 命名與結構規範
        - Controller 放在 `com.cathaylife.api.controller`
        - Service 放在 `com.cathaylife.api.service`，命名為 `XxxService` 與 `XxxServiceImpl`
        - DTO 放在 `com.cathaylife.api.dto`
        - 使用 `@RestController` + `@RequestMapping`
        - 使用 `@Validated` 搭配 Javax 驗證註解

        ## 實作建議
        - 優先使用 `record` 建立簡潔的 DTO
        - 使用 `ResponseEntity<>` 作為回傳型別
        - 使用 `@Slf4j` 做 log 記錄
        - 錯誤回傳遵循 `RFC7807` 標準格式

        ## 輸入內容參考（來自 .claude/api-contracts.md）
        - API 路由（如 `/products/recommend`）
        - HTTP 方法（POST / GET）
        - Request 欄位說明（age, risk_factor...）
        - Response 欄位說明（推薦商品陣列）

        ## Output 結果
        請直接產出完整 Java 檔案（Controller + DTO + Service），以適當檔名與 package 呈現

- 設定檔
- .claude/settings.json : 設置Claude行為模式，讓他執行更精準
- 專案環境變數（如 SPRING_PROFILES_ACTIVE=dev）
- 允許的指令（例如：允許 npm run test，禁止 curl）
- 指定的檔案目錄（例如只讀 ./src）
- 是團隊專案還是個人專案（協作一致）
3. 用Claude Code根據Story產出feature，先前端再後端，最後前後串接整合。過程用cursor微調。例如前端feature產出後跑版，用cursor Agent修正

## Summary

- 工具使用組合，AI Chat搭配Agent Tool與IDE Tool (Gemini、Claude Code (Chat)、Cursor)
- 前期需求規劃由Chat及NotebookLM工具開始
- 接續產出規格文件後，須熟悉Agent Tool Memory的設定與具體需要給予什麼檔案(.claude)
- Feature大任務由Agent執行
> 優化:具體執行任務由Agent Tool計畫，Cursor Agent執行 (透過serena共同存取記憶，由.claude code移到serena)

- Prompt 工程規劃與Memory Context是大重點
- Prompt 工程如果搭配SDLC，要每個