Pare as alucinações de IA.
Seu editor de IA conhece Tailwind CSS.
Cherry é um servidor MCP (Model Context Protocol) gratuito que alimenta seu assistente de codificação de IA com as especificações, temas, documentos e blocos exatos dos componentes CSS do Tailwind - sob demanda, sem alucinações.
Por que os assistentes de IA erram no CSS do Tailwind – e como o Cherry corrige isso
Sem cereja
- IA alucina nomes de classes que não existem em Frutjam
- Você copia e cola documentos em cada prompt, desperdiçando tokens
- llms.txt despeja tudo – a IA fica sobrecarregada
- Quebras de IU geradas porque a IA usava APIs de componentes desatualizados
Com cereja
- AI busca as especificações exatas para cada componente necessário
- Contexto certo na hora certa – sem desperdício de tokens
- Sempre sincronizado com a versão mais recente do Frutjam
- A saída é precisa, semântica e pronta para produção
O que Cherry pode fazer
Basta descrever o que você deseja. Cherry dá à sua IA o conhecimento exato necessário para construí-la corretamente.
| Você pergunta à sua IA... | Cereja faz acontecer |
|---|---|
| "Adicionar uma seção de preços a esta página" | Busca o HTML do bloco de preços real e o coloca |
| "Quais variantes de emblemas Frutjam tem?" | Extrai as especificações completas do emblema – classes, tamanhos, estados, exemplos |
| "Aplique o tema mirtilo a este layout" | Carrega os tokens de design exatos para esse tema |
| "Converta esta barra de navegação Bootstrap para Frutjam" | Migra a marcação para corrigir classes Frutjam |
| "Transforme este design Figma em Frutjam HTML" | Lê o link Figma e o reproduz com componentes Frutjam |
| "Migre este cartão Tailwind simples para Frutjam" | Substitui utilitários Tailwind pelas classes de componentes Frutjam corretas |
Comandos de barra de IA integrados
Cherry inclui instruções prontas para as tarefas mais comuns do Frutjam. Digite o comando em seu editor de IA, forneça sua opinião e obtenha o código Frutjam preciso - sem necessidade de solicitação manual.
/figma_to_frutjam
Figma → Frutjam
Cole uma descrição de design Figma ou JSON exportado. Cherry o converte em HTML Frutjam preciso e copiável.
/image_to_frutjam
Captura de tela → Frutjam
Descreva uma captura de tela da IU ou compartilhe o URL de uma imagem. Cherry reproduz isso com os componentes Frutjam mais próximos.
/tailwind_to_frutjam
Vento favorável → Frutjam
Cole o HTML bruto do Tailwind. Cherry substitui utilitários artesanais pelas classes corretas de componentes Frutjam.
/bootstrap_to_frutjam
Bootstrap → Frutjam
Cole a marcação Bootstrap. Cherry mapeia cada classe Bootstrap para seu equivalente Frutjam e gera HTML limpo.
/generate_theme
Gerar um tema
Descreva um humor, marca ou paleta de cores. Cherry gera um tema Frutjam completo com todas as variáveis CSS necessárias.
+
Mais prompts adicionados a cada atualização.
Todos os comandos de barra estão disponíveis em Claude Code, Cursor, VS Code e qualquer editor compatível com MCP.
Como Cherry se compara
Nem todos os contextos de IA são iguais.
| Cherry MCP | llms.txt | No context | |
|---|---|---|---|
| Nomes de classe precisos | ✓ | Parcial | ✗ |
| Sob demanda – apenas o que é necessário | ✓ | ✗ despeja tudo | ✗ |
| Token eficiente | ✓ | ✗ | ✓ |
| Sempre atualizado | ✓ | ✓ | ✗ |
| Temas e tokens de design | ✓ | Parcial | ✗ |
| Blocos de páginas prontos | ✓ | ✗ | ✗ |
| Figma / imagem → código | ✓ | ✗ | ✗ |
| Migração de estrutura | ✓ Vento favorável, Bootstrap | ✗ | ✗ |
| Nomes de classe precisos do Tailwind CSS v4 | ✓ | Parcial | ✗ |
Configuração em menos de um minuto
Nenhuma conta é necessária para começar. O nível gratuito funciona imediatamente - basta adicionar Cherry ao seu editor e pronto. A chave de licença e o e-mail são necessários apenas para os planos Pro e Team.
Claude Code
Nível gratuito nenhuma conta necessária
claude mcp add frutjam-cherry -- npx -y frutjam-cherry@latest
Pró/equipe licença necessária
claude mcp add frutjam-cherry \
--env LICENSE=your-license-key \
--env EMAIL=your@email.com \
-- npx -y frutjam-cherry@latest
Cursor
Abra Configurações do Cursor → MCP e adicione:
Nível gratuito nenhuma conta necessária
{
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}
Pró/equipe licença necessária
{
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
VS Code
Pressione Ctrl+Shift+P → MCP: Abra a configuração do usuário e adicione:
Nível gratuito nenhuma conta necessária
{
"servers": {
"frutjam-cherry": {
"type": "stdio",
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}
}
Pró/equipe licença necessária
{
"servers": {
"frutjam-cherry": {
"type": "stdio",
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
}
Other editors
Nível gratuito nenhuma conta necessária
{
"mcpServers": {
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}
}
Pró/equipe licença necessária
{
"mcpServers": {
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
}
Após a configuração – seus primeiros 60 segundos
Três etapas para confirmar que o Cherry está funcionando e começar a construir.
Verifique se está em execução
VS Code
Ctrl+Shift+U → selecione MCP no menu suspenso Saída. Procure por frutjam-cherry: Running.
Cursor
Configurações → MCP. O servidor deve mostrar um status conectado verde próximo a frutjam-cherry.
Claude Code
Execute claude mcp list no terminal. frutjam-cherry deve aparecer como conectado.
Execute seu primeiro teste
Abra seu painel de bate-papo AI e digite:
List all available Frutjam components
Se o Cherry estiver ativo, sua IA chamará list_components e retornará uma lista de nomes de componentes. É isso – está funcionando.
Comece a construir – exemplos de prompts
| Diga isso para sua IA | O que cereja faz |
|---|---|
| "Show me how to use the Frutjam button component" | Chama get_component e retorna a especificação completa |
| "Build me a pricing card using Frutjam" | Procura o componente do cartão e escreve código preciso |
| "Show me the darkberry theme tokens" | Chama get_theme e retorna todas as variáveis CSS |
| "Get me the hero block" | Chama get_block e retorna copiar e colar HTML |
| "How do I install Frutjam?" | Chama get_docs e retorna o guia de instalação |
Você não precisa mencionar Cherry – apenas descreva o que deseja. Sua IA chama a ferramenta certa automaticamente.
Cherry está incluída no Pro e Team
Nível gratuito disponível – solicitações diárias limitadas, sem necessidade de conta.
Atualize para Pro ou Team para solicitações ilimitadas e acesso a blocos premium e comandos de corte de IA.
Perguntas frequentes
O que é um servidor MCP?
MCP (Model Context Protocol) é um padrão aberto que permite que assistentes de IA chamem ferramentas externas em tempo de execução. Cherry atua como um servidor de ferramentas – seu editor de IA o chama para buscar especificações do Frutjam sob demanda, em vez de adivinhar a partir dos dados de treinamento.
Por que os assistentes de IA alucinam os nomes das classes CSS do Tailwind?
Os modelos de IA são treinados em um instantâneo da web – eles não sabem os nomes exatos das classes de sua biblioteca de componentes específicos, especialmente para bibliotecas mais recentes ou APIs Tailwind CSS v4. Sem contexto vivo, eles inventam classes que parecem plausíveis, mas inexistentes. Cherry resolve isso alimentando sua IA com documentos de componentes Frutjam reais e atualizados no momento em que precisa deles, eliminando totalmente as alucinações.
Quais editores o Cherry suporta?
Qualquer editor com suporte MCP: Claude Code, Cursor, VS Code, Windsurf, Zed, Cline e qualquer outro editor que implemente o padrão MCP.
Qual é a diferença entre gratuito e Pro/Team?
Gratuito oferece solicitações diárias limitadas e acesso a documentos de componentes e blocos gratuitos. Pro e Team desbloqueiam solicitações ilimitadas, blocos premium, modelos e todos os comandos de barra de IA.
Como recebo minha chave de licença?
Sua chave de licença será enviada por e-mail imediatamente após a assinatura. Você também pode gerenciar sua assinatura e licenças no painel da conta.
Posso usar o Cherry offline?
Cherry valida sua licença on-line no primeiro uso e depois a armazena em cache localmente por 7 dias. Depois disso, ele revalida. Uma curta conexão com a Internet é tudo que você precisa.
Posso cancelar a qualquer momento?
Sim. Cancele a qualquer momento. Seu acesso continua até o final do período de cobrança.
Pronto para construir mais rápido?
Faça sua IA funcionar com código Frutjam preciso desde o primeiro prompt.