作為今年阿裡經濟體前端委員會的四大技術方向之一，前端智能化方向一被提及，就不免有人好奇：前端結合 AI 能做些什麼，怎麼做，未來會不會對前端産生很大的沖擊等等。本篇文章将圍繞這些問題，以「設計稿自動生成代碼」場景為例，從背景分析、競品分析、問題拆解、技術方案等幾個角度切入，細述相關思考及過程實踐。
背景分析
業界機器學習之勢如火如荼，「AI 是未來的共識」頻頻出現在各大媒體上。李開複老師也在《AI·未來》指出，将近 50％ 的人類工作将在 15 年内被人工智能所取代，尤其是簡單的、重複性的工作。并且，白領比藍領的工作更容易被取代；因為藍領的工作可能還需要機器人和軟硬體相關技術都突破才能被取代，而白領工作一般隻需要軟體技術突破就可以被取代。那我們前端這個“白領”工作會不會被取代，什麼時候能被取代多少？
回看 2010 年，軟體幾乎吞噬了所有行業，帶來近幾年軟體行業的繁榮；而到了 2019 年，軟體開發行業本身卻又在被 AI 所吞噬。你看：DBA 領域出現了 Question-to-SQL，針對某個領域隻要問問題就可以生成 SQL 語句；基于機器學習的源碼分析工具 TabNine 可以輔助代碼生成；設計師行業也出了 P5 Banner 智能設計師“鹿班”，測試領域的智能化結合也精彩紛呈。那前端領域呢？
那就不得不提一個我們再熟悉不過的場景了，它就是設計稿自動生成代碼（Design2Code，以下簡稱 D2C），阿裡經濟體前端委員會-前端智能化方向目前階段就是聚焦在如何讓 AI 助力前端這個職能角色提效更新，杜絕簡單重複性工作，讓前端工程師專注更有挑戰性的工作内容！
競品分析
2017 年，一篇關于圖像轉代碼的
Pix2Code論文掀起了業内激烈讨論的波瀾，講述如何從設計原型直接生成源代碼。随後社群也不斷湧現出基于此思想的類似
Screenshot2Code的作品，2018 年微軟 AI Lab 開源了草圖轉代碼 工具
Sketch2Code，同年年底，設計稿智能生成前端代碼的新秀
Yotako也初露鋒芒， 機器學習首次以不可小觑的姿态正式進入了前端開發者的視野。
| 識别目标 | 控件數 | 結果現狀 | 本質能力 | |
| Bootstrap 基礎控件 | 11 | 實驗資料準确率接近 80%, 支援控件少 | 中背景基礎元件識别 | |
| HTML 基礎标簽 | 準确率較低 | 端到端的圖檔生成代碼 | ||
| 手繪稿到控件 | 9 | 手繪草圖降低了使用門檻。 | 基于手繪稿的元件識别 | |
| shots | 非智能識别，全人工标注 | 未知 | 有 Showcase，新設計稿無法試用，閉源，準确度未知，人工收集了6000 個設計稿 Case | 設計稿生成代碼的布局算法能力，含各種場景下豐富的高品質的控件類型标注 |
| PSD 生成前端代碼，有Showcase，使用需要會員費，設計稿的要求非常高（幾乎每個圖層都有命名要求），剛起步 | 設計稿生成代碼，目前規則的比重較大 |
基于上述競品分析，我們能夠得到以下幾點啟發：
- 深度學習目前在圖檔方面的目标檢測能力适合較大顆粒度的可複用的物料識别（子產品識别、基礎元件識别、業務元件識别）。
- 完整的直接由圖檔生成代碼的端到端模型複雜度高，生成的代碼可用度不高，要達到所生成代碼工業級可用，需要更細的分層拆解和多級子網絡模型協同，短期可通過設計稿生成代碼來做 D2C 體系建設。
- 當模型的識别能力無法達到預期準确度時，可以借助設計稿人工的打底規則協定；一方面人工規則協定可以幫助使用者強幹預得到想要的結果，另一方面這些人工規則協定其實也是高品質的樣本标注，可以當成訓練樣本優化模型識别準确度。
問題分解
設計稿生成代碼的目标是讓 AI 助力前端這個職能角色提效更新，杜絕簡單重複性工作内容。那我們先來分析下，“正常”前端尤其是面向 C 端業務的同學，一般的工作流程日常工作内容大緻如下：
“正常”前端一般的開發工作量，主要集中在視圖代碼、邏輯代碼和資料聯調（甚至是資料接口開發，研發 Serveless 産品化時可期）這幾大塊，接下來，我們逐塊拆解分析。
視圖代碼
視圖代碼研發，一般是根據視覺稿編寫 HTML 和 CSS 代碼。如何提效，當面對 UI 視圖開發重複性的工作時，自然想到元件化、子產品化等封裝複用物料的解決方案，基于此解決方案會有各種 UI 庫的沉澱，甚至是可視化拼裝搭建的更 High Level 的産品化封裝，但複用的物料不能解決所有場景問題。個性化業務、個性化視圖遍地開花，直面問題本身，直接生成可用的 HTML 和 CSS 代碼是否可行？
這是業界一直在不斷嘗試的命題，通過設計工具的開發插件可以導出圖層的基本資訊，但這裡的主要難點還是對設計稿的要求高、生成代碼可維護性差，這是核心問題，我們來繼續拆解。
設計稿要求高問題
對設計稿的要求高，會導緻設計師的成本加大，相當于前端的工作量轉嫁給了設計師，導緻推廣難度會非常大。一種可行的辦法是采用 CV（ComputerVision, 計算機視覺） 結合導出圖層資訊的方式，以去除設計稿的限制，當然對設計稿的要求最好是直接導出一張圖檔，那樣對設計師沒有任何要求，也是我們夢寐以求的方案，我們也一直在嘗試從靜态圖檔中分離出各個适合的圖層，但目前在生産環境可用度不夠（小目辨別别精準度問題、複雜背景提取問題仍待解決），畢竟設計稿自帶的元資訊，比一張圖檔提取處理的元資訊要更多更精準。
可維護性問題
生成的代碼結構一般都會面臨可維護性方面的挑戰：
- 合理布局嵌套：包括絕對定位轉相對定位、備援節點删除、合理分組、循環判斷等方面；
- 元素自适應：元素本身擴充性、元素間對齊關系、元素最大寬高容錯性；
- 語義化：Classname 的多級語義化；
- 樣式 CSS 表達：背景色、圓角、線條等能用 CV 等方式分析提取樣式，盡可能用 CSS 表達樣式代替使用圖檔；
- ……
将這些問題拆解後，分門别類專項解決，解決起來看似沒完沒了，但好在目前發現的大類問題基本解決。很多人質疑道，這部分的能力的實作看起來和智能化一點關系都沒有，頂多算個布局算法相關的專家規則測量系統。沒錯，現階段這部分比較适合規則系統，對使用者而言布局算法需要接近 100% 的可用度，另外這裡涉及的大部分是無數屬性值組合問題，目前用規則更可控。如果非要使用模型，那這個可被定義為多分類問題。同時，任何深度學習模型的應用都是需要先有清晰的問題定義過程，把問題規則定義清楚本就是必備過程。
但在規則解決起來麻煩的情況下，可以使用模型來輔助解決。比如 合理分組（如下圖） 和 循環項 的判斷，實踐中我們發現，在各種情況下還是誤判不斷，算法規則難以枚舉，這裡需要跨元素間的上下文語義識别，這也是接下來正在用模型解決的重點問題。
(合理分組示意)
邏輯代碼
邏輯代碼開發主要包括資料綁定、動效、業務邏輯代碼編寫。可提效的部分，一般在于複用的動效和業務邏輯代碼可沉澱基礎元件、業務元件等。
- 接口字段綁定：從可行性上分析還是高的，根據視覺稿的文本或圖檔判斷所屬哪個候選字段，可以做，但成本效益不高，因為接口資料字段綁定太業務，通用性不強。
- 動效：這部分的開發輸入是互動稿，而且一般動效的傳遞形式各種各樣參差不齊，有的是動畫 gif 示範，有的是文字描述，有的是口述；動效代碼的生成更适合用可視化的形式生成，直接智能生成沒有參考依據，考慮投入産出比不在短期範圍内。
- 業務邏輯：這部分開發的依據來源主要是 PRD，甚至是 PD 口述的邏輯；想要智能生成這部分邏輯代碼，欠缺的輸入太多，具體得看看智能化在這個子領域能解決什麼問題。
邏輯代碼生成思考
理想方案當然是能像其他詩歌、繪畫、音樂等藝術領域一樣，學習曆史資料，根據 PRD 文本輸入，新邏輯代碼能直接生成，但這樣生成的代碼能直接運作沒有任何報錯嗎？
目前人工智能雖說發展迅速，但其能解決的問題還是有限，需要将問題定義成其擅長解決的問題類型。強化學習擅長政策優化問題，深度學習目前在計算機視覺方面擅長解決的是分類問題、目标檢測問題，文本方面擅長 NLP（Natural Language Processing, 自然語言處理） 等。
關于業務邏輯代碼，首先想到的是對曆史源代碼的函數塊利用 LSTM（Long Short-Term Memory, 長短期記憶網絡）和 NLP 等進行上下文分析，能得到代碼函數塊的語義，VS Code 智能代碼提醒 和 TabNine 都是類似的思路。
另外，在分析問題中（如下圖）我們還發現，智能化在業務邏輯領域還可以協助識别邏輯點在視圖出現的位置（時機），并根據視圖猜測出的邏輯語義。
綜上，我們總結一下智能化現階段的可助力點：
- 由曆史源代碼分析猜測高頻出現的函數塊（邏輯塊）的語義，實際得到的就是元件庫或者基礎函數塊的語義，可在代碼編輯時做代碼塊推薦等能力。
- 由視覺稿猜測部分可複用的邏輯點，如這裡的字段綁定邏輯，可根據這裡文本語義 NLP 猜測所屬字段，部分圖檔元素根據有限範圍内的圖檔分類，猜測所屬對應的圖檔字段（如下圖示例中的，氛圍修飾圖檔還是 Logo 圖檔）；同時還可以識别可複用的業務邏輯元件，比如這裡的領取優惠券邏輯。
是以，現階段在業務邏輯生成中，可以解決的問題比較有限，尤其是新的業務邏輯點以新的邏輯編排出現時，這些參考依據都在 PD 的 PRD 或腦海中。是以針對業務邏輯的生成方案，現階段的政策主要如下：
- 字段綁定：智能識别設計稿中的文本和圖檔語義分類，特别是文字部分。
- 可複用的業務邏輯點：根據視圖智能識别，并由視圖驅動自由組裝，含小而美的邏輯點（一行表達式、或一般不足以封裝成元件的數行代碼）、基礎元件、業務元件。
- 無法複用的新業務邏輯：PRD 需求結構化（可視化）收集，這是一個高難度任務，還在嘗試中。
小結
目前用智能化的方式自動生成 HTML + CSS + 部分 JS + 部分 DATA 的主要分析如上，是Design to Code 的主要過程 ，内部項目名稱叫做 D2C ，後續系列文章會使用此簡稱，集團内外的落地産品名稱為
imgcook。随着近幾年主流設計工具（Sketch、PS、XD 等）的三方插件開發能力逐漸成熟，飛速發展的深度學習那甚至超過人類識别效果的趨勢，這些都是 D2C 誕生和持續演進的強大後盾。
（目标檢測 2014-2019 年 paper）
技術方案
基于上述前端智能化發展概括分析，我們對現有的 D2C 智能化技術體系做了能力概述分層，主要分為以下三部分：
- 識别能力：即對設計稿的識别能力。智能從設計稿分析出包含的圖層、基礎元件、業務元件、布局、語義化、資料字段、業務邏輯等多元度的資訊。如果智能識别不準，就可視化人工幹預補充糾正，一方面是為了可視化低成本幹預生成高可用代碼，另一方面這些幹預後的資料就是标注樣本，反哺提升智能識别的準确率。
- 表達能力：主要做資料輸出以及對工程部分接入
- 通過 DSL 适配将标準的結構化描述做 Schema2Code
- 通過 IDE 插件能力做工程接入
- 算法工程：為了更好的支撐 D2C 需要的智能化能力，将高頻能力服務化，主要包含資料生成處理、模型服務部分
- 樣本生成：主要處理各管道來源樣本資料并生成樣本
- 模型服務：主要提供模型 API 封裝服務以及資料回流
（前端智能化 D2C 能力概要分層）
在整個方案裡，我們用同一套 資料協定規範（D2C Schema）來連接配接各層的能力，確定其中的識别能夠映射到具體對應的字段上，在表達階段也能正确地通過出碼引擎等方案生成代碼。
智能識别技術分層
在整個 D2C 項目中，最核心的是上述識别能力部分的 機器智能識别 部分，這層的具體再分解如下，後續系列文章會圍繞這些細分的分層展開内部實作原理。
- 物料識别層：主要通過圖像識别能力識别圖像中的物料（子產品識别、原子子產品識别、基礎元件識别、業務元件識别）。
- 圖層處理層：主要将設計稿或者圖像中圖層進行分離處理，并結合上一層的識别結果，整理好圖層元資訊。
- 圖層再加工層：對圖層處理層的圖層資料做進一步的規範化處理。
- 布局算法層：轉換二維中的絕對定位圖層布局為相對定位和 Flex 布局。
- 語義化層：通過圖層的多元特征對圖層在生成代碼端做語義化表達。
- 字段綁定層：對圖層裡的靜态資料結合資料接口做接口動态資料字段綁定映射。
- 業務邏輯層：對已配置的業務邏輯通過業務邏輯識别和表達器來生成業務邏輯代碼協定。
- 出碼引擎層：最後輸出經過各層智能化處理好的代碼協定，經過表達能力（協定轉代碼的引擎）輸出各種 DSL 代碼。
（D2C 識别能力技術分層）
技術痛點
當然，這其中的 識别不全面、識别準确度不高 一直是 D2C 老生常談的話題，也是我們的核心技術痛點。我們嘗試從這幾個角度來分析引起這個問題的因素：
- 識别問題定義不準确：問題定義不準确是影響模型識别不準的首要因素，很多人認為樣本和模型是主要因素，但在這之前，可能一開始的對問題的定義就出現了問題，我們需要判斷我們的識别訴求模型是否合适做，如果合适那該怎麼定義清楚這裡面的規則等。
- 高品質的資料集樣本缺乏：我們在識别層的各個機器智能識别能力需要依賴不同的樣本，那我們的樣本能覆寫多少前端開發場景，各個場景的樣本資料品質怎麼樣，資料标準是否統一，特征工程處理是否統一，樣本是否存在二義性，互通性如何，這是我們當下所面臨的問題。
- 模型召回低、存在誤判：我們往往會在樣本裡堆積許多不同場景下不同種類的樣本作為訓練，期望通過一個模型來解決所有的識别問題，但這卻往往會讓模型的部分分類召回率低，對于一些有二義性的分類也會存在誤判。
問題定義
深度學習裡的計算機視覺類模型目前比較适合解決的是分類問題和目标檢測問題，我們判斷一個識别問題是否該使用深度模型的前提是——我們自己是否能夠判斷和了解，這類問題是否有二義性等，如果人也無法準确地判斷，那麼這個識别問題可能就不太合适。
假如判斷适合用深度學習的分類來做，那就需要繼續定義清楚所有的分類，這些分類之間需要嚴謹、有排他性、可完整枚舉。比如在做圖檔的語義化這個命題的時候，一般圖檔的 ClassName 通用正常命名有哪些，舉個例子，其分析過程如下：
- 第一步：盡可能多地找出相關的設計稿，一個個枚舉裡面的圖檔類型。
- 第二步：對圖檔類型進行合理歸納歸類，這是最容易有争論的地方，定義不好有二義性會導緻最有模型準确度問題。
- 第三步：分析每類圖檔的特征，這些特征是否典型，是否是最核心的特征點，因為關系到後續模型的推理泛化能力。
- 第四步：每類圖檔的資料樣本來源是否有，沒有的話能否自動造；如果資料樣本無法有，那就不适合用模型，可以改用算法規則等方式替代先看效果。
D2C 項目中很多這樣的問題，問題本身的定義需要非常精準，并且需要有科學的參考依據，這一點本身就比較難，因為沒有可借鑒的先例，隻能先用已知的經驗先試用，使用者測試有問題後再修正，這是一個需要持續疊代持續完善的痛點。
樣本品質
針對 樣本 問題，我們需要對這部分資料集建立标準規範，分場景建構多元度的資料集，将收集的資料做統一的處理和提供，并以此期望能建立一套規範的資料體系。
在這套體系中，我們使用統一的樣本資料存儲格式，提供統一的針對不同問題（分類、目标檢測）的樣本評估工具來評估各項資料集的品質，針對部分特定模型可采取效果較好的特征工程（歸一化、邊緣放大等）來處理，同類問題的樣本也期望能在後續不同的模型裡能夠流通作比較，來評估不同模型的準确度和效率。
（資料樣本工程體系）
模型
針對模型的召回和誤判問題，我們嘗試 收斂場景來提高準确度。往往不同場景下的樣本會存在一些特征上的相似點或者影響部分分類局部關鍵特征點，導緻産生誤判、召回低，我們期望能夠通過收斂場景來做模式化的識别，提高模型準确度。我們把場景收斂到如下三個場景：無線 C 端營銷頻道場景、小程式場景以及 PC 中背景場景。這裡面幾個場景的設計模式都有自己的特色，針對各個場景來設計垂直的識别模型可以高效地提高單一場景的識别準确度。
（D2C 場景）
過程思考
既然使用了深度模型，有一個比較現實的問題是，模型的泛化能力不夠，識别的準确率必然不能 100% 讓使用者滿意，除了能夠在後續不斷地補充這批識别不到的樣本資料外，在這之前我們能做什麼？
在 D2C 的整個還原鍊路裡，對于識别模型，我們還遵守一個方法論，即設計一套協定或者規則能通過其他方式來兜底深度模型的識别效果，保障在模型識别不準确的情況下使用者仍可完成訴求：手動約定 > 規則政策 > 機器學習 > 深度模型。舉個例子比如需要識别設計稿裡的一個循環體：
- 初期，我們可以在設計稿裡手動約定循環體的協定來達成
- 根據圖層的上下文資訊可做一些規則的判斷，來判斷是否是循環體
- 利用機器學習的圖層特征，可嘗試做規則政策的更上遊的政策優化
- 生成循環體的一些正負樣本來通過深度模型進行學習
其中手動約定的設計稿協定解析優先級最高，這樣也能確定後續的流程不受阻塞和錯誤識别的幹擾。
業務落地
2019 雙十一落地
在今年的雙十一場景中，我們的 D2C 覆寫了天貓淘寶會場的新增子產品，包括主會場、行業會場、營銷玩法會場、榜單會場等，包含了視圖代碼和部分邏輯代碼的自動生成，在可統計範圍内，D2C 代碼生成占據了大比例。目前代碼的人工改動的主要原因有：全新業務邏輯、動畫、字段綁定猜測錯誤（字段标準化情況不佳）、循環猜測錯誤、樣式自适應修改等，這些問題也都是接下來需要逐漸完善的。
（D2C 代碼生成使用者更改情況）
整體落地情況
我們對外的産品
，截止 2019.11.09 日，相關的使用資料情況如下：
- 子產品數 12681 個， 周新增 540 個左右；
- 使用者數 4315 個，周新增 150 個左右；
- 自定義DSL：總數 109 個；
目前可提供的服務能力如下：
- 設計稿全鍊路還原 ：通過 Sketch、PhotoShop 插件一鍵導出設計稿圖層，生成自定義的 DSL 代碼。
- 圖像鍊路還原 ：支援使用者自定義上傳圖檔、檔案或填寫圖檔連結，直接還原生成自定義的 DSL 代碼。
後續規劃
- 繼續降低設計稿要求，争取設計稿 0 協定，其中分組、循環的智能識别準确度提升，減少視覺稿協定的人工幹預成本。
- 元件識别準确度提升，目前隻有 72% 的準确度，業務應用可用率低。
- 頁面級和項目級還原能力可用率提升，依賴頁面分割能力的準确度提升。
- 小程式、中背景等領域的頁面級還原能力提升，含複雜表單、表格、圖表的整體還原能力。
- 靜态圖檔生成代碼鍊路可用度提升，真正可用于生産環境。
- 算法工程産品完善，樣本生成管道更多元，樣本集更豐富。
- D2C 能力開源。
未來我們希望能通過前端智能化 D2C 項目，讓前端智能化技術方案普惠化，沉澱更具競争力的樣本和模型，提供準确度更高、可用度更高的代碼智能生成服務；切實提高前端研發效率，減少簡單的重複性工作，不加班少加班，一起專注更有挑戰性的工作内容！