進(jìn)入3月，天氣終于暖和起來了。這是 2023 年 3 月的第 1 波設(shè)計干貨合集！UI 設(shè)計師所期待的 AI 生成 UI 終于來了，雖然處于開發(fā)早期，但是也值得看看。與此同時，還有人將 ChatGPT 和 Tailwind 結(jié)合到一起來用，使用這個服務(wù)，你干脆可以直接獲得相應(yīng)的 CSS 和 HTML 代碼！當(dāng)然，AI 生成可能滿足不了設(shè)計和前端同學(xué)的需求，沒關(guān)系，這一期還有高素質(zhì)的設(shè)計系統(tǒng)和完全免費可商用的網(wǎng)頁模板！

人工智能 UI 設(shè)計工具 Galileo Ai

https://www.usegalileo.ai/

生成式 AI 可塑性確實很強，之前我們看到的很多生成式 AI 工具大都是用來生成圖片，而 UI 這種規(guī)律性的設(shè)計其實也相當(dāng)貼合 AI 生成的邏輯。這個名為 Galileo Ai 的新服務(wù)就是干這個的——你只需要提供一組描述詞，它就能生成效果還不錯的 UI 界面，也許還沒有辦法生成可用性極強的產(chǎn)品級別 UI 流程，但是對于很多 APP 而言，這也是一個不錯的開始了，對吧？

使用 ChatGPT 生成 Tailwind 組件

https://www.btw.so/tools/chat-gpt-tailwind-css-components

如果你的團(tuán)隊正在使用 Tailwind，那么這套工具 Tailwind CSS 組件生成工具一定要嘗試一下，它結(jié)合了當(dāng)下大熱的 ChatGPT，你只需要寫下你需要的組件的描述和關(guān)鍵詞，選擇你要的主色和次要色，然后就能生成你要的 UI 組件，這個時候在左上角可以切換成 代碼模式，你可以稍加調(diào)整，將其應(yīng)用到你的 Tailwind 代碼當(dāng)中。

高品質(zhì)設(shè)計系統(tǒng) Blank Design

https://useblank.design/

雖然 AI 生成 UI 已經(jīng)出現(xiàn)了，但是高品質(zhì)的設(shè)計系統(tǒng)依然是設(shè)計項目中的剛需。這個名為 Blank System 的設(shè)計系統(tǒng)包含 2000 多個組件和 500 多個可自定義的全局樣式，整個系統(tǒng)都是高度可擴(kuò)展的。如果你需要快速創(chuàng)建一個著陸頁，使用 Blank 幾乎可以在幾分鐘內(nèi)快速完成調(diào)整和設(shè)計。這套系統(tǒng)還額外配備了一套百搭的抽象 3D 圖形素材。這套設(shè)計系統(tǒng)提供一個輕量級的免費版供個人用戶使用，可以輕松在 Figma 當(dāng)中編輯測試。

50 個免費著陸頁 HTML 模板

https://htmlrev.com/

這個名為 htmlrev 的網(wǎng)站出自一名網(wǎng)頁開發(fā)者之手，為了惠及同樣忙于到處找免費模板和素材同行，干脆自己創(chuàng)建了這個網(wǎng)站，匯總了 50 個高素質(zhì)、免費可商用的免費 HTML 模板，這些模板大多使用 Bootstrap 4 或者 5，支持 Google fonts，font awosome 等主流和流行插件，模板內(nèi)的代碼也大都非常易于閱讀，模板自身附帶有可用的圖片素材，有需求的同學(xué)一定不要錯過。

免費精選 UI 套件+靈感+設(shè)計系統(tǒng)+素材

https://prokit.gumroad.com/l/free_editable_UIkits

這個名為 Prokit 的設(shè)計素材合集，是耗費了幾周時間精心挑選整合出來的免費資源和素材，其中包括超過 150 套用于移動端和桌面端的 UIkit 和 50 多套設(shè)計系統(tǒng)，這些分散在互聯(lián)網(wǎng)各個角落的免費設(shè)計工具，能夠讓你事半功倍地設(shè)計 UI，其中不乏一些結(jié)合了最新的趨勢和技術(shù)的設(shè)計系統(tǒng)和素材，有需求的 UI/UX 設(shè)計師可以收藏一波。

超大型3D角色庫 Avatarz 2

https://www.avatarz.design/

超大型 3D 角色素材哭 Avatarz 升級到 2.0了，這套 3D 角色庫可以針對角色進(jìn)行更加深入的定制，不僅僅是衣服、膚色和發(fā)型等基礎(chǔ)的組件可選，而且包括眼睛的輪廓、表情細(xì)節(jié)也全都可以定制，諸多定制元素排列組合下能夠生成的不同角色造型數(shù)量超過 4 億種，絕對能夠滿足絕大多數(shù)的角色設(shè)計需求。如果你不知道你能不能用得來這套角色庫，可以先下載他們的免費 Demo，體驗一把。即使你不會使用 3D 編輯工具，AvatarZ 同樣提供 PNG 格式的素材，輕松拼接調(diào)整。

知名設(shè)計資源平臺 IconScout 專用 Figma 插件

https://iconscout.com/plugins/for-figma

我們之前推薦過很多 IconScout 所出品的素材合集，他們會根據(jù)設(shè)計師的日常設(shè)計需求，在不同的節(jié)日輸出主題的圖庫和資源，為不同類型的設(shè)計設(shè)計師提供特定類型的干貨。如今 IconScout 也推出了自己的 Figma 插件，方便設(shè)計師在設(shè)計過程中一鍵獲取自己所需要的資源。