手把手教你D2C,走向前端智慧型化

2021-09-25 17:50:53 字數 2325 閱讀 5376

這幾年來 ai 來勢洶洶,在部分領域應用也逐漸成熟。前端發展至今,我們也有許多成熟的前端解決方案**,有大量的設計稿,我們是否能夠結合智慧型化的能力將乙個 design 變成乙個 code (設計轉**,簡稱 d2c)來提效,讓前端從乙個資源型的角色中解放出來將精力投入到前端其他專業領域?** d2c 智慧型團隊這兩年圍繞這個方向也做了許多的探索,最終將 d2c 的能力都承載到了 imgcook 這個產品上。

更多資訊

imgcook使用指南:

imgcook 是專注以各種影象(sketch/psd/靜態)為原材料烹飪的匠心大廚,通過智慧型化手段將各種影象一鍵生成可維護的 ui 檢視**,期望此 imgcook (影象大廚) 未來能夠成為一位 p5 級別的重構工程師,能切實提高開發的開發效率,並助力開發、設計師、測試的高效協作,我們期望做到:

願景:能夠高度還原各種影象,釋放 ui 開發生產力,讓你關注更具挑戰性的事情!

對於 ui 還原而言,早在很多年前,類似的從設計稿中還原生成靜態 ui 場景的解決方案也都湧現過,比如一些設計稿標註工具(如marketch),又或者說目前的一些視覺化建站平台也都能夠在搭建完後直接產出線上頁面,那麼 imgcook 的優勢體現在哪?

我們回到 ui 還原主題上,當我們說影象生成**的時候,我們關心的不僅僅是生成 ui 的還原度,也關心生成的**是否合理、可維護,如果生成的**屬於不可讀不可維護的快餐**,開發使用上再對其進行二次開發就會顯得極為艱難,而往往後者的難度相比前者更甚,如果需要在生產環境中使用,這個問題就無法避免。

對此,imgcook 的定位就在於解決 ui 還原以及生成可維護**的問題。

▐ 設計稿無約束+高還原

對於 ui 還原,目前比較常見的場景是從設計工具(比如sketch、ps)入手。但比較不如意的是,設計師交付的設計稿裡所帶的結構化資訊往往是雜亂無章的,如果需要精確得解析乙個設計稿裡某個模組的結構化資料,往往又需要跟設計師進行合作,規範設計稿中的設計以及制定一些約束來進行使用,這會增加一定程度上的使用成本。

imgcook 為了解決這個問題,目前在對設計稿的解析上做了一些智慧型化的處理,去除了對設計師圖層設計規範這塊的依賴(當然對於良好的設計規範會讓還原效果更甚!),只保留了一項開發人員可能使用到的規範來做 ui 還原。

▐ 生成可維護**

對於可維護性**的問題,imgcook 會對還原後的 ui 在**層面上生成目前使用比較廣泛的 flexbox 布局以及相對定位布局,在一些自定義的命名上(比如樣式命名),imgcook 也會根據開發者的習慣生成更加人性化的命名。

imgcook 目前對外的體驗版裡,開放了針對 sketch 設計稿和 psd 設計稿的還原外掛程式,以 sketch 為例,整體的匯出流程如下:

1. 外掛程式匯出模組

在使用 sketch 外掛程式進行還原的時候,可選中乙個模組外層的容器節點(畫板、group或者symbol)來進行匯出。

2. 貼上還原

模組匯出完畢後,可前往 imgcook 平台進行貼上還原。

3. 儲存查閱**

檢查模組還原 ui 以及左側的布局結構無誤後,可進行儲存->查閱**,目前對外的體驗版中 imgcook 提供了幾種可選擇的 dsl 進行**生成,對於每個 dsl,可在右側的 playground 裡檢視具體執行的效果。

imgcook 的誕生源於業務,也最終服務於業務。

面向未來,imgcook 還在深耕更多的 ui 識別能力,諸如 input/table/select 等前端基礎控制項識別、業界流行的 antd/fusion 等前端元件庫識別,甚至可以為垂直業務定製獨特的業務元件的識別能力,我們希望 imgcook 能真正給前端帶來更多的提性能力。

手把手教你OA選型

oa選型永遠是oa行業的重要焦點,在選型問題上困擾了很多客戶,雲全oa從這幾個方面教你如何選型。了解研發技術 技術是硬道理。只有過關的技術才會研發出過硬的產品。如果技術不過關,後期將會帶來一系列的問題。同時需要考慮技術的先進性。在現如今社會發展日新月異,今天還遙遙領先的管理模式也許明天就會被淘汰。所...

手把手教你玩轉git

使用以上來寫git命令。mkdir xx 建立乙個空目錄 xx指目錄名 pwd 顯示當前目錄的路徑。git init 把當前的目錄變成可以管理的git倉庫,生成隱藏.git檔案。git add xx 把xx檔案新增到暫存區去。git commit m xx 提交檔案 m 後面的是注釋。git sta...

npm發布 手把手教你

註冊完畢,回到我們的電腦。windows直接cmd到命令列 輸入以下命令,會提示輸入使用者名稱 密碼 郵箱,這些都是註冊時填寫過的。發布之前首先準備 手動建立乙個命名為lib的資料夾,手動建立index.js package.sjon和typing.d.ts文件,建立完成之後就開始下一步,向裡面新增...