別再猜測了。
了解 Frutjam 的人工智慧。
Cherry 是一款免費的 MCP 伺服器（模型上下文協定），可為您的 AI 編碼助理提供所需的準確 Tailwind CSS 元件規格、主題、文件和區塊 - 按需提供，沒有幻覺。
沒有櫻桃
- AI hallucinates class names that don't exist in Frutjam
- You copy-paste docs into every prompt, wasting tokens
- llms.txt dumps everything — AI gets overwhelmed
- Generated UI breaks because AI used outdated component APIs
含櫻桃
- AI fetches the exact spec for each component it needs
- Right context at the right time — no token waste
- Always in sync with the latest Frutjam version
- Output is accurate, semantic, and production-ready
櫻桃能做什麼
只需描述您想要什麼。 Cherry 為您的人工智慧提供正確建構它所需的確切知識。
| 你問你的人工智慧... | 櫻桃讓這一切發生 |
|---|---|
| "Add a pricing section to this page" | Fetches the real pricing block HTML and drops it in |
| "What badge variants does Frutjam have?" | Pulls the full badge spec — classes, sizes, states, examples |
| "Apply the blueberry theme to this layout" | Loads the exact design tokens for that theme |
| "Convert this Bootstrap navbar to Frutjam" | Migrates the markup to correct Frutjam classes |
| "Turn this Figma design into Frutjam HTML" | Reads the Figma link and reproduces it with Frutjam components |
| "Migrate this plain Tailwind card to Frutjam" | Replaces Tailwind utilities with the right Frutjam component classes |
內建AI斜槓指令
Cherry 包含最常見 Frutjam 任務的現成提示。在 AI 編輯器中鍵入命令，提供輸入，然後獲得準確的 Frutjam 代碼 - 無需手動提示。
/figma_to_frutjam
Figma → Frutjam
貼上 Figma 設計描述或導出的 JSON。 Cherry 將其轉換為準確的、可複製貼上的 Frutjam HTML。
/image_to_frutjam
螢幕截圖 → Frutjam
描述 UI 螢幕截圖或分享圖像 URL。 Cherry 使用最接近的 Frutjam 組件重現了它。
/tailwind_to_frutjam
順風 → Frutjam
貼上原始 Tailwind HTML。 Cherry 使用正確的 Frutjam 組件類別替換了手工製作的實用程式。
/bootstrap_to_frutjam
Bootstrap → Frutjam
貼上 Bootstrap 標記。 Cherry 將每個 Bootstrap 類別對應到其 Frutjam 等效項並輸出乾淨的 HTML。
/generate_theme
生成主題
描述一種心情、品牌或調色板。 Cherry 產生一個完整的 Frutjam 主題，其中包含所有必要的 CSS 變數。
＋
每次更新都會新增更多提示。
所有斜杠命令均可在 Claude Code、Cursor、VS Code 和任何 MCP 相容編輯器中使用。
櫻桃比較如何
並非所有人工智慧環境都是平等的。
| Cherry MCP | llms.txt | No context | |
|---|---|---|---|
| 準確的類別名 | ✓ | 部分的 | ✗ |
| 隨選 — 只提供需要的內容 | ✓ | ✗ 傾倒一切 | ✗ |
| 代幣效率高 | ✓ | ✗ | ✓ |
| 始終保持最新狀態 | ✓ | ✓ | ✗ |
| 主題和設計標記 | ✓ | 部分的 | ✗ |
| 現成的頁面區塊 | ✓ | ✗ | ✗ |
| Figma / 圖片 → 代碼 | ✓ | ✗ | ✗ |
| 框架遷移 | ✓ 順風、引導 | ✗ | ✗ |
| Tailwind CSS v4 準確的類別名稱 | ✓ | 部分的 | ✗ |
一分鐘內完成設定
無需帳戶即可開始。免費套餐開箱即用 - 只需將 Cherry 添加到您的編輯器中即可開始使用。僅 Pro 和 Team 計劃需要許可證金鑰和電子郵件。
Claude Code
免費套餐 無需帳戶
claude mcp add frutjam-cherry -- npx -y frutjam-cherry@latest職業/團隊 需要許可證
claude mcp add frutjam-cherry \
--env LICENSE=your-license-key \
--env EMAIL=your@email.com \
-- npx -y frutjam-cherry@latestCursor
開啟遊標設定 → MCP 並新增：
免費套餐 無需帳戶
{
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}職業/團隊 需要許可證
{
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}VS Code
按 Ctrl+Shift+P → MCP：開啟使用者配置，然後新增：
免費套餐 無需帳戶
{
"servers": {
"frutjam-cherry": {
"type": "stdio",
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}
}職業/團隊 需要許可證
{
"servers": {
"frutjam-cherry": {
"type": "stdio",
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
}Other editors
免費套餐 無需帳戶
{
"mcpServers": {
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}
}職業/團隊 需要許可證
{
"mcpServers": {
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
}設定後 — 您的前 60 秒
確認 Cherry 正在工作並開始建置的三個步驟。
驗證它正在運行
VS Code
Ctrl+Shift+U → 在輸出下拉清單中選擇 MCP。尋找 frutjam-cherry：正在運行。
Cursor
設定 → MCP。伺服器應在 frutjam-cherry 旁邊顯示綠色的連線狀態。
Claude Code
在終端機中運行 claude mcp list。 frutjam-cherry 應顯示為已連接。
運行你的第一個測試
打開您的 AI 聊天面板並輸入：
List all available Frutjam components如果 Cherry 處於活動狀態，您的 AI 將呼叫 list_components 並傳回元件名稱清單。就是這樣——它正在工作。
開始建置—範例提示
| 對你的人工智慧說這句話 | 櫻桃是做什麼的 |
|---|---|
| "Show me how to use the Frutjam button component" | Calls get_component and returns the full spec |
| "Build me a pricing card using Frutjam" | Looks up the card component and writes accurate code |
| "Show me the darkberry theme tokens" | Calls get_theme and returns all CSS variables |
| "Get me the hero block" | Calls get_block and returns copy-paste HTML |
| "How do I install Frutjam?" | Calls get_docs and returns the installation guide |
您無需提及 Cherry，只需描述您想要什麼。您的人工智慧會自動呼叫正確的工具。
Cherry 包含在 Pro 和 Team 中
提供免費套餐 - 每日請求有限，無需帳戶。
升級到專業版或團隊版可無限請求並存取高級區塊和 AI 斜線命令。
常問問題
什麼是 MCP 伺服器？
MCP（模型上下文協定）是一個開放標準，允許 AI 助理在運行時呼叫外部工具。 Cherry 充當工具伺服器 - 您的 AI 編輯器稱其為按需獲取 Frutjam 規格，而不是根據訓練資料進行猜測。
為什麼 AI 助理會產生 Tailwind CSS 類名的幻覺？
AI 模型是在網路快照上進行訓練的 - 它們不知道特定元件庫的確切類別名，特別是對於較新的庫或 Tailwind CSS v4 API。如果沒有即時上下文，他們就會發明聽起來似乎合理但不存在的類別。 Cherry 透過在需要時向您的 AI 提供真實的、最新的 Frutjam 組件文件來解決這個問題，從而完全消除幻覺。
Cherry 支援哪些編輯器？
任何支援 MCP 的編輯器：Claude Code、Cursor、VS Code、Windsurf、Zed、Cline 以及任何其他實現 MCP 標準的編輯器。
免費版和專業版/團隊版有什麼不同？
免費為您提供有限的每日請求以及對組件文件和免費區塊的存取。專業版和團隊版解鎖無限請求、高級區塊、模板和所有 AI 斜線命令。
我如何接收我的許可證金鑰？
訂閱後，您的許可證密鑰將立即透過電子郵件發送。您也可以透過帳戶資訊中心管理您的訂閱和席位。
我可以離線使用 Cherry 嗎？
Cherry 會在首次使用時在線上驗證您的許可證，然後在本地快取 7 天。之後它會重新驗證。您只需要短距離的網路連線即可。
我可以隨時取消嗎？
是的。隨時取消。您的存取權限將持續到計費週期結束。
準備好更快地建造了嗎？
讓您的 AI 從第一個提示開始就使用準確的 Frutjam 代碼。