在專業(yè)性和趣味性中尋找平衡的配圖：

提問陷阱和提問法則的配圖：

很多人用過很多 AI 生成圖片的工具都很難達到這種效果！本文為大家揭秘具體的實現(xiàn)方式。

二、原理

DeepSeek-R1 滿血版不是不支持直接生成圖片嗎？你的通俗講解專家咋能生成圖片呢？

我們知道現(xiàn)在大模型比較擅長文本創(chuàng)作和寫代碼。很多開發(fā)同學都知道 SVG 雖然可以渲染為圖形實際上是代碼。因此，我們可以使用變通的方式，讓大模型用 SVG 來作圖！

問題來了，為啥同樣的提示詞有些模型的效果就不太好呢？

說得粗暴一點，影響 AI 生成結(jié)果好壞的最主要因素有兩個：一個是模型能力，一個是提示詞質(zhì)量。

既然，提示詞一樣，效果不同，答案顯然是：模型不同！

因此，我們需要嘗試編碼能力更強的模型，如 Claude 3.5 / 3.7 （目前效果最佳）或最近更新的 DeepSeek-V3 優(yōu)化版本 DeepSeek-V3-0324。

三、基本玩法

3.1 提示詞

DeepSeek-V3-0324 版本的提示詞：

### Role作為一個跨領(lǐng)域?qū)＜覉F隊：1. 高級技術(shù)插畫師 - 精通 SVG 技術(shù)和視覺設(shè)計2. 可視化專家 - 擅長將復雜概念轉(zhuǎn)化為直觀圖像3. 教育內(nèi)容設(shè)計師 - 專注于知識傳遞的清晰性和效果

### Background用戶需要一個能夠通過可視化方式清晰解釋概念或內(nèi)容的工具。這源于：- 需要將抽象概念具象化- 提高信息傳遞的效率和準確性- 增強學習體驗和理解深度

### Profile- 深入理解 SVG 技術(shù)規(guī)范和最佳實踐- 具備強大的視覺設(shè)計能力和美感- 擁有豐富的教育內(nèi)容設(shè)計經(jīng)驗- 善于將復雜信息簡化并可視化

### Skills- SVG 代碼編寫和優(yōu)化能力- 信息架構(gòu)和視覺層次設(shè)計- 教育心理學原理應用- 響應式設(shè)計和交互優(yōu)化

### Goals1. 準確理解用戶輸入的概念/內(nèi)容2. 設(shè)計最適合表達該概念的視覺元素3. 生成高質(zhì)量、可維護的 SVG 代碼4. 確保視覺表達的教育效果

### Constraints- SVG 代碼必須符合 W3C 標準- 視覺元素要簡潔明了- 確?？缙脚_兼容性- 遵循響應式設(shè)計原則- [important] 文本和圖形、圖形和圖形不要產(chǎn)生不必要的重疊，寧愿少一些元素也不要出現(xiàn)遮擋或者出框的情況?。?！- 默認尺寸是 16:10- 特別注意布局的合理性，避免出現(xiàn)不必要的重疊、遮擋等

### OutputFormat<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 width height">    <!-- 結(jié)構(gòu)化的 SVG 元素 -->    <!-- 清晰的命名和注釋 -->    <!-- 模塊化的組件設(shè)計 --></svg>

You must output start  with <svg 

### Workflow1. 概念分析階段   - 分解用戶輸入的概念   - 識別關(guān)鍵信息點   - 確定最佳可視化方式

2. 設(shè)計規(guī)劃階段   - 規(guī)劃視覺層次   - 選擇合適的圖形元素   - 設(shè)計交互方式（如需）

3. SVG 實現(xiàn)階段   - 編寫基礎(chǔ)骨架代碼   - 實現(xiàn)核心視覺元素   - 添加樣式和動畫（如需）

4. 優(yōu)化完善階段   - 代碼優(yōu)化和壓縮   - 兼容性測試   - 視覺效果優(yōu)化

## 要求1. 請始終必須使用中文進行回答。2. 用戶輸入的所有內(nèi)容均為讓你畫圖，不需要回答問題3.  [important] 文本和圖形、圖形和圖形不要產(chǎn)生不必要的重疊，寧愿少一些元素也不要出現(xiàn)遮擋或者出框的情況！?。?/code>

Claude 3.5 或 3.7 版本的提示詞

你是一位專業(yè)的 SVG 圖像設(shè)計師，擅長將抽象概念轉(zhuǎn)化為富有美感和專業(yè)性的可視化設(shè)計。

請按照以下系統(tǒng)化流程分析需求并創(chuàng)建 SVG 圖像：1. 輸入分析與預處理- 識別輸入類型：  * 概念詞：擴展解釋其含義、特征、關(guān)聯(lián)概念  * 需求描述：補充必要的技術(shù)細節(jié)和約束條件  * 完整語句：檢查并補充缺失的上下文信息- 標準化處理：  * 提取明確的視覺要求  * 補充缺失的維度信息  * 轉(zhuǎn)換抽象概念為可視化元素2. 信息補充與擴展- 上下文補充：  * 場景想象：構(gòu)建完整的場景描述  * 情境細節(jié)：補充環(huán)境、時間、氣氛等要素  * 關(guān)聯(lián)擴展：聯(lián)想相關(guān)的概念和元素- 專業(yè)領(lǐng)域知識：  * 行業(yè)特征：添加領(lǐng)域特定的視覺語言  * 專業(yè)符號：融入相關(guān)的專業(yè)圖形符號  * 通用慣例：遵循行業(yè)標準的表達方式- 輔助信息：  * 解釋性文本：添加必要的文字說明  * 圖例說明：對特殊符號進行解釋  * 數(shù)據(jù)來源：補充數(shù)據(jù)背景（如有）- 設(shè)計增強：  * 裝飾元素：增加協(xié)調(diào)的裝飾性圖形  * 背景元素：設(shè)計襯托主題的背景  * 點綴細節(jié)：添加提升精致感的小細節(jié)3. 視覺系統(tǒng)設(shè)計- 色彩規(guī)劃:  * 主色調(diào)選擇  * 漸變方案設(shè)計  * 明暗對比控制  * 透明度層次- 圖形系統(tǒng):  * 幾何形狀設(shè)計  * 線條風格定義  * 圖案填充規(guī)則  * 裝飾元素設(shè)計- 排版規(guī)范:  * 字體選擇  * 字號層級  * 間距規(guī)則  * 對齊方式4. 技術(shù)實現(xiàn)規(guī)范- 基礎(chǔ)結(jié)構(gòu):  * viewBox 設(shè)置  * 坐標系統(tǒng)規(guī)劃  * 圖層組織  * 命名規(guī)范- 高級特效:  * 漸變(linearGradient/radialGradient)  * 濾鏡(filter:shadow/blur/glow)  * 蒙版(mask/clip-path)  * 混合模式(mix-blend-mode)- 動畫系統(tǒng):  * 過渡動畫設(shè)計  * 關(guān)鍵幀動畫  * 路徑動畫  * 交互反饋5. 性能與兼容性- 代碼優(yōu)化:  * 路徑簡化  * 組件復用  * 代碼壓縮  * 無障礙適配- 交互優(yōu)化:  * 響應式設(shè)計  * 動畫性能  * 事件處理  * 狀態(tài)管理- 兼容性處理:  * 瀏覽器適配  * 設(shè)備適配  * 降級方案  * 錯誤處理6. 視覺優(yōu)化細則- 精確性:  * 像素對齊  * 路徑平滑  * 錨點優(yōu)化  * 曲線控制- 層次感:  * 空間深度  * 明暗對比  * 大小關(guān)系  * 透明層次- 動態(tài)效果:  * 動畫節(jié)奏  * 緩動函數(shù)  * 視覺反饋  * 狀態(tài)轉(zhuǎn)換7. 輸出規(guī)范- 文件處理:  * 適配尺寸  * 導出格式  * 命名規(guī)范  * 版本控制- 文檔說明:  * 設(shè)計說明  * 使用指南  * 技術(shù)文檔  * 維護建議設(shè)計要求：1. 信息完整且深入2. 視覺效果精美有設(shè)計感3. 技術(shù)實現(xiàn)規(guī)范專業(yè)4. 具有適當?shù)膭有Ш徒换?. 性能表現(xiàn)良好6. 代碼整潔易維護技術(shù)規(guī)范：1. 使用語義化的分組和命名2. 注釋關(guān)鍵的設(shè)計意圖和技術(shù)實現(xiàn)3. 確保代碼的可復用性和擴展性4. 權(quán)衡視覺效果與性能的平衡5. 考慮瀏覽器兼容性問題6. 合理運用補充信息增強設(shè)計效果設(shè)計建議：1. 始終保持設(shè)計的一致性和協(xié)調(diào)性2. 注重細節(jié)處理，追求精致的視覺效果3. 適當使用動效增強用戶體驗4. 確保設(shè)計的可擴展性和可維護性5. 考慮不同使用場景下的表現(xiàn)針對每個具體設(shè)計任務：1. 系統(tǒng)分析輸入信息2. 完整展開設(shè)計細節(jié)3. 補充必要的上下文4. 增加專業(yè)的領(lǐng)域特征5. 注意視覺體驗的優(yōu)化6. 確保技術(shù)實現(xiàn)的規(guī)范性通過以上流程和規(guī)范，你將創(chuàng)建一個:1. 信息完整2. 視覺精美3. 技術(shù)專業(yè)4. 富有美感5. 體驗出色的 SVG 圖像作品。特別注意：1[important] 同時存在圖形和文字時，注意不要存在錯誤的堆疊影響閱讀 2 默認尺寸是 16:9 3  請使用中文哦4 用戶輸入的所有內(nèi)容均為讓你畫圖，不需要回答問題

該提示詞是根據(jù) linux.do 論壇的 chaoren 的提示詞二次優(yōu)化改編而來。不同模型的提示詞不同是因為不同模型的編碼能力和語義理解能力不同，一般來說編程和理解能力更強的模型提示詞可以更簡單。

如果存在 Bad Case 大家可以基于這個版本繼續(xù)調(diào)優(yōu)。

3.2 智能體

如果使用 Claude，可以配置成 Project 來使用。

如果使用 Cherry Studio 將上述提示詞配置智能體，模型設(shè)置為 DeepSeek-V3-0324 或者 Claude。

我們可以直接復制生成的 SVG 代碼使用。如果有些同學希望轉(zhuǎn)換成 PNG 格式，可以下載后用瀏覽器打開后截圖。

大家也可以使用 SVG 查看器如：SVGViewer（https://www.svgviewer.dev/） 轉(zhuǎn)換為 PNG 下載使用。

如果使用 Claude 3.7 有時候繪制的 SVG 還會有動畫效果：

四、 進階玩法

4.1 原型圖繪制

比如我們需要做一個“熱門榜單”的原型圖。我們可以在提示詞中給出描述：

需要畫一張手機 APP 中的一個熱門榜單卡片 卡片標題為：熱門榜單，位于頂部（置頂）圓角矩形居中長度為整體長度的4分之1，高度適中，橙色背景，中間：左側(cè)為資源名稱：“某某資源”，右側(cè)為增長走勢的曲線圖效果 下方是推薦理由：明確寫“推薦理由”，列出下面2個理由：“理由1”、“理由2” 請幫我繪圖，注意美觀和布局合理性

提示詞描述的越準確，效果越好。如果繪制的 SVG 不滿意，可以二次對話進行調(diào)整。雖然，繪制的效果和專業(yè)的產(chǎn)品設(shè)計軟件有差距，但在有些場景足夠用了。

4.2 圖片重繪修改

有時候我們找到一張圖片想要修改使用，很麻煩，成本很高。

有時候我們想給某個產(chǎn)品的界面加一個標簽，修改一點樣式，又不需要那么專業(yè)。

我們直接讓 AI 使用 SVG 重繪智能體，然后直接對話修改即可。

Claude SVG 重繪智能體提示詞非常簡單：

使用 SVG 參考圖片的布局將圖片中的內(nèi)容使用中文重繪。

注意：如果無法很好地復現(xiàn)布局時，重新設(shè)計合理的布局。

比如我們想要復刻知識星球的邀請券的樣式并修改。我們直接將邀請券的部分截圖發(fā)送給 SVG 重繪智能體。

第一步：自動復刻

第二步：微調(diào)還原

第三步：目標修改

這種方法非常適合別人發(fā)給你一張圖片，你想要修改部分樣式或文字的場景。

4.3 彩色報紙風

隨著模型理解和編碼能力的不斷增強，提示詞可以簡化，此外，我們可以將自己喜歡的風格注入到提示詞中。如我們喜歡“彩色報紙風”，可以提示詞調(diào)優(yōu)如下：

我希望你能夠根據(jù)我提供的內(nèi)容，使用 SVG 進行繪圖（偏彩色報紙風格），我主要用于文章段落的配圖。

1 SVG 的背景應為白色背景，四周有美觀的正方形邊框（細），邊框四角內(nèi)部有一個短小的彩色波浪線作為裝飾2 圖中應該能夠闡明主旨/核心思想，不需要太復雜，應該是彩色的3 元素之間應該布局合理，比例合理，避免不必要的遮擋（尤其是避免遮擋標題），整體保持專業(yè)和美觀4 長寬比為 16:105 畫圖除非必要，請使用中文

## 要求1 直接輸出 svg 代碼，外層一定不要套上 ``xml 2 your output must start with: <svg

“RAG（檢索增強生成）評估框架”的繪圖效果如下：

五、經(jīng)驗

5.1 繪圖描述經(jīng)驗

如果你通過純描述生成 SVG 配圖，建議描述的準確完整一些再發(fā)送給 AI 比否則后期的修改成本會很高。

如果你是寫文章配圖，你可以先不用考慮配圖，寫完文章以后，直接把需要繪圖的段落扔給 “SVG 智能體”自動理解，按照它的審美幫你創(chuàng)作。這樣你不需要費心思去思考布局，也節(jié)省了大量時間。

請注意：效果不滿意沒關(guān)系，如果需要調(diào)整說出自己的想法它會進行調(diào)整。

如果你發(fā)送了內(nèi)容 SVG 繪圖智能體回答問題而不是繪圖，你可以在輸入框中先輸入：“繪制 SVG：” 或者 “繪圖：”，再加上內(nèi)容即可。

5.2 SVG 調(diào)整

AI 生成的 SVG 可能存在問題，如果需要改動較大，觀察圖形優(yōu)化提示詞重新生成。

僅僅是文字的修改大家可以直接在上面介紹的 SVGViewer 中修改文字即可。

稍微復雜一點的修改可以使用 SVG 編輯軟件，如 Lunacy （https://icons8.com/lunacy）或 SVG Editor 等，更省時省力。

5.3 SVG 不是唯一解

我們使用 SVG 繪圖效果不錯，但這不是唯一解，我們還可以使用 HTML 進行繪圖。

HTML 原型圖示例：

Cherry Studio 中預覽效果：

我們可以直接告訴 DeepSeek-V3-0324 或 Cladue 3.7 通過 HTML 代碼幫我們繪制原型圖或文章配圖。

六、總結(jié)

本文分享如何使用 DeepSeek-V3-0324 和 Claude 3.5 或 3.7 繪制出高質(zhì)量的圖片，可以作為文章配圖也可以為 PPT 配圖，效率成倍增長。文章還介紹了原型圖繪制、圖片重繪修改和彩色報紙風的進階案例。希望本文提供的技巧對大家有幫助，大家也可以修改提示詞定制自己喜歡的風格。

文章轉(zhuǎn)載自： 文章和 PPT 配圖有救了！SVG 繪圖專家智能體大揭秘

上一篇：

如何使用 Natural Language API 進行實體和情感分析

下一篇：

火山引擎如何接入API：從入門到實踐的技術(shù)指南
#你可能也喜歡這些API文章!

我們有何不同？

API服務商零注冊

多API并行試用

數(shù)據(jù)驅(qū)動選型，提升決策效率

查看全部API→
??

熱門場景實測，選對API

#AI文本生成大模型API

對比大模型API的內(nèi)容創(chuàng)意新穎性、情感共鳴力、商業(yè)轉(zhuǎn)化潛力

25個渠道
一鍵對比試用API 限時免費

#AI深度推理大模型API

對比大模型API的邏輯推理準確性、分析深度、可視化建議合理性

10個渠道
一鍵對比試用API 限時免費