メインコンテンツへスキップ
MCPサーバー

AIの幻覚を止めましょう。
AI エディターは Tailwind CSS を理解しています。

Cherry は、AI コーディング アシスタントに必要な正確な Tailwind CSS コンポーネント仕様、テーマ、ドキュメント、ブロックをオンデマンドで幻覚なしで提供する無料の MCP サーバー (モデル コンテキスト プロトコル) です。

AI アシスタントが Tailwind CSS を間違える理由 — そして Cherry がそれを修正する方法

チェリーなし

  • AIがFrutjamに存在しないクラス名を幻覚させる
  • すべてのプロンプトにドキュメントをコピーアンドペーストすると、トークンが無駄になります
  • llms.txt はすべてをダンプする — AI が圧倒される
  • AI が古いコンポーネント API を使用したため、生成された UI が壊れる

チェリー入り

  • AI は必要な各コンポーネントの正確な仕様を取得します
  • 適切なタイミングで適切なコンテキスト – トークンの無駄なし
  • 最新のFrutjamバージョンと常に同期
  • 出力は正確でセマンティックであり、本番環境にすぐに使用できます

チェリーにできること

欲しいものを説明してください。 Cherry は、AI を正しく構築するために必要な正確な知識を AI に提供します。

あなたはAIに尋ねます... チェリーはそれを実現します
「このページに価格セクションを追加」 実際の価格設定ブロックの HTML を取得してドロップします。
「Frutjam にはどのようなバッジのバリエーションがありますか?」 バッジの完全な仕様 (クラス、サイズ、状態、例) を取得します
「このレイアウトにブルーベリーのテーマを適用します」 そのテーマの正確なデザイントークンをロードします
「この Bootstrap ナビゲーションバーを Frutjam に変換します」 マークアップを正しい Frutjam クラスに移行します。
「この Figma デザインを Frutjam HTML に変換します」 Figma リンクを読み取り、Frutjam コンポーネントで再現します。
「このプレーンの Tailwind カードを Frutjam に移行してください」 Tailwind ユーティリティを適切な Frutjam コンポーネント クラスに置き換えます。
プロ / チーム

組み込みの AI スラッシュ コマンド

Cherry には、最も一般的な Frutjam タスク用の既製のプロンプトが含​​まれています。 AI エディターにコマンドを入力して入力すると、正確な Frutjam コードが取得されます。手動でのプロンプトは必要ありません。

/figma_to_frutjam

figma→フルーツジャム

Figma デザインの説明またはエクスポートされた JSON を貼り付けます。 Cherry は、それを正確でコピー&ペースト可能な Frutjam HTML に変換します。

/image_to_frutjam

スクリーンショット → フルジャム

UI スクリーンショットを説明するか、画像の URL を共有します。 Cherry は、Frutjam コンポーネントに最も近いものを使用してそれを再現します。

/tailwind_to_frutjam

追い風 → Frutjam

生の Tailwind HTML を貼り付けます。 Cherry は、手作りのユーティリティを正しい Frutjam コンポーネント クラスに置き換えます。

/bootstrap_to_frutjam

ブートストラップ → Frutjam

Bootstrap マークアップを貼り付けます。 Cherry は、すべての Bootstrap クラスを同等の Frutjam にマップし、クリーンな HTML を出力します。

/generate_theme

テーマを生成する

雰囲気、ブランド、またはカラーパレットについて説明します。 Cherry は、必要な CSS 変数をすべて含む完全な Frutjam テーマを生成します。

更新ごとにさらに多くのプロンプトが追加されました。

すべてのスラッシュ コマンドは、Claude Code、Cursor、VS Code、および任意の MCP 互換エディターで使用できます。

チェリーとの比較

すべての AI コンテキストが等しいわけではありません。

Cherry MCP llms.txt No context
正確なクラス名 部分的
オンデマンド – 必要なものだけ ✗ すべてをダンプします
トークンの効率的
常に最新の状態
テーマとデザイントークン 部分的
既製のページブロック
Figma / 画像 → コード
フレームワークの移行 ✓ 追い風、ブートストラップ
Tailwind CSS v4 の正確なクラス名 部分的

1分以内にセットアップ

始めるのにアカウントは必要ありません。無料利用枠はすぐに使用できます。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@latest
Cursor

カーソル設定 → 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 が動作していることを確認してビルドを開始するための 3 つのステップ。

ステップ1

実行されていることを確認する

VS Code

Ctrl+Shift+U → [出力] ドロップダウンで [MCP] を選択します。 frutjam-cherry: 実行中 を探します。

Cursor

設定→MCP。サーバーの frutjam-cherry の横に緑色の接続ステータスが表示されるはずです。

Claude Code

ターミナルで claude mcp list を実行します。 frutjam-cherry は接続済みとして表示されます。

ステップ2

最初のテストを実行する

AI チャット パネルを開き、次のように入力します。

List all available Frutjam components

Cherry がアクティブな場合、AI は list_components を呼び出し、コンポーネント名のリストを返します。それだけです — うまくいきました。

ステップ3

構築を開始 — プロンプトの例

AIにこれを言ってください チェリーがやること
"Show me how to use the Frutjam button component" get_component を呼び出して完全な仕様を返します。
"Build me a pricing card using Frutjam" カードコンポーネントを検索し、正確なコードを書き込みます
"Show me the darkberry theme tokens" get_theme を呼び出し、すべての CSS 変数を返します。
"Get me the hero block" get_block を呼び出し、コピー&ペーストした HTML を返します。
"How do I install Frutjam?" get_docs を呼び出して、インストール ガイドを返します。

Cherry について言及する必要はありません。必要なものを説明するだけです。 AI が適切なツールを自動的に呼び出します。

Cherry は Pro と Team に含まれています

無料利用枠が利用可能 — 毎日のリクエストは制限されており、アカウントは必要ありません。

Pro または Team にアップグレードすると、リクエストが無制限になり、プレミアム ブロックや AI スラッシュ コマンドにアクセスできるようになります。

よくある質問

MCPサーバーとは何ですか?

MCP (Model Context Protocol) は、AI アシスタントが実行時に外部ツールを呼び出せるようにするオープン スタンダードです。 Cherry はツール サーバーとして機能します。AI エディターはこれを呼び出して、トレーニング データから推測するのではなく、オンデマンドで Frutjam 仕様を取得します。

AI アシスタントが Tailwind CSS クラス名を幻覚で見るのはなぜですか?

AI モデルは Web のスナップショットでトレーニングされます。AI モデルは、特に新しいライブラリや Tailwind CSS v4 API の場合、特定のコンポーネント ライブラリの正確なクラス名を知りません。ライブコンテキストがなければ、彼らはもっともらしく聞こえるが存在しないクラスを発明してしまいます。 Cherry は、必要なときに AI に実際の最新の Frutjam コンポーネント ドキュメントを供給することでこの問題を解決し、幻覚を完全に排除します。

Cherry はどのエディタをサポートしていますか?

MCP をサポートする任意のエディタ: Claude Code、Cursor、VS Code、Windsurf、Zed、Cline、および MCP 標準を実装するその他のエディタ。

無料とプロ/チームの違いは何ですか?

無料では、毎日のリクエストが制限され、コンポーネント ドキュメントと無料ブロックにアクセスできます。プロとチームは、無制限のリクエスト、プレミアム ブロック、テンプレート、およびすべての AI スラッシュ コマンドのロックを解除します。

ライセンス キーを受け取るにはどうすればよいですか?

ライセンス キーは、購読後すぐに電子メールで送信されます。 アカウント ダッシュボードからサブスクリプションとシートを管理することもできます。

Cherry をオフラインでも使用できますか?

Cherry は、最初の使用時にライセンスをオンラインで検証し、その後 7 日間ローカルにキャッシュします。その後、再検証されます。必要なのは短いインターネット接続だけです。

いつでもキャンセルできますか?

はい。いつでもキャンセルできます。アクセスは請求期間が終了するまで継続されます。

より速く構築する準備はできていますか?

最初のプロンプトから正確な Frutjam コードを使用して AI を動作させます。