站長阿川

站長阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

站長精心設計,帶你實作 63 個小專案,得到作品集!

立即開始免費試讀!

v0 是什麼?

這是由Vercel開發的一款由AI驅動的UI生成工具,用戶只需用日語等自然語言輸入指令,例如“建立產品介紹頁面”,該工具就會自動生成網站和應用程式的UI。

官方網站

只需用自然語言發送提示,它就會建立與React、Tailwind CSS、shadcn/u 等技術堆疊相容的設計!

感人一幕

這就是我遇到v0時的感動故事。

序幕

首先,雖然我懂一點 HTML/CSS 和 JavaScript,但我對 UI/UX 設計幾乎一無所知(我在大學裡只上過可用性方面的講座和研討會),而且我對此毫無感覺。我當然不擅長設計,如果我玩圖文並茂的連環遊戲,我肯定會被歸類為「笑話」。

遇到

有一天,我和同事們一起參加了一個AI代理學習小組。 (我寫了一篇文章,記錄了我對這次活動的感受,有興趣的可以看看。)

學習小組的發言人談到如何使用 v0 進行 UI/UX 設計。 (更多詳情,請參閱評論文章。)

當時,我正在考慮要用什麼樣的設計來製作一個網頁來向公司介紹自己,所以我想,「就是這個!讓我們試一試! 」然後興奮地蹦蹦跳跳地回家了。

墜入愛河

一回到家,我打開電腦,電腦提示我「建立一個簡單的自我介紹頁面」。

然後只需幾秒鐘即可輸出設計,並且可以使用自然語言進行後續編輯

就這樣,他只花了大約5分鐘的時間就製作出如圖所示的自我介紹頁面。

影像.png

我已經墜入愛河了。

建議要點

就我個人而言,當我第一次遇到 v0 時,我想,“哇!”

①自然語言處理

最近的生成式人工智慧處理自然語言就像是理所當然的事情一樣,但我認為,在UI/UX設計中,能夠辨識自然語言對於傳達目標至關重要。擁有設計知識和經驗的人或許能夠編寫具有一定結構化的提示,但對於像我這樣的人來說,這相當困難。在這方面,我推薦人工智慧,因為它能夠理解相對粗略的指令,例如「我希望它像這樣設計」或「我希望它簡單易懂」。

②互動式編輯

v0 並非以單一提示結束;您可以基於初始輸出以互動方式進行編輯。您也可以使用自然語言進行編輯。您甚至可以一起編輯頁面樣式,例如「更改網格數量」、「使其響應式」或「使其具有視差樣式」。這就像一位不可思議的人交談,他可以在幾秒鐘內將您所說的話轉化為設計,甚至為您編寫程式碼。

3)與外部服務合作

它可以輕鬆地與您經常用於設計和工程的工具集成,例如 Github 和 Figma。

例如,你可以載入在 Figma 中建立的設計方案,編寫程式碼並進行互動式編輯。我認為這對有一定設計能力的人或公司內部有設計師的人來說非常有用。我也用 Figma 來構思設計,真希望當時能發現它。我打算試試看。

它也與 Github 緊密整合,產生的程式碼直接上傳到 Github 倉庫。這真的很方便,你可以立即將上傳的程式碼複製到本地,並以閃電般的速度開始開發。

我未來的自己和 v0

我目前的工作重點將放在網路服務上,因此 UI/UX 的規劃和設計必不可少。雖然完全依賴 v0 之類的工具或許是可行的,但生成式人工智慧的創造最終還是要歸功於人類。因此,我必須對我摯愛的 v0 所創造的一切負責。我希望在藉助 v0 的力量的同時,繼續深入學習它,以便我們能夠繼續良好地合作。

結論

你覺得我愛上 v0 的故事怎麼樣?希望它能傳達出我的興奮之情。本文主要講述我初次接觸 v0 時的興奮之情,並介紹其主要功能,因此我會另寫一篇文章,詳細講述我的使用體驗。我也希望聽到大家對 v0 的用途或使用方法的任何建議。

感謝您閱讀到最後^_^


原文出處:https://qiita.com/moyomoyomoyo/items/dedd4515a18992a2527d


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
站長阿川

站長阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

站長精心設計,帶你實作 63 個小專案,得到作品集!

立即開始免費試讀!