Draw-it MCP

Una aplicación de dibujo impulsada por IA para tu navegador. Dibuja, guarda y obtén información potenciada por IA.

Documentación

🎨 Draw-it-MCP

¡Una hermosa aplicación de dibujo impulsada por IA que se ejecuta en tu navegador!

Crea obras de arte increíbles con una interfaz intuitiva, guarda tus dibujos y obtén información impulsada por IA mediante la integración con Cursor y Claude Code.

✨ ¿Por qué Draw-it-MCP?

🎨 Dibujo intuitivo - Lienzo limpio y receptivo con herramientas profesionales
💾 Guardado inteligente - Nunca pierdas tus obras con funciones de guardado automático
🌙 Temas hermosos - Modos oscuro y claro para dibujar cómodamente
🤖 Integración con IA - Deja que Claude analice y discuta tus obras
📱 Funciona en todas partes - Perfecto en escritorio, tableta y móvil
⚡ Rápido como un rayo - Experiencia de dibujo fluida a 60 FPS

🚀 Inicio rápido

🎨 ¿Solo quieres dibujar? (Uso temporal)

Un solo comando para empezar a dibujar de inmediato:

npx draw-it-mcp

¡Perfecto para bocetos rápidos y probar la aplicación, pero podría no funcionar con MCP, lo que significa que es INÚTIL!

🤖 ¿Quieres integración con IA? (Instalación permanente)

Para integración con Claude Code/Cursor:

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

Esto se instala de forma permanente y habilita conexiones MCP estables.

Qué sucede cuando lo ejecutas:

📦 Instala dependencias (solo la primera vez)
🏗️ Compila la aplicación (solo la primera vez)
🚀 Inicia el servidor en un puerto disponible
🌐 Abre tu navegador en la aplicación de dibujo
🎨 ¡Empieza a crear!

🎯 Perfecto para

Artistas digitales - Boceta ideas y conceptos rápidamente
Estudiantes - Toma notas visuales y crea diagramas
Diseñadores - Prototipado rápido y wireframes
Todos - Expresión creativa y divertida para todas las edades
Entusiastas de la IA - Explora el análisis de arte impulsado por IA

🎨 Funciones que hacen divertido el dibujo

🎪 Herramientas de dibujo

6 hermosos colores + selector de color personalizado
4 tamaños de pincel con indicadores visuales
Herramientas de pincel y borrador
Deshacer/rehacer ilimitado
Limpieza de lienzo con un clic

💾 Gestión inteligente de archivos

Avisos de guardado automático - nunca pierdas tu trabajo
Miniaturas de alta calidad - ve todos tus dibujos de un vistazo
Sistema de guardado inteligente - actualiza dibujos existentes sin problemas
Exportación PNG - descarga tu arte cuando quieras

🌟 Experiencia encantadora

Cambio de tema instantáneo - modos oscuro/claro
Soporte táctil - perfecto para tabletas
Atajos de teclado - para usuarios avanzados
Diseño responsivo - se ve genial en cualquier pantalla
Renderizado a 60 FPS - dibujo suave como la seda

🤖 Análisis de arte impulsado por IA (Opcional)

Conéctate con Cursor o Claude Code para desbloquear superpoderes de IA:

Lo que Claude puede hacer con tu arte:

🔍 Analizar la composición y las técnicas artísticas
🎯 Identificar formas y elementos geométricos
💡 Sugerir mejoras e ideas creativas
📊 Proporcionar comentarios detallados sobre tus dibujos
🎨 Discutir conceptos artísticos e inspiración

Configuración rápida para editores de código con IA:

⚠️ Importante: Para conexiones MCP estables, instala globalmente primero: npm install -g draw-it-mcp

🤖 Claude Code (Recomendado)

Instala Draw-it-MCP globalmente: npm install -g draw-it-mcp
Instala Claude Code: Descargar de Anthropic
Inicia Draw-it-MCP: draw-it-mcp

Agrega la configuración de MCP a los ajustes de Claude Code:

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

Reinicia Claude Code y prueba: "¿Puedes analizar mi dibujo actual?"

⚡ Cursor IDE

Instala Draw-it-MCP globalmente: npm install -g draw-it-mcp
Instala Cursor: Descargar de cursor.sh
Inicia Draw-it-MCP: draw-it-mcp

Configura MCP en los ajustes de Cursor (~/.cursor/claude_desktop_config.json):

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

Reinicia Cursor y pregúntale a Claude sobre tus dibujos.

📱 Cómo usar

Primeros pasos (¡30 segundos!)

Ejecuta npx draw-it-mcp (temporal) o draw-it-mcp (si está instalado globalmente)
El navegador se abre automáticamente en la aplicación de dibujo
Haz clic en un color para seleccionarlo
Elige el tamaño de tu pincel
¡Empieza a dibujar en el lienzo!
Haz clic en "Guardar" cuando estés satisfecho con tu arte

Consejos profesionales 🏆

Ctrl+Z para deshacer, Ctrl+Y para rehacer
Haz clic en el alternador de tema (🌙/☀️) para cambiar entre modo oscuro/claro
Guarda temprano, guarda seguido - ¡tus dibujos son valiosos!
Prueba diferentes tamaños de pincel para efectos artísticos variados
Usa el borrador para perfeccionar tus detalles

🔄 Actualizar Draw-it-MCP

Mantén tu instalación actualizada con las últimas funciones:

# Easy update command
draw-it-mcp update

Si la actualización falla, puedes actualizar manualmente:

npm install -g draw-it-mcp@latest

🛠️ Requisitos del sistema

Node.js 18+ (Descargar de nodejs.org)
Navegador web moderno (Chrome, Firefox, Safari, Edge)
2GB de RAM (recomendado)
Cualquier sistema operativo (Windows, macOS, Linux)

🌍 Perfecto para equipos

¡Comparte la magia! Cualquiera puede iniciar su propia sesión de dibujo:

# 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!

🆘 ¿Necesitas ayuda?

Problemas comunes y soluciones

🔧 "Comando no encontrado"

Instala Node.js desde nodejs.org
Reinicia tu terminal

🔧 "Puerto en uso"

¡No te preocupes! La aplicación encuentra automáticamente un puerto disponible
Revisa la salida de la terminal para ver la URL correcta

🔧 "El navegador no se abre"

Busca la URL en la terminal (algo como http://localhost:3001)
Cópiala y pégala en tu navegador

🔧 "Rendimiento lento"

Intenta cerrar otras pestañas del navegador
Reinicia la aplicación con npx draw-it-mcp

¿Sigue atascado?

Abre un issue en GitHub - ¡estamos aquí para ayudar! 🤝

🏆 Lo que dice la gente

"Por fin, una aplicación de dibujo que simplemente funciona. ¡La integración con Claude es alucinante!" - Artista digital

"Perfecta para bocetos rápidos y wireframes. ¡Me encanta la interfaz limpia!" - Diseñador UX

"A mis hijos les encanta dibujar aquí, y me encanta que sea educativo con IA." - Padre y maestro

"Un comando y ya estoy dibujando. ¡No puede ser más simple!" - Desarrollador

🎉 ¿Listo para crear?

No esperes más - comienza tu viaje artístico ahora:

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

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

¡Feliz dibujo! 🎨✨

Hecho con ❤️ para creadores de todo el mundo
⭐ Da una estrella en GitHub • 🐛 Reporta problemas • 🤖 Configuración de IA