AI 聯動！現在前端都流行這樣開發~ 效率提升 100%

大家好，我是 零一 ，在你的業務中有沒有遇到很多跟 營銷活動 相關的需求，一般這種需求有以下幾個特點：

1. 頁面邏輯簡單

2. 頁面樣式風格不統一

3. 反覆性

儘管這些需求頁面結構簡單、邏輯不復雜，但也扛不住一星期寫一個這樣的需求，因為是個人都會覺得沒有挑戰性，畢竟只是 切圖 、 寫樣式 、 加個跳轉按鈕 的事情

其實像這樣的開發流程，已經有一套成熟的方案去解決了，那就是 設計稿智能生成源代碼 ，它幫你省去了 切圖 和 寫樣式 的流程，你僅僅只需要關注頁面中一些按鈕點擊後要幹什麼即可。甚至連 UI走查 的步驟都可以省去了，因為頁面本身就是根據 UI 提供的設計稿還原生成的

這種開發方式在我們公司內部也已經推行很久了，確實節省了不少時間，今天給大家來演示一下這整套流程，一步步帶你們體驗~

因為沒辦法拿公司內的平台給大家演示，所以給大家推薦一個業界的設計稿智能生成源代碼工具 —— CodeFun ，本文也用該工具給大家演示

先放一下該工具的網址，感興趣的可以跟着我一步步嘗試

CodeFun：http://code.fun/

前置工作

進到該網站並進行登錄以後，可以先創建一個項目

然後選擇一種方式導入我們的設計稿，CodeFun 支持通過插件將一些 UI設計平台 的設計稿導入。因為我平時用 Fgima 比較多，所以我在社區找了一套設計稿來做演示

安裝好插件後，我們進入到設計稿中，選擇我們想要生成的頁面，然後點擊菜單中的 Plugin，找到 CodeFun 插件

然後選擇將該設計稿生成的頁面導入到剛才我們創建好的項目中

2s 就上傳好了

然後我們點擊 "查看項目" 去看看。可以看到剛才設計稿中頁面幾乎是 1:1 還原出來了，而且從左側的 DOM 結構來看，層級也非常清晰

藉助 CodeFun 提供的 預覽功能 ，我們看下放到瀏覽器裏是什麼樣的效果

生成以後就會得到一個預覽鏈接，點擊後即可查看

整體看下來一點問題都沒有，還原度非常得高~

開始使用

不是説設計稿還原代碼嗎？怎麼還原出來的是個頁面？別急，這個頁面背後對應的代碼也早已經自動生成了，我們可以點擊右上角的 "查看代碼"

我們也可以自己的技術棧選擇不同框架的代碼，目前支持的有 微信小程序 、 uni-app 、 Vue 、 Taro 、 React 、 原生html

本文就以 React 的為例，我們將該頁面對應的代碼下載下來，添加一些額外的邏輯

因為頁面中還有一個 " Buy " 的按鈕，點擊以後我們希望直接跳轉到蘋果官網的 iPhone14 購買頁，因此我們在按鈕元素上加個跳轉邏輯

然後本地再跑一下頁面，看下邏輯有沒有問題

漂亮！沒問題了，然後該咋上線就咋上線！

像這樣的簡化流程，全程不需要寫切圖、佈局、寫樣式，上線營銷頁面不就是 有手就行 嗎？

進階使用

大家可能覺得剛才的頁面比較簡單，沒法體現這個工具的優勢，接下來拿個稍微複雜一些的頁面給大家舉例子，並展示一些其它功能。

我隨便在 Figma 社區找了一個列表頁面，接下來用 CodeFun 插件將它生成代碼

循環列表

查看左側的 DOM 結構，發現 CodeFun 在還原設計稿時，還通過 AI 只能識別了列表元素，並對其進行了標記，這種結構在我們代碼裏就是通過一個數組去遍歷渲染的，看看它生成的代碼是否也是這樣

果然是通過 map 遍歷生成的，不過有個問題就是當前生成的數據都是靜態的

所以我們可以手動對列表元素裏的單一內容命名一下，使其變成動態數據

點擊上方工具欄裏的 " 數據綁定 "

我們能看到 List 列表內的每個小元素都可以對其進行命名，因為 ListItem 結構統一，所以我們只需要對 ListItem-1 進行命名即可

命名完成並保存後，我們來看下對應的代碼變成了什麼樣子

這樣一來，數據就全變成動態的，是不是非常智能？

行為

另外，我看到這個頁面頂部有一個 " 返回 " 的按鈕，點擊以後的行為肯定是返回上一個頁面，對此 CodeFun 也提供了對應的行為給我們，可以直接在這個元素上添加返回到上一個頁面的行為

組件化

在預覽頁面時，我發現頁面中按鈕的點擊非常生硬，比如點擊以後一點反饋都沒有

我們知道很多組件庫都有交互反饋，比如按鈕組件，點擊以後會有點擊了的效果，CodeFun 其實也給我們提供了組件化的功能，既支持我們自定義組件，也支持使用 npm 包的組件庫

而且默認也支持了一些原生組件和三方組件，這裏我們就拿 Vue 框架的 vant2 組件庫來舉例子吧

在將對應的元素標記了 vant2 的 Button 組件後，右側就可以對組件的各種屬性進行設置了，屬性的使用方式就跟 vant2 組件庫的一致，因此我們可以去官網看使用方式

簡單填寫了一下組件屬性

看下標記組件後的效果吧

可以看到，我們的按鈕已經有交互的反饋效果了

總結

相信做前端的同學，哪一個也不想一直只做切圖仔，如果本文介紹的 UI 設計稿智能生成代碼 有戳中你的痛點，可以嘗試引入到自己的工作中，看看是否能幫你釋放大量的人力，讓你有更多的時間聚焦到業務邏輯中，把大部分的頁面都交給AI工具。

市面上已經有很多的同學都開始嘗試 UI 設計稿智能生成代碼了（包括我），如果你對這套方案還有什麼疑問，想跟大家交流的，可以進羣跟大家進行互動~ :point_down: