# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：shaders (@npm_i_shaders) · 平台：X (Twitter) · 日期：2026-04-15

> 原始來源：https://x.com/npm_i_shaders/status/2044041810440319391

## 中文摘要

Shaders Pro MCP 讓 AI Agent 直接建構精美 shader 效果，徹底改變開發流程。

Shaders Pro MCP (Model Context Protocol) 伺服器讓 AI Agent 無需切換上下文，即可瀏覽使用者儲存的 shaders、搜尋完整 Pro 預設程式庫、安裝並修改 props，實現令人驚豔的視覺效果。目前僅限 Pro 使用者透過 https://shaders.com/docs/guide/mcp 啟用。

**連接方式**

支援大多數 MCP 客戶端的 OAuth 認證，只需加入伺服器 URL，即自動導向以 Shaders 帳號登入，無需 API 金鑰。若工具不支援 OAuth，可產生個人 API 金鑰並加入設定中，快速完成連線。

**核心功能**

一旦連線，AI Agent 即可存取以下專屬能力，讓開發從編輯器設計直接轉入程式碼庫：
- 瀏覽並擷取個人 shaders：列出所有儲存至 Shaders 帳號的效果，並拉取適用於選擇框架（Vue、React、Svelte、Solid 或 vanilla JS）的即用元件程式碼。適合將編輯器中建構的設計直接丟入程式碼庫。
- 探索 Pro 預設程式庫：搜尋並擷取 Pro 系列與預設，包含程式碼匯出、縮圖預覽及額外脈絡，讓 Agent 從高品質起點尋找、安裝並自訂。
- 修改並連結 props 至狀態：在程式碼中變更 shaders 與預設，再將 props 串接至選擇框架的 reactive 狀態，打造引人入勝的互動效果。
- 從 SVG 檔案產生 SDF：特定形狀效果（如 Glass、Emboss 或 Neon）需「SDF」（Signed Distance Field）才能運作。只需指示 Agent 從程式碼庫中的 SVG 檔案或公開 URL 產生，它會自動生成並儲存回程式碼庫。通常無需操心，Agent 會察覺需求並詢問要用哪個 SVG。

**啟動提示範例**

原文提供實用提示，展示 Agent 如何即時應用：
- 安裝我的「Landing Hero」shader 至 hero 區塊作為背景。
- 在這張卡片背景加入 shader，藍色調帶微妙流動動畫。
- 讓此 shader 中的圓形在滾動經過區塊時變大。
- 將我的 logo.svg 作為液態玻璃效果疊加在此 shader 上方。

**Pro 專屬知識庫**

除了帳號存取，Shaders Pro MCP 還內建獨家專家筆記知識庫，注入 Agent 脈絡中，提供公文件未涵蓋的高階組合模式指引。Agent 會在相關時自動讀取，避免試錯過程，直接輸出高品質實作。特定系列與預設更附帶額外脈絡資訊，助 Agent 精準實現該效果的外觀。

這正是「僅知 Shaders 存在」與「熟練運用 Shaders」的 Agent 間的關鍵差異，讓 Pro 使用者輕鬆從高品質起點打造專業互動 shader，而非從零摸索。

## 標籤

MCP, Agent, 功能更新, Anthropic, Shaders Pro