Claude架构图、原型图样样精通，强烈建议收藏

一 背景

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会记录下这个圆的中心在哪里，半径是多少，以及它的颜色是什么样的。而不需要记录圆边上的每个点的颜色。这样做的好处之一就是文件通常比较小，并且非常适合用于网页设计中，因为它可以保证在不同设备上都有良好的显示效果，特别是在需要适应各种屏幕尺寸的响应式设计中。

二 架构图

对于程序员来说，经常绘制的就是架构图了，自己设计软件的时候需要绘制，学习开源软件的时候，也需要参考开源软件的架构图加以理解，正所谓一图胜千言，一个绘图正确、漂亮的架构图能让入门者轻松理解新的架构。

2.1 Nginx架构图

2.1.1 提示词绘图

对于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架构图

2.1.2 以图绘图

上面让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协议：

总结

当AI突破设计次元壁，每个想法都自带可视化基因——Claude正在重新定义数字时代的创造力方程式。顺便说一句，Claude想在国内用不容易，我是淘宝上买的账号:)。