不再纠结A/B方案：交互设计师如何用代码同时演示多个Demo

推荐语

交互设计师Adan分享AI编程如何颠覆传统原型设计，3个月实现从Figma到可交互Demo的转变。

核心内容：
1. AI编程让交互设计师直接制作可操作网页Demo，告别静态原型
2. 利用Github分支管理多个设计方案，演示切换更高效
3. 提升团队协作效率，减少沟通摩擦，实现即时反馈

杨芳贤

53AI创始人/腾讯云(TVP)最具价值专家

距离Adan参加我们的AI编程训练营已经过去了3个月。作为一名交互设计师，他在这段时间里究竟有哪些收获？AI编程如何改变了他的工作方式？为了了解他的真实体验，我进行了这次回访。

薛志荣： Adan你好！还记得5月份你刚来参加我们AI编程训练营的时候吗？当时是什么原因让你决定学习AI编程的？

Adan： 薛老师好！当然记得，当时其实是朋友推荐的。他之前参加过Mixlab的线下Vibe Coding训练营，觉得效果特别好，就推荐我也来学一下。说实话，刚开始我还有点犹豫，毕竟作为交互设计师，感觉编程离我们的工作挺远的。但朋友说现在AI编程门槛很低，而且对设计师的工作帮助很大，我就抱着试试看的心态来了。

薛志荣： 那现在3个月过去了，学会AI编程对你的工作有什么变化吗？

Adan： 变化真的很大！最明显的就是我现在基本不用Figma做原型了，而是直接用网页开发来做Demo。以前我会在Figma里画各种交互流程图和界面稿，但那些都是静态的，产品经理和开发看了还是很难理解具体的交互逻辑。

现在完全不一样了。我直接用AI编程做出可以真实操作的网页Demo，用户可以实际点击、输入、看到反馈，这种演示效果比任何原型工具都要直观。

薛志荣： 听起来你的演示方式也发生了很大变化？

Adan： 对！这可能是我最喜欢的改变。现在给产品经理和开发演示多个Demo变得特别方便。线下训练营教会了我怎么用Github管理版本，这个技能太实用了！

我现在会把不同的设计方案做成不同的Demo版本，都存放在Github的不同分支里。比如一个功能我可能会做A、B、C三个不同的交互方案，每个方案都是一个完整的Demo。

演示的时候特别丝滑：我先在电脑上开启好开发环境，然后用手机登录网页来演示。如果要切换到另一个Demo方案，只需要在Github切换一下版本分支就好了，几秒钟就能切换到完全不同的交互体验。

薛志荣： 这种工作方式对团队协作有什么影响？

Adan： 影响太大了！这大大减少了我和团队之间的沟通摩擦，效率也提升了很多。

以前我要解释一个交互细节，可能要画好几页原型图，还要配上大量的文字说明。产品经理看了可能还是不太明白，开发更是经常会说"这个交互在技术上不太好实现"。来来回回沟通很多次，有时候还是达不到共识。

现在就简单多了。我直接把Demo链接发给他们，大家用手机扫个二维码就能体验完整的交互流程。遇到问题当场就能指出来，我也能立刻调整代码修改Demo。这种即时反馈让我们的沟通效率提升了至少一倍。

薛志荣： 从技术实现角度，你觉得AI编程给你带来了什么新的能力？

Adan： 最大的收获是让我对技术可行性有了更准确的判断。以前设计一个功能，我可能会天马行空地设计各种炫酷的交互效果，但实际上有些在技术上很难实现，或者成本很高。

现在我自己动手做过Demo，就能更好地平衡设计理想和技术现实。我知道哪些交互是容易实现的，哪些需要额外的开发成本。这让我的设计方案更加务实，也更容易得到开发团队的支持。

而且，当我能够直接演示一个可以工作的原型时，我在团队中的话语权也明显增强了。以前讨论设计方案时，我更多是在"说"，现在我可以"展示"。数据胜过雄辩，可交互的Demo比任何PPT都有说服力。

薛志荣： 对于其他想学习AI编程的交互设计师，你有什么建议吗？

Adan： 我觉得最重要的是要转变思维方式。不要把AI编程当成是要变成程序员，而是要把它当成一个更强大的原型工具。

就像我们从纸笔原型升级到Sketch，再升级到Figma一样，现在是时候升级到代码原型了。代码原型能够提供其他任何工具都无法达到的真实体验。

另外，一定要参加系统的线下训练营学习。我试过自学，但很容易在技术细节上卡住。有老师指导，有同学交流，学习效果真的好很多。特别是版本管理这些工程化的知识，自己摸索很难掌握。

最重要的是要敢于动手实践。我的第一个Demo界面很丑，功能也不完善，但没关系。重要的是迈出第一步，然后不断迭代改进。现在回头看，那些"丑陋"的早期作品其实是最珍贵的学习经历。

薛志荣： 你觉得未来交互设计师的工作方式会朝什么方向发展？

Adan： 我相信会有越来越多的设计师掌握代码能力，设计和开发的边界会变得更加模糊。但这不是说设计师要变成开发者，而是我们会形成一种新的工作模式。

设计师会更专注于用户体验的验证和优化，用代码作为快速试错的工具。我们不需要写出产品级的代码，但要能够快速构建可验证的原型。

我觉得这种变化对整个行业都是好事。当设计师能够独立验证自己的想法时，整个产品开发流程会变得更加高效。我们不再需要等待开发资源，也不用担心设计意图在传达过程中被曲解。

现在我每天的工作都充满了创造的乐趣。看着自己的设计想法能够真正"活"起来，用户可以真实地操作和体验，这种成就感是画静态原型图永远无法给予的。

通过与Adan的对话，我看到了AI编程对交互设计师工作方式的深刻影响。他从依赖Figma的静态原型制作者，转变为能够创建真实可交互Demo的体验创造者。

最让我印象深刻的是他提到的版本管理和演示方式的改变。通过Github管理不同的Demo版本，用手机无缝切换演示不同方案，这种工作流程的优化大大提升了团队协作效率。

正如Adan所说，AI编程不是要让设计师变成程序员，而是为设计师提供了一个更强大的原型工具。在用户体验越来越重要的今天，能够快速验证设计想法的能力，可能就是交互设计师未来最核心的竞争力。