Vibe coding con Claude: chat de Claude, Claude Code y crear apps desde Claude

El vibe coding con Claude funciona de tres maneras. El chat de Claude crea pequeñas apps de una sola página dentro de la propia conversación. Claude Code es un agente que edita un proyecto real en tu equipo o en la nube, para quien se maneja con un código base. Y Claude más un creador de apps por MCP te permite construir, previsualizar y publicar una app full-stack con base de datos sin salir de la conversación con Claude. Cuál encaja depende de lo que estés creando y de cuánta configuración quieras asumir.

Esta guía cubre las tres, con prompts y los límites de cada una. Para la idea que hay detrás de todo, mira qué es el vibe coding.

Opción 1: el chat de Claude para herramientas pequeñas

En la app normal de Claude puedes pedir algo interactivo y Claude lo escribe como código que se ejecuta junto a la conversación: una calculadora, un repaso con tarjetas, un juego pequeño, un gráfico a partir de datos que pegues. Lo cambias respondiendo.

Aquí un buen prompt se basta a sí mismo:

Crea una herramienta interactiva donde pego una lista de gastos (uno por línea, "importe, categoría") y muestra un gráfico circular por categoría y un total. Incluye una lista de ejemplo para que funcione desde el primer momento.

Para qué es estupendo: herramientas rápidas de una sola página que usas tú o compartes con un enlace, y para aprender, porque puedes pedirle a Claude que te explique cada parte.

Dónde se queda corto: se ejecutan dentro del entorno de Claude. No hay base de datos persistente propia, ni cuentas de usuario, ni dominio personalizado, ni un lugar donde ejecutar un servidor. Cuando una idea supera una página, necesitas una de las dos opciones siguientes.

Opción 2: Claude Code para un código base real

Claude Code es el agente de programación de Anthropic. Funciona en tu terminal, en editores como VS Code y JetBrains, en una aplicación de escritorio y en la web. Le das una tarea en lenguaje natural, lee tu proyecto, edita archivos, ejecuta comandos y pruebas y te muestra qué cambió. En el momento de escribir esto está incluido en los planes de pago de Claude y disponible mediante la API; consulta el sitio de Anthropic para ver los planes actuales.

Una sesión típica de vibe coding se ve así:

Añade una página /bookings que liste las reservas del usuario actual, las más recientes primero, con un botón de cancelar que se desactive a menos de dos horas de la clase. Usa el helper de autenticación existente. Ejecuta las pruebas al terminar.

Para qué es estupendo: desarrolladores y fundadores técnicos que ya tienen un proyecto, quieren control total del stack y están dispuestos a ejecutarlo y desplegarlo ellos mismos. Es fuerte en cambios de varios archivos y en seguir las convenciones que ya hay en un código base.

Dónde da más trabajo: necesitas un entorno de desarrollo, y Claude Code no aloja nada. Las bases de datos, los secretos, el despliegue y los dominios los organizas tú. Para una comparación con otras herramientas para desarrolladores, mira Cursor vs Windsurf vs Claude Code.

Hábitos que funcionan bien con Claude Code

• Pide un plan antes de los cambios grandes. "Esboza los pasos y los archivos que vas a tocar, y espera."
• Mantén un archivo de notas del proyecto. Claude Code lee un archivo de memoria del proyecto (CLAUDE.md) con las convenciones, para que no tengas que repetirlas.
• Revisa el diff. Incluso haciendo vibe coding, echa un vistazo a lo que cambió en zonas sensibles: autenticación, pagos, cualquier cosa con datos de usuarios.
• Haz commits a menudo. Los commits pequeños facilitan deshacer un paso malo.

Opción 3: crear y publicar desde Claude con Mythex

Si te gusta trabajar en Claude pero quieres una app real al final (base de datos, inicios de sesión, almacenamiento de archivos, una URL pública), puedes conectar Claude a un creador de apps con IA mediante MCP, el protocolo que permite a Claude usar herramientas alojadas en otro lugar. (Qué es MCP lo explica en términos sencillos.)

Mythex tiene un servidor MCP. Una vez conectado, Claude puede crear un proyecto de Mythex, escribir el código en un sandbox privado en la nube, iniciar una vista previa en vivo, conectar una base de datos y almacenamiento de archivos y publicar la app. Cada resultado incluye un enlace para ver el proyecto en directo en Mythex.

Cómo conectar

1. En Mythex, abre Ajustes de cuenta y copia la URL de MCP: https://mcp.mythex.ai/mcp.
2. En Claude, ve a Settings → Connectors → Add custom connector, pega la URL y haz clic en Connect.
3. Se abre una página de Mythex. Inicia sesión si hace falta y elige Permitir acceso. No hay ninguna clave de API que copiar.
4. De vuelta en Claude, pide lo que quieras.

Cualquiera puede conectar en cualquier plan; las herramientas del sandbox requieren Mythex Pro ($25 al mes). El uso de Claude sigue en tu plan de Claude, y el tiempo de sandbox, las vistas previas y el hosting salen de tus créditos de Mythex. El recorrido completo está en crear apps de Mythex desde Claude, Cursor o Codex.

Un primer prompt para probar

Con Mythex, crea un proyecto nuevo: un CRM sencillo para mi pequeño estudio de diseño. Contactos con nombre, empresa, correo, teléfono, etapa (potencial, activo, pasado) y notas. Una vista de tablero por etapa donde pueda arrastrar contactos entre columnas, y un cuadro de búsqueda. Añade una base de datos para que los datos persistan y un inicio de sesión para que solo yo pueda verlo. Inicia la vista previa y envíame el enlace cuando esté funcionando.

Luego itera en la misma conversación, un cambio cada vez:

En el proyecto de Mythex, añade una fecha de "próximo seguimiento" a los contactos y una lista en la pantalla de inicio con los seguimientos de esta semana. Compruébalo en la vista previa.

Publica el CRM y dame la URL en vivo.

Para qué es estupendo: quienes piensan mejor en Claude y quieren el resultado alojado, con base de datos, sin configurar servidores. También puedes cambiar: empieza en Claude y sigue en el chat de Mythex, o al revés, porque es el mismo proyecto.

¿Cuál deberías usar?

Consejos de prompts que importan más con Claude

Claude sigue de cerca las instrucciones detalladas, lo cual tiene dos caras.

• Di qué no cambiar. "Mantén el diseño y los colores; cambia solo la validación del formulario."
• Dale una definición de terminado. "Terminado significa que un contacto nuevo se guarda, aparece en el tablero y sobrevive a un refresco."
• Pídele que compruebe su trabajo. En Claude Code eso significa ejecutar pruebas; con Mythex significa revisar la vista previa en vivo o ejecutar una prueba en el navegador.
• Pide explicaciones con palabras sencillas cuando no entiendas un cambio. Es la forma más rápida de aprender lo que hace tu app.

Nuestra hoja de prompts de vibe coding tiene 30 prompts que funcionan en cualquiera de las tres configuraciones.

Notas de seguridad para las tres

• No pegues claves de API ni contraseñas reales en una conversación con Claude. Con Mythex, los secretos van en los ajustes de secretos del proyecto, y Claude puede ver sus nombres pero no sus valores.
• Comprueba quién puede ver qué antes de publicar. "¿Puede un usuario con sesión iniciada abrir los registros de otro usuario?" es la primera pregunta que hay que hacer.
• Revisa el código sensible. Claude es un programador capaz, pero hacer vibe coding significa que no lees cada línea, así que elige las líneas que importan. Mira ¿es seguro el vibe coding?.

Si usas también ChatGPT, la guía complementaria cubre el vibe coding con ChatGPT y Codex. Y si prefieres saltarte toda la configuración, abre el creador de apps con IA y describe tu app allí.

Preguntas