2025.05 / AI 辅助产品构建
Font Replacer — 用 AI 开发 Figma 插件
我用 Cursor 做了一个 Figma 插件，用来一键替换页面中所有文字图层的字体。它不是工作需求，而是一次很小的“造工具”实践：借助 AI，把一个日常设计痛点变成可用工具。
开发提效比例
从 3-4 周缩短到 4-5 小时
独立交付的 Figma 插件
设计师独立完成开发与上线
从零到上线
借助 Cursor 完成全部开发
一键替换字体
在 Figma 里手动替换字体很繁琐，尤其是多个图层嵌套的情况下。我一直想找个更高效的方式，于是借助 Cursor，用 4-5 个小时独立开发了 Font Replacer——一个一键替换页面中所有文字图层字体的 Figma 插件。
在 Cursor 这类工具出现前，开发这样一个插件可能要 3-4 周。这个项目不是工作需求，而是我作为设计师的一次“造工具”实践：验证 AI 能否让非工程背景的人独立交付一个可用产品。
做完后，我把插件发布到了 Figma Community。
用 AI 小步造工具
现在的 AI 很擅长生成静态页面结构，但面对复杂交互逻辑时，还是需要人为引导。最有效的方式是把完整功能拆解成小任务，一步一步交给它做。比如在做字体选择器时，我把功能拆成了四步：
让 Cursor 找出文档里所有能用的字体。
把字体列表放到一个下拉组件里。
给下拉框增加搜索筛选字体的功能。
调整视觉细节，让插件界面更精致。
把复杂功能拆成不同步骤后，Cursor 能更好地完成每一步。出错时也能清楚知道是哪一步没做好，有针对性地调试，而不是一口气把需求全丢给 AI，写出一堆 bug 再慢慢找问题。
但 vibe coding 有多爽，vibe debugging 就有多痛苦。AI 修补 bug 时经常越改越错。我的应对方式是两个关键词：版本回退和多模型切换。
版本回退方面，Cursor 的 Restore Checkpoint 帮了我很多次。每次修改前系统会自动保存快照，我可以随时回到上一个稳定版本。同时，我会在每次完成重要功能后把代码同步到 GitHub Repo，保证有明确的版本基线可以比对和恢复。
多模型切换方面，遇到卡住的问题时，我会在 Cursor 设置里关掉 Auto 模式，手动切换成其他模型。这能解决大概 80% 的“卡住问题”。
当 Cursor 内部逻辑绕不出来时，我会直接把项目文件拖到 Claude、ChatGPT 或 Gemini 里。不同模型的思维方式不一样，经常能从另一个角度给出解法。
有时候并不是 AI 不够聪明，而是需求本身就不合理或技术上难以实现。如果多轮尝试都没有结果，我会换个问法：“我提出的这个需求是否技术上可行？”“有没有更推荐的实现方式？”这种提问方式更容易获得 AI 的高层级分析。很多时候，知道做不到，也是一种前进。
代码理解升级体验
使用代码开发后，我慢慢建立起了“工程思维”——开始关注传统意义上不属于“设计职责”的细节，但它们确实直接影响用户的体验。
完成第一版后，我试着选中很多图层，结果 Figma 直接死机了。Cursor 给我解释了同步和异步的概念，建议把要搜索的图层分成小块，一次一次地进行异步处理，这样就能防止 Figma 的主进程卡死。
在测试时发现，“Arial Semibold” 切换为 “Roboto Semi Bold” 后字重丢失了。原因是插件判断字重名称要求完全一致，而 “SemiBold” 和 “Semi Bold” 在字符上不一样。我改写了匹配逻辑，让它忽略大小写并去掉空格——现在用户无论输入 “semibold”、“Semi Bold”、“SEMIbold”，插件都能正确识别并保留原有字重。
这些问题，过去作为设计师我可能不会意识到。但现在我开始主动思考它们，并把它们当成“体验设计”的一部分去解决。
用代码拓展设计边界
这个项目让我重新理解了设计师和代码的关系。理解代码不是为了当工程师，而是为了成为一个对体验更负责的设计师。
- AI 让设计师从“提需求”变成“做产品”。过去开发一个插件需要 3-4 周且依赖工程师配合。现在 4-5 小时就能独立交付，验证想法的成本极大降低。设计师不再只是定义需求，而是可以亲手把想法做成可用的工具。
- 代码能力是设计能力的延伸。理解了异步处理、字符匹配这些概念后，我能主动发现并解决纯设计视角无法触及的体验问题，比如大量图层下的性能卡顿、字重名称不一致导致的替换失败。这些都是代码层面的细节，但直接决定了用户体验。
这次实践的价值在于：通过 AI 写代码、调试、回退、换模型，我开始意识到，设计师理解一点代码之后，能看到更多原本看不到的体验问题。