摘要：Claude 这个AI工具我早在2023年4月份就发布了一篇使用Claude的文件，见： https://mp.weixin.qq.com/s/lz4SmopmUa-XJwSTQsj_bQ 现在它越来越强大了，我现在编程使用最多的，也是感觉最靠谱的就是Clau
Claude 这个AI工具我早在2023年4月份就发布了一篇使用Claude的文件，见： https://mp.weixin.qq.com/s/lz4SmopmUa-XJwSTQsj_bQ 现在它越来越强大了，我现在编程使用最多的，也是感觉最靠谱的就是Claude3.7--sonnet，感谢字节的Trae，让我们可以免费使用最新最强大的编程模型，今天来聊下用Cluade绘图的问题。
Claude绘图的本质是通过Claude来生成SVG图片的代码，嵌入到html中，就可以在官网预览了。
全称是可缩放矢量图形（Scalable Vector Graphics），是一种基于XML文本格式的二维矢量图形标准。
简单来说，SVG是一种用来描述图像的方式，但它不像常见的JPG、PNG等格式那样存储图像的每一个像素点的信息，而是通过记录绘制图像所需的线条、形状和颜色等信息来创建图像。 这意味着，当你放大或缩小一个SVG图片时，它不会像位图图像那样出现模糊或者失真的情况，因为它是基于数学公式和路径来定义图像的各个部分的，无论大小如何变化，都能保持清晰度。
举个简单的例子，如果你画一个圆，SVG会记录下这个圆的中心在哪里，半径是多少，以及它的颜色是什么样的。而不需要记录圆边上的每个点的颜色。这样做的好处之一就是文件通常比较小，并且非常适合用于网页设计中，因为它可以保证在不同设备上都有良好的显示效果，特别是在需要适应各种屏幕尺寸的响应式设计中。
对于程序员来说，经常绘制的就是架构图了，自己设计软件的时候需要绘制，学习开源软件的时候，也需要参考开源软件的架构图加以理解，正所谓一图胜千言，一个绘图正确、漂亮的架构图能让入门者轻松理解新的架构。
对于Nginx这个常用的开源软件，它的架构图如何让Claude生成那，我先让DeepSeek给我一个提示词，然后喂给Claude，发现效果还不如直接让Claude自己总结绘制，经过了几轮改进，总结的提示词如下：
以架构师的视角绘制Nginx核心架构图（SVG）要求：- 元素不重叠，避免内容过于拥挤- 如有必要，则添加小型公式来解释关键计算- 使用精确的专业术语- 架构标题 Fira Code Bold + 思源宋体 Bold 24pt- 技术术语 JetBrains Mono + 方正书宋 14pt- 数学公式 Latin Modern Math 12pt- 浅色背景框效果图如下，先不管内部逻辑，这个图的味道是对了的。
对于suricata，这个开源的IDS系统，让Cluade绘制看看，提示词如下：
以流量系统架构师的视角绘制suricata核心架构图（SVG）要求：- 元素不重叠，避免内容过于拥挤- 框图内的内容不能超过边界- 使用精确的专业术语- 架构标题 Fira Code Bold + 思源宋体 Bold 24pt- 技术术语 JetBrains Mono + 方正书宋 14pt- 数学公式 Latin Modern Math 12pt- 浅色背景框suricata架构图
上面让Claude总结的绘图，效果还不错，但是如果我们网上看到架构表述更清晰，布局更合理的图，能不能让Claude来防图那，这样我们写文章就可以直接用了，不存在盗图的风险，如下： 原图:（来自：https://cloud.tencent.com/developer/article/2392977）
重绘效果图：
总结：
基本能满足以图绘图的要求；提示词一定要强调不能存在重叠，文字和图经常出现覆盖的问题；对于后端工程师来说，前端的技术，学习下还能马马虎虎，但是对于设计UI，这种，虽然我审美在线，但是设计上是一塌糊涂，让Claude作为专业的UI设计师，来设计下UI，看看效果如何。
假如想开发一款给初中生学习用的在线知识测试系统，用以下的提示词来看看效果：
#角色 你是位资深精通产品规划和UI的设计师#设计风格1、界面风格要简洁、清爽、有活力，使用FontAwesome等开源图标库，让原型显得更精美和接近真实；2、配色要护眼、清爽、有活力，使用FontAwesome等开源图标库，让原型显得更精美和接近真实；3、界面要符合现代APP的设计规范，使用户在使用APP时感到舒适、流畅、自然；4、信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现、用户视线嗯呢自然聚焦核心功能；5、精心打磨的圆角；细腻的微交互；舒适的视觉比例；6、强调色：按APP类型选择；单个页面尺寸为 375x812PX，带有描边，模拟手机边框7、样式必须引入 tailwindcss CDN来完成#设计任务我想开发一个初中生使用的在线知识测试APP,思考用户需要APP实现哪些功能,结合用户需求，以产品经理的视角去规划APP的功能、页面和交互；将刻意练习等好的学习思路融入到产品中；最后给我出一个html页面，包含前端的所有设计图界面。来看看效果，惊艳到了，搞的我真想开发这个了：）
App设计图2
四 手绘风格有时候，精致的图看久了，更喜欢返璞归真，喜欢看些手绘风格的图，亲切，有趣，直指本质。 提示词：
用黑白手绘的风格说明什么是AI智能体的本质？输出svg手绘图，要求，线条自然，逻辑清晰。出图:
图有点丑，继续：
再绘制一个最近很火的MCP协议：
架构图：Claude 可以一键生成系统层级结构，模块关系可视化，数据流向清晰可溯。 原型图：Claude 方便快捷出专业的UI界面，让我们后端工程师也可以有好的审美了，3分钟完成传统团队1天的手工绘图。
当AI突破设计次元壁，每个想法都自带可视化基因——Claude正在重新定义数字时代的创造力方程式。 顺便说一句，Claude想在国内用不容易，我是淘宝上买的账号:)。
来源：码农世界
