Deco 是什麼？—
Deco 智能代碼項目是我們團隊在「前端智能化」方向上的探索，其聚焦設計稿一鍵生成多端代碼這一切入點，實現將 Sketch/Photoshop 等設計稿進行解析並直接生成多端代碼（Taro/React/Vue）的能力。Deco 可以使前端工程師不需要花大量精力關注設計稿，大大節約了開發成本，爲輸出更多的多端頁面提供了有力的支持，也爲業務降本增效帶來了巨大動力。
在過去的一年裏，Deco 已在京東的兩次大促中成功落地，在個性化活動會場的搭建中，研發效率提升達到了 48%。
今天，Deco 外部體驗版正式發佈了！—
過去一段時間裏，Deco 都是面對京東的內部場景，外部無法體驗到 Deco，很多外部用戶向我們表達了對 Deco 的訴求，我們也一直在小本本上記錄每一位用戶反饋的需求。
經過對產品細緻的打磨，今天，我們終於對外發布了第一個 beta 版本！！!
親愛的用戶，請訪問以下鏈接體驗智能代碼（deco-preview.jd.com/[1]）。
保姆級使用指南—
安裝插件
目前 Deco 外部版本僅支持 Sketch 工具，請確保安裝 Deco 插件前，已經安裝了 Sketch 工具。
-
在官網首頁，點擊下載插件
![]()
-
雙擊安裝插件
![]()
-
打開 Sketch 工具，檢查插件安裝情況
在頂部工具欄 ⇒ 插件中出現「Deco」，表示安裝成功，若沒有，則完全退出 Sketch 後重新執行上述步驟，重新打開 Sketch 查看。
![]()
導出數據
-
打開插件
在展開菜單中，點擊「導出數據」。
![]()
-
選擇設計稿畫板或圖層
在 Sketch 選擇設計稿畫板，或某個圖層後，需要點擊一下插件面板，等待插件面板顯示縮略圖和畫板名稱後，點擊「導出數據」。（若未登錄，則會先進入到登錄窗口，登錄完畢後重新導出即可。）
![]()
-
等待數據成功導出
數據成功導出後，點擊按鈕「到工作臺粘貼數據」就可以直接跳轉到工作臺中查看智能還原的佈局和代碼，點擊「返回按鈕」可以繼續上傳其他設計稿模塊。
![]()
工作臺查看
-
進入到個人的工作臺，使用快捷鍵 「Control+V」粘貼原始數據到工作臺
![]()
-
等待加載完成後，即可查看結構及樣式生成的頁面
![]()
-
下載代碼
點擊右上角「下載代碼」按鈕，打開對話框。可以選擇提供的代碼框架，點擊下載則可以獲得對應框架的代碼包。
未來計劃
由於時間比較緊張，很多功能還來不及對外發布，不過大家不用擔心，更多更強大的功能正在路上！我們將逐步開放 Deco 內部版本的功能，讓 Deco 可以成爲業界開發者的好幫手。
組件識別及自動替換
在實現生成靜態代碼之後，我們基於 AI 算法，實現了對頁面中的已有組件進行識別、定位，並高效映射爲組件庫中的組件，最終解放開發人員的雙手。
覆蓋更多的研發場景
我們還針對研發全流程定製了一個低代碼平臺，功能覆蓋屬性編輯、事件定義、數據綁定、異步數據請求等等功能，覆蓋研發的核心流程，可以實現頁面的一站式開發，降低開發門檻，提升開發效率。
更多—
過往我們編寫了很多相關的技術文章，收到了很多反響，大家可以通過這些文章瞭解到智能代碼背後的技術實現。
設計稿一鍵生成代碼，研發智能化探索與實踐[2]
助力雙 11 個性化會場高效交付：Deco 智能代碼技術揭祕
相關鏈接
—
deco-preview.jd.com/: https://deco-preview.jd.com/
[2]設計稿一鍵生成代碼，研發智能化探索與實踐: https://jelly.jd.com/article/61a6eb9f2a070818620bac2e
本文分享自微信公衆號 - 凹凸實驗室（AOTULabs）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。