01背景

AI 能力蓬勃发展，各个领域设计师不断探索如何使用AI对日常设计输出进行提效，在技术逐步平权的背景下，设计师是否只能交付设计稿？AI时代下设计师是否可以参与到代码落地的部分？我会尝试结合淘宝闪购商家B端的推广业务，带来一些分享。

AI对于不同的业务助力点不同，对于标准型需求，因为其结构标准、组件可复用等特点，AI可以帮助输出提效，对于定制型和创意型需求，AI可以帮助设计师启发观点。

02提效技术选型：为什么选择 AI设计工程化

AI工程化一个显著的特点是交付物变成了代码，所以在介绍技术选型之前，需要先跟大家明确一下 HTML 和前端 React 工程代码的区别。

AI提效的主要技术路径一共有4种，分别如下：

AI设计工程化的优势

优势一：标准化。设计师在设计过程及交付的产物中直接使用了三个代码库，研发可以直接使用，不像设计稿和HTML一样，需要再进行一层研发“转译”。

优势二：高效率。设计师不需要经历标注、切图等中间环节，设计还原度接近100%，与研发的走查沟通次数逐步接近0。

03实现过程及难点

难点1：全新的设计流程及研发合作关系

在AI设计工程化中，设计师更多参与到下游的技术实现，从传统的“交付图”，转变为“交付代码”。在新流程中，设计比以往多承担30%工作（原属于前端开发），但是这块工作内容对于部分设计师是一个全新的高门槛领域。这里可能会遇到两类问题：第一类是不熟悉AI设计工程工作流，不知道该如何进行流程推进；第二类是流程依赖设计师与IDE的多轮对话，效率太低。所以为了降低其他设计师的使用门槛并且提高工程部署效率，已联动研发沉淀SOP Skill，可自动化进行整个流程。

难点2：AI生成的质量控制

核心解法：基于设计思维定义 Skill 整体内容，构建高效率框架，提升生成质量和效率，并总结经验复用至 App Skill。

内容层：为解决 Skill 内容无从下手的难点，参考设计师的设计思维和路径。设计师拿到新的需求后，往往需要先对业务进行了解，并梳理出业务流程，再决定每一个流程节点需要用什么页面框架，再确定每一个页面下使用什么样的组件，最终再保障整体页面输出是符合设计样式规范的。根据以上设计师的思维路径梳理出“业务流程-页面框架-组件使用-全局样式”核心4步骤，并且从4个维度调研AI生UI产品（包含Lovable、Figmamake等），了解AI的能力边界和擅长点。

框架层：最开始的设想方案是双层父子结构，即父层级负责整体的流程编排，决定什么时候用哪一个子Skill。但是这种结构较为复杂，可能会影响AI理解与生成，所以最终以简洁轻量、渐进披露为设计原则，将所有的内容收拢到单个设计skill。

共建机制：设计资产Skill需要长期迭代，因为多业务的设计规范都放入同一个Skill，可能会造成 Skill体积会大幅度膨胀，上下文爆炸，所以暂不进行多业务统一维护；目前暂定策略是通用规范（包含Design Token、Layout、基础组件、基础模板等）进行统一维护，业务规范由不同的业务设计师分别独立维护。

04效果与展望

当前对于推广标准型页面的设计提效和研发提效效果如下：

我们最终目标希望能够在标准型页面中达成80%-90%的设计提效，也在持续优化中。但是同时我们也要考虑AI的限制，主要体现在模型能力和模型幻觉。当前的模型上限和幻觉波动，还无法完全跳过设计师，仍然需要设计师进行质量把控。

本文作者@淘宝闪购设计。原文链接：https://mp.weixin.qq.com/s/FKkUHKhi72NvLkQ4rd8DTA