如何攻破Figma构建的城墙？专访Motiff妙多，推演AI生成UI设计的未来

“

Builders 是由 @Magineer、@有新Newin 以及 @深思SenseAI 联合推出的人物专栏，旨在发现与分享更多的优秀出海创业团队与独立开发者，我们将定期邀请生态范围内的创始人与团队展开对话。

今天我们邀请到的嘉宾是 Motiff 妙多运营副总裁张昊然。在两年半研发之后，Motiff妙多于今年6月正式发布产品。近日，Motiff 带着 AI 生成 UI First Draft 前往美国参加 Figma Config 大会，交流UI设计领域的最新AI方案。在访谈中，我们讨论了UI设计工具的未来，产品竞争力的构建，以及如何作为后来者撬动全球UI设计市场，Enjoy！

“

Sense 思考

我们尝试基于文章内容，提出更多发散性的推演和深思，欢迎交流。

-UI设计的未来，在输入层值得去探索多模态这个变量。在输出层可以分为AI生成First Draft以及AI对原有设计系统的增量补充。两个维度同样重要。

-好的理解能力是好的生成能力的基础。Motiff在目前产品上针对AI布局、AI设计系统的原子组件拆分都做了相当多的工作，这也为Gen UI的能力打下了基础。

-今天，我们看到 Figma 发布了包含 AI Search、AI 生成 UI 在内的一系列功能。后来者需要在 AI 产品定义和功能上有杀手锏，去抢夺老玩家所在的市场。但我们相信，产品的AI革新站在相对公平的起跑线，并始终期待有新的事物出现，重新定义交互方式和生产流程。

01.

后发的UI设计产品，有哪些“人无我有”？

SENSEAI：专业设计领域一定是一个更难的赛场，偏娱乐的To C/ To 非设计人员的工具更容易起量。在UI/UX这个赛场，怎么让专业用户改变习惯，并迁移原始的素材？

昊然：在创业早期，Motiff 团队也进行了产品选型，考虑到团队背景，我们还是希望找到一个长期经营的市场，这个事情有门槛，有一定壁垒。我们喜欢越凿越深的行业，所以定在了专业工具这个市场。2021年刚开始做这个事情，我们比较笃定AI是一个变量，当时虽然没有现在的大模型技术，但也通过深度学习和机器学习找到了一些应用场景。专业用户是比较难撬动的一波人，但是这波人一旦撬动也有更深的LTV。

SENSEAI：其他国产UI设计先来者没有完全抢走Figma用户的原因是什么？

昊然：第一个点：之前Figma的性能比其他产品好很多，产品能容纳的图层很多，迁移团队原始的 Figma 文件中图层已经达到极限，导致无法迁移到其他产品上。性能是motiff重点关注的。我们拿下的客户， Figma 文件的图层数量都很大。导入一个文件试试，谁更好立竿见影。

第二个点：将Figma文件迁移到一些国产软件时，会出现版本错乱，试了好几个发现只有Motiff是好的，这个过程中需要与时俱进的去Follow Figma，还有产品架构设计的细节。

SENSEAI：老牌设计巨头Adobe的UI设计产品 Adobe XD 最终都没有战胜 Figma 的原因是什么？

昊然：Adobe 都没竞争过 Sketch。Sketch 打败 Adobe 的点是专业设计工具和通用设计工具之间的差异，Sketch对UI设计这个场景做了优化，拿走了PS的一部分市场。

Figma 战胜 Sketch 更像是在线文档战胜了本地文档，协同本质提升了团队之间的沟通效率，这个在UI设计领域要比文档领域的在线化优势更被放大。UI设计存在一个设计系统的概念，比如微信的设计系统，这里面的设计规范，部门之间的协同和版本控制统一，包括异步的评审，在设计领域也是非常常见的场景。

Adobe XD 的落后一定程度上是后发劣势及产品力一般，与 Sketch 相比没有什么差异化。

SENSEAI：Motiff目前的AI复制和AI布局两个功能确实挺酷的，这个方面目前其他的设计工具做的过程中会有什么难点？

昊然：技术壁垒更多带来的是时间窗口，以AI复制和AI布局这两个效率层面的功能来说，更多是找到一个设计师的痛点场景，我们已经提出了，竞品认可的话肯定也可以去复现，但整体的难度也不小，需要工程团队和AI团队之间有比较强的协同关系。

产品方案永远是第一的，AI只是一种实现逻辑。对内部团队的要求是全员理解AI边界和AI能力，当大家遇到一个场景式的问题时，不管是产品人员、销售人员、运营人员，大家需要理解能不能解决，怎么解决。

SENSEAI：我们的产品会做一些前端代码的AI生成么？例如Vercel的AI能力，或者AI能力更强的Zeplin，比如Screenshot to Code，GPT4 vision生成前端html等。未来的AI产品会不会是更端到端？

昊然：Design to Code在商业上是一个很好的增量，可以卖给前端研发。从设计稿到前端代码实际是一个翻译的过程，目前 Figma Dev mode 和Zeplin等工具都是开放了一些好用的功能，包括让研究人员更快的查看标注，更简洁的复制样式代码、自动识别间距和颜色值等等，不断地缩短和加速从设计到代码。

我们也在做一些研究，例如 Design Token，让设计和研发是一套语言，也可以尝试做一个前端领域的Github Copilot，这个 Copilot 相比于泛场景有更好的上下文信息，有预期结果，这部分我们会去探索。

关于 Screenshot to Code 这类开源项目，我们认为简单设计页面的代码实现是没问题的，但目前软件工程还是很复杂的，有各种技术栈、产品线，需要和研发团队当前的技术栈和代码风格去融合，需要有复杂逻辑去嵌套现有代码，这个路径会比较难。

至于端到端生成前端代码，我们认为难度还是太大了一些，在整个网页设计流程中有太多的“端”，每一个端的信息传输都有漏斗。可能有一些产品软件不需要更复杂的产品交互关系，比如小程序、网站，但这类会更加是一个垂直领域建站工具的机会，可能是Webflow这类产品的AI机会。

SENSEAI：看到之前文章中介绍，Motiff的Web端图形渲染引擎是很牛，性能超越Figma，这个能力理论上是靠时间进化的，这是本质的竞争力么？

昊然：渲染引擎的能力更多代表了我们的性能，这是客户产品选型时非常基本的一个判断标准，我们一定会努力去做到。团队有很强的工程师文化，有一批优秀的研发工程师，依靠团队长时间积累的技术实力，在高性能架构测的重构、测试流程高度自动化、团队的配合方式等方面都具备竞争优势。

SENSEAI：Motiff在产品迭代和更新上还有哪些计划？

昊然：我们的AI生成UI First Draft 功能海外已经上线了，未来会投入更多精力去打磨。可以帮助用户通过 Prompt 生成一组完整的APP界面。例如，用户希望使用 Gen UI 能力生成一个欧洲杯观赛APP，会从选择球队开始设计初始页面，用户可以输入以下提示词：Create a "Choose your team" pages for Sportiff, an app for European Cup. All the teams in the tournament with their national flags and names.

随后就可以生成一个含有多个国家选项的选择交互页面。你也可以输入更详细的Prompt，在之前页面的基础上，输入后续页面的设计指令，例如：a detailed German team page for Sportiff.With a back button on the top, team name, and team flag. tabs for overview, matches, squad, and stats. next match details,some key stats, and so on. use green theme color, and an ESPN-like font. Switch to dark mode.

这段指令中，AI不仅能够理解下一个页面仍然是先前指令中规定的“Sportiff”欧洲杯APP，具有上下文理解能力。同时，可以通过 Prompt 指令规定更丰富的组件，设置整体UI系统风格，颜色，甚至通过“Switch to Dark mode”指令对先前的背景色进行有连续性的修改。

随后，用户可以在Gen UI操作页面上通过原型设计(Prototype)把不同页面连接起来，即可生成一组完整的APP界面。

02.

商业化与全球化，Day One Global？

SENSEAI：为什么选择“Figma客户”这类画像？这类客户的决策逻辑是怎样的？

昊然：对Motiff来说，我们更聚焦Figma现有用户，这是比较先进的用户。我们希望让产品购买的核心决策者和专业用户之间的重叠高一些。在这类客户中，竞标流程和采购流程更多是形式化的流程，核心决策者还是工具使用者，更偏互联网和先进业务团队。

在决策上，客户一般会把国内所有产品找到，剩下的工作就是逐一比较，不是靠强说服转化的流程，更多还是解释专业性，并如实地解释产品状态。在销售过程中最大的变量是运营人员的专业性，是否能站在设计师的角度思考问题。

SENSEAI：客户从Figma转换到Motiff的逻辑是什么？

昊然：Figma在中国的本土化是相对弱的，战略上不重视中国市场，在亚太的其他地区包括日本市场、韩国市场、新加坡市场的重视程度都比中国更高。这个前提导致的一个结果是，如果一个国产公司大概做到Figma的90分水平，就有很大胜算拿下市场。Motiff作为后来者，在定价策略上也会采用更有进攻性的策略。

SENSEAI：认为最早采用Motiff的客户会是怎样的画像？比如SMB客户？哪些细分行业？

昊然：整体 Motiff 的产品不会特别细分行业，但从逻辑推演上来讲，AI软件和AI应用这类增量的软件产品可能会更能理解Motiff的产品价值，是一个互相匹配的过程。

在整体产品定价上，Motiff还是采用了比较进攻性的策略，因此整体对价格敏感或者对降本敏感的团队会更容易切换成我们的产品。

SENSEAI：海外增长策略中，认为最值得参照的产品是什么？如何快速GTM？

昊然：在设计领域，我们有关注过一个很老牌的产品叫 Framer，是一个荷兰的公司做的，早年在设计圈的形象很好，但这个产品当时的问题是学习曲线太陡峭了，用户很难留住。近两年 Framer 切出了一个新的赛道，在网站建站领域做的很好，可以帮助设计师一站式的把展示类的网站构建出来，相比Webflow来说，Framer是一个设计工具，所以更好地切中了有这个需求的设计师群体。对我们的启示是，还是要找到一个不错的细分领域或者赛道，先切进去。

另一个产品可能是 Heygen，对我们的触动是他获得用户的反馈很直接，而且有很强的信念去接触市场，接触用户需求，这是我们会去学习的，更多软件出海对海外的了解还不够，是一个逐渐认知海外的过程。

在整体的出海策略上，我们前期会以市场验证为主，包括验证国家、细分市场、获客方式，然后再投入 ROI 比较高的产品PLG方式。会选择北美先切进去，北美整体的Social media营销更成熟，能够在内容测快速启动。

在前期GTM过程中，我们也会结合SEO和付费SEO等方式，专业领域的设计工具会相对比较依赖搜索场景，可以通过这个方式转化一部分用户。

03.

推演，在GenAI时代，UI设计的未来是怎样的？

SENSEAI：如何定义未来的UIUX设计模式？

昊然：UIUX本身是承载整个数字化世界的一个框架和容器，趋同性大于不同性。趋同性使得全社会在人机交互上的成本是降低的，比如预定机票，从A地到B地，本身的交互方式已经被固定，除非加入LUI这个变量后，可能会出现更高效的交互方式。整体交互方式是一种可以有限可枚举的框架，但在样式、排列、风格层面有可以无限丰富的地方。

未来的设计模式，我们认为至少包含三个维度：

1）某些固定样式的UI生成式路径会变得更短，比如AI搭建一个含有用户逻辑和产品逻辑的基础底稿，人类在此基础上做微调和修改。

2）设计师仍然存在一些美的追求，在样式领域，AI可以快速给出很多参考，激发灵感。

3）用户已经有了一些初稿，这个初稿作为一个意图输入，UI大模型可以理解设计意图，依据模型给出后面的改进和基于“参考版本”的设计。

SENSEAI: 之前看到一个观点，对话式交互 (LUI) 等新的交互形态占比提升，导致UI/UX的页面数量下降，整体UI设计师需求和工具市场会缩小么？

昊然：LUI是GenAI时代很好的趋势，也存在Siri这类操作系统级别的新模式。但LUI更多还是输入层面的改变，交互体验上的改变，落到底层UI的界面没有根本不同。

在生产层面，生产力层面，人机交互的数字化进程还是比较慢的。整个界面的生产效率问题还没有完全释放，除了互联网行业，传统行业的UI设计依然有增量机会。

用户会对UI工具的需求发生变化，从工具需求过渡到UI设计本身的需求，底层是工具市场转向服务市场，UI工具价值增长为UI设计服务价值。例如中国中高阶设计师薪水有40万人民币，而工具一年的成本是4000元，只有1%的价值量，相当于2-3天的工作量，这个工具效率未来可能还有20%-30%替代人类的空间，甚至在未来达到100%，从这个角度看，UI工具仍有很大的增长。

SENSEAI: Motiff 产品针对LUI这种下一代的交互方式有做改进和适配么？

昊然：首先需要明确的一点是，人机对话式交互（LUI）不管是输入框、还是对话本身的样式，和传统GUI在界面是一样的，只是后端调用的API和用户逻辑不同。

可能存在一些新的交互方式和新的设计系统，界面之间的关联方式、界面的展示方式是一个可见的机会，从产品层面，我们会定义一些适配LUI的基础交互和模板。当然，目前市面上采用LUI方式交互的AI Native应用占比还很少。

SENSEAI：如何看待生成式在UI领域的突破机会？

昊然：首先生产流程的定义一定是一个很大的机会。新市场和新工具会是比较舒适的打法，客户渴求度高，容忍度也高。同时，团队内部会把生成式的机会划分成输入和输出两个维度，再去逐一拆解：

在输入层，LUI可能不是最高效的方式，打开微信的首页，很难用一句话描述出这个页面是怎么排布的。未来输入除了文字，还会包含多模态的东西，比如线框图，其他优秀产品的参考图、设计系统内其他页面的设计样式等等。目前Motiff的产品已经能达到根据线框图做一些事情。

在输出层，我们又可以将输出内容分成两个维度。一个维度是新项目的生成，一个维度是老项目的功能迭代和后续开发。

对于新项目，我们可以用AI生成一个First Draft。AI无限接近于初级设计师的能力，生成初稿，然后设计师通过专业工具去少量完成终稿。

但实际上，在一个大公司内，新项目不到10%，90%是老项目的功能更新。例如微信、美团，他们的产品是不断增量去设计的，我们需要让新的设计内容符合原有的设计系统。甚至很多的场景是，我们观测一个竞品的设计，然后做一个类似的页面。这就需要我们的AI产品具备可控生成的能力，能够理解设计系统的约束和参考内容，并支持多模态的输入。

SENSEAI：按照这个思路，在这两个UI界面生成领域，主要的难点和技术困难有哪些？

昊然：UI设计依然有非常多的细分领域。我们需要去积累更多场景，然后用数据来优化场景UI设计。例如电商领域有电商页面的数据需要去train，以及一些固定的组件，例如商品页、列表页、详情页、筛选、购物车；短视频领域会固定包含用户评论、视频播放等组件。

在老项目基础上进行AI生成UI界面的总体难度是更大的，因为步骤更多。第一步，AI需要具备行业的模型数据，知道同领域可被枚举的东西是什么。第二步，生成的内容需要套用现有的设计系统。第三步，UI设计需要解决冲突，如果只是套用一个壳，会有很多界面的元素本身有冲突，因此需要对界面的布局能力有更好的理解。

目前的通用大模型对UI的理解是非常弱的，虽然demo中可以生成网页，但是给专业人员看，距离专业还是非常远的。Motiff 现有的产品组件中，做了AI设计系统，本质是通过训练让AI知道组件，知道什么是Button，什么是卡片。我们在做AI布局这个功能的时候，是让AI了解界面的结构化信息，知道这些组件之间的亲疏关系，排列关系。这两层能力都会增益生成领域的能力。

SENSEAI：UI设计领域的AI模型，会是怎样的技术方案？

昊然：首先UI领域不太存在私有数据集，大部分的APP都是公开的，本质还是如何去检索收集和整理这些数据。后面有标注、微调、增强，需要内容生产的团队和数据团队去配合。

从大模型的角度，我们会使用LLM来做一些意图理解，目前motiff会去比较开源闭源的方案，结合业务场景去选择最优的模型。我们会把意图重组为UI需要的信息结构，我们需要去定义这个信息结构，并让模型理解基于这个信息结构需要选择什么样的界面组件，并基于意图，将原子组件匹配和拼装在一起，和搭乐高积木一样。

转载请联系公众号后台

欢迎加入 Sense AI 共创计划

如果你对研究海外最新的 AI 产品感兴趣，并且愿意写出并分享自己的思考和观察，无论你是什么职业（投资人、创业者、产品经理、开发者、学生等等），都欢迎加入 SenseAI 的共创计划。

您可以填写下方的报名问卷，我们会在筛选后邀请您进入我们共创计划社群。SenseAI 的主理人们会在群内分享最新的海外 AI 产品和动态，同时也欢迎每一位参与共创计划的同学分享他们看到有意思的AI动态。

共创计划会以周为单位，每位参与者每周选择一款 AI 产品进行研究并写出相应的文章，每两周会组织一次集体的线上讨论或者线下的深度交流，一块研究前沿的 AI 趋势，特别是对海外 AI 市场动态的实时掌握。每四周调整一次参与成员，维持整个共创计划活跃度和高质量。

福利时间：

SenseAI 已经运营了有一段时间，相信大家可以从每篇文章开头的 Sense 思考和文章内容中感受到我们希望在海量的 AI 信息中蒸馏沉淀深思考。

欢迎进入「SenseAI 深度交流群」，提供对推文内容讨论、AI 产品探索交流、线下面基和认识新朋友的机会。为保证交流质量，我们采取问卷申请制，下面二维码已作废，公众号后台回复【信息】填写新二维码。已填写问卷但未进群的朋友，也请后台回复【已填写】入群。

欢迎关注我们

关注全球 AI 前沿，走进科技创业公司，提供产业多维深思，我们是创业者/产品/投资人，这里是最有 AI-sense 的 SenseAI。

实际测评是检验产品能力的重要标准。SenseAI 推出 AI 产品测评系列，希望带给 SenseAI 社区读者更多有关如何用好玩好AI产品的真实体验。欢迎海内外优秀AI应用产品前来踢馆，后台回复【产品测评合作】即可获得小编微信。

期待与优秀AI产品撞出更多火花！