
18種最佳 RAG 技術
在專業性和趣味性中尋找平衡的配圖:
提問陷阱和提問法則的配圖:
很多人用過很多 AI 生成圖片的工具都很難達到這種效果!本文為大家揭秘具體的實現方式。
DeepSeek-R1 滿血版不是不支持直接生成圖片嗎?你的通俗講解專家咋能生成圖片呢?
我們知道現在大模型比較擅長文本創作和寫代碼。很多開發同學都知道 SVG 雖然可以渲染為圖形實際上是代碼。因此,我們可以使用變通的方式,讓大模型用 SVG 來作圖!
問題來了,為啥同樣的提示詞有些模型的效果就不太好呢?
說得粗暴一點,影響 AI 生成結果好壞的最主要因素有兩個:一個是模型能力,一個是提示詞質量。
既然,提示詞一樣,效果不同,答案顯然是:模型不同!
因此,我們需要嘗試編碼能力更強的模型,如 Claude 3.5 / 3.7 (目前效果最佳)或最近更新的 DeepSeek-V3 優化版本 DeepSeek-V3-0324。
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<svg xmlns="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 大家可以基于這個版本繼續調優。
如果使用 Claude,可以配置成 Project 來使用。
如果使用 Cherry Studio 將上述提示詞配置智能體,模型設置為 DeepSeek-V3-0324 或者 Claude。
我們可以直接復制生成的 SVG 代碼使用。如果有些同學希望轉換成 PNG 格式,可以下載后用瀏覽器打開后截圖。
大家也可以使用 SVG 查看器如:SVGViewer(https://www.svgviewer.dev/) 轉換為 PNG 下載使用。
如果使用 Claude 3.7 有時候繪制的 SVG 還會有動畫效果:
比如我們需要做一個“熱門榜單”的原型圖。我們可以在提示詞中給出描述:
需要畫一張手機 APP 中的一個熱門榜單卡片 卡片標題為:熱門榜單,位于頂部(置頂)圓角矩形居中長度為整體長度的4分之1,高度適中,橙色背景,中間:左側為資源名稱:“某某資源”,右側為增長走勢的曲線圖效果 下方是推薦理由:明確寫“推薦理由”,列出下面2個理由:“理由1”、“理由2” 請幫我繪圖,注意美觀和布局合理性
提示詞描述的越準確,效果越好。如果繪制的 SVG 不滿意,可以二次對話進行調整。雖然,繪制的效果和專業的產品設計軟件有差距,但在有些場景足夠用了。
有時候我們找到一張圖片想要修改使用,很麻煩,成本很高。
有時候我們想給某個產品的界面加一個標簽,修改一點樣式,又不需要那么專業。
我們直接讓 AI 使用 SVG 重繪智能體,然后直接對話修改即可。
Claude SVG 重繪智能體提示詞非常簡單:
使用 SVG 參考圖片的布局將圖片中的內容使用中文重繪。
注意:如果無法很好地復現布局時,重新設計合理的布局。
比如我們想要復刻知識星球的邀請券的樣式并修改。我們直接將邀請券的部分截圖發送給 SVG 重繪智能體。
第一步:自動復刻
第二步:微調還原
第三步:目標修改
這種方法非常適合別人發給你一張圖片,你想要修改部分樣式或文字的場景。
隨著模型理解和編碼能力的不斷增強,提示詞可以簡化,此外,我們可以將自己喜歡的風格注入到提示詞中。如我們喜歡“彩色報紙風”,可以提示詞調優如下:
我希望你能夠根據我提供的內容,使用 SVG 進行繪圖(偏彩色報紙風格),我主要用于文章段落的配圖。
1 SVG 的背景應為白色背景,四周有美觀的正方形邊框(細),邊框四角內部有一個短小的彩色波浪線作為裝飾2 圖中應該能夠闡明主旨/核心思想,不需要太復雜,應該是彩色的3 元素之間應該布局合理,比例合理,避免不必要的遮擋(尤其是避免遮擋標題),整體保持專業和美觀4 長寬比為 16:105 畫圖除非必要,請使用中文
## 要求1 直接輸出 svg 代碼,外層一定不要套上 ``xml 2 your output must start with: <svg
“RAG(檢索增強生成)評估框架”的繪圖效果如下:
如果你通過純描述生成 SVG 配圖,建議描述的準確完整一些再發送給 AI 比否則后期的修改成本會很高。
如果你是寫文章配圖,你可以先不用考慮配圖,寫完文章以后,直接把需要繪圖的段落扔給 “SVG 智能體”自動理解,按照它的審美幫你創作。這樣你不需要費心思去思考布局,也節省了大量時間。
請注意:效果不滿意沒關系,如果需要調整說出自己的想法它會進行調整。
如果你發送了內容 SVG 繪圖智能體回答問題而不是繪圖,你可以在輸入框中先輸入:“繪制 SVG:” 或者 “繪圖:”,再加上內容即可。
AI 生成的 SVG 可能存在問題,如果需要改動較大,觀察圖形優化提示詞重新生成。
僅僅是文字的修改大家可以直接在上面介紹的 SVGViewer 中修改文字即可。
稍微復雜一點的修改可以使用 SVG 編輯軟件,如 Lunacy (https://icons8.com/lunacy)或 SVG Editor 等,更省時省力。
我們使用 SVG 繪圖效果不錯,但這不是唯一解,我們還可以使用 HTML 進行繪圖。
HTML 原型圖示例:
Cherry Studio 中預覽效果:
我們可以直接告訴 DeepSeek-V3-0324 或 Cladue 3.7 通過 HTML 代碼幫我們繪制原型圖或文章配圖。
本文分享如何使用 DeepSeek-V3-0324 和 Claude 3.5 或 3.7 繪制出高質量的圖片,可以作為文章配圖也可以為 PPT 配圖,效率成倍增長。文章還介紹了原型圖繪制、圖片重繪修改和彩色報紙風的進階案例。希望本文提供的技巧對大家有幫助,大家也可以修改提示詞定制自己喜歡的風格。
文章轉載自: 文章和 PPT 配圖有救了!SVG 繪圖專家智能體大揭秘