Skip to content

Claude Design vs Claude+Figma MCP:设计师该选哪个?

2026年5月8日

最近 Claude Design 一出,Figma 的股价跌了。设计师们开始纠结:到底用 Claude Design 还是 Claude + Figma MCP?哪个更适合自己?

Claude Design 是什么

目前只有 Claude Pro 以上的用户才可以在左侧导航看到 Claude Design 的入口。

进入后进入到一个专属的 Claude Design 页面,先创建项目。创建完成后进入这个项目的编辑器内页,开始深度制作这个项目。

可以扔给它一些上下文信息,包括设计系统、屏幕截图、Figma 文件等等。Claude Design 也会通过问一些问题的形式,引导你录入一些需求,这样可以使生成的结果更符合预期,减少无效努力和返工次数。

Claude Design 的优势

1. 引导式需求录入

如果传统 AI 对话框的形式,这些要求都必须要通过文字形式告诉 Claude,很多新手一开始可能都是生成了好了再补充给 AI 修改,这样会消耗大量的 token 和时间。

Claude Design 的这一步流程设计对新手非常友好,通过引导也更容易感受到 Claude Design 更像是一个设计师的 AI 工具,门槛更低、更用户友好。

2. 实时调整品牌色、背景色、卡片大小

输入要求后就生成了一张 UI 界面,效果看着还不错。除了需要一些图片置入的部分是空的,头部区域还自动绘制了一个质感还不错的图示。

右侧还有一个小窗可以实时调整品牌色、背景色、卡片大小。

3. 区域锁定评论功能

如果对界面中某一个地方不满意,可以用评论功能锁定这个区域,然后告诉 AI,哪里不满意,要怎么改。

比如告诉 Claude 的背景太单调了,希望生动一些。Claude 就生成了一条正在扫描移动的扫描线,还有一些在闪烁的浮动粒子动效,效果都比较淡,不会用力过猛,让画面一下子有了细节。

4. 直接编辑 CSS

编辑功能可以调整每个元素的尺寸、颜色等 CSS。UI/UX 设计师直接调整 CSS,然后直接交付前端代码绝对是后面的大势所趋。

Claude Design 的局限

视觉元素的短板

可以通过给 Claude 参考图让它试着做一下,但 Claude Design 在强视觉元素上确实不是强项。中间的立方体视觉元素,在美感上和参考差距颇大,并且还把上面的输入框误读为某种装饰。

文件管理

可以在「设计文件」里看到上传的图和生成的截图等等。这一点和用 Claude Code 在本地创建文件夹项目是一样的。

Claude + Figma MCP 的优势

相比 Claude Design,Figma MCP 的优势在于:

  • 直接在 Figma 里工作:不需要切换工具和上下文
  • 利用现有 Figma 组件库:设计系统复用更方便
  • 团队协作更顺畅:多人可以同时在 Figma 里编辑

怎么选

场景推荐
快速原型验证Claude Design
需要复用设计系统Figma MCP
团队协作项目Figma MCP
单人快速产出Claude Design
强视觉设计两者结合

总结:Claude Design 更像是一个独立的设计工具,适合快速验证想法;Figma MCP 则是把 AI 能力嵌入现有工作流,适合已经在用 Figma 的团队。

不要孤军奋战啦!

加入微信群一起学习交流 AI

与大神一起使用 OpenClaw、Hermes、Claude Code、Seedance 2.0、GPT-Image-2 等

微信公众号

扫码关注微信公众号
私信 "加群",将自动获取微信群二维码

探索 AI 世界,掌握智能未来