業務方特別着急，要求在 2 周之內交付一個商場小程序，對方提供了 UI 設計稿。最近工作也比較忙，要趕 618 公司活動，為了掙這個快錢，外包業務方的各種緊逼之下，在網上搜索了一圈，發現了一個網站：CODE.FUN，深入的研究了一下這個平台，看看這到底是何方神聖？官網入口：https://ide.code.fun/u/H0WeAhuu（大家可以複製到電腦瀏覽器打開）UI 設計稿智能生成前端代碼，8 小時工作量，10 分鐘完成。
也就是說，相當於可以直接將項目開發中的 UI 設計稿轉成代碼，前端程序員可以直接拷貝使用，這樣平時大量的頁面工作，全部被它承包，我只需要寫基礎業務邏輯就好了，這實在是太爽了。最重要的是，這個平台支持 Sketch，Psd，Figma 等形式 UI 設計稿，最近還支持了即時設計，正好這次外包等稿子是 PSD 格式，看到這裡已經很忍不住啦。
在構建頁面前，我嘗試測試了幾張設計稿，還是非常 surprise 的。智能生成的前端代碼展示頁面基本可以達到 95% 以上的還原度。在保證設計稿還原度的前提下，CODE.FUN 還提供二次編輯功能，對生成的代碼進行二次優化，比如解組編組，切圖，數據綁定等功能也是非常強大的！首先從代碼結構來看，生成的代碼分層清晰、模塊化正常，無論是相交、相離和包含的位置關係，都能很好的識別出來。其次是樣式類名，該產品採用的是原子化模塊構建標籤樣式。從 dom 結構看每個標籤都添加了不同的類名，但細看代碼發現樣式分為全局樣式和局部樣式，flex 布局採用全局樣式，其他採用局部樣式，這也是最近在大廠非常流行的一種寫法（需要學習的小夥伴可以查看 tailwindcss）。最後，這個平台支持 Sketch，Psd，Figma 等形式 UI 設計稿，最近還支持了即時設計，同時可以導出多端平台代碼，H5，小程序，Vue，React 等。等交付項目後，我也對目前市面上的前端智能化平台做了一下調研，和其他轉代碼平台相比，CODE.FUN 到底有哪些優勢？首先，在設計稿的還原這個最基礎的功能上，目前優於市面甚多同類平台，幾乎能做還原的 100%。在布局識別的準確性來說，CODE.FUN 能進行非常優秀的元素分組規劃以及識別出各種 Flex 布局。當然，AI 也不能萬能的，在 CODE.FUN 生成的代碼裡面，還是有部分「漏網之魚」，有少許不合理的地方。如果「AI 生成一分鐘，手工修改半小時」，那也太得不償失了。因此 CODE.FUN 還提供了非常豐富的「智能工具箱」，用於快速將不合理的代碼修改到幾乎完美的狀態。比如當設計稿比較複雜的時候，對於設計稿中的某些元素，可能因為父子元素坐標「混亂」而導致其可能被按照絕對定位來處理，導致出現一種識別異常的狀態。所以，出現絕對定位的地方是需要"消滅"的，CODE.FUN 目前可以通過重新編解組、手動指定絕對定位元素、區域切圖等多種手段來重新調整該元素與相鄰元素的關係，從而讓其恢復到滿足程序員「心意」的狀態。在代碼的可維護性上，它生成的 CSS 代碼的更加符合我們的手寫邏輯，最近，上新支持了 CSS 在線編輯和可視化編輯，更加友好。最近，他們開放了支持第三方 UI 組件功能，不僅支持一些市面上常見的，還支持和公司自定義組件庫。我們只需要把設計稿上傳到 CODE.FUN 以後，就可以選擇自定義常見組件（輸入框、單選/多選框等）、高級組件（日曆、進度條等），或關聯已有組件，這個功能能夠更快幫我們生產實際的業務代碼。目前，CODE.FUN 官網上還開通了 PC 稿的內測通道，哈哈，想要 1 小時打卡下班的小夥伴，可以去試一下：掃碼加入「PC 稿社群內測」。
說到這，想再和大家嘮嘮，這麼多行業大佬目前都在研發這類工具，由此會不會導致失業？這是最近很多道友在問的話題。首先，個人認為前端智能化是一個大趨勢，技術不可阻擋，難免有些重複的工作會被取代，市場需求減少，但這不意味着失業，而是在一定程度上提效，提高公司的研發效率，提升工作者的工作價值。其次，客觀來講，大家可以實際觀察一下，普通前端程序員的日常開發中，絕大多數的研發業務都是簡單枯燥的重複，這反而是對自己的一個折磨，工具化自動化大大解放了程序員的生產力。對於希望在 35 歲不被淘汰的前端程序員來說，要多提升自己在業務深層次發展的能力，而不是日復一日的做「搬磚活」。好了，今天就先嘮到此處，作為一個技術熱衷者，最後還是推薦大家多體驗一下新技術！下載鏈接：https://ide.code.fun/u/X4hexPhj領取優惠券：https://ide.code.fun/coupon/6315ff4787a1dd0011dd87b0
留言列表