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 智能代碼技術揭秘

超基礎的機器學習入門-原理篇

相關鏈接
—

[1]

deco-preview.jd.com/: https://deco-preview.jd.com/

[2]

設計稿一鍵生成代碼，研發智能化探索與實踐: https://jelly.jd.com/article/61a6eb9f2a070818620bac2e

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助3000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。分享、收藏、點贊、在看我的文章就是對我最大的支持～

總結

以上是生活随笔為你收集整理的Deco 智能代码体验版正式上线啦，快来体验设计稿一键生成代码~的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。