如何用上 Claude ,这是江树评论区最近以来最高频的问题之一。
之前给大家分享过 Trae,但是很多朋友反馈要排队等各种问题。
今天江树要向大家再分享一个免费使用 Claude 的方法,通过使用Cursor编辑器配合Claude 3.7 来轻松创建下面这种精美的 SVG 图文。
这个组合非常强大,即使你没有设计基础,也能快速制作出专业级的图片素材。
第一步:安装Cursor编辑器
首先,我们需要下载并安装Cursor编辑器:
- 前往官网: cursor.com 下载软件
- 安装过程简单直接,跟普通软件安装没有区别
Cursor官网下载界面
第二步:注册账号
安装完成后,需要注册一个账号:
- 使用您的电子邮箱即可完成注册
- 注册流程简单快捷,只需几分钟
Cursor注册界面
第三步:使用Cursor创建SVG图形
注册并登录后,就可以开始创建SVG图形了。操作方法与Trae类似,简单易上手。
下面我将以之前分享的小红书图文为例,详细介绍如何使用Cursor+Claude创建精美SVG:
- 新建SVG文件
首先创建一个新的SVG文件,这将作为我们的绘图画布:
新建SVG文件
- 切换到Claude 3.7 Sonnet模型
确保使用最适合创建SVG的AI模型 - Claude 3.7 Sonnet:
切换AI模型
- 编写提示词
这一步非常关键!我们需要向Claude发送清晰的提示词,告诉它我们想要什么样的SVG图形:
提示词示例
完整提示词模板 (可以根据自己的需求修改):
# 任务:
请你制作适合小红书平台发布的精美卡片(SVG),竖屏,适合手机阅读。
## 要求:
- 符合小红书平台上流行的
"高颜值、有设计感、信息清晰"
的风格,柔和色调,既时尚又保持技术内容的专业性。
- 整体结构舒展,同时保持视觉美感和信息清晰度。
- 视觉舒适,设计精美,整体设计让小仙女们看了一眼沦陷!
- 包含面向技术小白的通俗解读
- 突出重要和关键信息
- 不要包含“小白”、“炸裂”、“通俗”和平台极限词
- SVG 代码放到代码框中
## 精美卡片(SVG)示例
<svg xmlns=
"http://www.w3.org/2000/svg"
viewBox=
"0 0 750 1334"
width=
"750"
height=
"1334"
>
<!-- 定义渐变和阴影 -->
<defs>
<linearGradient id=
"bgGradient"
x1=
"0%"
y1=
"0%"
x2=
"0%"
y2=
"100%"
>
<stop offset=
"0%"
style=
"stop-color:#FFD4E5;stop-opacity:1"
/>
<stop offset=
"100%"
style=
"stop-color:#AAE0FF;stop-opacity:1"
/>
</linearGradient>
<filter id=
"softShadow"
x=
"-10%"
y=
"-10%"
width=
"120%"
height=
"120%"
>
<feGaussianBlur
in
=
"SourceAlpha"
stdDeviation=
"5"
/>
<feOffset dx=
"0"
dy=
"3"
result=
"offsetblur"
/>
<feComponentTransfer>
<feFuncA
type
=
"linear"
slope=
"0.2"
/>
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode
in
=
"SourceGraphic"
/>
</feMerge>
</filter>
</defs>
<!-- 主背景 -->
<rect width=
"750"
height=
"1334"
fill=
"url(#bgGradient)"
/>
<!-- 装饰元素:几何形状 -->
<circle cx=
"50"
cy=
"150"
r=
"80"
fill=
"#FFB6D9"
opacity=
"0.5"
/>
<circle cx=
"700"
cy=
"200"
r=
"120"
fill=
"#B6E5FF"
opacity=
"0.4"
/>
<circle cx=
"120"
cy=
"1200"
r=
"100"
fill=
"#FFC8A2"
opacity=
"0.3"
/>
<circle cx=
"650"
cy=
"1100"
r=
"90"
fill=
"#ADFFD6"
opacity=
"0.3"
/>
<!-- 内容区域 -->
<rect x=
"75"
y=
"280"
width=
"600"
height=
"880"
rx=
"30"
ry=
"30"
fill=
"white"
filter=
"url(#softShadow)"
/>
<!-- DeepSeek标志和标题区 -->
<rect x=
"75"
y=
"140"
width=
"600"
height=
"180"
rx=
"30"
ry=
"30"
fill=
"#615DFA"
filter=
"url(#softShadow)"
/>
<!-- 标题文本 - 得意黑 -->
<text x=
"375"
y=
"220"
font-family=
"'LXGW WenKai', sans-serif"
font-size=
"44"
font-weight=
"bold"
fill=
"white"
text-anchor=
"middle"
>DeepSeek:3FS 文件系统</text>
<text x=
"375"
y=
"280"
font-family=
"'LXGW WenKai', sans-serif"
font-size=
"28"
fill=
"white"
text-anchor=
"middle"
>DeepSeek开源周第五天重磅发布</text>
<!-- 技术解读区域 - 思源黑体 -->
<g font-family=
"'Noto Sans SC', sans-serif"
fill=
"#333333"
>
<text x=
"105"
y=
"360"
font-size=
"26"
font-weight=
"bold"
>这是什么?一句话解释👇</text>
<rect x=
"105"
y=
"380"
width=
"540"
height=
"70"
rx=
"15"
ry=
"15"
fill=
"#FFF4F9"
/>
<text x=
"125"
y=
"425"
font-size=
"22"
fill=
"#333"
>3FS是一个能充分利用SSD存储和网络带宽的文件系统</text>
<!-- 核心数据指标 -->
<text x=
"105"
y=
"490"
font-size=
"26"
font-weight=
"bold"
>🚀 性能有多强?</text>
<!-- 数据点1 -->
<rect x=
"105"
y=
"510"
width=
"255"
height=
"120"
rx=
"20"
ry=
"20"
fill=
"#E2F6FF"
/>
<text x=
"232.5"
y=
"550"
font-size=
"22"
font-weight=
"bold"
fill=
"#333"
text-anchor=
"middle"
>读取速度</text>
<text x=
"232.5"
y=
"590"
font-size=
"30"
font-weight=
"bold"
fill=
"#615DFA"
text-anchor=
"middle"
>6.6 TiB/秒</text>
<!-- 数据点2 -->
<rect x=
"390"
y=
"510"
width=
"255"
height=
"120"
rx=
"20"
ry=
"20"
fill=
"#FFEFEF"
/>
<text x=
"517.5"
y=
"550"
font-size=
"22"
font-weight=
"bold"
fill=
"#333"
text-anchor=
"middle"
>排序性能</text>
<text x=
"517.5"
y=
"590"
font-size=
"30"
font-weight=
"bold"
fill=
"#FF6B95"
text-anchor=
"middle"
>3.66 TiB/分钟</text>
<!-- 数据点3 -->
<rect x=
"105"
y=
"650"
width=
"255"
height=
"120"
rx=
"20"
ry=
"20"
fill=
"#F2FFEF"
/>
<text x=
"232.5"
y=
"690"
font-size=
"22"
font-weight=
"bold"
fill=
"#333"
text-anchor=
"middle"
>KVCache查询</text>
<text x=
"232.5"
y=
"730"
font-size=
"30"
font-weight=
"bold"
fill=
"#52BF90"
text-anchor=
"middle"
>40+ GiB/秒</text>
<!-- 数据点4 -->
<rect x=
"390"
y=
"650"
width=
"255"
height=
"120"
rx=
"20"
ry=
"20"
fill=
"#FFF8E1"
/>
<text x=
"517.5"
y=
"690"
font-size=
"22"
font-weight=
"bold"
fill=
"#333"
text-anchor=
"middle"
>集群规模</text>
<text x=
"517.5"
y=
"730"
font-size=
"30"
font-weight=
"bold"
fill=
"#FFA726"
text-anchor=
"middle"
>180节点</text>
<!-- 为什么重要 -->
<text x=
"105"
y=
"810"
font-size=
"26"
font-weight=
"bold"
>💡 为什么这很重要?</text>
<rect x=
"105"
y=
"830"
width=
"540"
height=
"170"
rx=
"15"
ry=
"15"
fill=
"#F5F5FF"
/>
<text x=
"125"
y=
"865"
font-size=
"22"
fill=
"#333"
>• 让AI模型训练和推理数据管理更高效</text>
<text x=
"125"
y=
"905"
font-size=
"22"
fill=
"#333"
>• 支持数据预处理、加载和检查点存储</text>
<text x=
"125"
y=
"945"
font-size=
"22"
fill=
"#333"
>• 向量搜索和推理KVCache查询更快</text>
<text x=
"125"
y=
"985"
font-size=
"22"
fill=
"#333"
>• 分离式架构保证数据一致性</text>
<!-- 开源链接 -->
<text x=
"105"
y=
"1040"
font-size=
"26"
font-weight=
"bold"
>🔗 开源地址</text>
<rect x=
"105"
y=
"1060"
width=
"540"
height=
"70"
rx=
"15"
ry=
"15"
fill=
"#EDFFF5"
/>
<text x=
"125"
y=
"1100"
font-size=
"20"
fill=
"#333"
>github.com/deepseek-ai/3FS</text>
</g>
</svg>
## 参考资料:
---
🚀 Introducing NSA: A Hardware-Aligned and Natively Trainable Sparse Attention mechanism
for
ultra-fast long-context training & inference!
Core components of NSA:
• Dynamic hierarchical sparse strategy
• Coarse-grained token compression
• Fine-grained token selection
💡 With optimized design
for
modern hardware, NSA speeds up inference
while
reducing pre-training costs—without compromising performance. It matches or outperforms Full Attention models on general benchmarks, long-context tasks, and instruction-based reasoning.
📖 For more details, check out our paper here: https://arxiv.org/abs/2502.11089
---
重要提示 :一定要加上"SVG代码放到代码框中"这一行要求,否则AI可能不会正确格式化输出。
- 将SVG代码应用到文件中
当Claude生成SVG代码后,将其应用到您的img.svg文件:
应用SVG代码
选择"接受文件",确认更改:
接受文件更改
- 预览SVG图形
找到文件所在文件夹,右键选择用浏览器打开SVG文件,即可预览最终效果:
用浏览器打开SVG
- 欣赏最终效果
这就是我们创建的精美SVG图形!可以直接用于小红书、微信公众号等平台:
通过Cursor+Claude组合,即使没有专业设计经验,也能轻松创建出精美的SVG图形。
这个方法特别适合内容创作者、设计新手,以及需要快速制作高质量图形的各类人群。
相关文章
最后
边界已被打破,创意正在重生。
未来,很精彩,我们,共见证~
我是「云中江树」,这里每周为你分享AI工具、方法和观点。
👉 点赞、在看、分享三连支持 ,关注「云中江树」,深度驾驭AI!