今天在進行整個規劃與專案初始化的過程中，遇到很大的一個問題，因為我一開始在寫 prompt的時候，忘記註明限制條件，造成一開始Claude在規劃上，選擇了需要高額成本的方法來呈現。
因此今天不僅需要對於前面兩天做的內容進行大更動外，更需要再次確認整體開發成本，避免後續上線後出現突發性問題，致使專案GG。
在完成了昨日的roadmap之後，即可以確定整個work flow該如何執行，而對於一個產值評估平台來說，最重要的當然在於如何確定整套技術架構，包含前端、後端、資料庫、AI工具應用、部署等內容，這不單單只是用什麼語言架設，屏除過去在做系統或網站會用到的項目前題，其中我覺得將AI工具嵌入整個專案，是最為關鍵的。
在這個專案中，藉由Vibe coding的方式，究竟能省掉多少的架設時程，其中的bug修正，又該如何優化?又將耗費多少心力呢?
我覺得這是最為關鍵的，因此今天任務就是進行專案架構初始化。其中在Vibe coding前題下，此專案技術的選擇將完全由AI來決定。
第一次出現問題的Prompt
基於昨天的需求文件，請幫我做技術選型。條件：
- 我不是工程師，全程用 Vibe Coding，請選你最熟、生態最成熟的技術；
- 需要互動式產業地圖與量化圖表，最終結果以 Dashboard 呈現；
- 需要呼叫 Claude API 做產業判斷與儀表板解讀文字；
- 匯出功能只做一件事：把整個 Dashboard 截圖輸出成 PDF，不生成文字報告；
- 最後要能免費或低成本部署上線；資料庫要能存評估紀錄，未來要支援向量檢索。
請以表格比較 2–3 個方案並給出建議，然後畫出系統架構圖。
下表為Claude產出的比較結果
| 比較項目 | 方案 A:Next.js＋Vercel | 方案 B:Python + Streamlit | 方案 C:Nuxt + Firebase |
|---|---|---|---|
| 前端框架 | Next.js + Tailwind CSS | Streamlit(Python 直出 UI) | Nuxt 3 + Tailwind |
| 產業地圖 | Cytoscape.js(整合順) | st-cytoscape(功能閹割) | Cytoscape.js(可用) |
| 量化圖表 | ECharts(中文文件齊全) | Plotly(佳) | ECharts(可用) |
| Claude API | API Route(金鑰藏後端) | Python SDK(最簡單) | Nuxt Server Route(可行) |
| Dashboard 轉 PDF | html2canvas + jsPDF(純前端、零後端成本) | 極難,不適合整頁截圖 | html2canvas(可行) |
| 資料庫+向量檢索 | Supabase(pgvector 免費層) | Supabase(需自寫連線) | Firestore(無向量檢索) |
| 免費部署 | Vercel(零設定) | Streamlit Cloud(常休眠、慢) | Vercel / Netlify(可行) |
| Vibe Coding 適配 | 最高:AI 訓練資料最多、錯誤率最低 | 高,但 UI 天花板低 | 中:生態較小,AI 產出品質略降 |
| 主要風險 | 初期檔案結構較多 | 做不出互動地圖與客製 Dashboard | 向量檢索無解,需接第二資料庫 |
且其給我的最中建議組合是【方案A】
到前面這邊，都還沒問題
但在檢查執行方案時，卻發現一個大Bug，
因為專案內容中，需要提供金鑰部分，
此意即我可能工具一上線，就會出現高額的成本問題
考量此次參賽過程中，我不希望未來出現大量的額外支出
因此我在這邊重新修正了整個規劃內容
將目前整份規劃 全部改寫
要做的工具是全部採用免費的 方式下去執行
請全部更動 包含使用的技術部分
修正後的Prompt
我不是工程師，全程用 Vibe Coding。
需求：互動式產業地圖、量化圖表、結果以 Dashboard 呈現、Dashboard 整頁截圖匯出 PDF、資料庫要能支援向量檢索。
硬性條件：免費部署，而且執行期也要零成本
網站上線後，訪客的操作不能產生任何 API 費用。請比較 2–3 個方案，做成表格並給出建議。
這次對談中 Claude 推翻了我原本的規劃
推翻一：PDF 匯出從 Puppeteer 改成 html2canvas＋jsPDF。
既然需求已經定案為「整個 Dashboard 截圖輸出 PDF」，根本不需要在伺服器跑 Puppeteer html2canvas 把 Dashboard 的 DOM 畫成圖片、jsPDF 包成 PDF 下載，全部發生在訪客的瀏覽器裡：零後端成本、零部署風險，還直接繞開 Vercel 免費層的函式大小限制。
推翻二：執行期完全不呼叫 AI。
原本規劃「產業判斷」與「儀表板解讀」都即時呼叫 Claude API，這是整套工具唯一的付費點。改版後確立三條原則：
連帶地，Supabase 也從必要降為選配：MVP 用靜態 JSON 放政府資料、localStorage 存評估紀錄，連資料庫的註冊設定門檻都省了。最終的免費額度確認：
| 服務 | 免費額度 | 本專案用量 | 結論 |
|---|---|---|---|
| Vercel Hobby | 100GB 頻寬／月 | demo 流量遠低於此 | 綽綽有餘 |
| GitHub 公開 Repo | 無限 | 1 個 | 足夠 |
| 政府開放資料 | 完全免費 | 每季更新一次 | 足夠 |
| Claude（開發期） | 既有 claude.ai 訂閱 | Vibe Coding 對話 | 無額外費用 |
| 執行期 API | — | 零次呼叫 | 真正的零 |
定案後請 Claude 給我一步一步的初始化流程：Node.js LTS、create-next-app（七個互動選項各選什麼、為什麼）、兩批 npm install（核心與圖表／匯出套件）、專案資料夾結構（models/ 放評估邏輯、data/ 放政府資料 JSON、docs/ 放規劃文件）。
其後他給我了一包打包檔，內容如下
接下來我就依照其README檔案內容依序執行
以下為 整個執行流程
用 GitHub 登入 Vercel 的原因:之後部署流程是「程式碼推上 GitHub → Vercel 自動抓取並上線」,兩個帳號綁定後全自動。
專案骨架的基本功終於完成了初版內容~
今天深刻體會到
如若沒有事先把整個架構設想好
僅僅單純直接的下prompt，會出現很多問題，
因此在vide coding的過程中，每一次下prompt內容時，一定要先設想好「限制條件」
這樣會讓Claude進行相關規劃時會變得較務實
因此把「範圍」講清楚會直接讓開發過程少遇到很多波折!!
iThome鐵人賽
看影片追技術