--- title: 从概念到落地，产品界面的 AI 生成究竟卡在哪儿了？ date: 2025-03-31 tags: [设计 AI, 设计工具, 设计模式, 设计系统] description: 设计师如何跳出被动响应的执行思维，从业务视角出发，构建自己的商业判断体系与本体结构，实现设计价值向业务价值的转化。 author: 5key source: https://www.thefivekey.com/ai-generated-ui-not-work/ --- # 从概念到落地，产品界面的 AI 生成究竟卡在哪儿了？ > 设计师如何跳出被动响应的执行思维，从业务视角出发，构建自己的商业判断体系与本体结构，实现设计价值向业务价值的转化。 **作者**：5key　·　**发布于**：2025-03-31　·　**原文链接**：https://www.thefivekey.com/ai-generated-ui-not-work/ --- 从概念到落地，产品界面的 AI 生成究竟卡在哪儿了？ 前两天，一位朋友兴奋地告诉我，TA 的机会来了，终于可以在公司的产品设计流程中，尝试用 AI 来进行界面设计的生成了。 说实话，看到这个事儿能有进展我也挺开心的。 几个月前 TA 约了次咖啡，说自己正负责团队里的设计系统，想听听我怎么看，有没有什么方向可以尝试。当时我跟 TA 聊到一个思路：可以尝试着把 AI 与设计系统进行结合，让它来自动完成一些重复性的界面生成。TA 听得挺认真，觉得这个方向挺有意思，回去之后也开始做了不少的功课。 虽然主管当时觉得时机未到，这项工作后来被搁置了，但 TA 并没有放弃。正好最近公司内部架构调整，**AI 被提到了战略层面**，就顺势把自己平时的研究，做了个演示 Demo 找主管做了一次汇报。 这个 Demo 本质上和现在市面上常见的界面生成方式差不多，都是通过输入一段需求描述，让 AI 自动生成对应的界面。 AI 生成产品界面 演示 DEMO AI 生成产品界面 演示 DEMO 上图为文章配图案例，与真实业务无关 但不同的是，它生成的结果从布局结构到视觉风格，再到字段内容的业务贴合度，都与他们的产品高度一致。看上去不是那种“拼凑感”很强的概念稿，反倒更像是我们在日常项目评审里会看到、可以直接拿来走流程的设计方案。主管和业务团队看完之后也觉得眼前一亮，如果这个 AI 能力能做到这样的程度，那还是非常值得投入的。 ## 这事儿的可行性有多高？ 从 Demo 来看，效果的确不错。但我们其实都清楚，这只是一个演示 Demo，从“能演示”到“能实现”之间，还有很多的问题需要一个个解决。 大家看到的是一个界面，但它其实是由数十个组件、数个 Pattern 的组合，再叠加上层层的业务逻辑，才拼出来的这个看起来“顺理成章”的结果。要把这么多复杂的因子结合起来交给 AI 来“操作”，并不容易。 “前台”的简单，其实是“后台”的复杂。AI 让界面生成这一步看上去变得轻松了，但真正难的部分，那些规则、逻辑依旧存在，只是被藏在了后面。客观来说，这个 Demo 只是用了更贴合业务的“包装方式”来让公司接受，而其背后需要解决的问题依旧存在，一直都没有变过。 产品界面的 AI 生成，不是一个新鲜话题了，每隔一段时间我们都会拿出来讨论一下。过去两年我陆续就写过一些相关的文章。那个时候，这个方向正热，无论是海外的 Uizard，还是国内的各大设计协同平台，大家都在推“用一句 Prompt 来生成界面设计”，似乎接下来这些界面设计的工作都可以交给 AI 来完成了。 看上去方向已经跑通了，行业共识几乎已经形成。但热闹了一阵子后，这些平台却都渐渐地没了声音。这有是什么原因呢？在我看来，核心在于在经过了初期的探索、兴奋之后，大家逐步意识到，**从“能够生成”到“能够在业务中使用”之间，存在一条看不见的鸿沟，而这条鸿沟我们暂时还无法跨越过去。** 如果把这个问题拆开来分析，你会发现其实背后卡住我们的，核心并不是某些技术上的难题，而是存在着三个不同层次的问题叠在了一起，导致了现在的“停滞”局面。 ## 从“能用”到“能用”，中间隔着的三道坎 在这里，「能用」这个词其实有两层含义。 第一层含义是 AI 生成**能跑通**，大模型能够将界面生成出来，完成用户提出的一个需求。 第二层含义则是让生成能力能**真正能在业务中发挥作用**，能够嵌入到实际的工作流中，像一个设计师一样按照业务的要求，理解需求、交付设计。 在我们当前的技术实现中，AI 在生成界面时，虽然能够使用相应的 UI元素来构建界面，但由于缺乏对行业、业务的理解，生成的结果往往并不如人意。界面可能看上去有模有样，但逻辑不对、交互不合理、业务信息缺失，从而导致它无法真正服务于真实的业务场景。 简单点来说，第一种“能用”意味着界面能“生成”，第二种“能用”则是指生成的界面可以“被用”。这两个层面看起来很相似，但本质上差距巨大。事实上如果只是做到第一个“能用”，那么 AI 设计对于企业来说其实是没用的。 那么，AI 究竟要具备什么样的内容里才能真正“能用”呢？ 在我看来核心在于生成质量、生成认知和生成结构三个核心要素，想要让界面设计的 AI 生成能力能真正跑起来，这三者缺一不可。 AI 生成界面设计，从“能用”到“能用”的三道坎 首先，是**生成质量**的问题。 AI 交出来的这份“作业”，在完整性、专业度和可用性上到底合不合格？但事实上，很多情况下，AI 生成的界面基本结构都不完整，生成的能力极度不稳定。 其次，是**生成认知**的问题。 通过 NLP，它可以理解我们需要的是什么，但是通用大模型，并不了解具体的业务逻辑。结果就是，生成的界面看上去形式对了，但语义和业务意图却完全对不上。 最后，是**生成结构**的问题。 这里讨论的不是界面生成质量好不好的问题，而是它是否具备稳定的输出。会不会同一个类型的需求，今天生成的结果是一个样，明天又是一个样？这就涉及到我们一直提到的「确定性」问题，但往往现在的大模型给我们的结果并不具备很好的确定性。 三个层级，卡在任何一层，最后生成的界面看上去都像那么回事，但实际上就是用不了。 如果真想让它前面的 Demo 得以实现，让 AI 能力能真正进入到业务流程，我们该从哪里下手？设计系统的 AI 化，到底该怎么做？什么样的抽象、封装与规则建立，才是真正可行的路径？ 下半部分，我将尝试从这些问题出发，结合实际案例，聊聊一套“能落地”的界面生成能力，需要具备哪些条件。以及我们有哪些方法可以逐步推动它实现。 以上是本期专栏文章的免费部分内容。欢迎订阅我的小报童专栏，解锁本期文章全文内容。 --- _本文由 [5key](https://www.thefivekey.com/) 创作，原文发布于 [https://www.thefivekey.com/ai-generated-ui-not-work/](https://www.thefivekey.com/ai-generated-ui-not-work/)。欢迎引用，请注明出处。_ _订阅付费专栏「OFF DESIGN」：https://www.thefivekey.com/premium-design-subscription/_