1分鐘做出蘋果Vision Pro「官網」？上班8小時搞出480個網頁，同事被捲瘋了

最近，全世界都被蘋果的MR頭顯給炸場了。把這麼多複雜硬體整合成如同一個piece的產品，Vision Pro簡直堪稱蘋果的創二世紀。

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

雖然沒有什麼做網站的經驗，也不會寫程式碼，但最近AI大模型的蓬勃興盛，讓小編充滿自信：一定有這麼一款AI產品，讓我僅憑自然語言，就能把網站做出來。

果然，稍加搜索，小編就發現了這款AIGC產品——即時AI，它能夠讓我們透過自然語言描述就生成網頁設計稿，還能一鍵將其發佈為線上網頁。

話不多說，先上結果：

#別看設計如此豐富，但過程其實非常簡單。

首先，在即時AI官網輸入咒語，等待1分鐘，就得到以下四張設計稿：

選擇其中一張設計稿，即可一鍵發佈為線上網頁。

但是產生的結果有一些問題，例如自動產生配圖與網站的內容需求並不是很適配。於是我們從開源網站unsplash找來了幾張配圖，在設計稿中進行編輯修改。

令人驚訝的是，我們在設計稿中所做的修改，例如替換圖片、修改字體，全都被自動同步至這個已經發佈的線上網頁「https: //js.design/site/?id=ai_cY7jfKiL7IY」。

整個過程耗時不到10分鐘，包括輸入咒語、產生設計稿、發佈為網站、替換圖片、重新發布。

而這款產品的魅力，不在於10分鐘產生一個幾乎接近我們需求的網站，而在於任何一個沒有設計基礎、沒有程式碼基礎的人都可以用10分鐘產生一個網站，帶有域名的那種。

即時AI：30s產生可編輯UI設計稿，一鍵發佈為線上網頁

5月4日，即時AI全面開放。根據官方消息，這款產品收到了超10w的內測申請，並在內測期間產生數百萬的生成結果。這為後續產品開放後的迭代，打下了很好的基礎。

5月31日，即時AI產品更新，在產生App端UI設計稿的基礎上，疊加了web端UI設計稿產生能力，同時支援一鍵發佈為線上網頁。

這其中用到了兩個能力：AI生UI設計稿以及將設計稿一鍵發佈為封裝完畢的網頁元件，而且未來這個能力還會被遷移到App、小程式的生成當中。

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

例如，產生一個音樂類產品的官網：

#產生一個時尚雜誌官網：

產生一個飯店管理的後台頁面：

從產生結果來看，基本上可以滿足一個網頁的內容需求，但是距離成熟、專業的網頁還有一定差距。但可以理解，畢竟還是個在學習過程中的新東西。

與文生圖不太一樣的是，UI設計稿需要極強的規範性，同時必須具備可編輯功能，因此文生UI設計稿的進程稍緩於文生圖，同樣主打文生UI的Galileo AI以及Uizard尚處於內測當中。

UI設計30年

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

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

這項新功能目前已經在Adobe Firefly中上線，並置入了Photoshop Beta測試版中，使用者可以直在Ps中以非破壞性的方式組合或產生影像。

緊接著，Google Research在6月又發布了一個基於Muse模型的新應用程式－StyleDrop。

它可以將產生的圖片束縛在一個很小的範圍內進行微調，不會影響到畫面中的其他內容。例如更改畫面的顏色、陰影效果、風格等等。微調需要的訓練參數也不到總模型的1%。

今天的AI設計軟體，已經精細到了這個程度，回想UI設計最開始的那些年，不免讓人感慨。

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

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

1987年，由於Macintosh電腦無法顯示灰色的黑白影像，Thomas Knoll自己寫了一個程式－Display，希望解決這個問題。 John Knoll後來加入，兄弟兩人聯手打磨這款產品，後來Display更名為Photoshop。

1990年，大小僅有800kb的Photoshop 1.0問世，從此開啟了這款軟體製霸影像編輯領域三十餘年的時代。

2007年蘋果CEO賈伯斯發布了iPhone，2009年iPhone 3GS發布，2010年iPhone 4問世。

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

iPhone的出現，拉開了行動網路的序幕，也定義了許多行動網路時代的視覺設計原則。

2008年，荷蘭特溫特大學電腦專業彼得·歐姆弗利被要求設計一個簡單的繪圖應用，DrawIt便由此誕生。

2010年12月發布了DrawIt的最後一個版本，並將軟體更名為Sketch。自那以後，Sketch聚攏了一批小規模的忠實擁躉。

#

2009年5月28日，Google的內部孵化並正式上線Google Wave，在Google Wave應用程式中，使用者可以建立一個wave然後加入一些使用者。

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

儘管該產品後來被關停，但是圍繞著HTML5所延展出來的技術、服務與工具不斷湧出，越來越多的SaaS服務開始選擇使用瀏覽器這樣的輕量級客戶端交付給用戶，讓複雜的渲染和運算留給位於雲端的伺服器來處理。

UI設計工具巨擘Figma就在這個節點誕生。 Figma是一款線上協同設計軟體，在2016年上線正式版，2017年開始推出付費的方案。此時在UI/UX設計領域，Adobe XD、Sketch和Figma的競爭關係雛形已經形成。

在過往的幾年疫情期間，作為一款全平台可用的線上介面設計協作工具，隨著線上協作需求不斷增大，Figma可將專案隨時保存至雲端，其用戶數量迅速成長，2021年6月，完成2億美元融資後，Figma估值已達100億美元。

2022年9月15日，Adobe在官網宣布，將以約200億美元收購線上協作設計平台Figma公司，包括一半的現金和一半股。對Adobe而言，拿下Figma，在擴大自身在雲端業務的同時，也能消除潛在的最大競爭對手之一。

但科技的革命總是來得猝不及防。

新一代的設計工具是什麼樣子？

新的科技環境催生新的終端，新的終端催生新的互動邏輯，新的互動邏輯催生新的工具。

而現在，人工智慧介入了設計工具。

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

AI下的設計工具，有什麼不一樣？

「人工智慧介入設計工具之後，它又進一步加速了工具使用場景融合、工具一體化的趨勢，也進一步大幅提升了工具的功能和效能，設計工具由主要解決使用者在使用過程中的需求，轉變為要符合使用者最終的結果預期。

#從前的設計工具是分散操作，每一步都需要使用者參與，使用者也知道結果的生成邏輯。但是現在變成了一步到位、實現過程變成‘黑盒’”，即時設計聯合創始人周凝表示。

當我們檢索AI設計類別工具，已經不僅限制於文字生成圖像，圖生圖、文生UI設計、文生3D、文生影片....

工作流程將會發生怎樣的變化？

我們透過新的工具窺探未來的工作方式和工作成果。

一個網路產品誕生的正常產研流程是：設計搞定版之後，把這個設計稿交給前端的工程師，由前端的工程師把設計語言全部還原成一個程序語言，再在這個基礎上進行功能的開發。

也就是「產品-設計-前端-後端」。

而現在有了直接把設計稿轉成線上產品的能力之後，設計師不需要再花時間去和下一環節的同學去對齊，程式設計師也不再不需要去做語言替換的工作，降低評審、開發、走查等環節的時間成本，提升設計到開發的效率。

同時，由於設計稿中的所有修改都可以自動更新到已發佈的網頁中，這讓程式設計師只要在第一次上線時做前端處理，後續無需再介入網頁的維護修改工作。

即時設計的策略負責人黎嘉寧在公開演講中表示，「用戶有了UI設計稿之後要做什麼？自然是讓開發同學來在程式碼層面實現設計語言的轉換。於是我們又結合即時設計Design to code的能力，實現設計稿到前端網頁的自動轉換。

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

#管窺設計工具的演進趨勢

工作邊界融合與設計能力溢位。

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

隨著AI能力的不斷進步，這個工作流程很有可能被縮短為「產品經理-設計師-後端」或「產品經理-前端-後端」，更或者，來到產品經理的「黃金時代」。

同樣地，設計工具智能化後，使用工具進行設計不一定再是擁有專業能力的人群，很可能是關注AI的極客人群，也有可能AI像互聯網同樣變得人人可用，樓下的水果店老闆、早餐店老闆，人人都可以成為內容的創作者、介面的設計師、應用的開發者。

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

我們最終需要怎樣的設計工具？

週凝認為：

「當人工智慧全面介入設計工具，將設計工具徹底轉變成一個智慧設計工具後，我們原有的設計方式必將被徹底改變，這也符合生產關係隨生產力變化而變化的客觀規律。

那麼基於對人工智慧生產力的美好期待，假定設計工具完全自動化，且功能和性能沒有其他任何限制，那麼這樣推理的最終結果就是：所有的過程環節和為了過程環節服務的工作流程都將被消滅。工具所有的顯性能力體現，都會聚焦在需求的輸入端和結果的輸出端。

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

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

蘋果Vision Pro一夜封神，AIGC全球爆紅，新的科技浪潮湧來，下一個黃金時代是什麼樣子，我們無從得知。

但是我們可以知道的是，「一個靜態的環境下是缺少新機會的，新的機會無一不是在變革中誕生。」

##############################################################

以上是1分鐘做出蘋果Vision Pro「官網」？上班8小時搞出480個網頁，同事被捲瘋了的詳細內容。更多資訊請關注PHP中文網其他相關文章！