如何評價「代碼直出工具」pix2code？

01-15

github上新倉庫，tonybeltramelli/pix2code，裡面有個介紹視頻，UI圖直出代碼，在react，vue等組件化工具的開發模式下，機器取代UI開發的時代這麼快就到來了嗎？

看了下視頻和 paper，感覺意義不是很大。

paper 本身主要講的是模型和訓練的策略，模型的輸入是 GUI（圖片），輸出是 DSL（結構描述），然後通過一個額外的 compiler 把 DSL 生成最終平台代碼。核心問題在於，對於現在的設計工具來說，根本不需要走這個過程來獲得 DSL，AI 和 Sketch 本來就是用數據結構保存設計文件的，要 DSL 直接從文件入手就行了，完全沒必要先壓成圖（丟棄了所有結構化信息）再來機器學習（不完美地還原結構化信息）。

另一個核心問題是這東西根本處理不了交互，所以即使有應用也局限於切靜態頁，而且生成的代碼... 不知道你當年看過 Frontpage/Dreamweaver 生成的代碼長啥樣沒。

其實 Sketch to React Component 都已經有人做出來了，比這個接近現實多了：https://medium.com/sketch-app-sources/code-generator-to-create-react-projects-straight-from-design-with-clean-html-and-css-c399a8189f0d。

這個方向的終極形態也就是 WYSIWYG ——不會代碼的人拖拖弄弄就可以搞個 app 出來，但這裡面給機器學習的空間不是很大。UI 的東西，要自動化必須模式化，但給用戶的 UI 必須是有品牌個性的，這就意味著自動化不可能覆蓋所有場景。再加上 UI 需求的多變，要讓程序員失業，得弄出一個能自動領會產品意圖的 AI 才行。

不知道那幫人有什麼宏偉的目標，如果光是說那個視頻的話，其實是沒有什麼用的。你都已經能讓UX幫你畫出這張圖了，為啥不一開始就讓UX就用Microsoft Blend把UI寫出來，完了無論是PC、手機還是瀏覽器都能馬上運行，寫個view model成品就弄好了。

——除非，你是想抄襲別人程序（逃

只看視頻，不得不承認很贊。

UI是完全可以結構化表示的，任何可以結構化的數據都可以進行編程。

傳統的拖拽工具在其內部都結構化保存了UI控制項的數據，比如這樣：

這種結構化的方式的確可以生成非常優質的代碼，但仍存在一個問題，即用戶仍然需要一定的專業背景知識。

按照這種理念，在 http://gospely.com 中就實現了一個相當複雜的拖拽工具。這款拖拽工具完全可視化了拖拽、樣式/屬性設置、動畫設置等功能。

這樣做的好處是不需要前端重構工程師了，PM和UI設計師可以直接使用這款工具生成可用並且優美的代碼。

而pix2code的做法，則正好相反。pix2code想要完全隱藏web頁面開發中的技術細節，只需要UI設計師會做圖即可完成代碼生成。這樣做的好處也十分明顯，即UI設計師和PM沒有學習成本，不需要切換工具。

UI的生成只是一小部分，最重要的還是人機交互邏輯，而人機交互邏輯也是可以窮舉的，所以依照pix2code這種做法，總有一天機器生成UI會取代人工編寫代碼和業務邏輯。

我個人已經研究並實踐這個方向接近一年了，很看好pix2code的做法，是一個全新的思路。

對了，Gospel項目開源，歡迎pr

https://github.com/Gospely

我覺得大家都抓錯重點了。

重點是那個模型僅憑一張截圖就知道哪個是按鈕可以交互的哪個僅僅是展示。

回想一下，我們剛學習使用各種人機交互界面的時候，是否也不知道哪裡是做什麼的？因為我們知道按鈕長什麼樣子，所以根據按鈕來設計人機交互界面。之後又學會怎樣去設計個漂亮的按鈕，做出更符合人類使用習慣的風格。

再想像一下，當這個模型接收足夠多的界面，經過深度學習之後，會知道哪種的界面應該長成什麼樣子，怎樣才符合人類的習慣。那個時候就不需要UI來畫圖啊！跟它說要個什麼類型什麼風格做什麼用的界面，它就自動給你出代碼了呀！

沒看過生成的代碼是怎樣的，但至少，UI圖製作是可以達到的吧。

直接把圖片轉為html的項目曾是我的開發計劃之一，後來一直擱置。

以前我就一直在想，為什麼沒有人做類似這樣的項目：直接把圖片，轉為html。然後我曾經嘗試著做了一下，有很多問題沒法解決，後來就漸漸擱置。

現在看到有人做出來了，感覺以後開發前端頁面會方便不少，不過可能會有代碼可讀性的問題。具體源碼我看作者還沒放出來，等放出來以後我會試試。

不過本來做前端，耗時間的工作就不在頁面上，而是邏輯和交互上。這個項目僅僅是更方便人們開發，談不上機器取代UI開發

之前其實在阿里做過很多類似的工作，像psd/其他設計工具=&> html等也有比較多的實踐，拖拽搭建頁面的系統阿里內部也非常多。

但是！但是！

https://static.dingtalk.com/media/lALO0Zn0UM0CeM0IGg_2074_632.png

之前的做法其實說白了是DSL轉換，對於各種設計平台其實都有一份結構化數據（XML/JSON），做法是把psd的描述/xxx的描述（DSL）轉換成html，然而這次這個技術，是通過機器學習技術(神經網路+模式識別)，將圖片「訓練」成DSL，再將DSL轉為代碼，我了解到它使用很多的訓練輸入完成整個這個步驟，這樣的訓練過程不是單純的dsl轉換，而是一個學習的過程，也就是說，後面即使頁面越來越複雜，轉換出來也會越來越精確。

很多問答糾結於交互，數據，但這個事情在於這樣的思想是非常先進的，也就是說，機器將會理解人的設計，並把設計轉換成機器認識，由瀏覽器這個載體輸出的東西。。

我還是有點恐慌的，跨界的威力真是太大了，感覺機器學習技術用在前端就跟丟了顆原子彈一樣。。

我覺得 @姜天意說到了重點，其他人都在評論這個技術的實用性，但沒看到這個技術可能性。

單論這項技術本身目前來看工程上使用可能性很低，因為基於圖片來生成並不是最佳選擇，我們有sketch之類的更好的選擇來保留設計師或產品意圖，而且業界也有類似的一些方案基於將UI抽象，模式化來快速生產UI的方案
但我們也要看到本質上我們是通過我們的經驗，人為的規定一些模式，這和我們在圍棋中所設計的定式是一樣的。所以對於反模式的需求，我們可能做不到，甚至會遇到很大的問題（所以一般的說法是，我們設計的模式or系統只解決80%的問題，這是不是很熟悉？）。
所以pix2code對前端最大的衝擊應當是，模式的產生不再是人為設計的，而是由機器通過樣本學習來的，那麼機器可以學習，模式可以進化，機器在計算和IO上遠比人類強，在合適的樣本，以及演算法下，他最終產生的模式會越來越好，會超越我們所設計的模式所能覆蓋的問題
我們再換一個角度來看，為什麼一定要基於圖片來生成code呢？換成sketch或者其他類似的東西能保留更多設計師或產品的想法，在這基礎上做機器學習是不是能得到更好的產品？
AI時代應該是這樣，產品提出一個新玩法，我只需要做幾次實現，然後交給AI學習，之後就可以大量使用這種玩法。在傳統的方式下，我們只能通過將玩法抽象，設計模式，約束上游，然後建立系統，批量生產。有沒有發現有很大的不同？
我個人很期待這一天的來臨

一般java程序員喜歡搞這種「代碼生成器之類的玩意」，但是可能嗎？複雜度是不會變的。妄想用XML或者配置文件取代java，只能說明java本身有問題，該你寫的東西一點都不可能少。

重申一遍，複雜度是不會變化的

psd2html，psd2(iosandroid)都搞過，像你說的那種2vue、react也有，而且相對這個項目更成熟，我們內部系統就在用，像上面說的什麼UI 圖沒法描述交互、驗證邏輯這些都能解決。線上效果可以看 http://h5.baidu.com 那個psd2html轉化系統。

當初和 @王集鵠聊過，未來應該是AI 2一切，包括節省pm、運營那一步，而且這種未來應該會很快到來

人家寫作都靠機器了，寫程序更應該靠機器。

現在前端工作是人做的事情嗎，奶奶個xiong。

有些技能，只是落後生產力下的體力活而已。

先進生產力，革的就是這些命。

利益相關: CV弱雞，前端入門。

用通俗的話來解釋一下這個項目中用到機器學習和之前的UI直出代碼的區別:

之前的直出其實很簡單，把一種UI的數據結構直接轉換成另外一種代碼的數據結構，這種轉換是靜態、固定的。

現在機器學習了，不需要人手動編寫轉換的代碼，而轉而編寫生成轉換代碼的代碼，相當於每次轉化的規則都會隨著數據源(UI)的不同而不同，這種轉換是動態、不固定的。

那UI轉換成代碼真正的痛點是什麼呢？ @黃子毅聚聚的回答很棒，建議參考。那我們回頭看看，這個機器學習解決了我們的痛點了么？如果數據綁定、交互生成過程也實現了機器學習，那說不定這個項目真的是銀彈，但是事實可能並非如此。這裡生成的代碼是局部的最優解，但是當我們拿到這個最優的代碼，真的有利於我們下一步編寫其他邏輯代碼么？

從UI生成代碼不是最終結果，而是中間過程，而且是和之後開發強耦合的過程。我每次學習一個UI，可能還得面對不同格式、不同風格的代碼，這對於前端模塊化來說是一個很大的挑戰。

最後，機器學習的並不一定能一次就生成最優解，所以我可能需要生成多遍代碼最後再merge一下(攤手無奈

------分割線------

之前的回答戾氣有點重，修改了一下。其實真正接觸這個領域才會發現，機器學習無非是優化問題，但是代碼的生成可以簡單歸結為優化問題么？

我想答案應該是不一定，雖然編程語言大都是二、三型文法，上下文無關，但是真正涉及到 generate 的過程中，還是有代碼風格和代碼習慣這樣種種限制。畢竟不同於最終生成代碼，可以儘管 uglify 之類，UI 生成代碼最終是有較強侵入性的。那麼如何把 UI 和數據以及控制解耦呢？我相信當這個問題有答案後，UI 的直出代碼才會綻放出真正的光芒。

理性看待ML、DL 這些技術，才能真正地把他們運用在最合適的地方。比如現在他們被用在讓研究生、博士生髮表畢業論文上，這就很合適（逃

------再分一下------

很多問答糾結於交互，數據，但這個事情在於這樣的思想是非常先進的，也就是說，機器將會理解人的設計，並把設計轉換成機器認識，由瀏覽器這個載體輸出的東西。。

恕我直言哈，高票回答的這個觀點可能不太妥當，機器學習沒這麼神奇...你怎麼學習都逃不開邏輯和數據的侵入性，這一點我一直都在強調，除非你用多層次的網路給都學習咯，然後全連接一下，當然這個現在只是幻想而已...

其實可以考慮把機器學慣用在最終代碼的優化上，比如 tree shaking，jvm 位元組碼生成之類的，用在這裡說不定有奇效呢。

大家當年也是自信滿滿的看著深藍，說它圍棋下不過人類的。

二十年過去了，阿爾法狗把我們第一的棋手下哭了。

接下來可能用不了二十年，連設計都不需要你做。我預計十年內就會有傳說中的自然語言編程技術了，甚至它可能可以猜到你想要但是你描述不出的東西。

當然不需要怕，農耕文明出現的時候，獵人也慌張，弓箭第一次出現的時候，興許有部落酋長擔心動物被獵殺完。

畢竟大腦不過是個100瓦的處理器罷了，只不過體系結構未知。儘管汽車並不能所有方面都超過波爾特，人腦興許到時候還是會有存在的價值，但是腦力將會被解放，第三產業如同今日的農業。

我認為之後是以前認為是屬於神的領域。

更新一句：你可以理解成一個Google Translate，只不過是自然語言翻譯到C語言。這個可能比自然語言翻譯到自然語言更簡單一些。

只出展示型頁面是非常好的，甚至可以做許多「H5」工具在做的事情。

但離寫業務邏輯還有一段距離，因為理解產品經理需求的模型不容易訓練出來。

並沒有。

現在大家基本都實現了從原型工具導出代碼、甚至可運行程序的能力，pix2code 更進一步，從圖片導出代碼，本質是一樣的，只是更方便了。

這玩意可以一定程度減少開發工作量，但現在這種東西早就有了，可視化建站平台就是干這個事情的，產品直接出線上頁面，連UI圖都省了，豈不是更誇張？

而且 UI 圖沒法描述交互、驗證邏輯，沒法保障效率和穩定性，所以其實用性還不如現在已經廣泛使用的建站平台。

------------- 補充修改 ----------------

為了避免噴子們無意義的吐槽，在此申明一句：

原文說的是 從圖片導出代碼 與 從原型工具導出代碼的 本質是一樣的，沒有任何一個字眼提及到原理是一樣的。所謂本質一樣，是指都需要先構圖，再生成代碼，而實例中的圖片也基本是原型工具畫出來的。

希望不要再有噴子挑戰自己的智商，認為我會把識別圖片與原型工具操作的原理當成一樣的。

最後，各路噴子，不要打著討論技術的幌子，肆意曲解我的話語，再用這麼表面的「知識」來「教育」我，我懶得和這種人談技術。

舉個例子，我為了引出一個思想，在黑板上寫了一句話，從 1+1=2 開始，有人看到我 = 寫的像 -，就不斷教育我，1+1-2 這個不是等式，我跟他們理論，只會氣大傷身，最終談到禮貌問題，就跟我說「咱們是聊技術的」，但其實 1+1+2 真的沒什麼好聊的。

連柯潔都敗了，軟體工程師們也都洗洗睡吧，下一步可能就要輪到咱們了～ ai vs 人類寫程序大賽

Frontpage97就有了所見即所得，後來人們又敲代碼了

我曾經有個想法，想研究一個瞬間移動的工具。那樣一切都不是問題了。輸入你要去的坐標。後來我覺得這個產品可以改進下加入時間這個坐標。我也把空間坐標範圍擴大到全宇宙。我預想有了這樣的工具什麼菜鳥網路順豐公司統統將過時。那時候我想搶錢直接瞬間移動到銀行的保險柜內。tua一下。我瞬間移動到比爾蓋茨身邊狠狠的敲他屁股。甚至可以幫你們建立一種新的社會形態。

不過我得先做一件事，怎麼造出這台機器。等我繼續接著做下一場夢，然後夢裡想想怎麼解決。

我雖然不懂什麼叫神經網路，可我看過一本叫數學之美的書。我也做過一款叫XXX智能問診的系統。那個號稱通過數據訓練出來的人工智慧大腦，發現它的演算法真的叫我頭疼。

人類試圖想造出來一個自己，但是生物學、心理學、醫學、遺傳學。沒有任何學科能搞明白神創造出來的人類自己。人類想通過有限的數據來模擬自己。這些數據沒法徹底認識自己如何造出來的。同樣推理出他們也造不出跟自己一樣的強人工智慧。

阿法狗算是人工智慧比較強的代表。但是智能在有限狀態集裡面稱霸。如果圍棋規則（增大棋盤）一改，它立馬撒比。雖然它可以自己跟自己博弈，此種博弈所謂的機器學習過程，但是它的學習規則是建立在圍棋規則。所以不同的場景下可以造出不同的人工智慧，如果複雜的場景下，如何教育孩子問題（最近聽說滬江網要搞這個，這年頭如果你們公司不跟人工智慧沾點關係資本都不青睞你）。於是乎我做了一個小霸王學習機，哪裡不會點哪裡，夠智能不？你說不是人工智慧？它塔嗎德會教你孩子說so easy。雖然不會教你孩子學會所有的英文以，但是其他它是人工智慧的雛形，慢慢的迭代它就能造出最完美的人工智慧教育設備了。什麼聽說讀寫啊，什麼莎士比亞文學啊，這人工智慧統統幫你去教。還不趕快行動你們，這是個創業的好項目啊。餅一定要大，如果投資人問怎麼實現，你就跟他說，這就是這個項目風險點，如果已經實現了，我要你們融個雞毛資。房子都能炒到那麼高，而且所有人都信房價不會跌。現在人工智慧大家也都信了，資本也都信了。中國的資本屬於人傻錢多器大活好。我又瞎比比了，器大活好好像跟ta沒什麼關係。

有一個產品設計師用了三十多億年創造了這個系統。而你們想用10*n這樣的數量級的年限搞出一個自己。那你們已經和那個產品設計師有一樣的能力了，有可能那個傳奇的產品設計師就是你們中的一個穿越回幾百萬年前創造了你們自己。what？到底先有蛋還是先有雞吧？

這個世界是理性的，但是人類是感性的。有人說感性是建立在理性基礎上的。但是你得知道如何用理性產生感性。如果能造出強人工智慧那也不叫人工智慧了。一個擁有感性的機器也知道如何調戲人類女子，知道如何跟人類ML。不知道你們有沒有發現，雖說科技在進步，但是卻沒有那種從差分機到計算機那種飛躍性的進步出現了。人類歷史上有沒有集體的錯誤認識自己呢？我記得以前人類說過地球是宇宙中心。

機器學習？動物學習都是為了生存。機器它學習到底對它自己有什麼好處？為了吃香的喝辣的，娶人類白富美？那你的先研究出慾望演算法。學習是有目的的，你上大學就為了上大學？

生成出來的代碼很難進一步開發(如耦合，css難讀)，也很難生成交互邏輯。

前端開發真正重要的卻又是交互邏輯，代碼易讀好維護。

雖然仍處在初級階段，但人工智慧對各行業的危機實在讓人難以平靜

這個工具能在一定程度上提高開發效率，但短時間不能代替人類。

淘汰掉一批只會切圖的，前端的門檻會越來越高。以上

你們這些偽前端頁面仔理解前端的真正意義嗎？