不会写代码的设计师用Claude做出了SVG描摹工具

Bootcamp - Medium，Bootcamp 是 Medium 上关于 UX、UI、产品设计与设计思维的出版物。关注

故事的起点：客户发来30张PNG格式的Logo，要求换成SVG

我想，每个设计师都或多或少遇到过这样的情况。

在AI出现之前，我的常规流程是：把图片丢进Illustrator，用“图像描摹”功能处理，再手动清理锚点，最后导入Figma。这次我想试试新办法——让Claude帮我开发一款描摹工具，看看它能否生成足够干净、可以直接使用的SVG文件。

第一次的结果并不理想。客户提供的Logo分辨率很低，导致所有边缘都显得参差不齐，密密麻麻地挤满了数百个锚点，根本无法手动修复。

说实话，我第一反应是放弃了。毕竟，还是Illustrator做得更好。

不过我始终不甘心。我不断放大那些歪歪扭扭的边缘，试图弄清楚问题究竟出在哪里。

突然我明白了：AI根本没有真正“看”图形本身，它只是沿着像素的边缘走，每隔几步就落一个点——连同沿途那些模糊的灰色过渡区也一并照搬下来。

它并不是在“画”我的Logo，而是在“复制”我的像素。

于是，我不再笼统地描述期望的效果，而是直接告诉它该如何判断自己正在处理的内容。很快，SVG文件变得整洁起来。在这个过程中，我也摸索出了一些与AI沟通的技巧，不妨在此分享给大家。

我曾经反复强调“减少锚点”“让线条更顺滑”之类的要求。可这些说法太模糊了，AI只能凭猜测行事，难怪有时对，有时错。

于是我换了个思路：请AI先识别轮廓的基本构成——这其实也正是我们设计师的工作方式。手动画稿时，我都会先在脑子里分好类：直线、弧线、真正的曲线，然后再决定锚点的位置。

因此，我要求AI先分类、再绘制：轮廓无非由三类元素构成——直线、弧线和贝塞尔曲线——只用这三种，尽量贴近原图即可。一旦明确了这条规则，锚点数量立刻大幅下降。

不过，Logo中的文字部分又成了另一道难题。

字体几乎很少从零开始绘制，大多是基于现有字库稍加修改而来。针对这部分，我采用了不同的策略：让AI先找到最接近的字体，以此为基准，再把每个锚点微调到原始图像的边缘附近。

字体提供了骨架，而原图则决定了位置与粗细。

这两点正是我手动画稿时早已习惯的做法——分类形状、辨认字体。我所做的，不过是把它们清晰地“翻译”给AI罢了。

有了规则后，我会让AI先进行一轮初步处理，把轮廓的每一部分归入直线、弧线或曲线。但即便如此，难免还会出错。

最常见的问题之一：在低分辨率的图像上，斜边在像素层面确实像阶梯一样；于是AI照单全收，把每一级台阶都描了出来。

这时我就会动手圈一圈。直接在输出结果上标记问题所在，并指出正确的形态：这段阶梯状的部分其实应该是一条斜线。随后，AI会回溯我圈出的地方，分析原因、调整代码，再重新描一遍。

一旦修正成功，这条规则就会固化在代码中，下次处理类似问题时我就无需重复说明，工具也会越来越精准。

我想要的是一个可靠稳定的工具，而不是每次遇到新Logo都要重新调试一番。

于是我自己设计了一组测试图像，并且对每一张的答案都心中有数。

我先画好一份干净的SVG，导出为PNG，再把这张PNG交给AI去描摹——它只看到图片本身，完全不知道原图长什么样。等它完成之后，我把返回的结果与最初的SVG对比，任何偏差都会立刻显现出来。

由于答案是我自己设定的，所以总能精确知道哪里出了问题、误差有多大。

这种方式还有一个好处：我可以随心所欲地控制图像的“难度”。想测试模糊效果，就故意加些模糊；要挑战小字号，就把字体缩得极小；想考验锯齿感，就先缩小再放大。

再也不用到处找那些恰好带有特定问题的样例文件了。

此时的结果已经相当稳定，我开始琢磨如何把这些经验固化成实用的工具。

我每天大部分时间都在Figma里工作，便请Claude把它改造成一个Figma插件——省去了来回搬运文件的麻烦，也免去了每次都重新发起对话的繁琐。

这个插件速度快，更重要的是稳定：几秒钟就能拿到SVG。对于某些复杂的Logo，插件可能还不能完美处理，这时我就把问题反馈回Claude，针对具体出错的部分继续优化。

满意之后，请Claude把新规则写回技能库，再更新插件版本。

这样一来，两者分工更加明确：日常任务由插件负责，特殊情况则交由Claude处理。而一旦某个例外被解决、插件也随之升级，它也就不再是“例外”了。

过去，我常常需要在两三个应用之间反复切换——这里导出、那里修整、再导入别处。那些工具都不属于我，我只能在别人设定的框架内打转。

有了AI之后，这套流程彻底颠倒过来：我可以从自己的需求出发，一步步搭建起专属的工具。这种主动权让我倍感兴奋，也让我变得更加大胆——以前面对一个想法，我总会先问“能不能实现”，现在则会追问“值不值得做”。

AI是一位非常称职的伙伴，但它的短板在于完全不了解你的关注点。因此，真正有用的能力，在于能把问题讲得清清楚楚：把“看起来不太对”具象化为具体的指标，比如间距、对齐、粗细，或是圆角程度。

而这些，恰恰是设计师们早已擅长的领域。

感谢阅读。如果你也在用AI打造工具，欢迎聊聊你的实践心得——留言我都会认真看。如果这篇文章对你有所帮助，点个赞就是最大的鼓励；每一次反馈，都是我继续前行的动力💪

一位不会编程的设计师如何用 Claude 构建了一个描摹工具最初发表于训练营平台的Medium上，在那里，读者们通过高亮和评论持续着这场讨论。

添加评论

点踩

参与讨论