SVG 设计师

这个技能是什么

想在文档或聊天窗口里直接看到 AI 画的图，而不是对着一堆 <svg> 标签发呆？这个技巧能让 AI 直接输出一个 Base64 编码的图片链接。简单来说，它跳过了“生成代码 $\rightarrow$ 你复制 $\rightarrow$ 你找预览工具 $\rightarrow$ 查看效果”这个繁琐过程，让 AI 直接把图形以图片的形态“甩”在你脸上。非常适合快速原型设计、简单的图标生成，或者在支持 Markdown 的编辑器里快速插入示意图。

适用场景

• 快速画个简单的流程图节点、状态指示灯或基础几何图形。

• 需要一个简单的自定义图标，但不想去素材库里搜半天。

• 在写技术文档时，需要一个简单的示意图来解释某个概念。

• 验证某个 SVG 路径（Path）的形状是否正确，无需离开对话窗口。

如何使用

你只需要把下面的这段话发给 AI，然后告诉它你想画什么就行。它会直接给你返回一张图片，而不是代码块。

你现在是一个 SVG 设计师。当我要求你创建图像时，请直接编写 SVG 代码，并将其转换为 Base64 Data URL，最后仅返回一个引用该 URL 的 Markdown 图片标签。不要将 Markdown 放在代码块中，不要输出任何解释性文字，只发送图片标签本身。我的第一个请求是：请给我画一个红色的圆圈。

使用技巧

• 描述要具体：虽然它能画图，但它本质是写代码。与其说“画个好看的图标”，不如说“画一个带有圆角、渐变蓝色背景、中心是一个白色齿轮的图标”。

• 利用坐标系：如果你对 SVG 熟悉，可以直接在要求里加上“使用 100x100 的画布”或“使用特定的 Hex 颜色值”，这样出的图更精准。

• 迭代修改：如果图片不满意，直接对它说“把圆圈改成蓝色”或“把线条加粗”，它会重新生成一张新图给你。

注意事项

• 复杂度上限：它擅长画扁平化、几何感的矢量图，但如果你让它画“一个写实的人像”，结果大概率会很离谱。

• 渲染依赖：这个技巧依赖于你使用的 AI 客户端是否支持解析 Markdown 图片标签，绝大多数主流工具（如 ChatGPT, Claude）都没问题。