UI智能化与前端智能化：工程技术、实现方法与编程思想

这是一本以智能UI为切入点全面讲解前端智能化的著作，系统阐释了前端智能化的工程技术原理、实现方法和路径以及编程思想，旨在帮助前端团队掌握零代码业务交付能力、个性化UI供给和消费能力、UI调控能力，从而实现用AI为业务赋能、为工程提效。

全书一共10章，分为三篇：

第一篇 智能UI介绍（第1~3章）

主要介绍了前端智能化的基本概念和基础知识，以及智能化的思维框架和个性化UI的实现方法。

第二篇 智能UI实战（第4~7章）

详细介绍了智能UI从设计到实现的全过程，包括：智能UI的目标、方法和实现步骤；智能UI的供给链路和消费链路；端智能的技术工程与实践。

第三篇 智能UI编程思想（第8~10章）

深入讲解了UI智能化、交付智能化和编程思想智能化3个重要的前端智能化主题，用实践经验指导前端工程师如何用AI创造业务价值、提升研发效率。

甄焱鲲

资深前端技术专家和UI专家，从事相关工 作16年，阿里巴巴“前端智能化”概念的提 出者，曾担任阿里巴巴前端智能化方向负责人 （资深前端专家，P9），现为深圳诺沃帝电 子商务有限公司创始人和首席技术官。 2007 年加入腾讯，从事桌面产品研发， 在前端开发通道升到最高职级 T3.3 后离职创 业。2014年加入阿里巴巴，在阿里内部影响 力排名前三，先后从事数字广告、营销和前端 智能化等工作。提出并实现了设计稿生成代 码的方向，免费向行业提供imgcook工具， 帮助数万前端工程师和设计师用该工具一键 从设计稿生成 UI 代码。设计稿生成代码工具 被 ThoughtWorks 技术雷达收录。负责阿里 营销业务时，用智能 UI 赋能阿里集团17个 BU，不仅提升了业务的个性化程度，而且用 户的核心指标也提升了 10%以上。 外部四篇顶会论文，以嘉宾或出品人身 份，在中国的各种技术峰会上有过分享。

适读人群 ：（1）大厂外想进大厂的前端：智能UI技术体系提升在UI交互体验上的专业度和体系化，叩开大厂的招聘之门。（2）中小企业前端：需要在业务中落地UI交互个性化能力为业务赋能的前

（1）作者背景资深：作者是阿里巴巴“前端智能化”概念的提出者，也是阿里巴巴前端智能化方向的负责人，个人影响力在阿里巴巴内部排名前3。

（2）作者经验丰富：作者先后在腾讯和阿里从事前端工作16年，提出并实现了设计稿生成代码，免费向行业提供imgcook工具，帮助数万前端工程师和设计师用该工具一键从设计稿生成 UI 代码。

（3）阿里实践总结：本书主要内容源于作者在阿里的实践经验总结，系统且深入地阐述了UI智能化的工程技术、实现方法和编程思想。

（4）专家高度评价：本书得到了玉伯、张克军、winter、大漠4位前端和UI领域的资深专家高度评价并推荐。

Preface　前　言

写作动机

2017年，我在负责UC浏览器部分内核工作时，为了解决前端测试的问题，引入了机器学习技术。借助计算机视觉和其他算法模型能力，我在UI的还原质量、布局问题、排版问题和样式问题等方面都取得了不错的成绩。在此基础上，我在阿里前端委员会共创会议上正式提出“前端智能化”概念，期望通过引入机器学习能力对现有前端技术和工程进行升级。在这次共创会议后，阿里前端智能化小组正式成立。

从2017年提出前端智能化开始，到2022年NoCode业务的交付，近5年时间如白驹过隙。我一直想把自己和团队的思考与实践分享给读者。本书以“智能UI”为切入点，旨在详细阐述前端智能化，帮助读者为业务赋能、对工程提效。

其实，如果智能UI没有与内部的技术工程体系耦合得那么紧密，我也可以像 imgcook一样开放出来，然后以文档方式教读者如何使用。不幸的是，智能UI先是紧密耦合大促场景，后又与频道的研发体系相耦合，而内部的模块标准、持续集成、组件和研发框架等都和行业标准有较大差异，如果把智能 UI 开放，相当于逼迫读者使用现有的技术栈，这对技术选型和工程改造都有巨大的成本压力。因此，我选择把智能 UI 的设计思想、实现路径乃至背后的部分智能化编程思想都分享出来，使读者在读完本书后可以构建自己的NoCode业务交付能力、个性化UI供给和消费能力、UI 调控能力。

授人以鱼，不如授人以渔。本书把问题分析、定义和解决的过程，以及这些过程背后的思考，都完整、清晰、全面地呈现出来，希望这些内容能够给读者带来启发，进而提高读者解决现实问题的能力。

综上所述，本书的写作动机是：

通过实践帮助读者学会构建自己的智能 UI 技术工程体系。

通过思考过程的分享帮助读者学会用前端智能化分析并解决业务和技术问题。

通过可微编程帮助读者了解前端智能化编程思想。

读者对象

本书适合以下读者：

对低代码UI开发技术实践感兴趣的程序员。

希望提升研发效率、对 UI 和交互进行创新的前端程序员和前端爱好者。

对智能 UI 技术感兴趣的技术管理者。

想借助智能 UI 提升业务价值的业务人员、产品经理和设计师。

本书内容和阅读建议

本书探讨的是前端和机器学习两个领域的知识，以智能 UI 为场景，介绍前端智能化的技术工程实践原理、方法和编程思想。书中内容分为三篇：第一篇“关于智能 UI”包括第1～3章，主要介绍前端智能化的基本概念、智能化的思维框架，以及实现 UI 个性化的方法；第二篇“智能UI实战”包括第4～7章，主要介绍智能 UI 从设计到实现的全过程；第三篇“智能UI编程思想”包括第8～10章，主要介绍 UI 智能化、交付智能化和编程思想智能化。

本书有以下3种阅读方式。

快速实战：对于对前端智能化有所了解的读者，推荐从第二篇开始阅读，直接进入智能UI 的实战部分，快速掌握业务和技术工程，然后阅读第三篇，进一步创造业务价值，提升研发效率，最后阅读第一篇，了解前端智能化和 D2C 原理。

快速应用：对于致力于构建自己的前端智能化团队和技术产品的读者，例如开发自己的 imgcook，推荐从第三篇开始阅读，再读第一篇和第二篇。

循序渐进：第一次接触前端智能化和智能 UI的读者可以循序渐进地逐篇浏览和实践。

致谢

本书引用了部分团队内部的文档资料，特此感谢妙净、苏川、笑翟、吖克、卡狸、欣余、数斯、缺月、昭如、卓风、大漠、禹哲、泽它、連山等资料贡献者。

Contents　目　录

前言

第一篇　关于智能UI

第1章　前端智能化2

1.1　AI改变前端编程2

1.2　AI进行页面重构的要求3

1.3　AI进行页面重构的能力4

1.4　AI进行页面重构的方法6

1.4.1　原理7

1.4.2　过程7

1.4.3　调试方法8

第2章　面向不确定性编程11

2.1　运行时的不确定性带来的全新

　　 挑战11

2.2　编程本身受到的影响12

2.2.1　想不清楚12

2.2.2　做不明白14

2.3　快速上手前端机器学习16

2.3.1　训练17

2.3.2　预测19

2.3.3　部署20

第3章　UI个性化23

3.1　UI个性化的研发成本问题24

3.2　UI个性化表达的能力问题27

3.3　UI个性化的业务价值问题29

本篇小结31

第二篇　智能UI实战

第4章　智能UI的目标、方法

　　　　和步骤34

4.1　智能UI具体做什么34

4.1.1　在UI上实现信息有效

　　　表达34

4.1.2　个性化UI方案数量的

　　　重要性35

4.1.3　UI的可变性35

4.1.4　UI设计约束37

4.2　供给链路概述39

4.2.1　UI个性化元素供给39

4.2.2　UI个性化方案组装40

4.3　消费链路概述41

第5章　智能UI供给链路44

5.1　实现UI的可变性44

5.1.1　视觉设计的基础45

5.1.2　视觉设计的基本元素45

5.1.3　视觉设计的原则50

5.1.4　设计交付与前端

　　　　　　交付的关系52

5.1.5　Web应用的交付过程53

5.1.6　原子设计理论53

5.2　设计系统：设计生产一体化

　　 方案56

5.2.1　设计、研发、UI个性化

　　　消费三位一体的新轮子56

5.2.2　设计系统的技术选型58

5.2.3　设计系统的方案设计61

5.2.4　设计系统的详细设计67

5.2.5　关于自适应样式76

5.3　设计令牌：设计体系的技术

　　承接78

5.3.1　令牌类型79

5.3.2　设计令牌的组织结构80

5.3.3　从简单的令牌结构设计

　　　开始80

5.3.4　设计令牌主要的分层命名83

5.3.5　如何设计一个令牌96

5.3.6　有效地使用设计令牌99

5.4　代码生成：智能UI的基石105

5.4.1　代码生成基础107

5.4.2　熟悉插件、CLI的扩展

　　　能力127

5.4.3　在D2C代码生成中应用

　　　设计令牌128

第6章　智能UI消费链路143

6.1　方案：AI辅助规则生成145

6.1.1　整体规则生成146

6.1.2　局部规则生成149

6.1.3　AI辅助的筛选和过滤152

6.2　架构：技术工程体系166

6.2.1　拥抱云原生167

6.2.2　算法模型层167

6.2.3　算法服务层180

6.2.4　构建层188

6.3　迭代：归因和度量214

6.3.1　A/B测试实验能力建设215

6.3.2　智能UI归因和度量方法226

6.3.3　智能UI归因和度量实战231

第7章　智能UI与端智能237

7.1　端智能技术工程基础238

7.1.1　评估和准备算法模型240

7.1.2　基于编译的模型优化244

7.1.3　TensorFlow Lite的

　　　Android应用254

7.1.4　Core ML的iOS应用259

7.2　实时性实践266

7.2.1　技术体系267

7.2.2　运行态：数据能力268

7.2.3　无入侵数据采集269

7.2.4　运行态：模型能力269

7.2.5　端智能研发态270

7.2.6　产品落地271

7.3　个人信息安全实战272

7.3.1　零知识证明简介273

7.3.2　安全多方计算和RSA

　　　　　　加密算法276

7.3.3　安全多方计算实战277

7.3.4　MP-SPDZ简介282

7.3.5　TensorFlow Federated：

　　　　　　没有集中训练数据的

　　　　　　协作机器学习286

本篇小结295

第三篇　智能UI编程思想

第8章　UI智能化298

8.1　接口和界面的区别298

8.1.1　什么是操作298

8.1.2　操作对象变迁史299

8.1.3　接口和界面在操作中

　　　的作用303

8.1.4　界面隐藏自己的魔法304

8.2　GUI给应用程序带来的

　　　　　变化305

8.2.1　GUI易用性背后的复

　　　杂度305

8.2.2　GUI开发中面向用户

　　　体验的程序设计308

8.3　如何实现UI智能化325

第9章　交付智能化：设计

　　　　生产一体化之旅330

9.1　设计生产一体化详解332

9.1.1　端到端交付的必要性332

9.1.2　端到端交付的挑战334

9.2　工业领域端到端交付的

　　　先进思想340

9.2.1　MBD设计制造一体

　　　化概览340

9.2.2　PMI协同制造需求结

　　　构化342

9.2.3　设计制造一体化过程

　　　分析343

9.2.4　借鉴工业化思想改进端

　　　到端交付349

9.2.5　前端工程的工艺信息367

9.2.6　基于结构化工程链路信

　　　息和需求信息的业务

　　　　　　 验证376

9.3　设计生产一体化展望381

9.3.1　技术赋能381

9.3.2　基于产品经理工作台

　　　重塑工作流383

9.3.3　基于投放实验能力渗透

　　　运营工作流384

9.3.4　基于智能UI体系的一体

　　　化交付成果384

9.4　反思和展望387

第10章　编程思想智能化：

　　　　 可微编程390

10.1　什么是可微编程392

10.1.1　可微编程和自动微分的

　　　 关系393

10.1.2　可微编程实现智能应用

　　　 程序396

10.1.3　Swift的可微编程398

10.2　TensorFlow可微编程405

10.2.1　TensorFlow计算图示例408

10.2.2　TensorFlow梯度计算411

10.2.3　TensorFlow自动微分419

10.3　可微编程应对未来421

10.3.1　可微编程实现弹性动画423

10.3.2　展望未来436

本篇小结438