Draw-it MCP

Um aplicativo de desenho com inteligência artificial para o seu navegador. Desenhe, salve e obtenha insights com IA.

Documentação

🎨 Draw-it-MCP

Um aplicativo de desenho lindo e com inteligência artificial que roda no seu navegador!

Crie obras de arte incríveis com uma interface intuitiva, salve seus desenhos e obtenha insights com IA através da integração com Cursor e Claude Code.

✨ Por que Draw-it-MCP?

🎨 Desenho Intuitivo - Canvas limpo e responsivo com ferramentas profissionais
💾 Salvamento Inteligente - Nunca perca sua arte com recursos de salvamento automático
🌙 Temas Lindos - Modos escuro e claro para desenhar com conforto
🤖 Integração com IA - Deixe o Claude analisar e discutir sua arte
📱 Funciona em Qualquer Lugar - Perfeito em desktop, tablet e celular
⚡ Extremamente Rápido - Experiência de desenho suave a 60 FPS

🚀 Início Rápido

🎨 Só Quer Desenhar? (Uso Temporário)

Um comando para começar a desenhar imediatamente:

npx draw-it-mcp

Perfeito para esboços rápidos e testar o aplicativo, mas pode não funcionar com MCP, o que significa INÚTIL!

🤖 Quer Integração com IA? (Instalação Permanente)

Para integração com Claude Code/Cursor:

npm install -g draw-it-mcp
draw-it-mcp

Isso instala permanentemente e permite conexões MCP estáveis.

O que acontece quando você executa:

📦 Instala dependências (apenas na primeira vez)
🏗️ Compila o aplicativo (apenas na primeira vez)
🚀 Inicia o servidor em uma porta disponível
🌐 Abre seu navegador no aplicativo de desenho
🎨 Comece a criar!

🎯 Perfeito Para

Artistas Digitais - Esboce ideias e conceitos rapidamente
Estudantes - Faça anotações visuais e crie diagramas
Designers - Prototipagem rápida e wireframes
Todos - Expressão criativa e divertida para todas as idades
Entusiastas de IA - Explore análise de arte com inteligência artificial

🎨 Recursos Que Tornam o Desenho Divertido

🎪 Ferramentas de Desenho

6 cores lindas + seletor de cores personalizado
4 tamanhos de pincel com indicadores visuais
Ferramentas de pincel e borracha
Desfazer/refazer ilimitados
Limpar canvas com um clique

💾 Gerenciamento Inteligente de Arquivos

Salvamento automático - nunca perca seu trabalho
Miniaturas de alta qualidade - veja todos os seus desenhos de uma vez
Sistema de salvamento inteligente - atualiza desenhos existentes sem problemas
Exportação em PNG - baixe sua arte quando quiser

🌟 Experiência Encantadora

Troca instantânea de tema - modos escuro/claro
Suporte a toque - perfeito para tablets
Atalhos de teclado - para usuários avançados
Design responsivo - fica ótimo em qualquer tela
Renderização a 60 FPS - desenho extremamente suave

🤖 Análise de Arte com IA (Opcional)

Conecte-se com Cursor ou Claude Code para desbloquear superpoderes de IA:

O Que o Claude Pode Fazer Com Sua Arte:

🔍 Analisar composição e técnicas artísticas
🎯 Identificar formas e elementos geométricos
💡 Sugerir melhorias e ideias criativas
📊 Fornecer feedback detalhado sobre seus desenhos
🎨 Discutir conceitos artísticos e inspiração

Configuração Rápida para Editores de Código com IA:

⚠️ Importante: Para conexões MCP estáveis, instale globalmente primeiro: npm install -g draw-it-mcp

🤖 Claude Code (Recomendado)

Instale o Draw-it-MCP globalmente: npm install -g draw-it-mcp
Instale o Claude Code: Baixe da Anthropic
Inicie o Draw-it-MCP: draw-it-mcp

Adicione a configuração MCP às configurações do seu Claude Code:

{
  "mcpServers": {
    "draw-it-mcp": {
      "command": "draw-it-mcp",
      "args": ["mcp:server"]
    }
  }
}

Reinicie o Claude Code e tente: "Você pode analisar meu desenho atual?"

⚡ Cursor IDE

Instale o Draw-it-MCP globalmente: npm install -g draw-it-mcp
Instale o Cursor: Baixe do cursor.sh
Inicie o Draw-it-MCP: draw-it-mcp

Configure o MCP nas configurações do Cursor (~/.cursor/claude_desktop_config.json):

{
  "mcpServers": {
    "draw-it-mcp": {
      "command": "draw-it-mcp", 
      "args": ["mcp:server"]
    }
  }
}

Reinicie o Cursor e pergunte ao Claude sobre seus desenhos!

📱 Como Usar

Começando (30 segundos!)

Execute npx draw-it-mcp (temporário) ou draw-it-mcp (se instalado globalmente)
O navegador abre automaticamente no aplicativo de desenho
Clique em uma cor para selecioná-la
Escolha o tamanho do pincel
Comece a desenhar no canvas!
Clique em "Salvar" quando estiver satisfeito com sua arte

Dicas de Profissional 🏆

Ctrl+Z para desfazer, Ctrl+Y para refazer
Clique no alternador de tema (🌙/☀️) para mudar entre modo escuro/claro
Salve cedo, salve com frequência - seus desenhos são preciosos!
Experimente diferentes tamanhos de pincel para efeitos artísticos variados
Use a borracha para aperfeiçoar seus detalhes

🔄 Atualizando o Draw-it-MCP

Mantenha sua instalação atualizada com os recursos mais recentes:

# Easy update command
draw-it-mcp update

Se a atualização falhar, você pode atualizar manualmente:

npm install -g draw-it-mcp@latest

🛠️ Requisitos do Sistema

Node.js 18+ (Baixe do nodejs.org)
Navegador web moderno (Chrome, Firefox, Safari, Edge)
2GB de RAM (recomendado)
Qualquer sistema operacional (Windows, macOS, Linux)

🌍 Perfeito para Equipes

Compartilhe a magia! Qualquer pessoa pode iniciar sua própria sessão de desenho:

# Team member 1 (temporary use)
npx draw-it-mcp

# Team member 2 (if globally installed)
draw-it-mcp

# Different ports automatically chosen - everyone gets their own space!

🆘 Precisa de Ajuda?

Problemas Comuns e Soluções

🔧 "Comando não encontrado"

Instale o Node.js do nodejs.org
Reinicie seu terminal

🔧 "Porta já em uso"

Não se preocupe! O aplicativo encontra automaticamente uma porta disponível
Verifique a saída do terminal para a URL correta

🔧 "O navegador não abre"

Procure a URL no terminal (algo como http://localhost:3001)
Copie e cole no seu navegador

🔧 "Desempenho lento"

Tente fechar outras abas do navegador
Reinicie o aplicativo com npx draw-it-mcp

Ainda com problemas?

Abra uma issue no GitHub - estamos aqui para ajudar! 🤝

🏆 O Que as Pessoas Estão Dizendo

"Finalmente, um aplicativo de desenho que simplesmente funciona! A integração com Claude é impressionante." - Artista Digital

"Perfeito para esboços rápidos e wireframes. Adoro a interface limpa!" - Designer de UX

"Meus filhos adoram desenhar nisso, e eu adoro que seja educativo com IA." - Pai e Professor

"Um comando e estou desenhando. Não pode ser mais simples que isso!" - Desenvolvedor

🎉 Pronto para Criar?

Não espere - comece sua jornada artística agora:

# Quick try (temporary)
npx draw-it-mcp

# Full experience with AI (permanent)
npm install -g draw-it-mcp
draw-it-mcp

Bons desenhos! 🎨✨

Feito com ❤️ para criadores em todo lugar
⭐ Dê uma estrela no GitHub • 🐛 Reporte Problemas • 🤖 Configuração de IA