該下那些關鍵字才可以讓 AI 在一開始就設計出漂亮的網站？可以試看看 ui-ux-pro-max-skill 提供的解法。
Antigravity 是 Google 推出的 AI 程式開發環境，你可以把它想像成一個超級聰明的虛擬工程師助手。你只要下指令，它就會幫你規劃、寫程式、甚至測試網頁。它主要強項是自動化處理寫程式的雜事。
沒用UI UX Pro Max的差別
如果你只用原本的 Antigravity 來做 Node.js 網頁，AI 會專注在讓功能可以運作。它生成的網頁畫面通常比較陽春，像是標準的工程師風格，顏色跟排版可能很普通，甚至有點過時。如果你想要網頁變漂亮，你需要花很多時間跟 AI 解釋你想要什麼顏色、什麼樣的按鈕，常常要改很久。
用了UI UX Pro Max的差別
這個 ui-ux-pro-max-skill 專案就像是給 AI 一本「頂級設計師的筆記本」。它裡面存了幾百種專業的配色、字體搭配和介面風格。當 Antigravity 搭配這個專案時，AI 寫網頁會先去查這本筆記。結果就是做出來的網頁一開始就很美，風格很現代，而且整體的視覺效果很一致，不會有拼湊感。
Antigravity 裡的安裝概念
在 Google Antigravity 這個 IDE 裡面，要使用 ui-ux-pro-max-skill 這個專案，其實就很像是在幫你的 AI 助手安裝一個「外掛」或是「大腦擴充包」。Antigravity 有一個特殊的資料夾結構，專門用來放這些技能設定，讓 AI 知道在寫網頁的時候要參考哪些設計規範。
簡單來說，你把這個專案的檔案放對位置，AI 就會突然變得很懂設計。
最快的安裝方法：用指令
這也是最推薦的方法，因為最無腦。你只要打開終端機 (Terminal)，輸入一行指令
npm install -g uipro-cli先把工具裝好。
接著，在你的專案目錄
cd /path/to/your/project下打
# Install for your AI assistant
uipro init --ai claude # Claude Code
uipro init --ai cursor # Cursor
uipro init --ai windsurf # Windsurf
uipro init --ai antigravity # Antigravity (.agent + .shared)
uipro init --ai copilot # GitHub Copilot
uipro init --ai kiro # Kiro
uipro init --ai all # All assistants這個指令會自動幫你把所有需要的設定檔下載下來，並且放到 Antigravity 規定的資料夾裡面。你不用自己去搬檔案，幾秒鐘就搞定。
手動安裝的方法
如果你不喜歡打指令，也可以用複製貼上的。你需要去下載那個 GitHub 專案，然後把裡面的 .agent/workflows/ui-ux-pro-max.md 這個檔案，還有 .shared/ui-ux-pro-max/ 這個資料夾，全部複製到你的 Antigravity 專案對應的位置。
這個方法比較麻煩，容易貼錯地方，所以除非指令跑不動，不然不建議這樣做。
實際使用的方式
安裝好之後，怎麼叫 AI 用這個技能呢？
很簡單，在 Antigravity 的 AI 對話視窗裡面，你通常可以直接用 /ui-ux-pro-max 這樣的指令開頭（或者直接用自然語言說「請依照 UI UX Pro Max 的規範…」）。
接著你就描述你要做的網頁，例如「幫我做一個深色模式的登入頁面」。你會發現 AI 吐出來的程式碼，會自動套用那些專業的配色跟版型，跟你平常亂聊生出來的陽春畫面完全不同。3
原作者的線上 Demo:
https://ui-ux-pro-max-skill.nextlevelbuilder.io/#styles
找到一個覺得可以參考的範例:
點 “View Demo”, 可以看到更完整的網頁效果.
點 “Show Prompt”, 可以看到提示詞:
Design a serene beauty spa landing page with soft UI elements, service menu, before/after gallery, booking system preview, and testimonials. Use soft pastels and calming aesthetics.
網友製作的 demo:
https://github.com/joshhu/uitest
網友製作的 demo:
https://tranquil-kitten-5d3db6.netlify.app/
