Bencho 把互動元件交給 Claude，免費 42 塊積木、Pro 紅線先看清

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

2026 年 10 月 17 日深夜，開發者 Lorenzo Cabra 在 X 上用一句「give Claude better taste in UI」介紹自己做的互動元件庫 Bencho，到 10 月 20 日上午累積 4,307 個讚。品味是行銷詞，這個網站交付的東西很具體：131 塊可以當場操作、調參數、帶走程式碼的 React 互動積木，外加一條讓 Claude、Cursor、Claude Code、Codex 直接搜尋取件的 MCP 通道。對急著讓 AI 產出可用介面的團隊來說，它的價值是把「我想要那種感覺」換成一個指得到、摸得到、叫得出名字的東西。

但真正值得記下來的新聞，發生在推文爆紅的前後幾天：這個網站剛剛完成了一場從全免費到付費牆的轉身。免費層依然大方，42 塊積木以 MIT 授權直接下載、連帳號都不用申請；MCP 通道和另外 89 塊積木則鎖在每年 79 歐元的 Pro 方案裡，而且 Pro 授權條款畫出的紅線比多數素材網站清楚得多。想把它帶進專案的人，該先看懂的是這條邊界；Claude 的品味有沒有變好，是看完邊界之後的事。

九月埋好升級骨架，十月十二日畫出付費線

時間軸本身說明了發生了什麼事。用網際網路檔案館保存的 9 月 10 日版本比對，當時網站還沒有定價頁、沒有授權頁，程式裡也搜不到任何歐元價格，那時的網站標題還帶著 UI interactive blocks 字樣；但前端程式裡已經埋好升級的骨架，四個積木掛著 Pro 旗標，升級視窗的文案寫得直白：「積木玩免費的，拿程式碼才是 Pro 的事」。授權頁現在標明的最後更新日期是 2026 年 10 月 12 日，條款裡也留了一句白紙黑字的過渡條款：「在 2026 年 10 月 12 日之前，當時每個積木都是免費的，在那之前以 MIT 取得的積木，對當時取得的人維持 MIT。」官方把免費與付費的切分日定在這一天：已經下載過的人權利不受影響，之後的取用者按新規則走。這種寫法在素材網站裡少見地照顧了早期採用者：授權改版常見的糾紛是舊內容被悄悄收回，這裡明講了不追溯。

Pin

五天後的 10 月 17 日，Cabra 發了那句爆紅的推文，附上一張 2400×1260 的品牌主視覺：中央是 bencho.dev 的標誌，四周環繞流量圖表、音樂播放器、照片處理這類元件預覽卡。網站首頁本身就是一面活的縮圖牆，131 塊積木排列開來，每塊縮圖都是可以直接點按的操作區，游標掃過就會動；隔天 10 月 18 日，官方 GitHub 倉庫 cabralorenzo/bencho 上線，把免費積木和音效整理成可以直接 clone 的形式。網站導覽列同時掛著設計資料庫 Mobbin 的贊助版位，贊助加訂閱構成這個一人專案的商業底盤。從畫出付費線、爆紅到開倉庫，前後只有六天，這個節奏本身就是評估它時該記住的背景：產品和商業模式都還在新鮮期，條款與內容都可能再動。

免費層是可驗證的 MIT，42 塊積木不用帳號

對站上全部 131 個積木頁面逐一測試取用程式碼的介面，結果很明確：42 個積木直接回傳完整的 React 元件原始碼，另外 89 個回應需要登入 Pro。官方文件頁自己也寫「42 個免費積木」，兩邊對得上。積木牆按互動方式分八類：Hover、Press、Drag、Slide、Swipe、Type、Select、Loading，每一塊都能在頁面上直接操作，從彩紙慶祝按鈕、拖曳排序、會留下游標軌跡的起床滑桿，到疊放的提示訊息堆、把訊息化成表情回應的膠囊。同一個網站上還有兩個容易混淆的區塊：Finds 收的是站方策劃的第三方互動範例，逐件標出作品名與原作者，這區的價值是找靈感，能不能取用要回到各原作者的授權；頁面上的例子像 Khalid 的 Planet、lakshman 的動態圖示、Divan Raj 的滑動排程，Bench 則是把挑中的積木並排放進同一個工作區對照，把三個候選效果放在同一頁，很容易看出誰在搶使用者的注意力，這個功能對設計討論比對工程更實用，Pro 方案才解除它的數量上限。

免費積木安裝後是一個資料夾：一個元件檔、一個樣式表、一份列出所有參數的說明，積木針對 React 19 撰寫，多數只依賴 framer-motion 和 lucide-react 這兩個套件，顏色全部讀自一份 tokens.css 的變數，可以對應到自己的設計系統，也和 Tailwind 共存，放進 Next.js 專案時記得加上 use client 就好。網頁上的調參過程和程式碼是同一套東西：官方的說法是「參數就是那些旋鈕」，以彩紙積木為例，頁面上有色彩與單色的切換、總量與擴散角度兩支滑桿，調完可以分享連結或加進 Bench，你在積木頁面上把色系、彩紙數量、擴散角度調好，匯入專案後把同樣的值當成 props 傳進去就行，每個參數都有預設值、全部可省略。樣式讀的是一小組 CSS 變數，文字與線條用 –ink 與它的深淺階層，卡片表面用 –fill-slab，背後的層次用 –card 與 –surface 系列，字型掛在 –font-ui 上，預設是 Inter、換成任何無襯線字型都可以，深色模式跟著 data-theme 屬性或系統設定走。積木的 CSS 用自己的短前綴命名，官方標榜因此與 Tailwind 並用不會互相干擾。倉庫附一個 playground，npm install 之後跑 npm run dev，全部積木與音效會攤在同一頁供挑選；相依清單裡除了兩個主力套件，還有 three 與 liquid-gooey，對應立體點陣與黏合熔接這類視覺的少數積木。

免費清單裡實際裝了哪些東西可以直接點開看：按讚的愛心計數、疊成堆的提示訊息、核取清單、Dock 工具列、escape 鍵逃離按鈕、輪播、產生按鈕、游標劃過會發熱的字，這些是逐一檢查原始碼開放狀態時確認免費的其中八塊。音效是另一個誠實的驚喜。音效同樣按用途分八類，從動作、回饋、導航、通知、選取、移動、進度到系統音，24 個介面音效全用 Web Audio API 在瀏覽器裡即時合成，沒有任何音檔資產，整包音效是一支幾百位元組一個聲音的 sounds.ts，播放時需要使用者先有過點擊或按鍵動作，這是瀏覽器對音訊的原生限制。其中 beacon 與 plop 兩個音效的配方改作自 Daniel Belyi 的 MIT 授權專案 cuelume，第三方素材的授權聲明逐一列在倉庫的 THIRD_PARTY 檔裡，這個細節做起來不花哨，卻是判斷一個素材庫能不能長期信任的基礎。官方文件對音效的使用建議也值得抄進團隊規範：音效留給真正值得的時刻，預設關閉、給使用者開關，這在多數無障礙檢查表裡本來就是必考題。對要把產品做完整的團隊來說，這組音效省掉的是找音檔、買授權、處理載入的三段工。

沒有 Pro 的人也不是被排除在 AI 工作流之外。每個免費積木的頁面上有一個 Copy prompt 按鈕，按下後複製的是整份元件檔加上接線說明、需要的套件和顏色變數的對應方式，貼進 Claude Code、Cursor 或 Codex 裡就能要求它裝到指定位置。更具體地說，Copy prompt 是你先選好積木再把材料交給助理安裝；MCP 是助理自己會搜尋、讀參數、取原件，能直接回應「用 Bencho 的分頁欄、圓角設成 12」這種自帶規格的要求，設計討論裡的用語可以直接變成可執行的指令。

MCP 通道的三個工具，金鑰只給你看一次

MCP（Model Context Protocol）是把外部工具掛進 AI 助理的共用介面，這一年已經長到讓 AI 自己做 3D 動畫、畫電路板、查期權市場資料各種角落。Bencho 的 MCP 伺服器位址是 bencho.dev/api/mcp，對四個用戶端提供連接說明：Cursor 把位址寫進 mcp.json，Claude Code 和 Codex 各有自己的設定位置；以 Claude 為例，流程是打開設定、進連接器、新增自訂連接器，貼上位址、選「不用登入」，身分已經藏在網址裡的金鑰中。

Pin

不帶金鑰直接對這個位址發出初始化呼叫，伺服器回 HTTP 401，回應寫得直白：「This MCP is for Bencho Pro members. Get a key from your account at bencho.dev.」金鑰從帳號選單裡的 Bencho MCP 建立，只顯示一次，要自己抄下來放進各助理的私人設定，隨時可以撤銷重發。官方提醒不要把含金鑰的連線字串分享出去或 commit 進公開倉庫，這類字串外洩的後果是別人用你的 Pro 帳號取積木。

連上之後，助理拿到三個工具：search_blocks 用用途或名稱找積木，例如 confetti 或拖曳排序；get_block 把整塊積木交出來，包含 React 元件、CSS、需要的套件和可調參數；list_categories 列出分類和每類的積木數量。分類清單讓助理可以先盤點再下手，回答「你有哪些載入動畫」這類問題時不用瞎猜。官方給的示範提問包括「把 Bencho 的 dropdown 加進我的專案」「找一個彩紙按鈕接到送出表單上」。要注意的是這些能力描述都來自官方文件，MCP 實際取件的品質與穩定度，目前還沒有足夠多的獨立使用者回報可以對照。

Pro 授權的三條紅線，接案前先讀懂

付費方案的數字不複雜：Pro 每年 79 歐元，包含全部積木與音效、完整原始碼、下載、MCP 通道與之後新增的 Pro 內容；另一個 Forever 方案 99 歐元買斷，只限前 200 名，10 月 20 日頁面顯示剩 111 個名額，定價以歐元標示，刷卡時的實際金額要看發卡行換匯，兩種方案都有 14 天退款期，退款的前提是沒有大量使用。官方給的例子是試用期間複製幾個積木算正常嘗試，整批搬走再退款並不在例子涵蓋的範圍裡。取消訂閱隨時可以做，權益走到已付年度的年底為止。買斷的 Forever 只給前 200 名、賣完不再開放，這種限量買斷常見的風險是服務結束時的兌現問題，條款裡沒有針對它的特別保障，把它當折扣而非保險比較穩。音效的 Pro 層還包括把多個音效疊成一層，以及給非網頁應用使用的 WAV 下載。前端程式碼裡可以找到 Paddle 與 Dodo 兩套結帳通道，等於付款這段交給兩家代收服務分攤。數字會變，名額尤其會變，看到的當下才是準的。

Pin

授權條款才是重點，先看免費那一半的條件，因為它比一般印象中的 MIT 更寬鬆一點：商用、公司內部、放進要賣的產品都可以，可以改、可以再散布、介面上不需要署名也不用連回官網，唯一的要求是大量複製原始碼時保留著作權與授權聲明，條款自己補了一句很實際的註解：沒有人會期待一行貼上的 CSS 旁邊要掛授權字樣。Pro 授權允許的範圍其實也很寬：把積木用在自己或客戶的應用程式、網站、遊戲、產品裡都可以，賣掉做出來的東西可以，不需要署名，開源專案裡用也行，只要積木是成品的一部分。紅線有三條。紅線一：不可以把積木或音效原樣再傳遞：不能賣、不能分享、不能放進 UI 套件、元件庫、範本、主題、起始專案、程式片段合集或音效包裡散布。紅線二：授權跟人不跟組織，條款原文寫「One licence is one person」，團隊裡每個實際取用 Pro 積木的人都要有自己的方案，共用一組帳號金鑰不在允許範圍。紅線三：不可以拿 Pro 積木去架一個把積木轉發給別人的服務或 MCP 伺服器，也不可以放進模型訓練用的資料集。

第三條紅線放在一個專門服務 AI 助理的產品條款裡，讀起來有點反諷，但方向是明確的：官方歡迎你用助理把積木裝進產品，不歡迎你把積木當成語料餵給模型。還有兩個容易踩到的細節：替客戶做完專案交貨後，客戶可以在那個專案裡繼續用和改，但不能把積木抽出來帶去別的案子；年約到期後，已經取用的積木在既有與後續作品裡繼續有效，只是不能再拿新的 Pro 積木，但若發生退款或惡意違約，授權整個終止，還沒出貨的東西裡的 Pro 積木要拿出來。照片、字型和商標也不在授權範圍裡：展示頁裡的人物與商品照片只授權給網站本身，取用時要換成自己的圖，積木裡出於這個原因出貨時放的是灰色佔位圖；Maison Neue 字型刻意不隨附；Bencho 名稱和山羊圖案是商標，條款特別聲明軟體授權不包含商標使用權。

倉庫、音效頁、定價卡各說各話

把官方各頁面的說法放在一起，會發現有幾個數字彼此對不起來，採用前值得自己再點一次。GitHub 倉庫的說明寫 41 個免費積木，網站文件頁寫 42 個，逐一測試的結果是網站確實開放 42 塊，倉庫裡只有 41 個資料夾，差的那一塊是 rolling-counter：它在網站上免費開放原始碼，但沒有被收進倉庫。音效有三個口徑：音效頁標題寫 95 個介面音效，Pro 方案卡寫加 130 個音效，倉庫裡實際裝的免費音效是 24 個。定價卡上的「加 130 塊積木」與全站 131 塊的總數相近，與 Pro 獨佔的 89 塊對不上，看起來指的應是整座積木庫的規模。

這些不一致多半是快速迭代留下的縫隙，不是刻意誤導，但後果要自己扛：照著倉庫的 41 塊規劃，會漏掉 rolling-counter；照著方案卡的 130 音效預算，會對不上實際內容。推文熱度帶來的註冊量也會讓網站上的數字繼續跑，名額數字（200 名剩 111）和推文的讚數一樣都是快照，隔幾天就不同。免費與付費的分界線本身也還在挪：9 月 10 日程式裡掛著 Pro 旗標的傾斜卡片與搜尋積木，這次普查時已經是任何人都能取碼的免費積木。給自己訂個回查期限，一週後再點一次定價頁和授權頁，比記住任何單一數字有用。對照著看倉庫的提交紀錄也是個辦法，內容同步的勤快程度會直接反映在 41 這個數字有沒有追上 42。一個上線第三天的倉庫，這些縫隙都還算合理。

免費層今天就能搬，Pro 的帳要分開算

手上已經有 React 專案的開發者，現在拿免費層的成本接近零：clone 倉庫、跑一次 npm install、把 tokens.css 加進來，就能在 playground 裡把 42 塊積木全部試一遍，喜歡的複製進專案，MIT 授權讓商用和修改都不用回頭問人。這個取用方式和開源介面產生器 OpenUI 的自架路線是同一種邏輯，把供應商風險留在自己手裡。

接案工作室的帳要分開算。免費積木進客戶專案完全沒有問題，MIT 條件只有保留版權聲明這一條；用到 Pro 積木時，客戶的成品可以交付，但客戶不能把積木抽出來用在別的地方，等於每個案子的每一個參與者都要評估是否需要自己的授權。團隊導入前，先算清楚實際會取用 Pro 內容的人數，再乘上 79 歐元，這才是真實成本。如果只是缺一兩個互動效果，免費層加 Copy prompt 就夠了；要建立一整套會反覆取用的互動語彙、而且多個人同時動工，才把年費當工具費攤提。

還在觀望的人可以等三個訊號：倉庫與網站的積木數量收斂、音效的三個口徑統一、以及第一批獨立使用者的 MCP 實際取件回報。在截圖直接生程式碼的工具已經滿地的現在，互動積木庫的價值不在於多一個產生器，而在於它把介面喜好從形容詞變成可以試、可以調、可以帶走的具體東西，這一半它已經用免費層證明了，另一半要靠 Pro 授權的執行與 MCP 的穩定度慢慢證明。