126 萬個真實界面，喂出了這個AI 的設計審美
整理版優先睇
畀 AI 睇過 126 萬個真實界面，設計審美即刻提升唔少
呢篇文章講嘅係 Refero MCP 呢個工具，佢嘅做法係將 126,000 個真實產品界面（共超過 126 萬個屏幕）整合成一個數據庫，畀 AI Agent 喺生成頁面前先「參考」真實案例。作者指出而家 AI 生成嘅頁面千篇一律，好似倒模咁，因為 AI 根本無見過好嘅設計，只係靠程式碼同邏輯去估。Refero 嘅出現就係為咗填補呢個 gap，令 AI 唔再係盲寫代碼，而係可以睇完真實產品嘅結構化分析（包括佈局、UX 模式、UI 模式）再出手。
整體結論係：AI 嘅程式碼能力已經去到樽頸，下一個競爭位就係設計審美。而 Refero 就係第一個將呢個規模做到嘅工具，佢成個流程就係「先調研，再動手」。作者認為，當第日所有 AI 都識得寫頁面，邊個 AI 更識得「睇」頁面，邊個就會贏。文章仲提供咗安裝方法，可以透過 MCP 配置或者 Skill 方式整合落 Claude Code、Cursor、Lovable 等工具度。
- AI 生成界面之所以「有陣怪味」，係因為佢哋無見過真實產品嘅好設計，只係靠程式碼猜測，導致千篇一律嘅佈局。
- Refero MCP 收錄咗 126,000 個屏幕同 8,000 個用戶流程，涵蓋由首次啟動到帳號刪除嘅每一個 UI 場景，畀 AI 做設計前先參考。
- 每個屏幕都帶有 metadata，包括描述、UX 模式、UI 模式同佈局結構，等 AI 讀到嘅係藍圖而唔係截圖，可以幾秒內分析上百個界面。
- 呢個工具唔淨係畀截圖，而係結構化案例，例如金融 app 嘅 onboarding 流程點做、邊啲佈局轉化率高、邊啲彈窗用戶會關閉，等 AI 做有根據嘅決策。
- 安裝好簡單，一行配置就搞掂，支援 Claude Code、Cursor、Lovable 等 MCP 工具；作者認為 AI 嘅下一個分水嶺係「識唔識設計」，而 Refero 就係呢個方向嘅先行者。
MCP 配置（Claude Code 為例）
在 claude_desktop_config.json 加入以下配置，首次使用會彈瀏覽器登入 Refero 帳號。
Refero Skill 安裝方式
透過 npx skills add 指令安裝：npx skills add
Refero 官方網站
工具官方網站，可以瞭解更多詳情。
MCP 配置內容
{"mcpServers":{"refero":{"command":"npx","args":["-y","@referodesign/refero-mcp"]}}}
而家 AI 生成嘅頁面，點解咁「AI 味」？
你試過用 AI 生成頁面未？如果試過，你一定有呢種感覺：功能係啱嘅，邏輯係通嘅，但嗰個界面就係「唔對路」。講唔出邊度樣衰，但就係一股濃烈嘅 AI 味。所有 AI 生成嘅頁面好似同一個阿媽生咁——導航欄 + 三欄佈局 + 卡片列表 + 底部版權聲明，十個 AI 畀十個首頁，拆咗 Logo 你都分唔清邊個打邊個。
Refero MCP：補返堂設計課
Refero MCP 要做嘅，就係畀 AI 補返呢堂設計課。佢哋收錄咗 126,000 個屏幕同 8,000 個用戶流程。由首次啟動到帳號刪除，由 onboarding 到 paywall，由空狀態到報錯頁，真實產品裏面每一個 UI 場景佢哋都截低咗放曬入庫。
你嘅 Agent 唔再係盲寫代碼，而係先「調研」再動手。佢會先問 Refero：「金融 app 嘅 onboarding 流一般點做？」幾秒鐘之後，佢可以讀到幾十個真實案例嘅結構化分析：邊啲佈局轉化率高、邊啲彈窗用戶會閂咗佢、邊啲按鈕顏色組合被驗證過。呢個唔係喺度估，而係喺度抄——唔係，係研究完之後做決策。
點樣安裝同用呢個工具？
好簡單，一行配置就搞掂。首次調用會彈瀏覽器登入 Refero 帳號，之後就自動化曬，無額外操作門檻。支援 Claude Code、Cursor、Lovable、Codex等支援 MCP 嘅工具。
{
"mcpServers": {
"refero": {
"command": "npx",
"args": ["-y", "@referodesign/refero-mcp"]
}
}
}或者用 Skill 方式安裝：
npx skills add
https://github.com/referodesign/refero_skill官網都有更多詳細資訊：https://refero.design/
總結：設計審美，就係 AI 下一個分水嶺
AI 程式碼能力已經捲到天花板，下一個拉開差距嘅位就係設計。以前我哋話 AI「識寫程式碼」係能力，而家開始，「佢識唔識設計」先係分水嶺。
立即試下裝 Refero MCP，畀你嘅 AI 補返堂設計課啦。
126 萬個真實界面，餵出咗呢個AI嘅設計審美
而家 AI 生成一個頁面只需要幾秒鐘。但你閂埋眼都估到佢生咩樣——嗰個千篇一律嘅卡片佈局，嗰個個個差唔多嘅側邊欄，嗰個講唔清係簡潔定係簡陋嘅首頁。
呢個唔係 AI 嘅錯。佢擅長寫代碼，但唔擅長「睇」設計。
而今日呢個工具，直接將 126,000 個真實產品界面餵咗俾你嘅 Agent。
正文
你用過 AI 生成頁面未？
如果用過，你一定有呢種感受：功能係啱嘅，邏輯係通嘅，但嗰個界面就係「唔對路」。講唔出邊度樣衰，但就係一股濃鬱嘅 AI 味。
所有 AI 生成嘅頁面都好似一個阿媽生嘅。導航欄 + 三欄佈局 + 卡片列表 + 底部版權聲明。十個 AI 俾你十個首頁，拆咗 Logo 你分唔清邊個打邊個。
呢個唔係審美問題，係知識盲區。
AI 模型喺代碼同邏輯上已經勁到離譜，但佢哋根本冇「見過」真正好嘅產品設計。佢哋唔知 Linear 嘅空狀態點解咁舒服，唔知 Stripe 嘅支付流程點解咁流暢，唔知 Airbnb 嘅詳情頁點解令人想落單。
佢哋只能亂咁估。
而 Refero MCP 要做嘅，就係幫 AI 補返呢堂設計課。
126,000 個屏幕，8,000 個用戶流程。
呢個數字聽落誇張，但諗真又合理——從首次啓動到賬號刪除，從 onboarding 到 paywall，從空狀態到報錯頁，真實產品入面每一個 UI 場景，Refero 都截落嚟餵咗入庫裏面。
你嘅 Agent 唔再係閂埋眼寫代碼，而係先「調研」再鬱手。
佢會先問 Refero：「金融 app 嘅 onboarding 流一般點做？」
幾秒鐘之後，佢就可以讀到幾十個真實案例嘅結構化分析：邊啲佈局轉化率高，邊啲彈窗用戶會閂咗佢，邊啲按鈕顏色組合被驗證過。
呢個就唔係喺度估喇，呢個係喺度抄——唔啱，係研究完之後做決策。
一個做支付界面嘅 AI，如果佢見過 Stripe、PayPal、Paddle 幾千個真實付款流程嘅界面，佢嘅輸出點可能會同冇見過嘅 AI 一樣？
呢個就係 Refero 填平嘅 Gap。
而且佢唔只係俾你一堆截圖。每一個屏幕都帶咗 metadata：描述、UX 模式、UI 模式、佈局結構。Agent 讀嘅係藍圖，唔係畫。
一次設計任務，佢可以幾秒鐘內分析上百個界面——呢個工作量放喺以前夠一個設計師查一個禮拜。
而家裝咗 MCP，Claude Code、Cursor、Lovable、Codex……只要支援 MCP 嘅工具都用得。
點裝？
一行配置。
首次調用會彈瀏覽器登入 Refero 賬號，之後就自動喇。冇額外操作門檻。
結語
AI 代碼能力已經捲到天花板喇，下一個拉開差距嘅位，就係設計。
以前我哋話 AI「會寫代碼」係能力，而家開始，佢「識唔識設計」先至係分水嶺。
Refero MCP 可能唔係最後一個做呢個方向嘅公司，但佢係第一個將規模做返起嘅。
當所有 AI 都識寫頁面嘅時候，你嘅 AI 必須更加識「睇」頁面。
安裝方法
# MCP 配置（以 Claude Code 為例）
# 在 claude_desktop_config.json 添加：
{
"mcpServers": {
"refero": {
"command": "npx",
"args": ["-y", "@referodesign/refero-mcp"]
}
}
}
# 或者用 Skill 方式
npx skills add https://github.com/referodesign/refero_skill官網：https://refero.design/
126 萬個真實界面，喂出了這個AI 的設計審美
現在 AI 生成一個頁面只需要幾秒鐘。但你閉着眼都能猜到它長什麼樣——那個千篇一律的卡片佈局，那個人人相似的側邊欄，那個說不清是簡潔還是簡陋的首頁。
這不是 AI 的錯。它擅長寫代碼，但不擅長「看」設計。
而今天這個工具，直接把 126,000 個真實產品界面餵給了你的 Agent。
正文
你用過 AI 生成頁面嗎？
如果用過，你一定有這種感受：功能是對的，邏輯是通的，但那個界面就是「不對勁」。說不上來哪裏醜，但就是一股濃郁的 AI 味。
所有 AI 生成的頁面都像是一個媽生的。導航欄 + 三欄佈局 + 卡片列表 + 底部版權聲明。十個 AI 給你十個首頁，拆掉 Logo 你分不清誰是誰。
這不是審美問題，是知識盲區。
AI 模型在代碼和邏輯上已經強到離譜，但它們根本沒「見過」真正好的產品設計。它們不知道 Linear 的空狀態為什麼舒服，不知道 Stripe 的支付流程為什麼流暢，不知道 Airbnb 的詳情頁為什麼讓人想下單。
它們只能瞎猜。
而 Refero MCP 要做的，就是給 AI 補上這堂設計課。
126,000 個屏幕，8,000 個用戶流程。
這數字聽起來誇張，但細想又合理——從首次啓動到賬號刪除，從 onboarding 到 paywall，從空狀態到報錯頁，真實產品裏每一個 UI 場景，Refero 都截下來喂進了庫裏。
你的 Agent 不再是閉眼寫代碼，而是先「調研」再動手。
它會先問 Refero：「金融 app 的 onboarding 流一般怎麼做？」
幾秒鐘後，它能讀到幾十個真實案例的結構化分析：哪些佈局轉化率高，哪些彈窗用戶會關掉，哪些按鈕顏色組合被驗證過。
這就不是在猜了，這是在抄——不對，是在研究之後做決策。
一個做支付界面的 AI，如果它見過 Stripe、PayPal、Paddle 幾千個真實付款流程的界面，它的輸出怎麼可能和沒見過的 AI 一樣？
這就是 Refero 填平的Gap。
而且它不只是給你一堆截圖。每一個屏幕都帶了 metadata：描述、UX 模式、UI 模式、佈局結構。Agent 讀的是藍圖，不是畫。
一次設計任務，它能幾秒鐘內分析上百個界面——這工作量擱以前夠一個設計師查一週。
現在裝上 MCP，Claude Code、Cursor、Lovable、Codex……只要支持 MCP 的工具都能用。
怎麼裝？
一行配置。
首次調用會彈瀏覽器登錄 Refero 賬號，之後就自動了。沒有額外操作門檻。
結語
AI 代碼能力已經卷到天花板了，下一個拉開差距的點，就在設計。
以前我們說 AI「會寫代碼」是能力，現在開始，它「懂不懂設計」才是分水嶺。
Refero MCP 可能不是最後一個做這個方向的公司，但它是第一個把規模做起來的。
當所有 AI 都能寫頁面的時候，你的 AI 必須更會「看」頁面。
安裝方式
# MCP 配置（以 Claude Code 為例）
# 在 claude_desktop_config.json 添加：
{
"mcpServers": {
"refero": {
"command": "npx",
"args": ["-y", "@referodesign/refero-mcp"]
}
}
}
# 或者用 Skill 方式
npx skills add https://github.com/referodesign/refero_skill官網：https://refero.design/