告別“AI 塑料味”！Claude Code 加上這個“審美外掛”，你的頁面身價瞬間翻十倍

作者：瓜皮程序
日期：2026年1月4日 下午12:30
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

告別AI塑料味！用Claude Code Skills加UIPrompt.site提升設計質素

整理版摘要

就算去到2026年，好多開發者依然面對一個死局：後端邏輯寫得飛起，Docker部署好順，但係寫出來嘅前端頁面總係有股濃濃嘅「Bootstrap遺風」或者「AI塑料味」。普遍嘅AI生成頁面只係「用得」，離「好睇」差好遠。今日我要介紹一套「降維打擊」組合拳：Claude Code官方Skill + 最強第三方UX庫 + 一個神級Prompt網站。將呢三者結合，你一個人就係一個頂尖設計團隊。

首先，Frontend Design係Anthropic官方出品嘅Skill，核心指令係「拒絕平庸AI審美」。佢寫出來嘅界面信息密度高、視覺衝擊力強、動效細膩，直接係生產級別。其次，UI UX Pro Max係一個大型RAG知識庫，包含調色板、字體搭配、UX最佳實踐，裝咗之後Claude就好似查閲UI設計百科全書。最後，UIPrompt.site係程序員嘅審美作弊器，收錄咗多種流行UI風格如Glassmorphism、Bento Grid等，複製Prompt就可以直接用。

終極工作流程好簡單：先去UIPrompt揀風格，複製描述詞；然後喺Claude Code輸入Prompt，要求結合Frontend Design同UI UX Pro Max，貼上風格描述詞；最後見證奇蹟。有Skill同無Skill嘅輸出分別好大：前者係錯落有致嘅Bento Grid佈局、毛玻璃質感、動態交互同高級配色；後者只係標準嘅導航欄加大標題，乏味又AI味。所以…

  • 透過結合Claude Code嘅Frontend Design Skill、UI UX Pro Max知識庫同UIPrompt.site，可以徹底告別AI塑料味，產出高質素前端設計。
  • 安裝方法：Frontend Design用指令`/plugin marketplace add anthropics/claude-code`，UI UX Pro Max用`npm install -g uipro-cli`同`uipro init --ai claude`。
  • 使用時先喺UIPrompt.site揀風格複製Prompt，再喺Claude Code輸入組合指令，Claude就會自動調用兩個Skill生成代碼。
  • 有Skill同無Skill嘅輸出質素差距極大：前者具備生產級設計細節（毛玻璃、動效、高級配色），後者只係平庸白底藍字Demo。
  • 呢個組合令開發者一個人可以做到頂尖設計團隊嘅效果，核心門檻由「寫代碼」變成「寫出高質素代碼」。
值得記低
Skill

Frontend Design (Anthropic 官方)

安裝指令：/plugin marketplace add anthropics/claude-code

留作參考
Skill

UI UX Pro Max (大神社區)

安裝指令：npm install -g uipro-cli 然後 uipro init --ai claude

留作參考
連結 uiprompt.site

UIPrompt.site - 審美彈藥庫

收錄多種UI風格Prompt，可直接複製使用

開啟
整理重點

告別AI塑料味嘅組合拳

就算去到2026年，好多開發者依然面對一個死局：後端邏輯寫得飛起，Docker部署好順，但係寫出來嘅前端頁面總係有股濃濃嘅「Bootstrap遺風」或者「AI塑料味」。普遍嘅AI生成頁面只係「用得」，離「好睇」差好遠。

今日我要介紹一套「降維打擊」組合拳：Claude Code官方Skill + 最強第三方UX庫 + 一個神級Prompt網站。

將呢三者結合，你一個人就係一個頂尖設計團隊。

整理重點

官方御用：Frontend Design

Frontend Design係Anthropic官方出品嘅Skill，含金量好高。佢嘅核心指令只有一句話：「拒絕平庸AI審美」。

佢寫出來嘅界面信息密度高、視覺衝擊力強、動效細膩，直接係生產級別，唔係寫Demo。

安裝指令好簡單：`/plugin marketplace add anthropics/claude-code`。安裝之後，當你向Claude提出與構建界面相關請求時，佢會自動調用呢個Skill。關鍵觸發詞包括build、create、design等。

安裝指令 bash 
/plugin marketplace add anthropics/claude-code
  1. 1 使用案例：構建高顏值SaaS儀表盤，Prompt要求用Frontend Design、React同Tailwind，包含動態折線圖同玻璃擬態效果。
  2. 2 Claude會自動調用Skill，生成唔係白底藍字嘅粗糙頁面，而係細膩陰影、高級漸變、圓角處理同微交互嘅生產級代碼。

安裝完成後，你唔需要輸入特定命令啟動，佢係Agent Skill，會根據請求自動觸發。

整理重點

民間大神：UI UX Pro Max

UI UX Pro Max係一個巨大嘅RAG知識庫，將調色板、字體搭配、UX最佳實踐全部打包。佢唔似寫代碼，更像查閲一本「UI設計百科全書」。

安裝指令：`npm install -g uipro-cli` 然後 `uipro init --ai claude`。最爽係你甚至唔需要手動敲呢啲命令，同Claude Code講一聲，佢就會自動幫你檢測環境、下載、配置，全程自動化。

使用時，你可以顯式要求Claude查詢呢個知識庫，例如問金融App嘅配色同字體建議。佢會檢索並提供具體方案，例如深海軍藍配金色，字體用Inter或Roboto。

整理重點

注入靈魂：UIPrompt.site 與終極工作流

UIPrompt.site係程序員嘅「審美作弊器」，收錄咗多種流行UI風格，例如Glassmorphism、Neumorphism、Bento Grid、Cyberpunk等。使用時唔好只係睇圖，要複製佢嘅Prompt。

關鍵用法：先喺UIPrompt.site揀風格，複製風格描述詞；然後喺Claude Code輸入Prompt，要求結合Frontend Design同UI UX Pro Max，貼上風格描述詞。

例如目標係做SaaS產品管理工具嘅Landing Page。具體Prompt可以係：「請結合Frontend Design嘅高保真代碼能力同UI UX Pro Max嘅組件規範，風格參考以下Bento Grid描述：[粘貼Prompt]。為我構建一個Landing Page，要求視覺衝擊力強，數據面板有動態交互，配色高級。」

  • Frontend Design 畀你高手嘅手（代碼質量）
  • UI UX Pro Max 畀你高手嘅腦（設計規範）
  • UIPrompt.site 畀你高手嘅眼（審美風格）
整理重點

點解呢個組合咁重要？

係AI編程時代，「寫出代碼」已經唔係門檻，「寫出乜嘢代碼」先係。高手透過Skill組合加精準Prompt庫，5分鐘內產出價值三萬蚊嘅設計稿級別代碼。

呢個「三位一體」——Frontend Design、UI UX Pro Max、UIPrompt.site——就係超級個體嘅秘密武器。別再讓AI裸奔，而家就去安裝！

 

就算去到 2026 年，仲有好多開發者面對緊一個死局：

後端邏輯寫得好快，Docker 部署順到冇問題，但係寫出嚟嘅前端頁面……點講呢，總係有陣濃濃嘅 “Bootstrap 遺風” 或者 “AI 膠味”。

普通 AI（就算係 GPT-4o 或者原生 Claude）生成嘅頁面，好多時只係“用得”，離“靚”仲爭好遠。

圖片

今日，我要畀你一套“降維打擊”嘅組合拳。

Claude Code 官方 Skill + 最強第三方 UX 庫 + 一個神級 Prompt 網站。

將呢三樣嘢結合埋一齊，你一個人就等於一個頂尖嘅設計團隊。

一、 點解要裝 Skills？（拒絕平庸）

預設嘅 Claude Code 好勁，但係佢喺設計上係“中立”嘅。中立好多時就代表平庸。

我哋要幫佢注入“審美偏好”。

最近社羣入面殺出咗兩匹黑馬，裝咗佢哋之後，Claude 就好似啱啱由羅德島設計學院進修返嚟咁。

1. 官方御用：Frontend Design

呢個係 Anthropic 官方出嘅 Skill，含金量極高。

佢嘅核心指令得一句話："Avoid generic AI aesthetics."（拒絕平庸嘅 AI 審美）。

  • • 特點：佢寫出嚟嘅介面，資訊密度高、視覺衝擊力強、動效細膩。佢係為 Production-grade（生產級）而設，唔係寫 Demo 畀你嘅。
  • • 安裝：

    Bash

    /plugin marketplace add anthropics/claude-code

 

1. 點樣觸發？

安裝完成之後，你唔需要輸入特定指令去啟動佢。佢係一個 Agent Skill，當你向 Claude 提出同“構建介面”、“寫前端代碼”、“設計網頁”相關嘅請求時，Claude 會自動調用呢個 Skill。

關鍵觸發詞： build, create, design, frontend, interface, component.

2. 使用案例：構建一個高顏值 SaaS 儀錶板

Prompt (提示詞) 示例：

"Use the frontend-design skill to build a modern, dark-mode SaaS dashboard for analyzing user traffic.Requirements:
1. Use React and Tailwind CSS.
2. Include a dynamic line chart for 'Daily Active Users'.
3. Add a glassmorphism effect to the sidebar.
4. Ensure high information density but keep it readable."


佢會做乜：

  1. 1. 調用 Skill： Claude 會顯示 Using skill: frontend-design（或者類似提示）。
  2. 2. 設計審美： 佢唔會生成預設嗰啲白底藍字嘅粗糙頁面。佢會用細膩嘅陰影、高級嘅漸變色（例如黑金、深紫）、圓角處理同微交互（Hover效果）。
  3. 3. 生成代碼： 直接產出生產級別嘅 .tsx 或 .html 代碼。

 

2. 民間大神：UI UX Pro Max

呢個係一個巨大嘅 RAG（檢索增強）知識庫。佢將調色板、字體搭配、UX 最佳實踐全部打包咗。

  • • 特點：佢唔似係寫代碼，反而似係查閲緊一本《UI 設計百科全書》。
  • • 安裝：

    Bash

    npm install -g uipro-cli
    uipro init --ai claude

最正係乜？ 你甚至唔需要手動打呢啲指令。

我只係話畀 Claude Code “我要安裝呢兩個 Skill”，佢就自動幫我檢查環境、下載、配置，全程自動化。呢啲就係 Agent 嘅魅力！

 

1. 點樣觸發？

安裝並初始化 (uipro init) 之後，佢通常會作為一個 MCP Tool 或 Context Provider 存在。你可以明確要求 Claude 去“查詢”或者“參考”呢個知識庫。

關鍵觸發詞：search ui ux pro, refer to design guidelines, best practice for...

2. 使用案例：獲取配色同 UX 建議

場景： 你想做一個金融 App，但唔知用咩顏色同字體先顯得專業。

Prompt (提示詞) 示例：

"I am building a Fintech mobile app.

  1. 1. Consult UI UX Pro Max to recommend a trustworthy color palette and font pairing suitable for finance.
  2. 2. What are the UX best practices for a 'Money Transfer' flow according to the knowledge base?"

佢會做乜：

  1. 1. 檢索知識庫： 佢會去搜尋本地或者遠端嘅 uipro 數據庫。
  2. 2. 提供方案： 佢會話畀你知：“金融產品建議用深海軍藍 (#0A192F) 配金色 (#FFD700) 做強調色，字體建議用 Inter 或者 Roboto，因為佢哋喺數字顯示上好清晰。”
  3. 3. UX 指導： 佢會建議你：“轉賬流程應該包括明確嘅‘確認’步驟，而且喺輸入金額嘅時候要有巨大嘅數字顯示，以減少用戶錯誤。”

 

二、 注入靈魂：UIPrompt.site

原文淨係講咗上面兩個工具，但作為“超級個體”，我哋仲需要一樣嘢：靈感。

畢竟，Skill 再勁，如果你淨係識講“幫我做一個登陸頁”，咁做出嚟嘅嘢都係好普通。

呢度要推薦一個神器：https://www.uiprompt.site/zh/styles

圖片

呢個網站簡直係程序員嘅“審美作弊器”。佢收錄咗而家最流行嘅 UI 風格：

  • • Glassmorphism (毛玻璃)
  • • Neumorphism (新擬態)
  • • Bento Grid (便當盒佈局)
  • • Cyberpunk (賽博朋克)
  • • Brutalism (粗野主義)

點用？呢個先係關鍵！

唔好淨係喺呢個網站睇圖，你要複製佢嘅 Prompt。

三、 終極工作流：1+1+1 > 10

而家，等我哋將呢三樣嘢結合埋一齊，示範一次**“核聚變”**級別嘅開發流程。

任務目標：為一款 SaaS 產品管理工具做一個 Landing Page。

第一步：去 UIPrompt 揀“靈魂”

打開 UIPrompt.site，揾到你鍾意嘅風格。例如最近好興嘅 "Bento Grid"（便當盒風格）。

複製網站提供嘅風格描述詞（例如：Grid layout, modular design, distinct content blocks, rounded corners...）。

第二步：激活 Claude Code 組合拳

喺 Claude Code 終端入面，輸入以下 Prompt（呢個係核心）：

"請結合 Frontend Design 嘅高保真代碼能力，同 UI UX Pro Max 嘅組件規範。

風格上，請嚴格參考以下 Bento Grid 風格描述：

[貼上你由 UIPrompt.site 複製嘅提示詞]

幫我構建一個 SaaS 產品管理工具嘅 Landing Page。

要求：視覺衝擊力強，數據面板帶有動態交互效果，配色要高級。"

第三步：見證奇蹟

效果對比：

  1. 1. 唔加 Skill + 普通 Prompt：

生成嘅係一個標準嘅“導航欄+大標題+三個特性圖標”嘅頁面。乾淨，但係悶，一眼睇得出係 AI 味。

  1. 2. Frontend Design + UI UX Pro Max + UIPrompt：

Claude 會生成一個極具現代感嘅頁面：

  • • 佈局：唔再係無聊嘅上下結構，而係錯落有致嘅 Bento Grid 模塊化佈局。
  • • 質感：卡片帶有微弱嘅毛玻璃背景同細膩嘅陰影（UI UX Pro Max 嘅功勞）。
  • • 動效：數據圖表會隨着鼠標移動產生視差效果（Frontend Design 嘅功勞）。
  • • 配色：唔再係預設藍，而係高級嘅黑金或者漸變紫。

四、 點解呢個咁重要？

喺 AI 編程時代，“寫出代碼”已經唔再係門檻，“寫出咩嘢代碼”先係。

當你仲喺度諗 div 點樣置中嘅時候，高手已經通過 Skill 組合 + 精準 Prompt 庫，喺 5 分鐘之內產出咗價值 3 萬蚊嘅設計稿級別代碼。

  • • Frontend Design 畀咗你高手嘅手（代碼質量）。
  • • UI UX Pro Max 畀咗你高手嘅腦（設計規範）。
  • • UIPrompt.site 畀咗你高手嘅眼（審美風格）。

呢個就係超級個體嘅“三位一體”。

圖片

唔好再畀你嘅 AI 裸跑啦。 而家就去安裝呢兩個 Skill，收藏嗰個網站，將你嘅產品顏值拉滿！

資源彙總：

  1. 1. Frontend Design: /plugin marketplace add anthropics/claude-code
  2. 2. UI UX Pro Max: npm install -g uipro-cli
  3. 3. 審美彈藥庫: https://www.uiprompt.site/zh/styles

更多 Claude code skills 文章

https://cc.guapihub.net

 

 

即使到了 2026 年，很多開發者依然面臨一個死局：

後端邏輯寫得飛起，Docker 部署溜得不行，但寫出來的前端頁面……怎麼說呢，總有一股濃濃的 “Bootstrap 遺風” 或者 “AI 塑料味”。

普通的 AI（哪怕是 GPT-4o 或原生 Claude）生成的頁面，往往只是“能用”，離“好看”差了十萬八千里。

圖片

今天，我要給你一套“降維打擊”的組合拳。

Claude Code 官方 Skill + 最強第三方 UX 庫 + 一個神級 Prompt 網站。

把這三者結合，你一個人就是一個頂尖的設計團隊。

一、 為什麼要裝 Skills？（拒絕平庸）

默認的 Claude Code 很強，但它在設計上是“中立”的。中立往往意味着平庸。

我們需要給它注入“審美偏好”。

最近社區裏殺出了兩匹黑馬，裝上它們，Claude 就像剛從羅德島設計學院進修歸來。

1. 官方御用：Frontend Design

這是 Anthropic 官方出的 Skill，含金量極高。

它的核心指令只有一句話："Avoid generic AI aesthetics."（拒絕平庸的 AI 審美）。

  • • 特點：它寫出來的界面，信息密度高、視覺衝擊力強、動效細膩。它是奔着 Production-grade（生產級）去的，不是給你寫 Demo 的。
  • • 安裝：

    Bash

    /plugin marketplace add anthropics/claude-code

 

1. 如何觸發？

安裝完成後，你不需要輸入特定的命令來啓動它。它是一個 Agent Skill，當你向 Claude 提出與“構建界面”、“寫前端代碼”、“設計網頁”相關的請求時，Claude 會自動調用這個 Skill。

關鍵觸發詞： build, create, design, frontend, interface, component.

2. 使用案例：構建一個高顏值 SaaS 儀表盤

Prompt (提示詞) 示例：

"Use the frontend-design skill to build a modern, dark-mode SaaS dashboard for analyzing user traffic.Requirements:
1. Use React and Tailwind CSS.
2. Include a dynamic line chart for 'Daily Active Users'.
3. Add a glassmorphism effect to the sidebar.
4. Ensure high information density but keep it readable."


它會做什麼：

  1. 1. 調用 Skill： Claude 會顯示 Using skill: frontend-design（或類似提示）。
  2. 2. 設計審美： 它不會生成那種默認的、白底藍字的粗糙頁面。它會運用細膩的陰影、高級的漸變色（如黑金、深紫）、圓角處理和微交互（Hover效果）。
  3. 3. 生成代碼： 直接產出生產級別的 .tsx 或 .html 代碼。

 

2. 民間大神：UI UX Pro Max

這是一個巨大的 RAG（檢索增強）知識庫。它把調色板、字體搭配、UX 最佳實踐全部打包了。

  • • 特點：它不像是在寫代碼，更像是在查閲一本《UI 設計百科全書》。
  • • 安裝：

    Bash

    npm install -g uipro-cli
    uipro init --ai claude

最爽的是什麼？ 你甚至不需要手動敲這些命令。

我只是告訴 Claude Code “我要安裝這兩個 Skill”，它就自動幫我檢測環境、下載、配置，全程自動化。這就是 Agent 的魅力！

 

1. 如何觸發？

安裝並初始化 (uipro init) 後，它通常會作為一個 MCP Tool 或 Context Provider 存在。你可以顯式地要求 Claude 去“查詢”或“參考”這個知識庫。

關鍵觸發詞：search ui ux pro, refer to design guidelines, best practice for...

2. 使用案例：獲取配色與 UX 建議

場景： 你想做一個金融 App，但不知道用什麼顏色和字體顯得專業。

Prompt (提示詞) 示例：

"I am building a Fintech mobile app.

  1. 1. Consult UI UX Pro Max to recommend a trustworthy color palette and font pairing suitable for finance.
  2. 2. What are the UX best practices for a 'Money Transfer' flow according to the knowledge base?"

它會做什麼：

  1. 1. 檢索知識庫： 它會去搜索本地或遠程的 uipro 數據庫。
  2. 2. 提供方案： 它會告訴你：“金融產品推薦使用深海軍藍 (#0A192F) 搭配金色 (#FFD700) 作為強調色，字體推薦使用 Inter 或 Roboto，因為它們在數字顯示上清晰度高。”
  3. 3. UX 指導： 它會建議你：“轉賬流程應該包含明確的‘確認’步驟，並且在輸入金額時要有巨大的數字顯示，以減少用戶錯誤。”

 

二、 注入靈魂：UIPrompt.site

原文只講了上面兩個工具，但作為“超級個體”，我們還需要一樣東西：靈感。

畢竟， Skill 再強，如果你只會說“給我做一個登陸頁”，那做出來的還是很普通。

這裏要推薦一個神器：https://www.uiprompt.site/zh/styles

圖片

這個網站簡直是程序員的“審美作弊器”。它收錄了目前最流行的 UI 風格：

  • • Glassmorphism (毛玻璃)
  • • Neumorphism (新擬態)
  • • Bento Grid (便當盒佈局)
  • • Cyberpunk (賽博朋克)
  • • Brutalism (粗野主義)

怎麼用？這才是關鍵！

不要只在這個網站看圖，你要複製它的 Prompt。

三、 終極工作流：1+1+1 > 10

現在，讓我們把這三者結合起來，演示一次**“核聚變”**級別的開發流程。

任務目標：為一款 SaaS 產品管理工具做一個 Landing Page。

第一步：去 UIPrompt 選“靈魂”

打開 UIPrompt.site，找到你喜歡的風格。比如最近很火的 "Bento Grid"（便當盒風格）。

複製網站提供的風格描述詞（例如：Grid layout, modular design, distinct content blocks, rounded corners...）。

第二步：激活 Claude Code 組合拳

在 Claude Code 終端中，輸入以下 Prompt（這是核心）：

"請結合 Frontend Design 的高保真代碼能力，和 UI UX Pro Max 的組件規範。

風格上，請嚴格參考以下 Bento Grid 風格描述：

[粘貼你從 UIPrompt.site 複製的提示詞]

為我構建一個 SaaS 產品管理工具的 Landing Page。

要求：視覺衝擊力強，數據面板帶有動態交互效果，配色要高級。"

第三步：見證奇蹟

效果對比：

  1. 1. 不加 Skill + 普通 Prompt：

生成的是一個標準的“導航欄+大標題+三個特性圖標”的頁面。乾淨，但乏味，一眼 AI 味。

  1. 2. Frontend Design + UI UX Pro Max + UIPrompt：

Claude 會生成一個極具現代感的頁面：

  • • 佈局：不再是無聊的上下結構，而是錯落有致的 Bento Grid 模塊化佈局。
  • • 質感：卡片帶有微弱的毛玻璃背景和細膩的陰影（UI UX Pro Max 的功勞）。
  • • 動效：數據圖表會隨着鼠標移動產生視差效果（Frontend Design 的功勞）。
  • • 配色：不再是默認藍，而是高級的黑金或漸變紫。

四、 為什麼這很重要？

在 AI 編程時代，“寫出代碼”不再是門檻，“寫出什麼樣的代碼”才是。

當你還在糾結 div 怎麼居中時，高手已經通過 Skill 組合 + 精準 Prompt 庫，在 5 分鐘內產出了價值 3 萬塊的設計稿級別的代碼。

  • • Frontend Design 給了你高手的手（代碼質量）。
  • • UI UX Pro Max 給了你高手的腦（設計規範）。
  • • UIPrompt.site 給了你高手的眼（審美風格）。

這就是超級個體的“三位一體”。

圖片

別再讓你的 AI 裸奔了。 現在就去安裝這兩個 Skill，收藏那個網站，把你的產品顏值拉滿！

資源彙總：

  1. 1. Frontend Design: /plugin marketplace add anthropics/claude-code
  2. 2. UI UX Pro Max: npm install -g uipro-cli
  3. 3. 審美彈藥庫: https://www.uiprompt.site/zh/styles

更多 Claude code skills 文章

https://cc.guapihub.net