AI做SVG的终极方案,一套提示词模板无痛搞定:小红书知识卡片、数据可视化图表、原型图、动态图……

相对于文字,图像信息更能直观地传达复杂的信息和概念,其最大的优势是直观、高效、精准。

作为一名数据分析师,画图是我工作中必不可少的一部分。无论是汇报时的ppt展示图、还是做计划时的流程图、亦或是小组讨论时的思维导图......我们无时无刻都在跟图表打交道,也通过图表来完善我们的工作。

AI生成的SVG - 架构图

以前画图需要找各种模板,各种拼接,还要学习配色,技术含量不高但就是磨人,一张图可能就要花上一两个小时。可现在,泡杯咖啡的功夫,AI就能帮你完成,而且效果不由得让人一键三连!!!

确实,AI在SVG图形生成领域展现出惊人能力,不仅可以生成精美的小红书图文、流程图、思维导图,还能创建专业级别的技术文档配图和教育科普可视化内容。

我最近也花了不少时间来分析各类SVG案例,总结出一套通用提示词模板,让你用一套模板就能生成各种精美SVG图形,无需记忆复杂提示词,无痛搞定所有应用,只有一句"so easy~"。

今天饼干哥哥就到你手把手体验一下,保证你看完就能上手

SVG(可缩放矢量图形)的独特优势:

  • 无损缩放:放大不失真,适合任何尺寸设备

  • 可编辑性:生成后可二次编辑修改各个元素

  • 文件小:代码形式存储,体积小于位图

  • 动效支持:可添加交互和动画效果

SVG 格式文件将图像存储为矢量,这是一种基于数学公式由点、线、曲线和形状组成的图形。 图形可以无限缩放而不失真,非常适合绘制 UI 素材、Logo 图标、图形插画、技术架构图、流程图等需要无损缩放的图片。其文件本质上是 XML 格式的文本代码,可以直接嵌入网页或导入各种设计工具。

Claude生成的动态SVG

AI 生成的 SVG 代码可以直接嵌入网页或导入设计工具,也可以保存为 SVG 文件直接双击在浏览器内打开。

使用 SVG 的另一个优点是可以精确控制每个元素的位置、大小和样式,甚至能添加动画效果,让图片更加生动。

SVG提示词通用模板

ini 复制代码
# 任务定义
请为[主题/目的]创建一个专业的SVG图像。

## 图片规格
- 尺寸:[宽x高,如750x1334px]
- 背景:[背景颜色/渐变要求]
- 视觉风格:[如现代简约/卡通/扁平化/等距图/水墨等]

## 内容结构
1. [主要内容元素1,如标题区]
2. [主要内容元素2,如内容区]
3. [主要内容元素3,如数据展示区]
...

## 设计风格
- 配色方案:[指定主色调/辅助色/强调色]
- 字体要求:[字体家族/大小/粗细等]
- 图形元素:[需要包含的图标/装饰/视觉元素]
- 布局安排:[元素排列方式/留白/对齐]

## 技术要求
- 动效需求:[是否需要动画/交互效果]
- 文本处理:[文字排版要求/截断处理]
- 图形质量:[线条粗细/圆角设置/阴影效果]
- 格式输出:[确保SVG代码完整/有效]

## 特殊要求
- [其他特殊注意事项或要求]

## 参考资料
[可以添加参考素材/内容]

我们可以看到,这个模板涵盖了SVG内容创建的所有关键方面,从内容结构到技术实现,从资源配置到交付要求。这种全面性确保生成的SVG内容没有重大遗漏,进而也就确保了输出的确定性✅

有了模板之后,用法就很简单了:把你的要求和需要的功能,连同模板一起扔给AI,让AI生成具体的提示词。然后就可以用这个提示词去生成SVG图像。

❗️注意,很多时候我们不是一次性就可以得到想要的效果,但有了这个模板,很大概率通过2-3轮的对话就能迭代出你想要的。

SVG图片类型指南

SVG图片类型 主要用途 适用场景
流程图 展示步骤、决策和工作流程 业务流程说明、算法描述
技术路线图 展示技术发展路径和学习路线 职业规划、技能体系构建
组织架构图 展示层级结构和汇报关系 公司架构、团队结构
思维导图 放射状展开表示概念关系 头脑风暴、知识整理
信息图表 视觉化呈现数据和信息 报告展示、市场分析
甘特图 展示任务时间线和进度 项目管理、进度跟踪
数据可视化图表 展示数据趋势和比较关系 数据分析、科学研究
网络拓扑图 展示系统组件间连接关系 网络架构、系统设计

设计风格与配色方案

SVG图片风格 风格特点 适用场景 推荐配色
简约/极简 线条简洁、留白多、元素少 商务展示、科技产品 黑白灰为主,单色或双色
扁平化 无渐变、无阴影、色块分明 界面图标、信息图表 鲜艳纯色、高对比度
等距 三维立体感、固定角度 数据可视化、建筑设计 渐变色、蓝紫系
手绘 线条自由流畅、色彩丰富多样 儿童教育、艺术展览 多彩、高明亮度
美拉德 低调稳重、质感十足 秋冬季节的品牌推广、宣传 棕褐色为主、深浅不一
水墨 模拟中国水墨画效果 东方风格设计、文化艺术 黑白灰、淡蓝、棕色
卡通 夸张生动、轮廓圆润 儿童教育、社交媒体 明亮饱和色、多彩
渐变 色彩平滑过渡、现代感 背景设计、科技产品 双色或多色渐变

如何使用这个模板

  1. 选择合适的图片类型:根据你的需求,从流程图、思维导图、信息图表等中选择

  2. 定制设计风格:选择适合内容的视觉风格和配色方案

  3. 明确内容结构:清晰列出你需要在SVG中展示的主要内容元素

  4. 添加参考资料:提供你希望AI参考的文字内容或图片

  5. 迭代优化:生成后如有需要,可以要求AI调整特定部分

实操案例分享

案例1:小红书风格知识卡片

提示词示例:

markdown 复制代码
# 任务定义
请为"SVG图片的场景应用"创建一个适合小红书平台的精美SVG卡片。

## 图片规格
- 尺寸:750x1334px(竖屏,适合手机阅读)
- 背景:柔和渐变背景,从浅粉到浅蓝
- 视觉风格:现代简约,高颜值,有设计感

## 内容结构
1. 标题区:突出显示主题名称和副标题
2. 简介区:一句话解释这项技术
3. 核心特点区:列出3-4个关键特点,配以图标
4. 实用价值区:解释为什么这项技术很重要
5. 底部信息区:放置开源地址等额外信息

## 设计风格
- 配色方案:以紫色系为主色调,搭配白色内容区和柔和色块
- 字体要求:现代无衬线字体,标题加粗,字号层次分明
- 图形元素:使用简洁几何形状作为装饰,圆形或波浪状点缀
- 布局安排:卡片式布局,内容区有适当圆角和柔和阴影

## 技术要求
- 文本处理:确保所有文字清晰可读,标题醒目
- 图形质量:使用圆角矩形,适当添加柔和阴影增加层次感
- 格式输出:完整SVG代码,确保没有错误

## 特殊要求
- 确保信息呈现清晰易懂,适合小白用户
- 整体设计要具有"一眼惊艳"的视觉效果
- 不要包含"小白"、"炸裂"等极限词

SVG代码生成如下:

xml 复制代码
好的,遵从您的要求,我为您精心设计并制作了一张关于"SVG图片的场景应用"的小红书风格SVG卡片。

这张卡片严格按照您提供的规格和设计风格指南创建,旨在实现"一眼惊艳"的视觉效果,同时信息传达清晰易懂。

---

### 设计亮点解析

*   **柔和渐变背景**:从上方的`#FFDDE1`(樱花粉)到下方的`#C8E6FF`(天空蓝),营造出柔和、梦幻的视觉基调,非常符合小红书的审美。
*   **现代简约布局**:采用卡片式设计,将不同信息模块清晰地划分在带有圆角和柔和阴影的白色/浅紫色卡片上,层次分明,富有呼吸感。
*   **紫色主色调**:从标题的渐变紫到内容卡片的点缀色,统一使用紫色系,既高级又具有科技感,与主题相得益彰。
*   **图标化表达**:为每个核心特点都设计了简洁的线条图标,将抽象概念具体化,帮助用户快速理解。
*   **字体层次清晰**:标题使用加粗大号字体,并应用了线性渐变,极具视觉冲击力。正文、副标题、描述文字的字号和颜色都经过精心调校,保证了阅读的舒适性和信息的主次关系。
*   **装饰性元素**:在背景中点缀了几个半透明的几何圆形,增加了画面的趣味性和设计感,但又不会干扰主体内容。

---

### 完整SVG代码

您可以直接复制以下代码,并将其保存为`.svg`文件。在浏览器中打开即可看到最终效果。

```xml
<svg width="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;">
  
  <!-- === 定义区:渐变、滤镜等可复用元素 === -->
  <defs>
    <!-- 背景渐变:从粉到蓝 -->
    <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#FFDDE1; stop-opacity:1" />
      <stop offset="100%" style="stop-color:#C8E6FF; stop-opacity:1" />
    </linearGradient>

    <!-- 标题文字渐变:从深紫到亮紫 -->
    <linearGradient id="title-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#6A11CB;" />
      <stop offset="100%" style="stop-color:#2575FC;" />
    </linearGradient>

    <!-- 柔和阴影滤镜 -->
    <filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="4" stdDeviation="10" flood-color="#4A148C" flood-opacity="0.1" />
    </filter>
  </defs>

  <!-- === 背景层 === -->
  <rect width="750" height="1334" fill="url(#bg-gradient)" />
  
  <!-- 装饰性图形 -->
  <circle cx="100" cy="200" r="80" fill="#ffffff" opacity="0.15"/>
  <circle cx="700" cy="550" r="120" fill="#A48BFF" opacity="0.1"/>
  <circle cx="150" cy="1100" r="100" fill="#ffffff" opacity="0.2"/>


  <!-- === 内容层 === -->
  <g id="content-group">

    <!-- 1. 标题区 -->
    <g id="title-area" text-anchor="middle">
      <text x="375" y="160" font-size="64" font-weight="bold" fill="url(#title-gradient)">SVG 图片的场景应用</text>
      <text x="375" y="215" font-size="24" fill="#555768">矢量图形的魔法世界</text>
    </g>

    <!-- 2. 简介区 -->
    <g id="intro-area">
      <rect x="50" y="270" width="650" height="90" rx="20" fill="#F8F4FF" filter="url(#soft-shadow)" />
      <text x="375" y="325" text-anchor="middle" font-size="22" fill="#6A5ACD">
        一种不失真的图像格式,让你的设计更灵活
      </text>
    </g>

    <!-- 3. 核心特点区 -->
    <g id="features-area">
      <!-- 特点1: 无限缩放 -->
      <g>
        <rect x="50" y="400" width="650" height="150" rx="20" fill="white" filter="url(#soft-shadow)" />
        <!-- Icon: 缩放 -->
        <g transform="translate(90, 445)" stroke="#8A2BE2" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path d="M 0 20 L 20 0 M 12 0 L 20 0 L 20 8"/>
          <path d="M 40 40 L 60 60 M 40 52 L 40 60 L 48 60"/>
          <circle cx="30" cy="30" r="12"/>
        </g>
        <text x="180" y="465" font-size="26" font-weight="600" fill="#333">无限缩放</text>
        <text x="180" y="505" font-size="20" fill="#777">任意放大不模糊,保持高清锐利</text>
      </g>

      <!-- 特点2: 轻量高效 -->
      <g>
        <rect x="50" y="580" width="650" height="150" rx="20" fill="white" filter="url(#soft-shadow)" />
        <!-- Icon: 羽毛 -->
        <g transform="translate(90, 625)" stroke="#8A2BE2" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path d="M30,0 Q60,30 30,60 Q0,30 30,0 Z" fill="#E6E6FA"/>
          <path d="M30,0 Q60,30 30,60"/>
          <path d="M20,15 L40,35"/>
          <path d="M20,30 L40,50"/>
        </g>
        <text x="180" y="645" font-size="26" font-weight="600" fill="#333">轻量高效</text>
        <text x="180" y="685" font-size="20" fill="#777">文件体积小,加载速度快,利于SEO</text>
      </g>

      <!-- 特点3: 动态交互 -->
      <g>
        <rect x="50" y="760" width="650" height="150" rx="20" fill="white" filter="url(#soft-shadow)" />
        <!-- Icon: 魔术棒 -->
        <g transform="translate(95, 805)" stroke="#8A2BE2" stroke-width="3" fill="#E6E6FA" stroke-linecap="round" stroke-linejoin="round">
          <path d="M0,0 L30,30 M10,35 L5,40 M40,10 L35,5"/>
          <polygon points="30,30 45,15 60,30 45,45" />
        </g>
        <text x="180" y="825" font-size="26" font-weight="600" fill="#333">动态交互</text>
        <text x="180" y="865" font-size="20" fill="#777">可通过代码控制,实现酷炫动画效果</text>
      </g>
    </g>
    
    <!-- 4. 实用价值区 -->
    <g id="value-area">
      <rect x="50" y="950" width="650" height="190" rx="20" fill="#EDE7F6" filter="url(#soft-shadow)" />
      <text x="375" y="1000" text-anchor="middle" font-size="28" font-weight="bold" fill="#4A148C">为什么它如此重要?</text>
      <text x="80" y="1055" font-size="21" fill="#4A235A" line-height="1.6">
        <tspan x="80" dy="0">从动态Logo、数据可视化图表到个性化图标,</tspan>
        <tspan x="80" dy="1.4em">SVG正在重塑现代Web设计,</tspan>
        <tspan x="80" dy="1.4em">全方位提升用户体验。</tspan>
      </text>
    </g>

    <!-- 5. 底部信息区 -->
    <g id="footer-area" text-anchor="middle" fill="#6c757d">
      <!-- GitHub Icon -->
      <path fill="#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"/>
      <text x="375" y="1285" font-size="18">
        <tspan>了解更多 &amp; 探索开源项目</tspan>
      </text>
    </g>

  </g>
</svg>
```

案例2:技术路线图

提示词示例:

markdown 复制代码
# 任务定义
请为"Java全栈工程师学习路线"创建一个专业的SVG路线图。

## 图片规格
- 尺寸:1200x800px(横版,适合电脑查看)
- 背景:浅灰色或白色背景,保持专业感
- 视觉风格:扁平化设计,专业清晰

## 内容结构
1. 标题区:路线图名称和简介
2. 基础知识区:Java基础、数据结构等入门知识
3. 后端技术区:Spring、数据库等后端知识
4. 前端技术区:HTML/CSS/JS等前端知识
5. 进阶技能区:微服务、云原生等高级技能
6. 学习路径:用箭头或连线表示学习顺序和依赖关系

## 设计风格
- 配色方案:蓝色系为主,使用橙色作为强调色
- 字体要求:无衬线字体,标题18-24px,正文14-16px
- 图形元素:使用技术相关图标表示不同技能点
- 布局安排:从左到右或从上到下的渐进式布局,清晰显示进阶路径

## 技术要求
- 图形质量:所有元素保持一致的视觉风格
- 文本处理:确保所有文字清晰可读,避免过度拥挤
- 格式输出:确保SVG代码完整,支持在浏览器中正确显示

## 特殊要求
- 使用连线或箭头明确展示学习路径和依赖关系
- 为不同难度或阶段的内容用不同颜色区分

案例3:甘特图

提示词示例:

markdown 复制代码
# 任务定义
请为"毛坯房装修"创建一个SVG甘特图。

## 图片规格
- 尺寸:1000x600px
- 背景:简洁浅色背景
- 视觉风格:现代简约,信息聚焦

## 内容结构
1. 标题区:图表名称和简短说明
2. 时间轴区:横向时间轴,按月份划分
3. 模型区域:各大装修模块(如基础硬装、软装设计、家具进场等)分行显示
4. 重点标记:重要节点用特殊标记突出
5. 图例说明:不同颜色或标记的含义说明

## 设计风格
- 配色方案:使用不同颜色区分不同装修的内容,保持色彩协调
- 字体要求:清晰易读的无衬线字体
- 图形元素:使用圆形或菱形标记重要节点,线条表示持续时间
- 布局安排:时间轴水平延伸,模型垂直排列

## 技术要求
- 图形质量:清晰的线条和边界,合适的间距
- 文本处理:重要信息突出显示,避免文字拥挤
- 格式输出:确保SVG代码完整,元素定位准确

## 特殊要求
- 重要节点添加简短说明文本
- 为不同难度或阶段的内容用不同颜色区分

案例4:数据可视化

提示词示例:

markdown 复制代码
# 任务定义
请为"新车小米yu7性能分析"创建一个SVG数据可视化图表。

## 图片规格
- 尺寸:750x1334px(竖屏,适合手机阅读)
- 背景:简洁浅色背景
- 视觉风格:现代简约,信息聚焦,重点突出

## 内容结构
1. 标题区:图表名称和简短说明
2. 核心特点区:列出3-4个关键特点,配以数据说明
3. 实用价值区:解释为什么这项技术很重要
4. 重点标记:重要节点用特殊标记突出
5. 图例说明:不同颜色或标记的含义说明

## 设计风格
- 配色方案:灰色系为主,保持色彩协调
- 字体要求:清晰易读的无衬线字体
- 图形元素:使用矩阵形状展示重要数据
- 布局安排:矩阵型布局,有要重点突出

## 技术要求
- 图形质量:清晰的线条和边界,合适的间距
- 文本处理:重要信息突出显示,避免文字拥挤
- 格式输出:确保SVG代码完整,元素定位准确

## 特殊要求
- 重要节点添加简短说明文本
- 整体设计要具有"一眼惊艳"的视觉效果,符合车企文化

案例5:原型图

提示词示例:

markdown 复制代码
### # 任务定义
为社交应用"微信"的"我"(Me)标签页创建一个高度仿真的UI界面SVG图像。

### ## 图片规格
-   **尺寸**:750x1334px (标准的智能手机屏幕比例)
-   **背景**:主背景为浅灰色 (#F7F7F7),内容卡片区域为白色 (#FFFFFF)。
-   **视觉风格**:现代、扁平化、简约的移动应用UI风格。

### ## 内容结构
1.  **顶部状态栏**:包含时间"17:10",信号、Wi-Fi、电池图标,以及左上角的返回箭头和文字"公众号助手"。
2.  **用户信息区**:
    *   包含一个卡通巧克力饼干头像(戴着皇冠,竖起大拇指)。
    *   右侧为用户昵称"饼干哥哥🍪AGI"。
    *   昵称下方是"微信号: binggandata"。
    *   该区域右上角有一个二维码小图标。
    *   最下方是"+ 状态"按钮和一排朋友头像,并显示"等45个朋友"及一个红色更新圆点。
3.  **功能列表区**:分为多个区块,由细线分隔。每个列表项包含一个彩色图标、中文标签和右侧的灰色箭头。列表项需严格按照以下顺序和内容排列:
    *   (区块1)服务
    *   (区块2)收藏、朋友圈、视频号、订单与卡包
    *   (区块3)表情
    *   (区块4)设置
4.  **底部导航栏**:包含四个标签图标和文字:
    *   **微信** (带"3"红色数字角标)
    *   **通讯录** (常规状态)
    *   **发现** (带红色小圆点角标)
    *   **我** (图标为绿色高亮激活状态)

### ## 设计风格
-   **配色方案**:
    *   **主色调**:背景浅灰(#F7F7F7)与内容区白色(#FFFFFF)。
    *   **文本色**:深灰色/黑色 (#333333)。
    *   **强调色**:"我"图标和"服务"图标的标志性绿色(#07C160),通知角标的红色(#FA5151)。
    *   **图标色**:各功能图标使用其独立的标志性颜色(如收藏的彩色、朋友圈的蓝色、视频号的橙色等)。
-   **字体要求**:
    *   **字体家族**:苹方 (PingFang SC) 或类似的无衬线中文字体。
    *   **大小**:昵称字体最大,列表项文字次之,微信号和状态文字最小。
    *   **粗细**:常规体 (Regular)。
-   **图形元素**:
    *   所有图标均为扁平化设计,线条简洁。
    *   需要精确复现卡通饼干头像、二维码、服务、收藏、朋友圈、视频号、订单、表情、设置以及底部导航栏的所有图标。
-   **布局安排**:
    *   遵循iOS设计规范,顶部对齐,列表项垂直排列,左右留有统一边距。
    *   元素之间有充足的留白。
    *   列表项内部,图标和文字左对齐,箭头右对齐。

### ## 技术要求
-   **动效需求**:无,创建静态图像。
-   **文本处理**:所有文本均单行显示,无需截断。
-   **图形质量**:线条清晰,无模糊。图标圆角平滑。无需阴影效果,保持纯扁平风格。
-   **格式输出**:确保生成完整、可渲染的SVG代码。

### ## 特殊要求
-   请特别注意红色通知角标的细节:
    1.  "微信"标签上的**圆形背景**和**数字"3"**。
    2.  "发现"标签上的**小红点**。
-   "我"标签页的图标和文字必须显示为**绿色高亮**的激活状态。

SVG图片后期编辑方法

生成的SVG可以通过以下方式进行后期编辑:

  1. 在线SVG编辑器 :使用SVG编辑器进行可视化编辑;也可以在线 SVG 编辑工具进行二次编辑,比如 www.jyshare.com/more/svgedi...

然后所生成的内容就出现在画面中,我们可以根据自己的需要来对图片进行修改。点选内容,出现如图虚线框即可进行移动和修改,移动虚线框来移动内容,双击文字内容进行修改。按住shift键并选择多内容,可以一并移动。

修改完成后,点击左上角,选择下方【Export】进行导出,可以根据自己的需要来选择各种图片和或PDF格式。选择保存后它会跳出一个新的界面,点击右键另存为图片。

  1. PowerPoint编辑
  • 插入SVG文件:在PPT中点击"插入" > "图片" > "来自文件的图片"
  • 转换为可编辑形状:选择SVG图像,右键点击 > "转换为形状" > "取消组合"
  1. 代码编辑:直接用AI编程来修改SVG代码调整具体参数

补充分享提示词

除了饼干哥哥这篇文章的提示词,我还找到阿里云发布的AI生成SVG提示词,效果也不错,感兴趣的可以试下。

DeepSeek-V3-0324 版本:

xml 复制代码
### Role
作为一个跨领域专家团队:
1. 高级技术插画师 - 精通 SVG 技术和视觉设计
2. 可视化专家 - 擅长将复杂概念转化为直观图像
3. 教育内容设计师 - 专注于知识传递的清晰性和效果

### Background
用户需要一个能够通过可视化方式清晰解释概念或内容的工具。这源于:
- 需要将抽象概念具象化
- 提高信息传递的效率和准确性
- 增强学习体验和理解深度

### Profile
- 深入理解 SVG 技术规范和最佳实践
- 具备强大的视觉设计能力和美感
- 拥有丰富的教育内容设计经验
- 善于将复杂信息简化并可视化

### Skills
- SVG 代码编写和优化能力
- 信息架构和视觉层次设计
- 教育心理学原理应用
- 响应式设计和交互优化

### Goals
1. 准确理解用户输入的概念/内容
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 

### Workflow
1. 概念分析阶段
   - 分解用户输入的概念
   - 识别关键信息点
   - 确定最佳可视化方式

2. 设计规划阶段
   - 规划视觉层次
   - 选择合适的图形元素
   - 设计交互方式(如需)

3. SVG 实现阶段
   - 编写基础骨架代码
   - 实现核心视觉元素
   - 添加样式和动画(如需)

4. 优化完善阶段
   - 代码优化和压缩
   - 兼容性测试
   - 视觉效果优化

## 要求
1. 请始终必须使用中文进行回答。
2. 用户输入的所有内容均为让你画图,不需要回答问题
3.  [important] 文本和图形、图形和图形不要产生不必要的重叠,宁愿少一些元素也不要出现遮挡或者出框的情况!!!

Claude 3.5 或 3.7 版本:

xml 复制代码
### Role
作为一个跨领域专家团队:
1. 高级技术插画师 - 精通 SVG 技术和视觉设计
2. 可视化专家 - 擅长将复杂概念转化为直观图像
3. 教育内容设计师 - 专注于知识传递的清晰性和效果

### Background
用户需要一个能够通过可视化方式清晰解释概念或内容的工具。这源于:
- 需要将抽象概念具象化
- 提高信息传递的效率和准确性
- 增强学习体验和理解深度

### Profile
- 深入理解 SVG 技术规范和最佳实践
- 具备强大的视觉设计能力和美感
- 拥有丰富的教育内容设计经验
- 善于将复杂信息简化并可视化

### Skills
- SVG 代码编写和优化能力
- 信息架构和视觉层次设计
- 教育心理学原理应用
- 响应式设计和交互优化

### Goals
1. 准确理解用户输入的概念/内容
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 

### Workflow
1. 概念分析阶段
   - 分解用户输入的概念
   - 识别关键信息点
   - 确定最佳可视化方式

2. 设计规划阶段
   - 规划视觉层次
   - 选择合适的图形元素
   - 设计交互方式(如需)

3. SVG 实现阶段
   - 编写基础骨架代码
   - 实现核心视觉元素
   - 添加样式和动画(如需)

4. 优化完善阶段
   - 代码优化和压缩
   - 兼容性测试
   - 视觉效果优化

## 要求
1. 请始终必须使用中文进行回答。
2. 用户输入的所有内容均为让你画图,不需要回答问题
3.  [important] 文本和图形、图形和图形不要产生不必要的重叠,宁愿少一些元素也不要出现遮挡或者出框的情况!!!

实用技巧

  1. 参考优质案例:提供参考图片或代码给AI学习

  2. 保持一致性:为系列内容使用统一的视觉风格

  3. 多轮迭代:如果第一次生成不满意,描述需要改进的地方进行重新调整

  4. 标记重点内容:告诉AI哪些是需要突出的关键信息,添加说明

  5. 控制信息密度:避免过多内容导致视觉混乱

通过这套提示词模板和各种实践案例,我们可以看出来这套SVG的提示词还是非常能打的,即使没有啥设计经验的人也能创建出审美在线、输出稳定的SVG图表,大大提高了内容创作效率和质量。

当然,对于更具体的场景应用,以及更精美的图表要求,就需要在这个基础上让AI不断生成多版本和打磨。希望这套方案能让你的画图能力锦上添花,创造出令人惊艳的可视化内容!

SVG 很多场景无法直接用,但可以借助 SVG 查看器如:SVGViewer( www.svgviewer.dev/ ) 转换为 PNG 下载使用。

本文由稀土掘金作者【饼干哥哥】,微信公众号:【饼干哥哥AGI】,原创/授权 发布于稀土掘金,未经许可,禁止转载。

相关推荐
设计师也学前端13 天前
SVG数据可视化组件基础教程9:自定义电池电量进度
前端·svg
设计师也学前端13 天前
SVG数据可视化组件基础教程8:自定义水波球
前端·svg
设计师也学前端15 天前
SVG数据可视化组件基础教程7:自定义柱状图
前端·svg
SuperherRo17 天前
Web攻防-XSS跨站&文件类型&功能逻辑&SVG&PDF&SWF&HTML&XML&PMessage&LocalStorage
xml·pdf·html·svg·localstorage·swf·pmessage
实习生小黄18 天前
使用psd.js将psd路径转成svg格式
前端·javascript·svg
设计师也学前端19 天前
SVG数据可视化组件基础教程6:翻牌倒计时
前端·svg
设计师也学前端23 天前
SVG数据可视化组件基础教程5:带指针连续进度的仪表盘
svg·数据可视化
设计师也学前端24 天前
SVG数据可视化组件基础教程4:连续进度的仪表盘
svg·数据可视化
微笑边缘的金元宝24 天前
svg实现3环进度图,可动态调节进度数值,(vue)
前端·javascript·vue.js·svg