学习日志-《gmtc-前端智能化》笔记

前言

本文记录了学习gmtc-前端智能化过程中的所有笔记。

• 怎样理解前端智能化这一新浪潮？

• 前端智能化关注的领域更偏向于生产效率的提升。指的的是前端开发智能化。

• 2015,2016年淘宝开启“达芬奇”（imgcook前身）

• 代码分析工具DeepCode，基于GPT-3的代码生成工具Copilot，还有野心非常大的从自然语言到代码生产的NL2Code，都扩展了我们对前端智能化的认知

• 前端智能化目前所做的工作：组件编辑工具，DSL转化方案，识别模型的优化，具体的视觉算法

• 落地难点：场景限制（目前集中在电商，运营等领域，难以扩张到其他方向），认知（和业务的粗放增长对立，接入有阵痛期，效果是一个开口向上的二次曲线），协作（需要多团队的合作）

• D2C，P2C的价值：解放生产力。辅助设计人员产出规范的设计稿，减少开发人员的工作量，帮助产品/运营人员快速落地想法

• 前端智能化的新花样：全链路，全流程，从需求描述到demo生成，可参考“在线试妆”里的“妆容迁移”一样

• 京东自研设计稿转代码平台Deco技术揭秘-京东

• 前端智能化：AI和机器学习的能力拓展前端能力圈

• 生成静态代码，根据视觉稿生成D2C Schema，然后结合规则系统，计算机视觉，智能布局，深度学习对D2C Schema 进行处理（DSL解析器），最后生成多端代码

• schema转化代码会经过布局算法引擎-空间布局，投影布局，背景图布局，特征布局，坐标布局，样式计算

• Deco样式大部分布局采用flexbox，特殊情况用绝对定位

• Deco最终得到的是可以二次开发的代码

• 使用深度学习中的目标检测与分类算法识别设计稿中的已有组件

• 组件库识别映射整体处理流程是，针对输入的设计稿图片，先基于视觉算法进行合理切割，在对切割后的图片识别出图片中包含的UI区块，然后将UI区块映射到schema JSON中的节点信息中去，而后再对区块通过分类算法识别出最有可能的组件类型，再将识别信息写入到schema JSON

• 如果生成的代码有误差，可以通过可视化编辑器进行调整

• 从产品设计到发布的全链路智能化方案-百度

• 业务组织扩张，造成的协作效率下降，通过项目管理的手段梳理流程，降低了风险，但拉长了整体流程

• 全链路流程图

• 设计令牌（design token）：一种执行标准，将设计语言代码化，提供给设计师，开发者

• design token的设计难度图  适合tailwindcss和windicss（原子化css工具），需要去组合生成alias token

• 设计师通过design token，设计语言，产生component token ，提供给前端 非ai的方式（设计工程化）

• token：global token（和业务无关，通用token-tailwindcss和windicss），alias token（业务token，如text颜色），component token（开发可用），production token

• image to code 流程图 重要 引入ai

• 智能设计定义图（素材自动设计）

• 智能化展望-prd to code

• 二次生成能力加持下的 UI 智能生成实践-抖音

• ALYX的简化流程图

• 提取循环项使用并集的方式

• 设计稿的逻辑使用业务组件来实现，逻辑生成=业务组件转换

• 组件识别：YOLOv5（对象检测模型）

• 数据比模型更重要

• 组件转换：基础转换（DSL/JSON），深度转换（在运行时拦截了render函数）

• 99%的准确率也不够

• 针对错误的二次调整的流程图

• 智能布局的流程图

• 引入人工调整，对机器生成的中间页面进行打标/所见所得调整

• 转转智能代码平台神笔马良的研发与实践-转转

• 国内智能代码起源2019年，受微软的sketch to code 启发

• 开发者诉求图 重要

• 目标 生成开发者喜欢的代码

• 结构/样式相似度算法

• UI组件库识别:组件特征（结构/样式相似度），提取算法

• 样式代码简化

• UI还原度自动化测试

• 行业现状，58已开源，但效果一般。重要

• 后续可能会有标准方案

• ToB 业务场景下中后台智能化开发体验与实践-阿里

• 低代码：宜搭，腾讯云微搭。开箱即用：飞冰，Antd Pro，智能化：imgcook，蓝湖

• 接入可视化引擎，给用户提供可视化干预能力，类似头条

• ai的生产/调用的流程介绍 重要

• 代码生成链路流程图 重要
• 可编程cdn