把圖卡截圖變成只換文字的量產配圖工具
完成後你會有一個 HTML 圖卡模板和一個技能：以後丟一段新內容，它只換文字、不動版面，幾秒生出風格一致的社群圖或工作匯報圖，再截圖就能用。
開始前準備（4 項）
- 前置檢查：已完成 CD-01
- 準備一張你常用、固定樣式的圖卡截圖（例如每週工作匯報卡、社群貼文圖卡）
- 準備一段之後要套進去測試的新文字內容
- 建一個新資料夾例如「配圖工具」，把截圖放進去
照著做（5 步）
- 把截圖變成 HTML 模板終端機 cd 進資料夾開 claude,把圖卡截圖貼進對話框（會顯示成一則圖片附件，例如 Image 1），請它照著做出一個同樣版面的 HTML 檔。關鍵指令：版面、CSS（控制樣式與排版的設定）、結構都照截圖，之後只換文字。
- 建立「只換文字」的技能用下方 prompt 請它建一個技能（Skill）：輸入一段新內容 → 只修改 HTML 裡的文字 → 不動 CSS 與結構。這正是雷蒙示範的核心：固定樣板、只換內容，就不用每次重排版。
- 丟新內容量產一張把你準備的新文字給它，讓它套進模板產生新的一張；用瀏覽器打開 HTML 看效果，或請它截圖給你對照。
- 跟原圖並排比對把新圖跟原始截圖並排看：版面、色塊、位置是否一致，只有文字換了。最常見的落差是字體不一樣。
- 把字體補給它若字體不對，找出原設計用的字體名稱，直接貼給它：「標題字體請用 [字體名]」。這是雷蒙示範裡唯一需要收尾的地方，補上就幾乎一模一樣了。
指令範本（複製後把括號換成你的內容）
我貼給你一張固定樣式的圖卡截圖。請幫我：第一，做一個和截圖版面完全一樣的 HTML 檔（尺寸 [請填寫：例如 1920x1080]），CSS 與結構照截圖，不要自己改設計；第二，建立一個技能，讓我以後給你一段新內容，你只修改 HTML 裡的文字，絕對不動 CSS 和整體結構；第三，先用這段內容示範一張：[請填寫：貼上一段測試文字]。做完用瀏覽器打開讓我看，並告訴我字體、顏色是不是跟原圖一致。
怎麼驗收
新圖跟原截圖並排：版面、色塊、位置一致，只有文字不同；換第二段內容再產一張，樣式一樣沒跑掉；要對外用的圖，文字逐字校對過。
注意
「只改文字、不動 CSS 與結構」這句一定要寫進指令，否則它可能順手改動版面；字體是最常見的差異，把原本設計用的字體名稱給它才會一致；圖上若有活動日期、名稱等資訊，對外發布前逐字人工校對。
想練熟？再做一次（選用）
練習一次
用本頁的範例與指令原樣跑一遍，確認流程通。
套用工作
把［請填寫］換成你自己的資料（記得先去識別化）再做一次。
驗收
對照上面「怎麼驗收」逐項確認；卡住就回頭看「注意」。
下一步
會量產圖了？做 CD-10:做一個左邊填、右邊即時預覽的報價單/合約工具。