起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識AI做SVG的終極方案，一套提示詞模板無痛搞定：小紅書知識卡片、數(shù)據(jù)可視化圖表、原型圖、動態(tài)圖……
在信息爆炸的時代，如何高效、精準地傳達復雜信息？SVG（可縮放矢量圖形）憑借其無損縮放、可編輯性強、文件體積小等優(yōu)勢，成為數(shù)據(jù)可視化和圖形設計的首選格式。本文將手把手教你如何利用AI和一套通用提示詞模板，輕松生成小紅書知識卡片、數(shù)據(jù)可視化圖表、原型圖、動態(tài)圖等精美SVG圖形，無需設計經(jīng)驗，也能快速上手，讓你的內(nèi)容創(chuàng)作效率翻倍！
相對于文字，圖像信息更能直觀地傳達復雜的信息和概念，其最大的優(yōu)勢是直觀、高效、精準。
作為一名數(shù)據(jù)分析師，畫圖是我工作中必不可少的一部分。無論是匯報時的ppt展示圖、還是做計劃時的流程圖、亦或是小組討論時的思維導圖……我們無時無刻都在跟圖表打交道，也通過圖表來完善我們的工作。
AI生成的SVG – 架構(gòu)圖
以前畫圖需要找各種模板，各種拼接，還要學習配色，技術(shù)含量不高但就是磨人，一張圖可能就要花上一兩個小時。可現(xiàn)在，泡杯咖啡的功夫，AI就能幫你完成，而且效果不由得讓人一鍵三連！??！
確實，AI在SVG圖形生成領(lǐng)域展現(xiàn)出驚人能力，不僅可以生成精美的小紅書圖文、流程圖、思維導圖，還能創(chuàng)建專業(yè)級別的技術(shù)文檔配圖和教育科普可視化內(nèi)容。
我最近也花了不少時間來分析各類SVG案例，總結(jié)出一套通用提示詞模板，讓你用一套模板就能生成各種精美SVG圖形，無需記憶復雜提示詞，無痛搞定所有應用，只有一句“so easy～”。
今天餅干哥哥就到你手把手體驗一下，保證你看完就能上手！SVG(可縮放矢量圖形)的獨特優(yōu)勢:
- 無損縮放：放大不失真，適合任何尺寸設備
- 可編輯性：生成后可二次編輯修改各個元素
- 文件?。捍a形式存儲，體積小于位圖
- 動效支持：可添加交互和動畫效果
SVG 格式文件將圖像存儲為矢量，這是一種基于數(shù)學公式由點、線、曲線和形狀組成的圖形。 圖形可以無限縮放而不失真，非常適合繪制 UI 素材、Logo 圖標、圖形插畫、技術(shù)架構(gòu)圖、流程圖等需要無損縮放的圖片。其文件本質(zhì)上是 XML 格式的文本代碼，可以直接嵌入網(wǎng)頁或?qū)敫鞣N設計工具。
Claude生成的動態(tài)SVG
AI 生成的 SVG 代碼可以直接嵌入網(wǎng)頁或?qū)朐O計工具，也可以保存為 SVG 文件直接雙擊在瀏覽器內(nèi)打開。
使用 SVG 的另一個優(yōu)點是可以精確控制每個元素的位置、大小和樣式，甚至能添加動畫效果，讓圖片更加生動。
SVG提示詞通用模板
# 任務定義
請為[主題/目的]創(chuàng)建一個專業(yè)的SVG圖像。
## 圖片規(guī)格
– 尺寸：[寬x高，如750x1334px]
– 背景：[背景顏色/漸變要求]
– 視覺風格：[如現(xiàn)代簡約/卡通/扁平化/等距圖/水墨等]
## 內(nèi)容結(jié)構(gòu)
1. [主要內(nèi)容元素1，如標題區(qū)]
2. [主要內(nèi)容元素2，如內(nèi)容區(qū)]
3. [主要內(nèi)容元素3，如數(shù)據(jù)展示區(qū)]
…
## 設計風格
– 配色方案：[指定主色調(diào)/輔助色/強調(diào)色]
– 字體要求：[字體家族/大小/粗細等]
– 圖形元素：[需要包含的圖標/裝飾/視覺元素]
– 布局安排：[元素排列方式/留白/對齊]
## 技術(shù)要求
– 動效需求：[是否需要動畫/交互效果]
– 文本處理：[文字排版要求/截斷處理]
– 圖形質(zhì)量：[線條粗細/圓角設置/陰影效果]
– 格式輸出：[確保SVG代碼完整/有效]
## 特殊要求
– [其他特殊注意事項或要求]
## 參考資料
[可以添加參考素材/內(nèi)容]
我們可以看到，這個模板涵蓋了SVG內(nèi)容創(chuàng)建的所有關(guān)鍵方面，從內(nèi)容結(jié)構(gòu)到技術(shù)實現(xiàn)，從資源配置到交付要求。這種全面性確保生成的SVG內(nèi)容沒有重大遺漏，進而也就確保了輸出的確定性?
有了模板之后，用法就很簡單了：把你的要求和需要的功能，連同模板一起扔給AI，讓AI生成具體的提示詞。然后就可以用這個提示詞去生成SVG圖像。
??注意，很多時候我們不是一次性就可以得到想要的效果，但有了這個模板，很大概率通過2-3輪的對話就能迭代出你想要的。
SVG圖片類型指南
設計風格與配色方案
如何使用這個模板
1. 選擇合適的圖片類型：根據(jù)你的需求，從流程圖、思維導圖、信息圖表等中選擇
2. 定制設計風格：選擇適合內(nèi)容的視覺風格和配色方案
3. 明確內(nèi)容結(jié)構(gòu)：清晰列出你需要在SVG中展示的主要內(nèi)容元素
4. 添加參考資料：提供你希望AI參考的文字內(nèi)容或圖片
5. 迭代優(yōu)化：生成后如有需要，可以要求AI調(diào)整特定部分
把提示詞模板和要求一起給AI讓它生成新的AI提示詞，參考：AI做HTML的終極方案，一套提示詞模板搞定所有應用：PPT、簡歷、高保真原型圖、知識卡片、動態(tài)交互組件等
實操案例分享
案例1：小紅書風格知識卡片
提示詞示例：
# 任務定義
請為”SVG圖片的場景應用”創(chuàng)建一個適合小紅書平臺的精美SVG卡片。
## 圖片規(guī)格
– 尺寸：750x1334px（豎屏，適合手機閱讀）
– 背景：柔和漸變背景，從淺粉到淺藍
– 視覺風格：現(xiàn)代簡約，高顏值，有設計感
## 內(nèi)容結(jié)構(gòu)
1. 標題區(qū)：突出顯示主題名稱和副標題
2. 簡介區(qū)：一句話解釋這項技術(shù)
3. 核心特點區(qū)：列出3-4個關(guān)鍵特點，配以圖標
4. 實用價值區(qū)：解釋為什么這項技術(shù)很重要
5. 底部信息區(qū)：放置開源地址等額外信息
## 設計風格
– 配色方案：以紫色系為主色調(diào)，搭配白色內(nèi)容區(qū)和柔和色塊
– 字體要求：現(xiàn)代無襯線字體，標題加粗，字號層次分明
– 圖形元素：使用簡潔幾何形狀作為裝飾，圓形或波浪狀點綴
– 布局安排：卡片式布局，內(nèi)容區(qū)有適當圓角和柔和陰影
## 技術(shù)要求
– 文本處理：確保所有文字清晰可讀，標題醒目
– 圖形質(zhì)量：使用圓角矩形，適當添加柔和陰影增加層次感
– 格式輸出：完整SVG代碼，確保沒有錯誤
## 特殊要求
– 確保信息呈現(xiàn)清晰易懂，適合小白用戶
– 整體設計要具有”一眼驚艷”的視覺效果
– 不要包含”小白”、”炸裂”等極限詞
SVG代碼生成如下：
好的，遵從您的要求，我為您精心設計并制作了一張關(guān)于“SVG圖片的場景應用”的小紅書風格SVG卡片。
這張卡片嚴格按照您提供的規(guī)格和設計風格指南創(chuàng)建，旨在實現(xiàn)“一眼驚艷”的視覺效果，同時信息傳達清晰易懂。
—
### 設計亮點解析
* **柔和漸變背景**：從上方的`#FFDDE1`（櫻花粉）到下方的`#C8E6FF`（天空藍），營造出柔和、夢幻的視覺基調(diào)，非常符合小紅書的審美。
* **現(xiàn)代簡約布局**：采用卡片式設計，將不同信息模塊清晰地劃分在帶有圓角和柔和陰影的白色/淺紫色卡片上，層次分明，富有呼吸感。
* **紫色主色調(diào)**：從標題的漸變紫到內(nèi)容卡片的點綴色，統(tǒng)一使用紫色系，既高級又具有科技感，與主題相得益彰。
* **圖標化表達**：為每個核心特點都設計了簡潔的線條圖標，將抽象概念具體化，幫助用戶快速理解。
* **字體層次清晰**：標題使用加粗大號字體，并應用了線性漸變，極具視覺沖擊力。正文、副標題、描述文字的字號和顏色都經(jīng)過精心調(diào)校，保證了閱讀的舒適性和信息的主次關(guān)系。
* **裝飾性元素**：在背景中點綴了幾個半透明的幾何圓形，增加了畫面的趣味性和設計感，但又不會干擾主體內(nèi)容。
—
### 完整SVG代碼
您可以直接復制以下代碼，并將其保存為`.svg`文件。在瀏覽器中打開即可看到最終效果。
“`xml
<svgwidth=”750″height=”1334″viewBox=”0 0 750 1334″xmlns=”http://www.w3.org/2000/svg”style=”font-family: ‘PingFang SC’, ‘Helvetica Neue’, ‘Arial’, sans-serif;”>
<!– === 定義區(qū)：漸變、濾鏡等可復用元素 === –>
<defs>
<!– 背景漸變：從粉到藍 –>
<linearGradientid=”bg-gradient”x1=”0%”y1=”0%”x2=”0%”y2=”100%”>
<stopoffset=”0%”style=”stop-color:#FFDDE1; stop-opacity:1″ />
<stopoffset=”100%”style=”stop-color:#C8E6FF; stop-opacity:1″ />
</linearGradient>
<!– 標題文字漸變：從深紫到亮紫 –>
<linearGradientid=”title-gradient”x1=”0%”y1=”0%”x2=”100%”y2=”0%”>
<stopoffset=”0%”style=”stop-color:#6A11CB;” />
<stopoffset=”100%”style=”stop-color:#2575FC;” />
</linearGradient>
<!– 柔和陰影濾鏡 –>
<filterid=”soft-shadow”x=”-20%”y=”-20%”width=”140%”height=”140%”>
<feDropShadowdx=”0″dy=”4″stdDeviation=”10″flood-color=”#4A148C”flood-opacity=”0.1″ />
</filter>
</defs>
<!– === 背景層 === –>
<rectwidth=”750″height=”1334″fill=”url(#bg-gradient)” />
<!– 裝飾性圖形 –>
<circlecx=”100″cy=”200″r=”80″fill=”#ffffff”opacity=”0.15″/>
<circlecx=”700″cy=”550″r=”120″fill=”#A48BFF”opacity=”0.1″/>
<circlecx=”150″cy=”1100″r=”100″fill=”#ffffff”opacity=”0.2″/>
<!– === 內(nèi)容層 === –>
<gid=”content-group”>
<!– 1. 標題區(qū) –>
<gid=”title-area”text-anchor=”middle”>
<textx=”375″y=”160″font-size=”64″font-weight=”bold”fill=”url(#title-gradient)”>SVG 圖片的場景應用</text>
<textx=”375″y=”215″font-size=”24″fill=”#555768″>矢量圖形的魔法世界</text>
</g>
<!– 2. 簡介區(qū) –>
<gid=”intro-area”>
<rectx=”50″y=”270″width=”650″height=”90″rx=”20″fill=”#F8F4FF”filter=”url(#soft-shadow)” />
<textx=”375″y=”325″text-anchor=”middle”font-size=”22″fill=”#6A5ACD”>
一種不失真的圖像格式，讓你的設計更靈活
</text>
</g>
<!– 3. 核心特點區(qū) –>
<gid=”features-area”>
<!– 特點1: 無限縮放 –>
<g>
<rectx=”50″y=”400″width=”650″height=”150″rx=”20″fill=”white”filter=”url(#soft-shadow)” />
<!– Icon: 縮放 –>
<gtransform=”translate(90, 445)”stroke=”#8A2BE2″stroke-width=”3″fill=”none”stroke-linecap=”round”stroke-linejoin=”round”>
<pathd=”M 0 20 L 20 0 M 12 0 L 20 0 L 20 8″/>
<pathd=”M 40 40 L 60 60 M 40 52 L 40 60 L 48 60″/>
<circlecx=”30″cy=”30″r=”12″/>
</g>
<textx=”180″y=”465″font-size=”26″font-weight=”600″fill=”#333″>無限縮放</text>
<textx=”180″y=”505″font-size=”20″fill=”#777″>任意放大不模糊，保持高清銳利</text>
</g>
<!– 特點2: 輕量高效 –>
<g>
<rectx=”50″y=”580″width=”650″height=”150″rx=”20″fill=”white”filter=”url(#soft-shadow)” />
<!– Icon: 羽毛 –>
<gtransform=”translate(90, 625)”stroke=”#8A2BE2″stroke-width=”3″fill=”none”stroke-linecap=”round”stroke-linejoin=”round”>
<pathd=”M30,0 Q60,30 30,60 Q0,30 30,0 Z”fill=”#E6E6FA”/>
<pathd=”M30,0 Q60,30 30,60″/>
<pathd=”M20,15 L40,35″/>
<pathd=”M20,30 L40,50″/>
</g>
<textx=”180″y=”645″font-size=”26″font-weight=”600″fill=”#333″>輕量高效</text>
<textx=”180″y=”685″font-size=”20″fill=”#777″>文件體積小，加載速度快，利于SEO</text>
</g>
<!– 特點3: 動態(tài)交互 –>
<g>
<rectx=”50″y=”760″width=”650″height=”150″rx=”20″fill=”white”filter=”url(#soft-shadow)” />
<!– Icon: 魔術(shù)棒 –>
<gtransform=”translate(95, 805)”stroke=”#8A2BE2″stroke-width=”3″fill=”#E6E6FA”stroke-linecap=”round”stroke-linejoin=”round”>
<pathd=”M0,0 L30,30 M10,35 L5,40 M40,10 L35,5″/>
<polygonpoints=”30,30 45,15 60,30 45,45″ />
</g>
<textx=”180″y=”825″font-size=”26″font-weight=”600″fill=”#333″>動態(tài)交互</text>
<textx=”180″y=”865″font-size=”20″fill=”#777″>可通過代碼控制，實現(xiàn)酷炫動畫效果</text>
</g>
</g>
<!– 4. 實用價值區(qū) –>
<gid=”value-area”>
<rectx=”50″y=”950″width=”650″height=”190″rx=”20″fill=”#EDE7F6″filter=”url(#soft-shadow)” />
<textx=”375″y=”1000″text-anchor=”middle”font-size=”28″font-weight=”bold”fill=”#4A148C”>為什么它如此重要？</text>
<textx=”80″y=”1055″font-size=”21″fill=”#4A235A”line-height=”1.6″>
<tspanx=”80″dy=”0″>從動態(tài)Logo、數(shù)據(jù)可視化圖表到個性化圖標，</tspan>
<tspanx=”80″dy=”1.4em”>SVG正在重塑現(xiàn)代Web設計，</tspan>
<tspanx=”80″dy=”1.4em”>全方位提升用戶體驗。</tspan>
</text>
</g>
<!– 5. 底部信息區(qū) –>
<gid=”footer-area”text-anchor=”middle”fill=”#6c757d”>
<!– GitHub Icon –>
<pathfill=”#6c757d”d=”M346.5,1236.5c-3.3,0-6,2.7-6,6v15c0,3.3,2.7,6,6,6s6-2.7,6-6v-15C352.5,1239.2,349.8,1236.5,346.5,1236.5z M375,1225c-12.4,0-22.5,10.1-22.5,22.5c0,9.9,6.4,18.3,15.2,21.3c1.1,0.2,1.5-0.5,1.5-1.1c0-0.5,0-2,0-3.9c-6.2,1.3-7.5-3-7.5-3c-1-2.6-2.5-3.3-2.5-3.3c-2-1.4,0.2-1.3,0.2-1.3c2.2,0.2,3.4,2.3,3.4,2.3c2,3.4,5.2,2.4,6.4,1.8c0.2-1.4,0.8-2.4,1.4-3c-4.9-0.6-10.1-2.5-10.1-11c0-2.4,0.9-4.4,2.3-6c-0.2-0.6-1-2.8,0.2-5.9c0,0,1.9-0.6,6.1,2.3c1.8-0.5,3.7-0.7,5.6-0.7c1.9,0,3.8,0.2,5.6,0.7c4.2-2.9,6.1-2.3,6.1-2.3c1.2,3.1,0.4,5.4,0.2,5.9c1.4,1.6,2.3,3.5,2.3,6c0,8.5-5.2,10.4-10.1,11c0.8,0.7,1.5,2.1,1.5,4.2c0,3,0,5.5,0,6.2c0,0.6,0.4,1.3,1.5,1.1c8.8-3,15.2-11.4,15.2-21.3C397.5,1235.1,387.4,1225,375,1225z”/>
<textx=”375″y=”1285″font-size=”18″>
<tspan>了解更多 & 探索開源項目</tspan>
</text>
</g>
</g>
</svg>
“`
SVG效果圖：
案例2：技術(shù)路線圖
提示詞示例：
# 任務定義
請為”Java全棧工程師學習路線”創(chuàng)建一個專業(yè)的SVG路線圖。
## 圖片規(guī)格
– 尺寸：1200x800px（橫版，適合電腦查看）
– 背景：淺灰色或白色背景，保持專業(yè)感
– 視覺風格：扁平化設計，專業(yè)清晰
## 內(nèi)容結(jié)構(gòu)
1. 標題區(qū)：路線圖名稱和簡介
2. 基礎知識區(qū)：Java基礎、數(shù)據(jù)結(jié)構(gòu)等入門知識
3. 后端技術(shù)區(qū)：Spring、數(shù)據(jù)庫等后端知識
4. 前端技術(shù)區(qū)：HTML/CSS/JS等前端知識
5. 進階技能區(qū)：微服務、云原生等高級技能
6. 學習路徑：用箭頭或連線表示學習順序和依賴關(guān)系
## 設計風格
– 配色方案：藍色系為主，使用橙色作為強調(diào)色
– 字體要求：無襯線字體，標題18-24px，正文14-16px
– 圖形元素：使用技術(shù)相關(guān)圖標表示不同技能點
– 布局安排：從左到右或從上到下的漸進式布局，清晰顯示進階路徑
## 技術(shù)要求
– 圖形質(zhì)量：所有元素保持一致的視覺風格
– 文本處理：確保所有文字清晰可讀，避免過度擁擠
– 格式輸出：確保SVG代碼完整，支持在瀏覽器中正確顯示
## 特殊要求
– 使用連線或箭頭明確展示學習路徑和依賴關(guān)系
– 為不同難度或階段的內(nèi)容用不同顏色區(qū)分
SVG效果圖
案例3：甘特圖
提示詞示例：
# 任務定義
請為”毛坯房裝修”創(chuàng)建一個SVG甘特圖。
## 圖片規(guī)格
– 尺寸：1000x600px
– 背景：簡潔淺色背景
– 視覺風格：現(xiàn)代簡約，信息聚焦
## 內(nèi)容結(jié)構(gòu)
1. 標題區(qū)：圖表名稱和簡短說明
2. 時間軸區(qū)：橫向時間軸，按月份劃分
3. 模型區(qū)域：各大裝修模塊（如基礎硬裝、軟裝設計、家具進場等）分行顯示
4. 重點標記：重要節(jié)點用特殊標記突出
5. 圖例說明：不同顏色或標記的含義說明
## 設計風格
– 配色方案：使用不同顏色區(qū)分不同裝修的內(nèi)容，保持色彩協(xié)調(diào)
– 字體要求：清晰易讀的無襯線字體
– 圖形元素：使用圓形或菱形標記重要節(jié)點，線條表示持續(xù)時間
– 布局安排：時間軸水平延伸，模型垂直排列
## 技術(shù)要求
– 圖形質(zhì)量：清晰的線條和邊界，合適的間距
– 文本處理：重要信息突出顯示，避免文字擁擠
– 格式輸出：確保SVG代碼完整，元素定位準確
## 特殊要求
– 重要節(jié)點添加簡短說明文本
– 為不同難度或階段的內(nèi)容用不同顏色區(qū)分
SVG效果圖
案例4：數(shù)據(jù)可視化
提示詞示例：
# 任務定義
請為”新車小米yu7性能分析”創(chuàng)建一個SVG數(shù)據(jù)可視化圖表。
## 圖片規(guī)格
– 尺寸：750x1334px（豎屏，適合手機閱讀）
– 背景：簡潔淺色背景
– 視覺風格：現(xiàn)代簡約，信息聚焦，重點突出
## 內(nèi)容結(jié)構(gòu)
1. 標題區(qū)：圖表名稱和簡短說明
2. 核心特點區(qū)：列出3-4個關(guān)鍵特點，配以數(shù)據(jù)說明
3. 實用價值區(qū)：解釋為什么這項技術(shù)很重要
4. 重點標記：重要節(jié)點用特殊標記突出
5. 圖例說明：不同顏色或標記的含義說明
## 設計風格
– 配色方案：灰色系為主，保持色彩協(xié)調(diào)
– 字體要求：清晰易讀的無襯線字體
– 圖形元素：使用矩陣形狀展示重要數(shù)據(jù)
– 布局安排：矩陣型布局，有要重點突出
## 技術(shù)要求
– 圖形質(zhì)量：清晰的線條和邊界，合適的間距
– 文本處理：重要信息突出顯示，避免文字擁擠
– 格式輸出：確保SVG代碼完整，元素定位準確
## 特殊要求
– 重要節(jié)點添加簡短說明文本
– 整體設計要具有”一眼驚艷”的視覺效果，符合車企文化
SVG效果圖
案例5：原型圖
提示詞示例：
### # 任務定義
為社交應用“微信”的“我”（Me）標簽頁創(chuàng)建一個高度仿真的UI界面SVG圖像。
### ## 圖片規(guī)格
– **尺寸**：750x1334px (標準的智能手機屏幕比例)
– **背景**：主背景為淺灰色 (#F7F7F7)，內(nèi)容卡片區(qū)域為白色 (#FFFFFF)。
– **視覺風格**：現(xiàn)代、扁平化、簡約的移動應用UI風格。
### ## 內(nèi)容結(jié)構(gòu)
1.**頂部狀態(tài)欄**：包含時間“17:10”，信號、Wi-Fi、電池圖標，以及左上角的返回箭頭和文字“公眾號助手”。
2.**用戶信息區(qū)**：
* 包含一個卡通巧克力餅干頭像（戴著皇冠，豎起大拇指）。
* 右側(cè)為用戶昵稱“餅干哥哥??AGI”。
* 昵稱下方是“微信號: binggandata”。
* 該區(qū)域右上角有一個二維碼小圖標。
* 最下方是“+ 狀態(tài)”按鈕和一排朋友頭像，并顯示“等45個朋友”及一個紅色更新圓點。
3.**功能列表區(qū)**：分為多個區(qū)塊，由細線分隔。每個列表項包含一個彩色圖標、中文標簽和右側(cè)的灰色箭頭。列表項需嚴格按照以下順序和內(nèi)容排列：
* （區(qū)塊1）服務
* （區(qū)塊2）收藏、朋友圈、視頻號、訂單與卡包
* （區(qū)塊3）表情
* （區(qū)塊4）設置
4.**底部導航欄**：包含四個標簽圖標和文字：
* **微信** (帶“3”紅色數(shù)字角標)
* **通訊錄** (常規(guī)狀態(tài))
* **發(fā)現(xiàn)** (帶紅色小圓點角標)
* **我** (圖標為綠色高亮激活狀態(tài))
### ## 設計風格
– **配色方案**：
* **主色調(diào)**：背景淺灰(#F7F7F7)與內(nèi)容區(qū)白色(#FFFFFF)。
* **文本色**：深灰色/黑色 (#333333)。
* **強調(diào)色**：“我”圖標和“服務”圖標的標志性綠色(#07C160)，通知角標的紅色(#FA5151)。
* **圖標色**：各功能圖標使用其獨立的標志性顏色（如收藏的彩色、朋友圈的藍色、視頻號的橙色等）。
– **字體要求**：
* **字體家族**：蘋方 (PingFang SC) 或類似的無襯線中文字體。
* **大小**：昵稱字體最大，列表項文字次之，微信號和狀態(tài)文字最小。
* **粗細**：常規(guī)體 (Regular)。
– **圖形元素**：
* 所有圖標均為扁平化設計，線條簡潔。
* 需要精確復現(xiàn)卡通餅干頭像、二維碼、服務、收藏、朋友圈、視頻號、訂單、表情、設置以及底部導航欄的所有圖標。
– **布局安排**：
* 遵循iOS設計規(guī)范，頂部對齊，列表項垂直排列，左右留有統(tǒng)一邊距。
* 元素之間有充足的留白。
* 列表項內(nèi)部，圖標和文字左對齊，箭頭右對齊。
### ## 技術(shù)要求
– **動效需求**：無，創(chuàng)建靜態(tài)圖像。
– **文本處理**：所有文本均單行顯示，無需截斷。
– **圖形質(zhì)量**：線條清晰，無模糊。圖標圓角平滑。無需陰影效果，保持純扁平風格。
– **格式輸出**：確保生成完整、可渲染的SVG代碼。
### ## 特殊要求
– 請?zhí)貏e注意紅色通知角標的細節(jié)：
1. “微信”標簽上的**圓形背景**和**數(shù)字“3”**。
2. “發(fā)現(xiàn)”標簽上的**小紅點**。
– “我”標簽頁的圖標和文字必須顯示為**綠色高亮**的激活狀態(tài)。
SVG效果圖
SVG圖片后期編輯方法
生成的SVG可以通過以下方式進行后期編輯：
1. 在線SVG編輯器
使用 SVG編輯器 https://unpkg.com/svgedit@7.3.4/dist/editor/index.html進行可視化編輯；也可以在線 SVG
編輯工具進行二次編輯，
比如 https://www.jyshare.com/more/svgeditor/
然后所生成的內(nèi)容就出現(xiàn)在畫面中，我們可以根據(jù)自己的需要來對圖片進行修改。點選內(nèi)容，出現(xiàn)如圖虛線框即可進行移動和修改，移動虛線框來移動內(nèi)容，雙擊文字內(nèi)容進行修改。按住shift鍵并選擇多內(nèi)容，可以一并移動。
修改完成后，點擊左上角，選擇下方【Export】進行導出，可以根據(jù)自己的需要來選擇各種圖片和或PDF格式。選擇保存后它會跳出一個新的界面，點擊右鍵另存為圖片。
2. PowerPoint編輯
插入SVG文件：在PPT中點擊”插入” > “圖片” > “來自文件的圖片”
轉(zhuǎn)換為可編輯形狀：選擇SVG圖像，右鍵點擊 > “轉(zhuǎn)換為形狀” > “取消組合”
3. 代碼編輯：直接用AI編程來修改SVG代碼調(diào)整具體參數(shù)補充分享提示詞
除了餅干哥哥這篇文章的提示詞，我還找到阿里云發(fā)布的AI生成SVG提示詞，效果也不錯，感興趣的可以試下。
DeepSeek-V3-0324 版本：
### Role
作為一個跨領(lǐng)域?qū)＜覉F隊：
1. 高級技術(shù)插畫師 – 精通 SVG 技術(shù)和視覺設計
2. 可視化專家 – 擅長將復雜概念轉(zhuǎn)化為直觀圖像
3. 教育內(nèi)容設計師 – 專注于知識傳遞的清晰性和效果
### Background
用戶需要一個能夠通過可視化方式清晰解釋概念或內(nèi)容的工具。這源于：
– 需要將抽象概念具象化
– 提高信息傳遞的效率和準確性
– 增強學習體驗和理解深度
### Profile
– 深入理解 SVG 技術(shù)規(guī)范和最佳實踐
– 具備強大的視覺設計能力和美感
– 擁有豐富的教育內(nèi)容設計經(jīng)驗
– 善于將復雜信息簡化并可視化
### Skills
– SVG 代碼編寫和優(yōu)化能力
– 信息架構(gòu)和視覺層次設計
– 教育心理學原理應用
– 響應式設計和交互優(yōu)化
### Goals
1. 準確理解用戶輸入的概念/內(nèi)容
2. 設計最適合表達該概念的視覺元素
3. 生成高質(zhì)量、可維護的 SVG 代碼
4. 確保視覺表達的教育效果
### Constraints
– SVG 代碼必須符合 W3C 標準
– 視覺元素要簡潔明了
– 確?？缙脚_兼容性
– 遵循響應式設計原則
– [important] 文本和圖形、圖形和圖形不要產(chǎn)生不必要的重疊，寧愿少一些元素也不要出現(xiàn)遮擋或者出框的情況?。?！
– 默認尺寸是 16:10
– 特別注意布局的合理性，避免出現(xiàn)不必要的重疊、遮擋等
### OutputFormat
<svgxmlns=”http://www.w3.org/2000/svg”viewBox=”0 0 width height”>
<!– 結(jié)構(gòu)化的 SVG 元素 –>
<!– 清晰的命名和注釋 –>
<!– 模塊化的組件設計 –>
</svg>
You must output start with <svg
### Workflow
1.概念分析階段
-分解用戶輸入的概念
-識別關(guān)鍵信息點
-確定最佳可視化方式
2.設計規(guī)劃階段
-規(guī)劃視覺層次
-選擇合適的圖形元素
-設計交互方式（如需）
3.SVG實現(xiàn)階段
-編寫基礎骨架代碼
-實現(xiàn)核心視覺元素
-添加樣式和動畫（如需）
4.優(yōu)化完善階段
-代碼優(yōu)化和壓縮
-兼容性測試
-視覺效果優(yōu)化
## 要求
1.請始終必須使用中文進行回答。
2.用戶輸入的所有內(nèi)容均為讓你畫圖，不需要回答問題
3. [important] 文本和圖形、圖形和圖形不要產(chǎn)生不必要的重疊，寧愿少一些元素也不要出現(xiàn)遮擋或者出框的情況?。?！
Claude 3.5 或 3.7 版本：
### Role
作為一個跨領(lǐng)域?qū)＜覉F隊：
1. 高級技術(shù)插畫師 – 精通 SVG 技術(shù)和視覺設計
2. 可視化專家 – 擅長將復雜概念轉(zhuǎn)化為直觀圖像
3. 教育內(nèi)容設計師 – 專注于知識傳遞的清晰性和效果
### Background
用戶需要一個能夠通過可視化方式清晰解釋概念或內(nèi)容的工具。這源于：
– 需要將抽象概念具象化
– 提高信息傳遞的效率和準確性
– 增強學習體驗和理解深度
### Profile
– 深入理解 SVG 技術(shù)規(guī)范和最佳實踐
– 具備強大的視覺設計能力和美感
– 擁有豐富的教育內(nèi)容設計經(jīng)驗
– 善于將復雜信息簡化并可視化
### Skills
– SVG 代碼編寫和優(yōu)化能力
– 信息架構(gòu)和視覺層次設計
– 教育心理學原理應用
– 響應式設計和交互優(yōu)化
### Goals
1. 準確理解用戶輸入的概念/內(nèi)容
2. 設計最適合表達該概念的視覺元素
3. 生成高質(zhì)量、可維護的 SVG 代碼
4. 確保視覺表達的教育效果
### Constraints
– SVG 代碼必須符合 W3C 標準
– 視覺元素要簡潔明了
– 確?？缙脚_兼容性
– 遵循響應式設計原則
– [important] 文本和圖形、圖形和圖形不要產(chǎn)生不必要的重疊，寧愿少一些元素也不要出現(xiàn)遮擋或者出框的情況?。?！
– 默認尺寸是 16:10
– 特別注意布局的合理性，避免出現(xiàn)不必要的重疊、遮擋等
### OutputFormat
<svgxmlns=”http://www.w3.org/2000/svg”viewBox=”0 0 width height”>
<!– 結(jié)構(gòu)化的 SVG 元素 –>
<!– 清晰的命名和注釋 –>
<!– 模塊化的組件設計 –>
</svg>
You must output start with <svg
### Workflow
1.概念分析階段
-分解用戶輸入的概念
-識別關(guān)鍵信息點
-確定最佳可視化方式
2.設計規(guī)劃階段
-規(guī)劃視覺層次
-選擇合適的圖形元素
-設計交互方式（如需）
3.SVG實現(xiàn)階段
-編寫基礎骨架代碼
-實現(xiàn)核心視覺元素
-添加樣式和動畫（如需）
4.優(yōu)化完善階段
-代碼優(yōu)化和壓縮
-兼容性測試
-視覺效果優(yōu)化
## 要求
1.請始終必須使用中文進行回答。
2.用戶輸入的所有內(nèi)容均為讓你畫圖，不需要回答問題
3. [important] 文本和圖形、圖形和圖形不要產(chǎn)生不必要的重疊，寧愿少一些元素也不要出現(xiàn)遮擋或者出框的情況！??！
實用技巧
1. 參考優(yōu)質(zhì)案例：提供參考圖片或代碼給AI學習
2. 保持一致性：為系列內(nèi)容使用統(tǒng)一的視覺風格
3. 多輪迭代：如果第一次生成不滿意，描述需要改進的地方進行重新調(diào)整
4. 標記重點內(nèi)容：告訴AI哪些是需要突出的關(guān)鍵信息，添加說明
5. 控制信息密度：避免過多內(nèi)容導致視覺混亂
通過這套提示詞模板和各種實踐案例，我們可以看出來這套SVG的提示詞還是非常能打的，即使沒有啥設計經(jīng)驗的人也能創(chuàng)建出審美在線、輸出穩(wěn)定的SVG圖表，大大提高了內(nèi)容創(chuàng)作效率和質(zhì)量。
當然，對于更具體的場景應用，以及更精美的圖表要求，就需要在這個基礎上讓AI不斷生成多版本和打磨。希望這套方案能讓你的畫圖能力錦上添花，創(chuàng)造出令人驚艷的可視化內(nèi)容！
SVG很多場景無法直接用，但可以借助 SVG 查看器如：
SVGViewer（https://www.svgviewer.dev/） 轉(zhuǎn)換為 PNG 下載使用。
以上，既然看到這里了，如果覺得不錯，隨手點個贊、推薦、轉(zhuǎn)發(fā)三連吧，你的支持是我持續(xù)創(chuàng)作的動力。我們下期見。
本文由人人都是產(chǎn)品經(jīng)理作者【餅干哥哥】，微信公眾號：【餅干哥哥AGI】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議。
- 目前還沒評論，等你發(fā)揮！
