最近，全世界都被蘋果的MR頭顯給炸場了。把這么多復(fù)雜硬件整合成如同一個piece的產(chǎn)品，Vision Pro簡直堪稱蘋果的創(chuàng)二世紀(jì)。

如此炸裂的效果，但是卻要等到明年才小規(guī)模開售，小編按捺不住內(nèi)心的激動，忍不住想給它做個銷售網(wǎng)站。

雖然沒有什么做網(wǎng)站的經(jīng)驗，也不會寫代碼，但最近AI大模型的蓬勃興盛，讓小編充滿自信：一定有這么一款A(yù)I產(chǎn)品，讓我僅憑自然語言，就能把網(wǎng)站做出來。

果然，稍加搜索，小編就發(fā)現(xiàn)了這款A(yù)IGC產(chǎn)品——即時AI，它能夠讓我們通過自然語言描述就生成網(wǎng)頁設(shè)計稿，還能一鍵將其發(fā)布為在線網(wǎng)頁。

話不多說，先上結(jié)果：

別看設(shè)計如此豐富，但過程其實非常簡單。

首先，在即時AI官網(wǎng)輸入咒語，等待1分鐘，就得到如下四張設(shè)計稿：

選擇其中一張設(shè)計稿，即可一鍵發(fā)布為在線網(wǎng)頁。

但是生成的結(jié)果有一些問題，比如自動生成配圖與網(wǎng)站的內(nèi)容需求并不是很適配。于是我們從開源網(wǎng)站unsplash找來了幾張配圖，在設(shè)計稿中進行編輯修改。

令人驚喜的是，我們在設(shè)計稿中所做出的修改，比如替換圖片、修改字體，全都被自動同步至這個已經(jīng)發(fā)布的在線網(wǎng)頁「https://js.design/site/?id=ai_cY7jfKiL7IY」。

整個過程耗時不到10分鐘，包括輸入咒語、生成設(shè)計稿、發(fā)布為網(wǎng)站、替換圖片、重新發(fā)布。

而這款產(chǎn)品的魅力，不在于10分鐘生成一個幾乎接近我們需求的網(wǎng)站，而在于任何一個沒有設(shè)計基礎(chǔ)、沒有代碼基礎(chǔ)的人都可以用10分鐘生成一個網(wǎng)站，帶域名的那種。

即時AI：30s生成可編輯UI設(shè)計稿，一鍵發(fā)布為在線網(wǎng)頁

5月4日，即時AI全面開放。根據(jù)官方消息，這款產(chǎn)品收到了超10w的內(nèi)測申請，并在內(nèi)測期間生成上百萬的生成結(jié)果。這為后續(xù)產(chǎn)品開放后的迭代，打下了很好的基礎(chǔ)。

5月31日，即時AI產(chǎn)品更新，在生成App端UI設(shè)計稿的基礎(chǔ)上，疊加了web端UI設(shè)計稿生成能力，同時支持一鍵發(fā)布為在線網(wǎng)頁。

這其中用到了兩個能力：AI生UI設(shè)計稿以及將設(shè)計稿一鍵發(fā)布為封裝完畢的網(wǎng)頁組件，而且未來這個能力還會被遷移到App、小程序的生成當(dāng)中。

更新后，我們也簡單評測了一波。

比如，生成一個音樂類產(chǎn)品的官網(wǎng)：

生成一個時尚雜志官網(wǎng)：

生成一個酒店管理的后臺頁面：

從生成結(jié)果來看，基本可以滿足一個網(wǎng)頁的內(nèi)容需求，但是距離成熟、專業(yè)的網(wǎng)頁還有一定差距。但是可以理解，畢竟還是個在學(xué)習(xí)進程中的新東西。

與文生圖不太一樣的是，UI設(shè)計稿需要極強的規(guī)范性，同時必須具備可編輯功能，因此文生UI設(shè)計稿的進程稍緩于文生圖，同樣主打文生UI的Galileo AI以及Uizard尚處于內(nèi)測當(dāng)中。

UI設(shè)計30年

隨著ChatGPT突如其來的爆火，設(shè)計類工具的AI化，也開始了瘋狂加速。

5月24日，Adobe推出了PS新功能Generative Fill（生成式填充），可以一鍵去除或修改畫面內(nèi)容以及拓展圖像內(nèi)容，相當(dāng)于Stable Diffusion中的Inpainting和Outpainting。

這項新功能目前已經(jīng)在Adobe Firefly中上線，并置入了Photoshop Beta測試版中，用戶可以直在Ps中以非破壞性的方式組合或生成圖像。

緊接著，Google Research在6月又發(fā)布了一項基于Muse模型的新應(yīng)用——StyleDrop。

它可以將生成的圖片束縛在一個很小的范圍內(nèi)進行微調(diào)，不會影響到畫面中的其他內(nèi)容。比如更改畫面的顏色、陰影效果、風(fēng)格等等。微調(diào)需要的訓(xùn)練參數(shù)也不到總模型的1%。

今天的AI設(shè)計軟件，已經(jīng)精細到了這個程度，回想UI設(shè)計最開始的那些年，不免讓人感慨。

時間回到1984年，蘋果推出Macintosh，由史蒂夫·喬布斯親自主持研發(fā)，堪稱計算機歷史上的一座豐碑，這也使GUI（圖形用戶界面）得以在一種真正的產(chǎn)品中出現(xiàn)。

第一張由ps制作出來的照片，John Knoll將其命名為「天堂里的Jennifer」

1987年，由于Macintosh電腦無法顯示帶灰度的黑白圖像，Thomas Knoll自己寫了一個程序——Display，希望解決這個問題。John Knoll后來加入，兄弟二人聯(lián)手打磨這款產(chǎn)品，后來Display更名為Photoshop。

1990年，大小僅有800kb的Photoshop 1.0問世，從此開啟了這款軟件制霸圖像編輯領(lǐng)域三十余年的時代。

2007年蘋果CEO喬布斯發(fā)布了iPhone，2009年iPhone 3GS發(fā)布，2010年iPhone 4問世。

作為第一部配備有視網(wǎng)膜高清屏幕（Retina Display）的手機，iPhone 4的顯示效果可謂是驚為天人——圖片、文字看起來清晰銳利，可媲美印刷品。

iPhone的出現(xiàn)，拉開了移動互聯(lián)網(wǎng)的序幕，也定義了移動互聯(lián)網(wǎng)時代的許多視覺設(shè)計原則。

2008年，荷蘭特溫特大學(xué)計算機專業(yè)彼得·歐姆弗利被要求設(shè)計一個簡單的繪圖應(yīng)用，DrawIt便由此誕生。

2010年12月發(fā)布了DrawIt的最后一個版本，并將軟件更名為Sketch。自那以后，Sketch聚攏了一批小規(guī)模的忠實擁躉。

2009年5月28日，Google的內(nèi)部孵化并正式上線Google Wave，在Google Wave應(yīng)用中，使用者可以建立一個wave然后添加一些用戶。

每個在使用者wave里面的人都可以使用富文本、小組件、圖片、甚至可以是外部feed，他們可以進行回復(fù)也可以直接編輯wave。

盡管該產(chǎn)品后來被關(guān)停，但是圍繞著HTML5所延展出來的技術(shù)、服務(wù)與工具不斷涌出，越來越多的SaaS服務(wù)開始選擇使用瀏覽器這樣的輕量級客戶端交付給用戶，讓復(fù)雜的渲染和計算留給位于云端的服務(wù)器來處理。

UI設(shè)計工具巨頭Figma就在這個節(jié)點誕生。Figma是一款在線協(xié)同設(shè)計軟件，在2016年上線正式版，2017年開始推出付費的套餐。此時在UI/UX設(shè)計領(lǐng)域，Adobe XD、Sketch和Figma的競爭關(guān)系雛形已經(jīng)形成。

在過往的幾年疫情期間，作為一款全平臺可用的在線界面設(shè)計協(xié)作工具，隨著線上協(xié)作需求不斷增大，F(xiàn)igma可將項目隨時保存至云端，其用戶數(shù)量迅速增長，2021年6月，完成2億美元融資后，F(xiàn)igma估值已達100億美元。

2022年9月15日，Adobe在官網(wǎng)宣布，將以約200億美元收購在線協(xié)作設(shè)計平臺Figma公司，包括一半的現(xiàn)金和一半股。對于Adobe而言，拿下Figma，在擴大自身在云端業(yè)務(wù)的同時，也能消除潛在的最大競爭對手之一。

但技術(shù)的革命總是來得猝不及防。

新一代的設(shè)計工具什么樣？

新的技術(shù)環(huán)境催生新的終端，新的終端催生新的交互邏輯，新的交互邏輯催生新的工具。

而現(xiàn)在，人工智能介入了設(shè)計工具。

從PS開始，設(shè)計工具的發(fā)展趨勢經(jīng)歷了一個從「單一工具功能」到「多元功能」再到「職能分化工具」，最后又讓「工具功能」和「使用場景」融合一體化的過程；但無論這個發(fā)展趨勢是如何地分分合合，它的主旋律一直都是圍繞著提高工具的功能和性能，為了幫助設(shè)計更好地解決更多的問題而存在的。

AI下的設(shè)計工具，有什么不一樣？

「人工智能介入到設(shè)計工具之后，它又進一步加速了工具使用場景融合、工具一體化的趨勢，也進一步大大提升了工具的功能和性能，設(shè)計工具由主要解決用戶在使用過程中的需求，轉(zhuǎn)變?yōu)橐嫌脩糇罱K的結(jié)果預(yù)期。

從前的設(shè)計工具是分布操作，每一步都需要用戶參與，用戶也知道結(jié)果的生成邏輯。但是現(xiàn)在變成了一步到位、實現(xiàn)過程變成『黑盒』」，即時設(shè)計聯(lián)合創(chuàng)始人周凝表示。

當(dāng)我們檢索AI設(shè)計類工具，已經(jīng)不僅限制于文字生成圖像，圖生圖、文生UI設(shè)計、文生3D、文生視頻....

工作流將會發(fā)生怎樣的變化？

我們通過新的工具窺探未來的工作方式和工作結(jié)果。

一個互聯(lián)網(wǎng)產(chǎn)品誕生的正常產(chǎn)研流程是：設(shè)計搞定版之后，把這個設(shè)計稿交給前端的工程師，由前端的工程師把設(shè)計語言全部還原成一個程序語言，再在這個基礎(chǔ)上進行功能的開發(fā)。

也就是「產(chǎn)品-設(shè)計-前端-后端」。

而現(xiàn)在有了直接把設(shè)計稿轉(zhuǎn)成線上產(chǎn)品的能力之后，設(shè)計師不需要再花時間去和下一環(huán)節(jié)的同學(xué)去對齊，程序員也不再不需要去做語言替換的工作，降低評審、開發(fā)、走查等環(huán)節(jié)的時間成本，提升設(shè)計到開發(fā)的效率。

同時，由于設(shè)計稿中的所有修改都可以自動更新到已發(fā)布的網(wǎng)頁中，這讓程序員只要在第一次上線時做前端處理，后續(xù)無需再介入網(wǎng)頁的維護修改工作。

即時設(shè)計的戰(zhàn)略負責(zé)人黎嘉寧在公開演講中表示，「用戶有了UI設(shè)計稿之后要做什么？自然是讓開發(fā)同學(xué)來在代碼層面實現(xiàn)設(shè)計語言的轉(zhuǎn)換。于是我們又結(jié)合即時設(shè)計Design to code的能力，實現(xiàn)設(shè)計稿到前端網(wǎng)頁的自動轉(zhuǎn)換。

我們把這一系列能力組合起來,最終實現(xiàn)了通過一段文本描述,一鍵生成在線網(wǎng)站、一鍵生成小程序的產(chǎn)品。我們不是把單獨能力作為單點給用戶，而是針對場景把這些能力做有機綜合。」

管窺設(shè)計工具的演變趨勢

工作邊界融合與設(shè)計能力溢出。

這款產(chǎn)品讓沒有設(shè)計能力的人擁有了設(shè)計能力，讓沒有代碼能力的人擁有了代碼能力，設(shè)計師和前端的工作邊界逐漸融合，每個工種原先被賦予的角色屬性，都在向自己的上下游延展。

隨著AI能力的不斷進步，這個工作流程很有可能被縮短為「產(chǎn)品經(jīng)理-設(shè)計師-后端」或「產(chǎn)品經(jīng)理-前端-后端」，更或者，來到產(chǎn)品經(jīng)理的「黃金時代」。

同樣地，設(shè)計工具智能化后，使用工具進行設(shè)計不一定再是擁有專業(yè)能力的人群，很可能是關(guān)注AI的極客人群，也有可能AI像互聯(lián)網(wǎng)一樣變得人人可用，樓下的水果店老板、早餐店老板，人人都可以成為內(nèi)容的創(chuàng)作者、界面的設(shè)計師、應(yīng)用的開發(fā)者。

基礎(chǔ)的設(shè)計需求滿足成本降低到忽略不計，設(shè)計供給側(cè)也將迎來爆發(fā)式發(fā)展，過去通過冗長文字釋義的方式或許最終會變演變成「一圖勝千言」的形式。

我們最終需要怎樣的設(shè)計工具？

周凝認為：

「當(dāng)人工智能全面介入設(shè)計工具，將設(shè)計工具徹底轉(zhuǎn)變成一個智能設(shè)計工具后，我們原有的設(shè)計方式必將被徹底改變，這也符合生產(chǎn)關(guān)系隨生產(chǎn)力變化而變化的客觀規(guī)律。

那么基于對人工智能生產(chǎn)力的美好期待，假定設(shè)計工具完全自動化，且功能和性能沒有其他任何限制，那么這樣推理的最終結(jié)果就是：所有的過程環(huán)節(jié)和為了過程環(huán)節(jié)服務(wù)的工作流程都將被消滅。工具所有的顯性能力體現(xiàn)，都將會聚焦在需求的輸入端和結(jié)果的輸出端。

在需求的輸入端，既要能夠允許我們大量地多模態(tài)地描述我們的詳細需求并能夠做到精準(zhǔn)的理解和對細節(jié)的嚴(yán)格執(zhí)行，又要在我們自己無法清晰描述出我們的準(zhǔn)確需求僅有模糊概念和方向時，能夠心有靈犀地懂我們的言外之意，甚至利用AI自己的知識儲備和智慧能力引導(dǎo)和協(xié)助我們細化我們的需求，乃至于在更高的思考維度上給予我們超前的認知和需求啟發(fā)。

在結(jié)果的輸出端，我們既需要它能夠在短時間內(nèi)給我們大量生成優(yōu)質(zhì)的多模態(tài)方案供給我們進行選擇，同時也需要它能夠就已生成的方案接受我們進一步的需求進行不斷地優(yōu)化迭代，甚至我們肯定會希望，借用AI自身儲備的知識和智慧能力，一步到位給我們最匹配最完美的答案，乃至于在更高的維度和層次上，給予我們突破原有需求審美和認知水平的超前方案?！?/span>

蘋果Vision Pro一夜封神，AIGC全球爆紅，新的技術(shù)浪潮涌來，下一個黃金時代是什么樣子，我們無從得知。

但是我們可以知道的是，「一個靜態(tài)的環(huán)境下是缺少新機會的，新的機會無一不是在變革中誕生?！?/span>