Hentikan halusinasi AI.
Editor AI Anda mengetahui Tailwind CSS.
Cherry adalah server MCP (Model Context Protocol) gratis yang memberi asisten pengkodean AI Anda spesifikasi, tema, dokumen, dan blok Tailwind CSS yang tepat yang diperlukan — sesuai permintaan, tanpa halusinasi.
Mengapa asisten AI melakukan kesalahan pada Tailwind CSS — dan bagaimana Cherry memperbaikinya
Tanpa ceri
- AI berhalusinasi nama kelas yang tidak ada di Frutjam
- Anda menyalin-menempelkan dokumen ke setiap perintah, membuang-buang token
- llms.txt membuang semuanya — AI kewalahan
- UI yang dihasilkan rusak karena AI menggunakan API komponen yang sudah ketinggalan zaman
Dengan ceri
- AI mengambil spesifikasi yang tepat untuk setiap komponen yang dibutuhkannya
- Konteks yang tepat pada waktu yang tepat — tidak ada pemborosan
- Selalu sinkron dengan versi Frutjam terbaru
- Outputnya akurat, semantik, dan siap produksi
Apa yang bisa dilakukan Cherry
Jelaskan saja apa yang Anda inginkan. Cherry memberi AI Anda pengetahuan tepat yang dibutuhkan untuk membangunnya dengan benar.
| Anda bertanya pada AI Anda... | Cherry mewujudkannya |
|---|---|
| "Tambahkan bagian harga ke halaman ini" | Mengambil HTML blok harga sebenarnya dan memasukkannya |
| Varian lencana apa yang dimiliki Frutjam? | Menarik spesifikasi lencana lengkap — kelas, ukuran, negara bagian, contoh |
| "Terapkan tema blueberry pada tata letak ini" | Memuat token desain yang tepat untuk tema tersebut |
| "Ubah navbar Bootstrap ini ke Frutjam" | Memigrasi markup untuk memperbaiki kelas Frutjam |
| "Ubah desain Figma ini menjadi Frutjam HTML" | Membaca tautan Figma dan mereproduksinya dengan komponen Frutjam |
| "Migrasikan kartu Tailwind biasa ini ke Frutjam" | Menggantikan utilitas Tailwind dengan kelas komponen Frutjam yang tepat |
Perintah garis miring AI bawaan
Cherry menyertakan petunjuk siap pakai untuk tugas Frutjam yang paling umum. Ketik perintah di editor AI Anda, berikan masukan Anda, dan dapatkan kode Frutjam yang akurat — tidak perlu perintah manual.
/figma_to_frutjam
Figma → Buah
Tempelkan deskripsi desain Figma atau JSON yang diekspor. Cherry mengubahnya menjadi Frutjam HTML yang akurat dan dapat disalin.
/image_to_frutjam
Tangkapan layar → Buah
Jelaskan tangkapan layar UI atau bagikan URL gambar. Cherry mereproduksinya dengan komponen Frutjam terdekat.
/tailwind_to_frutjam
Angin belakang → Buah-buahan
Tempel HTML Tailwind mentah. Cherry menggantikan utilitas buatan tangan dengan kelas komponen Frutjam yang benar.
/bootstrap_to_frutjam
Bootstrap → Buah
Tempel markup Bootstrap. Cherry memetakan setiap kelas Bootstrap ke setara Frutjam dan menghasilkan HTML yang bersih.
/generate_theme
Hasilkan tema
Jelaskan suasana hati, merek, atau palet warna. Cherry menghasilkan tema Frutjam lengkap dengan semua variabel CSS yang diperlukan.
＋
Lebih banyak petunjuk ditambahkan dengan setiap pembaruan.
Semua perintah garis miring tersedia di Claude Code, Cursor, VS Code, dan editor apa pun yang kompatibel dengan MCP.
Bagaimana Cherry membandingkannya
Tidak semua konteks AI sama.
| Cherry MCP | llms.txt | No context | |
|---|---|---|---|
| Nama kelas yang akurat | ✓ | Sebagian | ✗ |
| Sesuai permintaan — hanya yang diperlukan | ✓ | ✗ membuang semuanya | ✗ |
| Token efisien | ✓ | ✗ | ✓ |
| Selalu terkini | ✓ | ✓ | ✗ |
| Tema & token desain | ✓ | Sebagian | ✗ |
| Blok halaman siap pakai | ✓ | ✗ | ✗ |
| Figma / gambar → kode | ✓ | ✗ | ✗ |
| Migrasi kerangka kerja | ✓ Angin belakang, Bootstrap | ✗ | ✗ |
| Nama kelas akurat Tailwind CSS v4 | ✓ | Sebagian | ✗ |
Penyiapan dalam waktu kurang dari satu menit
Tidak diperlukan akun untuk memulai. Tingkat gratis langsung berfungsi — cukup tambahkan Cherry ke editor Anda dan mulai. Kunci lisensi dan email hanya diperlukan untuk paket Pro dan Tim.
Claude Code
Tingkat gratis tidak diperlukan akun
claude mcp add frutjam-cherry -- npx -y frutjam-cherry@latestPro / Tim lisensi diperlukan
claude mcp add frutjam-cherry \
--env LICENSE=your-license-key \
--env EMAIL=your@email.com \
-- npx -y frutjam-cherry@latestCursor
Buka Pengaturan Kursor → MCP dan tambahkan:
Tingkat gratis tidak diperlukan akun
{
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}Pro / Tim lisensi diperlukan
{
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}VS Code
Press Ctrl+Shift+P → MCP: Open User Configuration, then add:
Tingkat gratis tidak diperlukan akun
{
"servers": {
"frutjam-cherry": {
"type": "stdio",
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}
}Pro / Tim lisensi diperlukan
{
"servers": {
"frutjam-cherry": {
"type": "stdio",
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
}Other editors
Tingkat gratis tidak diperlukan akun
{
"mcpServers": {
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}
}Pro / Tim lisensi diperlukan
{
"mcpServers": {
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
}Setelah penyiapan — 60 detik pertama Anda
Three steps to confirm Cherry is working and start building.
Verify it's running
VS Code
Ctrl+Shift+U → pilih MCP di tarik-turun Output. Cari frutjam-cherry: Berjalan.
Cursor
Pengaturan → MCP. Server akan menampilkan status terhubung berwarna hijau di samping frutjam-cherry.
Claude Code
Jalankan claude mcp list di terminal. frutjam-cherry akan muncul sebagai terhubung.
Run your first test
Open your AI chat panel and type:
List all available Frutjam componentsJika Cherry aktif, AI Anda akan memanggil list_components dan mengembalikan daftar nama komponen. Itu saja — itu berhasil.
Mulai membangun — contoh petunjuknya
| Say this to your AI | What Cherry does |
|---|---|
| "Show me how to use the Frutjam button component" | Memanggil get_component dan mengembalikan spesifikasi lengkap |
| "Build me a pricing card using Frutjam" | Mencari komponen kartu dan menulis kode yang akurat |
| "Show me the darkberry theme tokens" | Memanggil get_theme dan mengembalikan semua variabel CSS |
| "Get me the hero block" | Memanggil get_block dan mengembalikan HTML salin-tempel |
| "How do I install Frutjam?" | Memanggil get_docs dan mengembalikan panduan instalasi |
Anda tidak perlu menyebut Cherry — cukup jelaskan apa yang Anda inginkan. AI Anda memanggil alat yang tepat secara otomatis.
Cherry is included in Pro and Team
Tersedia tingkat gratis — permintaan harian terbatas, tidak perlu akun.
Upgrade to Pro or Team for unlimited requests and access to premium blocks and AI slash commands.
FAQ
What is an MCP server?
MCP (Model Context Protocol) adalah standar terbuka yang memungkinkan asisten AI memanggil alat eksternal saat runtime. Cherry bertindak sebagai server alat — editor AI Anda memanggilnya untuk mengambil spesifikasi Frutjam sesuai permintaan, alih-alih menebak-nebak dari data pelatihan.
Why do AI assistants hallucinate Tailwind CSS class names?
Model AI dilatih berdasarkan cuplikan web — model tersebut tidak mengetahui nama kelas persis pustaka komponen Anda, terutama untuk pustaka yang lebih baru atau Tailwind CSS v4 API. Tanpa konteks hidup, mereka menciptakan kelas-kelas yang terdengar masuk akal namun tidak ada. Cherry memecahkan masalah ini dengan memberi AI Anda dokumen komponen Frutjam yang sebenarnya dan terkini pada saat dibutuhkan, menghilangkan halusinasi sepenuhnya.
Which editors does Cherry support?
Any editor with MCP support: Claude Code, Cursor, VS Code, Windsurf, Zed, Cline, and any other editor that implements the MCP standard.
What's the difference between free and Pro/Team?
Free gives you limited daily requests and access to component docs and free blocks. Pro and Team unlock unlimited requests, premium blocks, templates, and all AI slash commands.
How do I receive my license key?
Your license key is emailed immediately after subscribing. You can also manage your subscription and seats from your account dashboard.
Can I use Cherry offline?
Cherry validates your license online on first use, then caches it locally for 7 days. After that it re-validates. A short internet connection is all you need.
Can I cancel anytime?
Yes. Cancel at any time. Your access continues until the end of the billing period.
Ready to build faster?
Get your AI working with accurate Frutjam code from the first prompt.