阿里妹導讀
本文分享如何使用 DeepSeek-V3-0324 和 Claude 3.5 或 3.7 繪製出高質量的圖片，可以作為文章配圖也可以為 PPT 配圖，效率成倍增長。文章還介紹了原型圖繪製、圖片重繪修改和彩色報紙風的進階案例。希望本文提供的技巧對大家有幫助，大家也可以修改提示詞定製自己喜歡的風格。
一、前言
之前在《我是如何基於 DeepSeek-R1 構建出高效學習 Agent 的？》一文中分享了用生活中的例子來降低認知門檻，通俗講解幫助理解，使用易記方法幫助記憶，最後透過圖形來更輕鬆學習知識的高效學習助手：通俗講解專家智慧體。
有些人動手實踐的時候發現一些模型（如 DeepSeek-R1 滿血版）最後繪圖的效果一般，非常苦惱！
很多同學在想，如果 AI 可以畫出漂亮的圖，是不是做 PPT 或者 文章配圖的時候就大大提效了？！
有些同學發現我的很多文章配圖都很精美，如提示詞優缺點分析的配圖：
在專業性和趣味性中尋找平衡的配圖：
提問陷阱和提問法則的配圖：
很多人用過很多 AI 生成圖片的工具都很難達到這種效果！本文為大家揭秘具體的實現方式。
二、原理
DeepSeek-R1 滿血版不是不支援直接生成圖片嗎？你的通俗講解專家咋能生成圖片呢？
我們知道現在大模型比較擅長文字創作和寫程式碼。很多開發同學都知道 SVG 雖然可以渲染為圖形實際上是程式碼。因此，我們可以使用變通的方式，讓大模型用 SVG 來作圖！
問題來了，為啥同樣的提示詞有些模型的效果就不太好呢？
說得粗暴一點，影響 AI 生成結果好壞的最主要因素有兩個：一個是模型能力，一個是提示詞質量。
既然，提示詞一樣，效果不同，答案顯然是：模型不同！
因此，我們需要嘗試編碼能力更強的模型，如 Claude 3.5 / 3.7 （目前效果最佳）或最近更新的DeepSeek-V3 最佳化版本DeepSeek-V3-0324。
三、基本玩法
3.1 提示詞
DeepSeek-V3-0324版本的提示詞：
### Role作為一個跨領域專家團隊：1. 高階技術插畫師 - 精通 SVG 技術和視覺設計2. 視覺化專家 - 擅長將複雜概念轉化為直觀影像3. 教育內容設計師 - 專注於知識傳遞的清晰性和效果### Background使用者需要一個能夠透過視覺化方式清晰解釋概念或內容的工具。這源於：- 需要將抽象概念具象化- 提高資訊傳遞的效率和準確性- 增強學習體驗和理解深度### Profile- 深入理解 SVG 技術規範和最佳實踐- 具備強大的視覺設計能力和美感- 擁有豐富的教育內容設計經驗- 善於將複雜資訊簡化並可視化### Skills- SVG 程式碼編寫和最佳化能力- 資訊架構和視覺層次設計- 教育心理學原理應用- 響應式設計和互動最佳化### Goals1. 準確理解使用者輸入的概念/內容2. 設計最適合表達該概念的視覺元素3. 生成高質量、可維護的 SVG 程式碼4. 確保視覺表達的教育效果### Constraints- SVG 程式碼必須符合 W3C 標準- 視覺元素要簡潔明瞭- 確保跨平臺相容性- 遵循響應式設計原則- [important] 文字和圖形、圖形和圖形不要產生不必要的重疊，寧願少一些元素也不要出現遮擋或者出框的情況！！！- 預設尺寸是 16:10- 特別注意佈局的合理性，避免出現不必要的重疊、遮擋等### OutputFormat<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 width height"><!-- 結構化的 SVG 元素 --><!-- 清晰的命名和註釋 --><!-- 模組化的元件設計 --></svg>You must output start with <svg### Workflow1.概念分析階段-分解使用者輸入的概念-識別關鍵資訊點-確定最佳視覺化方式2.設計規劃階段-規劃視覺層次-選擇合適的圖形元素-設計互動方式（如需）3.SVG實現階段-編寫基礎骨架程式碼-實現核心視覺元素-新增樣式和動畫（如需）4.最佳化完善階段-程式碼最佳化和壓縮-相容性測試-視覺效果最佳化## 要求1.請始終必須使用中文進行回答。2.使用者輸入的所有內容均為讓你畫圖，不需要回答問題3. [important] 文字和圖形、圖形和圖形不要產生不必要的重疊，寧願少一些元素也不要出現遮擋或者出框的情況！！！Claude 3.5 或 3.7 版本的提示詞
你是一位專業的 SVG 影像設計師，擅長將抽象概念轉化為富有美感和專業性的視覺化設計。請按照以下系統化流程分析需求並建立 SVG 影像：1. 輸入分析與預處理- 識別輸入型別： * 概念詞：擴充套件解釋其含義、特徵、關聯概念 * 需求描述：補充必要的技術細節和約束條件 * 完整語句：檢查並補充缺失的上下文資訊- 標準化處理： * 提取明確的視覺要求 * 補充缺失的維度資訊 * 轉換抽象概念為視覺化元素2. 資訊補充與擴充套件- 上下文補充： * 場景想象：構建完整的場景描述 * 情境細節：補充環境、時間、氣氛等要素 * 關聯擴充套件：聯想相關的概念和元素- 專業領域知識： * 行業特徵：新增領域特定的視覺語言 * 專業符號：融入相關的專業圖形符號 * 通用慣例：遵循行業標準的表達方式- 輔助資訊： * 解釋性文字：新增必要的文字說明 * 圖例說明：對特殊符號進行解釋 * 資料來源：補充資料背景（如有）- 設計增強： * 裝飾元素：增加協調的裝飾性圖形 * 背景元素：設計襯托主題的背景 * 點綴細節：新增提升精緻感的小細節3. 視覺系統設計- 色彩規劃: * 主色調選擇 * 漸變方案設計 * 明暗對比控制 * 透明度層次- 圖形系統: * 幾何形狀設計 * 線條風格定義 * 圖案填充規則 * 裝飾元素設計- 排版規範: * 字型選擇 * 字號層級 * 間距規則 * 對齊方式4. 技術實現規範- 基礎結構: * viewBox 設定 * 座標系統規劃 * 圖層組織 * 命名規範- 高階特效: * 漸變(linearGradient/radialGradient) * 濾鏡(filter:shadow/blur/glow) * 蒙版(mask/clip-path) * 混合模式(mix-blend-mode)- 動畫系統: * 過渡動畫設計 * 關鍵幀動畫 * 路徑動畫 * 互動反饋5. 效能與相容性- 程式碼最佳化: * 路徑簡化 * 元件複用 * 程式碼壓縮 * 無障礙適配- 互動最佳化: * 響應式設計 * 動畫效能 * 事件處理 * 狀態管理- 相容性處理: * 瀏覽器適配 * 裝置適配 * 降級方案 * 錯誤處理6. 視覺最佳化細則- 精確性: * 畫素對齊 * 路徑平滑 * 錨點最佳化 * 曲線控制- 層次感: * 空間深度 * 明暗對比 * 大小關係 * 透明層次- 動態效果: * 動畫節奏 * 緩動函式 * 視覺反饋 * 狀態轉換7. 輸出規範- 檔案處理: * 適配尺寸 * 匯出格式 * 命名規範 * 版本控制- 文件說明: * 設計說明 * 使用指南 * 技術文件 * 維護建議設計要求：1. 資訊完整且深入2. 視覺效果精美有設計感3. 技術實現規範專業4. 具有適當的動效和互動5. 效能表現良好6. 程式碼整潔易維護技術規範：1. 使用語義化的分組和命名2. 註釋關鍵的設計意圖和技術實現3. 確保程式碼的可複用性和擴充套件性4. 權衡視覺效果與效能的平衡5. 考慮瀏覽器相容性問題6. 合理運用補充資訊增強設計效果設計建議：1. 始終保持設計的一致性和協調性2. 注重細節處理，追求精緻的視覺效果3. 適當使用動效增強使用者體驗4. 確保設計的可擴充套件性和可維護性5. 考慮不同使用場景下的表現針對每個具體設計任務：1. 系統分析輸入資訊2. 完整展開設計細節3. 補充必要的上下文4. 增加專業的領域特徵5. 注意視覺體驗的最佳化6. 確保技術實現的規範性透過以上流程和規範，你將建立一個:1. 資訊完整2. 視覺精美3. 技術專業4. 富有美感5. 體驗出色的 SVG 影像作品。特別注意：1[important] 同時存在圖形和文字時，注意不要存在錯誤的堆疊影響閱讀 2 預設尺寸是 16:9 3 請使用中文哦4 使用者輸入的所有內容均為讓你畫圖，不需要回答問題該提示詞是根據 linux.do 論壇的 chaoren 的提示詞二次最佳化改編而來。不同模型的提示詞不同是因為不同模型的編碼能力和語義理解能力不同，一般來說程式設計和理解能力更強的模型提示詞可以更簡單。
如果存在 Bad Case 大家可以基於這個版本繼續調優。
3.2 智慧體
如果使用 Claude，可以配置成 Project 來使用。
如果使用 Cherry Studio 將上述提示詞配置智慧體，模型設定為DeepSeek-V3-0324 或者 Claude。
我們可以直接複製生成的 SVG 程式碼使用。如果有些同學希望轉換成 PNG 格式，可以下載後用瀏覽器開啟後截圖。
大家也可以使用 SVG 檢視器如：SVGViewer（https://www.svgviewer.dev/）轉換為 PNG 下載使用。
如果使用 Claude 3.7 有時候繪製的 SVG 還會有動畫效果：
四、 進階玩法
4.1 原型圖繪製
比如我們需要做一個“熱門榜單”的原型圖。我們可以在提示詞中給出描述：
需要畫一張手機 APP 中的一個熱門榜單卡片 卡片標題為：熱門榜單，位於頂部（置頂）圓角矩形居中長度為整體長度的4分之1，高度適中，橙色背景，中間：左側為資源名稱：“某某資源”，右側為增長走勢的曲線圖效果 下方是推薦理由：明確寫“推薦理由”，列出下面2個理由：“理由1”、“理由2” 請幫我繪圖，注意美觀和佈局合理性提示詞描述的越準確，效果越好。如果繪製的 SVG 不滿意，可以二次對話進行調整。雖然，繪製的效果和專業的產品設計軟體有差距，但在有些場景足夠用了。
4.2 圖片重繪修改
有時候我們找到一張圖片想要修改使用，很麻煩，成本很高。
有時候我們想給某個產品的介面加一個標籤，修改一點樣式，又不需要那麼專業。
我們直接讓 AI 使用 SVG 重繪智慧體，然後直接對話修改即可。
Claude SVG 重繪智慧體提示詞非常簡單：
使用 SVG 參考圖片的佈局將圖片中的內容使用中文重繪。注意：如果無法很好地復現佈局時，重新設計合理的佈局。比如我們想要復刻知識星球的邀請券的樣式並修改。我們直接將邀請券的部分截圖傳送給 SVG 重繪智慧體。
第一步：自動復刻
第二步：微調還原
第三步：目標修改
這種方法非常適合別人發給你一張圖片，你想要修改部分樣式或文字的場景。
4.3 彩色報紙風
隨著模型理解和編碼能力的不斷增強，提示詞可以簡化，此外，我們可以將自己喜歡的風格注入到提示詞中。如我們喜歡“彩色報紙風”，可以提示詞調優如下：
我希望你能夠根據我提供的內容，使用 SVG 進行繪圖（偏彩色報紙風格），我主要用於文章段落的配圖。1 SVG 的背景應為白色背景，四周有美觀的正方形邊框（細），邊框四角內部有一個短小的彩色波浪線作為裝飾2 圖中應該能夠闡明主旨/核心思想，不需要太複雜，應該是彩色的3 元素之間應該佈局合理，比例合理，避免不必要的遮擋（尤其是避免遮擋標題），整體保持專業和美觀4 長寬比為 16:105 畫圖除非必要，請使用中文## 要求1 直接輸出 svg 程式碼，外層一定不要套上 ``xml 2 your output must start with: <svg“RAG（檢索增強生成）評估框架”的繪圖效果如下：
五、經驗
5.1 繪圖描述經驗
如果你透過純描述生成 SVG 配圖，建議描述的準確完整一些再發送給 AI 比否則後期的修改成本會很高。
如果你是寫文章配圖，你可以先不用考慮配圖，寫完文章以後，直接把需要繪圖的段落扔給 “SVG 智慧體”自動理解，按照它的審美幫你創作。這樣你不需要費心思去思考佈局，也節省了大量時間。
請注意：效果不滿意沒關係，如果需要調整說出自己的想法它會進行調整。
如果你傳送了內容 SVG 繪圖智慧體回答問題而不是繪圖，你可以在輸入框中先輸入：“繪製 SVG：” 或者 “繪圖：”，再加上內容即可。
5.2 SVG 調整
AI 生成的 SVG 可能存在問題，如果需要改動較大，觀察圖形最佳化提示詞重新生成。
僅僅是文字的修改大家可以直接在上面介紹的SVGViewer中修改文字即可。
稍微複雜一點的修改可以使用 SVG 編輯軟體，如Lunacy （https://icons8.com/lunacy）或 SVG Editor 等，更省時省力。
5.3 SVG 不是唯一解
我們使用 SVG 繪圖效果不錯，但這不是唯一解，我們還可以使用 HTML 進行繪圖。
HTML 原型圖示例：
Cherry Studio 中預覽效果：
我們可以直接告訴DeepSeek-V3-0324或 Cladue 3.7 透過 HTML 程式碼幫我們繪製原型圖或文章配圖。
六、總結
本文分享如何使用 DeepSeek-V3-0324 和 Claude 3.5 或 3.7 繪製出高質量的圖片，可以作為文章配圖也可以為 PPT 配圖，效率成倍增長。文章還介紹了原型圖繪製、圖片重繪修改和彩色報紙風的進階案例。希望本文提供的技巧對大家有幫助，大家也可以修改提示詞定製自己喜歡的風格。
基於 Flink CDC 打造企業級即時資料整合方案
傳統的資料整合通常由全量和增量同步兩套系統構成，在全量同步完成後，還需要進一步將增量表和全量表進行合併操作，這種架構的元件構成較為複雜，系統維護困難。本方案提供 Flink CDC 技術實現了統一的增量和全量資料的即時整合。
點選閱讀原文檢視詳情。