Detén las alucinaciones de IA.
Su editor de IA conoce Tailwind CSS.
Cherry es un servidor MCP (Model Context Protocol) gratuito que proporciona a su asistente de codificación de IA las especificaciones, temas, documentos y bloques exactos de los componentes CSS de Tailwind que necesita, bajo demanda, sin alucinaciones.
Por qué los asistentes de IA se equivocan con Tailwind CSS y cómo Cherry lo soluciona
Sin cereza
- La IA alucina con nombres de clases que no existen en Frutjam
- Copias y pegas documentos en cada mensaje, desperdiciando tokens
- llms.txt lo descarta todo: la IA se abruma
- La interfaz de usuario generada se interrumpe porque la IA utiliza API de componentes obsoletos
Con Cereza
- La IA obtiene las especificaciones exactas para cada componente que necesita
- Contexto adecuado en el momento adecuado: sin desperdicio de tokens
- Siempre sincronizado con la última versión de Frutjam
- La salida es precisa, semántica y está lista para producción.
¿Qué puede hacer la cereza?
Simplemente describe lo que quieres. Cherry le brinda a su IA el conocimiento exacto que necesita para construirla correctamente.
| Le preguntas a tu IA... | Cereza lo hace realidad |
|---|---|
| "Agregar una sección de precios a esta página" | Obtiene el HTML del bloque de precios real y lo coloca |
| "¿Qué variantes de insignia tiene Frutjam?" | Obtiene las especificaciones completas de la insignia: clases, tamaños, estados, ejemplos |
| "Aplica el tema de los arándanos a este diseño" | Carga los tokens de diseño exactos para ese tema. |
| "Convierta esta barra de navegación Bootstrap a Frutjam" | Migra el marcado para corregir las clases de Frutjam. |
| "Convierte este diseño de Figma en HTML de Frutjam" | Lee el enlace de Figma y lo reproduce con componentes de Frutjam. |
| "Migrar esta tarjeta Tailwind simple a Frutjam" | Reemplaza las utilidades Tailwind con las clases de componentes Frutjam adecuadas |
Comandos de barra diagonal AI incorporados
Cherry incluye indicaciones listas para usar para las tareas más comunes de Frutjam. Escriba el comando en su editor de IA, proporcione sus datos y obtenga el código Frutjam preciso, sin necesidad de indicaciones manuales.
/figma_to_frutjam
Figma → Mermelada de frutas
Pegue una descripción de diseño de Figma o JSON exportado. Cherry lo convierte a HTML Frutjam preciso y que se puede copiar y pegar.
/image_to_frutjam
Captura de pantalla → Mermelada de frutas
Describe una captura de pantalla de la interfaz de usuario o comparte la URL de una imagen. Cherry lo reproduce con los componentes más cercanos a Frutjam.
/tailwind_to_frutjam
Viento de cola → Frutjam
Pegue HTML sin procesar de Tailwind. Cherry reemplaza las utilidades hechas a mano con las clases correctas de componentes de Frutjam.
/bootstrap_to_frutjam
Bootstrap → Frutjam
Pegue el marcado Bootstrap. Cherry asigna cada clase de Bootstrap a su equivalente de Frutjam y genera HTML limpio.
/generate_theme
Generar un tema
Describe un estado de ánimo, una marca o una paleta de colores. Cherry genera un tema Frutjam completo con todas las variables CSS necesarias.
＋
Se agregan más indicaciones con cada actualización.
Todos los comandos de barra diagonal están disponibles en Claude Code, Cursor, VS Code y cualquier editor compatible con MCP.
Cómo se compara Cherry
No todos los contextos de IA son iguales.
| Cherry MCP | llms.txt | No context | |
|---|---|---|---|
| Nombres de clases precisos | ✓ | Parcial | ✗ |
| Bajo demanda: solo lo que se necesita | ✓ | ✗ tira todo | ✗ |
| Token eficiente | ✓ | ✗ | ✓ |
| Siempre actualizado | ✓ | ✓ | ✗ |
| Temas y tokens de diseño | ✓ | Parcial | ✗ |
| Bloques de páginas listos para usar | ✓ | ✗ | ✗ |
| Figma / imagen → código | ✓ | ✗ | ✗ |
| Migración del marco | ✓ Viento de cola, Bootstrap | ✗ | ✗ |
| Nombres de clases precisos de Tailwind CSS v4 | ✓ | Parcial | ✗ |
Configuración en menos de un minuto
No se necesita una cuenta para comenzar. El nivel gratuito funciona de inmediato: simplemente agrega Cherry a tu editor y listo. La clave de licencia y el correo electrónico solo son necesarios para los planes Pro y Team.
Claude Code
Nivel gratuito no se necesita cuenta
claude mcp add frutjam-cherry -- npx -y frutjam-cherry@latestProfesional / Equipo licencia requerida
claude mcp add frutjam-cherry \
--env LICENSE=your-license-key \
--env EMAIL=your@email.com \
-- npx -y frutjam-cherry@latestCursor
Abra Configuración del cursor → MCP y agregue:
Nivel gratuito no se necesita cuenta
{
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}Profesional / Equipo licencia requerida
{
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}VS Code
Presione Ctrl+Shift+P → MCP: Abra Configuración de usuario, luego agregue:
Nivel gratuito no se necesita cuenta
{
"servers": {
"frutjam-cherry": {
"type": "stdio",
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}
}Profesional / Equipo licencia requerida
{
"servers": {
"frutjam-cherry": {
"type": "stdio",
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
}Other editors
Nivel gratuito no se necesita cuenta
{
"mcpServers": {
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}
}Profesional / Equipo licencia requerida
{
"mcpServers": {
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
}Después de la configuración: tus primeros 60 segundos
Tres pasos para confirmar que Cherry está funcionando y comenzar a construir.
Verifique que esté funcionando
VS Code
Ctrl+Shift+U → seleccione MCP en el menú desplegable Salida. Busque frutjam-cherry: Running.
Cursor
Configuración → MCP. El servidor debería mostrar un estado de conexión verde junto a frutjam-cherry.
Claude Code
Ejecute claude mcp list en la terminal. frutjam-cherry debería aparecer como conectado.
Ejecute su primera prueba
Abra su panel de chat de IA y escriba:
List all available Frutjam componentsSi Cherry está activo, su IA llamará a list_components y devolverá una lista de nombres de componentes. Eso es todo, está funcionando.
Comience a construir: indicaciones de ejemplo
| Dile esto a tu IA | lo que hace cereza |
|---|---|
| "Show me how to use the Frutjam button component" | Llama a get_component y devuelve la especificación completa |
| "Build me a pricing card using Frutjam" | Busca el componente de la tarjeta y escribe el código preciso |
| "Show me the darkberry theme tokens" | Llama a get_theme y devuelve todas las variables CSS |
| "Get me the hero block" | Llama a get_block y devuelve copiar y pegar HTML |
| "How do I install Frutjam?" | Llama a get_docs y devuelve la guía de instalación. |
No es necesario que menciones a Cherry, solo describe lo que quieres. Su IA llama automáticamente a la herramienta adecuada.
Cherry está incluida en Pro y Team
Nivel gratuito disponible: solicitudes diarias limitadas, no se necesita una cuenta.
Actualice a Pro o Team para solicitudes ilimitadas y acceso a bloques premium y comandos de barra AI.
Preguntas frecuentes
¿Qué es un servidor MCP?
MCP (Protocolo de contexto modelo) es un estándar abierto que permite a los asistentes de IA llamar a herramientas externas en tiempo de ejecución. Cherry actúa como un servidor de herramientas: su editor de IA lo llama para obtener las especificaciones de Frutjam a pedido, en lugar de adivinar a partir de los datos de entrenamiento.
¿Por qué los asistentes de IA alucinan con los nombres de las clases de Tailwind CSS?
Los modelos de IA se entrenan en una instantánea de la web; no conocen los nombres de clase exactos de su biblioteca de componentes específica, especialmente para las bibliotecas más nuevas o las API Tailwind CSS v4. Sin un contexto vivo, inventan clases que suenan plausibles pero que no existen. Cherry resuelve esto alimentando a su IA con los documentos reales y actualizados de los componentes de Frutjam en el momento en que los necesita, eliminando las alucinaciones por completo.
¿Qué editores admite Cherry?
Cualquier editor con soporte MCP: Claude Code, Cursor, VS Code, Windsurf, Zed, Cline y cualquier otro editor que implemente el estándar MCP.
¿Cuál es la diferencia entre gratis y Pro/Team?
Gratis le brinda solicitudes diarias limitadas y acceso a documentos de componentes y bloques gratuitos. Pro y Team desbloquean solicitudes ilimitadas, bloques premium, plantillas y todos los comandos de barra AI.
¿Cómo recibo mi clave de licencia?
Su clave de licencia se envía por correo electrónico inmediatamente después de suscribirse. También puede administrar su suscripción y asientos desde su panel de cuenta.
¿Puedo usar Cherry sin conexión?
Cherry valida su licencia en línea la primera vez que la usa y luego la almacena en caché localmente durante 7 días. Después de eso se vuelve a validar. Todo lo que necesitas es una conexión corta a Internet.
¿Puedo cancelar en cualquier momento?
Sí. Cancelar en cualquier momento. Su acceso continúa hasta el final del período de facturación.
¿Listo para construir más rápido?
Haga que su IA funcione con código Frutjam preciso desde el primer mensaje.