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

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

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

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

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

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

首先，在即時(shí)AI官網(wǎng)輸入咒語，等待1分鐘，就得到如下四張?jiān)O(shè)計(jì)稿：

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

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

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

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

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

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

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

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

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

更新后，我們也簡單評(píng)測了一波。

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

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

生成一個(gè)酒店管理的后臺(tái)頁面：

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

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

UI設(shè)計(jì)30年

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

周凝認(rèn)為：

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

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

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

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

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

但是我們可以知道的是，「一個(gè)靜態(tài)的環(huán)境下是缺少新機(jī)會(huì)的，新的機(jī)會(huì)無一不是在變革中誕生。」