求求别再叫我切圖仔了，我是前端開發！

☀️ 前言

• 大家好我是小盧，前幾天在群裡見到有群友抱怨一周内要完成這麼一個大概​

  ​20～30​

  ​頁的小程式。

• 群友: 這​

  ​20​

  ​多個頁面一個星期讓我開發完，我是不相信😮‍💨。
• 群友1: 跑吧，這公司留着沒用了，不然就隻有自己加班。
• 群友2: 沒有耕壞的田，隻有累死的牛啊，老哥！🐮。
• 群友3: 用​

  ​CodeFun​

  ​啊，分分鐘解決你這種外包需求。
• 群友2: 對喔！可以試一下​

  ​CodeFun​

  ​，省下來的時間開黑去。

• 在我印象中智能生成頁面代碼的工具一般都不這麼智能，我抱着懷疑的心态去調研了一下​

  ​CodeFun​

  ​看看是不是群友們說的這麼神奇，試用了過後發現确實挺強大的，是以這次借此機會分享給大家。

🤔 什麼是 CodeFun

• 大部分公司中我們前端現在的開發工作流大概是下面這幾步。

• 一般會有​

  ​UI​

  ​先根據産品提供的原型圖産出設計稿。
• 前端根據設計稿上的标注（大小,邊距等）進行編寫代碼來開發。
• 開發完後需要給​

  ​UI​

  ​​走查來确認是不是​

  ​他/她​

  ​想要的效果。
• 如果發現有問題之後又繼續重複上面的工作->修改樣式->走查。

• 我們做前端的都知道，重複的東西都可以封裝成元件來複用，而上面這種重複的勞作是我們最不想去做的。
• 但是因為設計圖的精細可能有時候會有​

  ​1px​

  ​​的差異就會讓​

  ​産品​

  ​​、​

  ​UI​

  ​打回重新編寫代碼的情況，久而久之就嚴重影響了開發效率。
• 我時常會有這麼一種疑惑，明明設計稿上都有​

  ​樣式了​

  ​​,為什麼還要我重新手寫一遍呢？那麼有沒有一種可能我們可以直接通過​

  ​設計稿​

  ​就自動生成代碼呢？
• 有的！通過我的調研過後發現，發現确實​

  ​CodeFun​

  ​在同類産品中更好的解決了我遇到的問題。

• ​

  ​CodeFun​

  ​​是一款​

  ​UI​

  ​​ 設計稿智能生成源代碼的工具，可以将​

  ​Sketch​

  ​​、​

  ​Photoshop​

  ​​、​

  ​Figma​

  ​ 的設計稿智能轉換為前端源代碼。
• 8 小時工作量，10 分鐘完成是它的​

  ​slogan​

  ​​,它可以精準還原設計稿，不再需要反複​

  ​UI​

  ​​ 走查，我覺得在使用​

  ​CodeFun​

  ​後可以極大地程度減少工作流的複雜度，讓我們的工作流變成以下這樣：

• ​

  ​UI​

  ​設計稿産出。
• ​

  ​CodeFun​

  ​産出代碼，前端開發略微修改傳遞。

🖥 CodeFun 如何使用

• 接下來我就示範一下如何快速的根據設計稿來産出前端代碼，首先我們拿到一個設計稿，這裡我就在網上搜了一套​

  ​Figma​

  ​的設計稿來示範。
• 我們在​

  ​Figma​

  ​​中安裝了一個​

  ​CodeFun​

  ​​的插件，選擇對應​

  ​CodeFun​

  ​​的項目後點選上傳可以看到很輕松的就傳到我們的​

  ​CodeFun​

  ​​項目中，當然除了​

  ​Figama​

  ​​，​

  ​CodeFun​

  ​​還支援​

  ​Sketch​

  ​​,​

  ​PSD​

  ​​,​

  ​即時設計​

  ​等設計稿。



• 我們随便進入一個頁面，引入眼簾的是中間的設計稿，而在左側的清單相當于這個頁面的節點，而我們點選一下右上角的生成代碼可以看到它通過自己的算法很智能的生成了代碼。



• 我上面選擇生成的是​

  ​React​

  ​​的代碼，當然啦，他還有很多種選擇​

  ​微信小程式​

  ​​、​

  ​Vue​

  ​​、​

  ​uni-app​

  ​​等等等等，簡直就是多端項目的福音！不止是架構，連​

  ​Css​

  ​預處理器都可以選擇适合自己的。



• 将生成的代碼複制到編輯器中運作，可以看到對于簡單的頁面完全不用動腦子，直接就渲染出來我們想要的效果了，如果是很複雜的頁面進行一些微調即可，是不是很友善嘿嘿。



• ​

  ​CodeFun​

  ​​不管是根據你選擇的子產品進行生成代碼還是整頁生成代碼使用者進行複制使用之外，它還提供了代碼包下載下傳功能，在下載下傳界面可以選擇​

  ​不同頁面​

  ​​,​

  ​不同架構​

  ​​,​

  ​不同Css預處理器​

  ​​,​

  ​不同像素機關​

  ​。
• 如果是​

  ​React​

  ​相關甚至還會幫你把腳手架搭建好，直接下載下傳安裝依賴使用即可，有點牛呀。

🔥 CodeFun 好在哪

• 筆者在這之前覺得想象中的​

  ​AI​

  ​生成前端代碼的功能一直都挺簡陋，用起來不會到達我的預期，到底能不能解決我的痛點，其實我是有以下固有思想的：

• 生成代碼就是很簡單的幫你把​

  ​Html​

  ​​、​

  ​Css​

  ​寫完嘛但是我們不同架構又不能生成。
• 生成代碼的變量名肯定不好看。
• 生成的代碼肯定固定了寬高，不同的手機端看的效果會差很多。
• 平時習慣了​

  ​v-for​

  ​​,​

  ​wx:for​

  ​​,​

  ​map​

  ​周遊清單，這種生成代碼肯定全部給你平鋪出來吧。

• 但是當我使用過​

  ​CodeFun​

  ​​之後發現确實他可以解決我們很多的重複編寫前端頁面代碼的場景，而且也打消了我對這類​

  ​AI​

  ​​生成前端頁面代碼功能的一些固有思想，就如它的​

  ​slogan​

  ​​所說：​

  ​8 小時工作量，10 分鐘完成​

  ​。

多平台、多架構支援

• 支援​

  ​Vue​

  ​​ 等主流​

  ​Web​

  ​ 開發架構代碼輸出。
• 支援微信小程式代碼輸出，當你選擇小程式代碼輸出時，像素機關會新增一個​

  ​rpx​

  ​的選項供大家選擇。
• 使用最簡單的複制代碼功能，我們可以快速的将我們想要的樣式複制到我們的項目中進行使用 。
• 筆者在使用的過程中一直很好奇下載下傳代碼的功能，如果我選擇了​

  ​React​

  ​難不成還會給我自動生成腳手架？結果一試，還真給我生成了腳手架，隻需要安裝依賴即可，可以說是很貼心了～。

循環清單自動輸出

• 我們平時在寫一個清單元件的時候都喜歡使用​

  ​v-for​

  ​​,​

  ​wx:for​

  ​​,​

  ​map​

  ​​等周遊輸出清單，而​

  ​CodeFun​

  ​也做到了這種代碼的生成。
• ​

  ​CodeFun​

  ​​在導入設計稿的時候會自動識别哪些是​

  ​list​

  ​​元件，當然你也可以手動标記元件為​

  ​List​

  ​。
• 然後再開啟​

  ​“将 List 标簽輸出為循環清單”​

  ​選項即可自動根據目前選擇的架構生成對應的循環周遊文法，确實是很智能了～

批量資料綁定

• 在我們平時​

  ​Coding​

  ​的過程中都不會把資料寫死，而是用變量來代替進行動态渲染，而​

  ​CodeFun​

  ​支援批量資料綁定功能，我們可以把任何在頁面中看到的元素進行資料綁定和命名修改
• 就拿上面的循環清單舉例吧，在我們一開始識别的​

  ​Html​

  ​中，周遊循環了一個​

  ​typeCards​

  ​數組，每一個都展示對應的資訊，我們可以看到這裡一開始是寫死的，而我們平時寫的時候會将它用變量替代。



• 我們隻需要點選右上角的資料綁定進行可視化修改即可，我們可以看到它的全部寫法都改成了變量動态渲染，這就很符合我們平時編碼的套路了。

一鍵預覽功能

• 有很多同學回報在之前做小程式的情況下需要将代碼編寫完整并跑起來的情況下，使用微信的預覽功能才可以看到效果，會比較繁瑣。
• 而​

  ​CodeFun​

  ​支援直接預覽，當我們導入設計稿後，選擇右上角的預覽功能可以直接生成小程式二維碼掃碼即可進行預覽，好贊！。

更加舒适的“生成代碼”

• 在​

  ​CodeFun​

  ​生成的代碼中是會讓人看起來比較舒适的。

• 變量名可讀性會比較強。
• 布局一般不會固定死寬高，而是使用​

  ​padding​

  ​等屬性來自适應螢幕百分比。
• 自動處理設計稿中的無用圖層、不可見元素、錯誤的編組乃至不合理的文字排列。
• 全智能切圖，自動分離背景圖層、圖示元素。

✍🏻 一些思考與建議

• 前端開發不僅僅是一個切圖的工具人，如果你一直局限于視圖的表現的時候，你的前端水準也就是​

  ​curd​

  ​​工程師的水準了，我們前端更多的要深入一些​

  ​性能優化​

  ​​，​

  ​前端插件封裝​

  ​等等有意思的事情🙋🏻。
• 總之如果你想你的前端水準要更加精進的情況下，可以減少一些在頁面上的投入時間，現在的工具越來越成熟，而這些切圖工作完全可以交給現有的工具去幫助你完成。
• 在使用體驗上來說，​

  ​CodeFun​

  ​​确實可以解決大部分切圖功能，減少大家進行切圖的工作時間，大家可以去試一下～但是肯定會有一些小細節不符合自己的想法，表示了解吧，畢竟​

  ​AI​

  ​​智能生成代碼能做成​

  ​CodeFun​

  ​這種水準已經很厲害了👍🏻。
• 在使用建議上來說，我建議大家可以把​

  ​CodeFun​

  ​​當成一個助手，而不要完全依賴，過度依賴，去找到更合适自己使用​

  ​CodeFun​

  ​的使用方法可以大量減少開發時間進而去做👉🏻更有意義的事情。
• 很多人會很排斥，覺得沒自己寫的好，但是時代已經變啦～我還是那句話，所有東西都是一個輔助，一個工具，它提供了這些優質的功能而使用的好不好是看使用者本身的，歡迎大家去使用一下​

  ​CodeFun​

  ​～支援國産！！

• 記住我們是前端開發，不是切圖仔！做前端，不搬磚！