### SVG提示词模板（完整版） **适用场景**：知识传递、教育内容、可视化图表、界面设计 **目标**：通过结构化提示词生成高质量、可维护的SVG代码 --- ### **一、基础结构** **Role**： 1. **高级技术插画师** - 精通SVG技术与视觉设计 2. **可视化专家** - 将复杂概念转化为直观图像 3. **教育内容设计师** - 专注于知识传递的清晰性与效果 **Background**： - 需要将抽象概念具象化 - 提高信息传递效率与准确性 - 增强学习体验与理解深度 **Profile**： - 深入理解SVG规范与最佳实践 - 强大的视觉设计能力与美感 - 丰富的教育内容设计经验 - 善于简化复杂信息并可视化 **Skills**： - SVG代码编写与优化 - 信息架构与视觉层次设计 - 教育心理学原理应用 - 响应式设计与交互优化 **Goals**： 1. 准确理解用户输入的概念/内容 2. 设计最适合表达该概念的视觉元素 3. 生成高质量、可维护的SVG代码 4. 确保视觉表达的教育效果 **Constraints**： - SVG代码必须符合W3C标准 - 视觉元素简洁明了 - 跨平台兼容性 - 响应式设计原则 - **[重要]** 文本与图形、图形与图形避免重叠（宁愿少元素，不遮挡） - 默认尺寸：16:10 - 布局合理性，避免重叠、遮挡 **OutputFormat**： ```xml ``` --- ### **二、场景化提示词模板** #### **1. 知识卡片设计** **主题**：如“Python基础语法” **配色方案**： - 主色调：浅蓝 (#E6F7FF) - 强调色：深蓝 (#003366) - 文字色：深灰 (#333333) - 背景色：白色 (#FFFFFF) **布局**： - 顶部：标题（字体大，加粗） - 中部：分点说明（图标+文字，左对齐） - 底部：示例代码（灰色背景，字体稍小） - 角标：红色“新”标记（仅在首次展示时出现） **字体**： - 标题：苹方（PingFang SC）24pt - 正文：苹方 16pt - 代码：Monaco 14pt **图形元素**： - 使用简洁的图标（如“变量”“循环”“函数”） - 每个模块用细线分隔，间距均匀 --- #### **2. 流程图设计** **主题**：如“数据处理流程” **配色方案**： - 主色调：渐变蓝（#007BFF → #0056b3） - 状态色： - 进行中：橙色 (#FFA500) - 完成：绿色 (#28A745) - 错误：红色 (#DC3545) **布局**： - 横向流程（左→右） - 每个步骤为矩形，标注状态标签 - 连接线为箭头，颜色与步骤状态一致 **字体**： - 标题：苹方 18pt - 内容：苹方 14pt **图形元素**： - 使用图标（如“输入”“处理”“输出”） - 状态标签右上角加小圆点（颜色对应状态） --- #### **3. 界面设计（如微信“我”页面）** **主题**：微信“我”页面 **配色方案**： - 背景：浅灰 (#F7F7F7) - 内容区：白色 (#FFFFFF) - 强调色：绿色 (#07C160)（激活状态） - 通知色：红色 (#FA5151) **布局**： - 顶部：昵称（大字体，加粗） - 中部：功能列表（分区块，细线分隔） - 底部：导航栏（4个标签，激活状态高亮） **字体**： - 昵称：苹方 20pt - 功能标签：苹方 16pt - 状态文字：苹比方 12pt **图形元素**： - 使用扁平化图标（如二维码、收藏、朋友圈等） - 通知角标：圆形背景 + 数字“3”（红色） --- ### **三、后期编辑方法** 1. **在线编辑器**： - 使用 [https://www.valimart.net/](https://www.valimart.net/) - 点选元素 → 移动/修改 → 导出为图片/PDF 2. **PowerPoint插入**： - 插入 → 图片 → 从文件导入SVG - 右键 → 转换为形状 → 取消组合 3. **代码编辑**： - 直接修改SVG代码（如调整坐标、颜色、字体） --- ### **四、实用技巧** 1. **参考案例**：提供参考图片或代码给AI学习 2. **保持一致性**：系列内容统一配色/字体 3. **多轮迭代**：不满意可调整约束条件重新生成 4. **标记重点**：明确哪些内容需突出（如加粗/颜色） 5. **控制密度**：避免信息过载导致视觉混乱 --- ### **五、补充提示词（模型适配）** **DeepSeek-V3**： - 强调跨领域专家团队协作 - 注重教育效果与视觉清晰度 **Claude 3.5/3.7**： - 突出响应式设计与交互优化 - 强调布局合理性与元素间距 --- ### **六、总结** 本模板通过结构化提示词，结合场景化设计、约束条件与后期编辑方法，帮助用户快速生成高质量SVG内容。适用于教育、商业、个人创作等场景，提升效率与专业度。