最近听了一期播客,挺有意思的。
嘉宾是 Notion 的设计师 Brian Lovin,他分享了一个很有趣的话题:怎么用 AI 工具帮设计团队快速做原型。
你可能会想,设计师不都用 Figma 吗?
确实,但 Brian 提到了一个痛点,做 B2B SaaS 产品的时候,光在 Figma 里画画是不够的。
你得让设计尽快接触真实场景,看看实际用起来是什么感觉,不然等到开发做完了才发现问题,那就太晚了。
所以他给团队搭了个原型游乐场,让所有设计师都能用 Claude Code 快速把想法变成可以点击的原型。
下面我挑几个我觉得特别有启发的点👇
1️⃣ 设计不能只停留在画板上
Brian 说了一句话:设计要尽早接触现实。
你在 Figma 里画得再漂亮,也只是静态的图。真正的产品是动态的,有交互、有数据、有各种边界情况。尤其是做 AI 产品的时候,你根本没法在 Figma 里模拟那些智能交互。
所以他们团队的做法是,设计师直接用代码做原型。
不是说要设计师变成工程师,而是借助 AI 工具,让做原型这件事变得更容易。这样一来,设计师可以更早地测试想法,更快地发现问题。
2️⃣ 一个仓库搞定所有原型
他们的原型游乐场其实就是一个 Next.js 应用,所有设计师的原型都放在同一个代码仓库里,每个原型就是一个页面。
这样做的好处,首先是便于共享。你做的组件,别人可以直接拿去用。
其次是便于维护,不用到处找文件。而且因为都在一个项目里,部署起来也很方便。
Brian 还提到,他们会定期清理不用的原型,保持仓库的整洁。
3️⃣ 教 AI 自己做事
这是我觉得最有意思的一个点。Brian 说,每当 AI 让你做什么的时候,你就应该教它自己做这件事。
举个例子,一开始 Claude 可能会说:请你创建一个新文件,然后把这段代码复制进去。但你可以告诉它,你应该自己创建文件并写入代码。久而久之,AI 就学会了自己动手。
这个原则听起来简单,但其实很深刻。
我们用 AI 工具的时候,很容易陷入一个误区:把 AI 当成助手,让它告诉我们怎么做。但其实更高效的方式是,让 AI 直接帮我们做。
Brian 还分享了一些具体技巧,比如用 plan mode 让 AI 先规划再执行,用自定义命令简化重复操作。这些都是实战经验,很实用。
4️⃣ 从 Figma 到代码的自动化
这个功能听起来有点黑科技。他们做了一个 /figma 命令,可以直接把 Figma 设计转成代码。
当然,不是说一键生成就完美了。Brian 说这个过程大概能做到 80% 的自动化。剩下的 20% 需要人工调整,比如一些细节的样式、交互逻辑等等。
但即便如此,这也大大提高了效率。以前可能要花一天时间手写代码,现在可能半小时就搞定了。而且 AI 还会自动验证生成的代码是否符合设计稿,这个验证循环特别有用。
5️⃣ 部署也能一键搞定
最后说说部署。
Brian 做了一个 /deploy 命令,可以自动处理 git 分支、创建 PR、跑 CI 检查等等。
这个其实解决了一个很现实的问题,设计师可能不太熟悉 git 操作,让他们手动提交代码、创建分支,门槛还是有点高。
但有了这个命令,只要输入 /deploy,剩下的事情 AI 全帮你搞定。
这种简化流程的思路,我觉得非常值得学习。
听完这期播客,我最大的感受是:AI 工具真的在改变我们的工作方式。
Brian 的这套玩法,给了我们一个很好的参考。如果你也在做产品设计,或许可以试试类似的思路。