不知道大家還記不記得，幾年前媒體熱炒 AI 會取代你的工作。這一天終於來了。不過別緊張，歸根結底 AI 只能是一種幫你提高效率的工具。如果你覺得這個工具好用，並對其技術原理感興趣，可以在文末找到本號三年前的一篇舊文連結，終於有人把這個技術做成產品了。
背景
將設計稿轉程式碼是前端工程師日常不斷重複的工作，這部分工作複雜度較低但工作佔比較高，往往又比較枯燥繁瑣，有時候開發迭代週期短，靜態頁面又多，常常讓有些前端開發苦不堪言！
那麼，有沒有一款設計稿自動生成程式碼的工具，減少前端工程師的工作量，提升開發效率？
本文推薦一款前端程式碼自動生成的神器CodeFun，能夠完美生成可讀性很高的程式碼，目前支援微信小程式端、移動端H5和混合APP等。也就是說，透過這款工具，設計師再也不用還原走查了，測試再也不用適配樣式了，前端開發再也不用切圖寫樣式了，這不就是我們期待已久的神器嗎？
CodeFun簡要介紹1、CodeFun是什麼
CodeFun 是一款
UI
設計稿智慧生成原始碼的工具
，我們可以上傳 Sketch、PSD等形式的設計稿，透過智慧化技術一鍵生成可維護的前端程式碼，包含檢視程式碼、資料欄位繫結、元件程式碼、部分業務邏輯程式碼。
在對設計稿輕約束的前提下實現高度還原，釋放前端生產力，助力前端與設計師高效協作，讓前端工程師關注更具挑戰性的事情。在日常工作中，諸如像扣畫素、調佈局這些繁瑣、枯燥的體力活都將得到極大的削減，原來 8 小時的工作量只需要 10 來分鐘即可完成。
2、生成的程式碼是否會很難維護？
可能有人會質疑它生成的程式碼可讀性，實際上生成的程式碼約等於一箇中級工程師的前端水準。CodeFun 基於盒子模型的響應式佈局和迴圈列表、九宮格等語義識別技術，可以生成如工程師手寫一般的程式碼，精準還原設計稿，大幅度幫助前端工程師從繁瑣的頁面切圖中拯救出來！該工具還在不斷迭代進化中，日臻完善！
3、學習成本高嗎？
對於前端工程師來說，
幾乎沒有學習成本
。
對於用慣了藍湖/摹客的前端工程師來說，CodeFun使用流程與前者幾乎一致：設計師上傳完稿件後，工程師開啟介面，選擇任意需要的 UI 區域複製走想要的程式碼即可，只是從原來看標註變成了直接複製程式碼。
對於設計師來說，
完全不需要遵循某些設計規範。
CodeFun 演算法的識別過程並不依賴於設計稿中任何的手工標註、特殊編組或特定規範，所以設計師按照原有的流程和設計風格正常輸出即可，零新增工作量、零學習成本。
如何使用 CodeFun 將設計稿變為前端程式碼
這部分主要給大家介紹如何在 1 分鐘內將設計稿轉換為小程式原始碼，這部分內容將上傳 Sketch 設計稿的流程作為範本介紹，PSD設計稿還處於內測階段。
CodeFun 的使用流程只有 3 個步驟：
在 Sketch 外掛中上傳設計稿
在 CodeFun 工具中檢視程式碼
將生成的程式碼複製到自己已有的工程中即可
1、安裝 Sketch 外掛
在CodeFun官網註冊好賬號後，登陸CodeFun後在使用者選單中下載外掛。
下載然後解壓，雙擊圖片進行安裝。
在安裝外掛之前，請確保系統中已經裝好 Sketch 。由於 Sketch 只支援 MacOs，所以外掛端需要在 MacOs 中操作。使用的 Sketch 的版本建議在 60。0 以上，否則外掛可能無法正常工作。
接著，開啟 Sketch，外掛選單中出現 CodeFun 選項，安裝完成。
2、上傳設計稿
載入一份 Sketch 設計稿（下載示例設計稿），然後外掛選單中開啟 CodeFun 外掛介面
Sketch 選單 > 外掛 > CodeFun > 上傳設計稿
在外掛上登陸賬號，透過外掛建立一個專案，然後選擇專案和上傳頁面。
選擇專案，表示當前上傳的頁面將放置到指定的專案中，這裡選擇剛剛建立的 “前端智慧化codefun” 專案；
選擇上傳的頁面，可以選擇單張或上傳全部頁面。
回到 CodeFun 工具介面，看到剛才上傳的頁面。
3、獲取程式碼
使用者在上傳完設計稿後，有兩種獲取程式碼的方式：
區域提取程式碼
整站打包下載
整站打包下載的方式相對來說比較簡單，這裡主要介紹區域提取程式碼，這種方式也是我們比較推崇的，使用者可以根據自己的需求，複製任意區域的程式碼到自己已有的工程專案中。
我們選擇 CodeFun 設計稿，進入詳情頁，如圖所示：
詳情頁總體分為左中右三部分
左邊欄顯示文件樹，後文稱 Dom Tree，該樹結構跟 HTML 的樹結構保持一致
中間是畫布區域，可以用於選擇元素物件
右邊欄是被選節點的屬性面板，用於展示樣式屬性、互動配置和元件配置
點選頂部工具欄右上角的檢視程式碼按鈕，開啟程式碼面板
程式碼面板中預設展示 4 列，分別展示 HTML、CSS、JS 和全域性樣式的程式碼。
第一次開啟時，會預設展示設定面板，如果不做任何修改，那麼檢視到的是小程式平臺的原生程式碼。
依次點選複製按鈕，很方便地將程式碼複製到系統的貼上板中。
開啟小程式開發工具，分別將這四部分程式碼貼上到小程式相應的檔案中，這樣就可以整頁提取程式碼，但有時候頁面中會遇到類似“Tab 標籤頁”、“Swipe 輪播”等互動式元件時，自動生成的整頁程式碼並不能支援互動，此時我們就需要
區域提取程式碼
功能，複製我們想要區域的程式碼到已有的工程專案中。
點選 Dom 樹或者畫布上的任意節點，可以觀察到程式碼視窗的程式碼會發生變化，這正是 CodeFun 最重要的區域提供功能。
注意：當點選畫布的空白區域時，Dom 樹和畫板都不再選中任何節點，此時程式碼視窗將顯示整頁程式碼。
目前CodeFun元件化功能尚在開發中，如果頁面中遇到互動式元件，我們不妨先採用下區域提取程式碼方式。
事實上，CodeFun這款工具還有很多進階功能，比如提供編組解組、區域切圖等功能，限於文章篇幅，不再一一展開說明，想了解更多可以檢視官方文件。
總結
當我們聊 UI 設計稿智慧生成程式碼的工具時，關心的不僅僅是 UI 的還原度，也關心生成的程式碼是否合理、可維護，如果生成的程式碼屬於不可讀不可維護的快餐程式碼，開發使用時還需要對生成的程式碼進一步修改和調整，那這樣工具估計會被束之高閣！
然而我們這款CodeFun工具不僅可以高度還原各種UI頁面，關鍵是生成程式碼易於維護，將日常工作中的繁瑣且耗時的靜態頁面交給它來智慧化生成程式碼，釋放前端開發者生產力，把省下來的精力聚焦在真正的業務邏輯上！做前端，不搬磚！
看到這裡，是不是很激動！
經過多次內測，我們終於開放公測版本
點選官網連結
https：//code。fun
掃下方二維碼使用
關於這個神器背後的原理，大家可以看這篇三年前的舊文：
