做左填右預覽的報價單/合約網頁工具
完成後你會有一個單檔 HTML 工具：左邊填欄位、右邊即時預覽，改內容不會跑版，還能匯出 PDF——取代 Canva 一行行改、又怕改壞字體的做法。
開始前準備（4 項）
- 前置檢查：已完成 CD-01;若想之後把 Gmail 收到的報價自動帶入，建議先做 CD-07
- 準備一張現有報價單或合約的截圖（當版面參考），以及要填的欄位清單（品項、數量、單價、稅、匯款資訊等）
- Logo、發票章圖檔先放一邊，第一版可先用底色佔位，之後再換
- 建一個新資料夾例如「報價單工具」
照著做（5 步）
- 貼截圖、講清楚要什麼cd 進資料夾開 claude,把現有報價單截圖貼進去當版面參考，用下方 prompt 說明：單一 HTML 檔、左側填欄位、右側即時預覽、Logo 與發票章先留佔位區。
- 瀏覽器打開測即時預覽它會產生一個 HTML,對它點兩下用瀏覽器打開；在左側改欄位，確認右側預覽同步變動——這是這個工具的重點。
- 用講的加功能邊用邊加：「新增一列品項」「加上匯出 PDF 的按鈕」「換上我的 Logo 和發票章」「左側加一個過往報價清單，先放三組 Demo 資料可切換」。一次講清楚一件事，它幾分鐘就更新一版。
- 壓力測試不跑版多新增幾列品項、換一個長一點的公司名，確認版面不會亂；把檔案想成要給同事用——他們只在欄位打字，不會不小心拖到字體或元件。
- 驗收與交付數字算對（小計、稅、總額）、匯出 PDF 排版正常；要給同事就把這個 HTML 檔用 Email 或通訊軟體傳，對方用瀏覽器右鍵打開就能離線編輯。
指令範本（複製後把括號換成你的內容）
幫我做一個報價單/合約的網頁工具，單一 HTML 檔：左側是所有要填的欄位（[請填寫：公司名、品項、數量、單價、稅率、匯款資訊…]），右側是即時預覽，我在左側改什麼，右側立刻跟著變。要求：所有樣式寫在同一個檔案、Logo 與發票章先留佔位區（先上個底色），之後我再給圖；品項可以新增/刪除一列，並自動算小計與總額；最後加一個「匯出 PDF」按鈕。先做出可用的第一版，給我用瀏覽器打開。
怎麼驗收
左側填欄位、右側即時更新；新增品項會自動重算小計與總額；匯出 PDF 排版正常；把檔案傳到另一台電腦，用瀏覽器打開仍可正常編輯。
注意
這是存在你電腦裡的本機 HTML,直接把檔案路徑貼到 LINE 給別人是打不開的；工具裡的「過往報價清單」等紀錄只會留在各自的瀏覽器，要多人共享同一份資料需另外「部署（把網頁放上網路、產生公開網址）」，屬對外動作，做法以官方說明為準；報價與合約的金額、匯款帳號對外送出前務必逐字人工複核。
想練熟？再做一次（選用）
練習一次
用本頁的範例與指令原樣跑一遍，確認流程通。
套用工作
把［請填寫］換成你自己的資料（記得先去識別化）再做一次。
驗收
對照上面「怎麼驗收」逐項確認；卡住就回頭看「注意」。
下一步
工具會做了？做 CD-11,把 Claude Code 的終端機狀態列也客製成你自己的樣子。