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

El vibe coding con Claude funciona de tres maneras. El chat de Claude crea apps pequeñas de una sola página directamente en la conversación. Claude Code es un agente que edita un proyecto real en tu equipo o en la nube, para personas cómodas con una base de código. Y Claude más un creador de apps por MCP te permite construir, previsualizar y publicar una app completa con base de datos sin salir de la conversación con Claude. Cuál te conviene depende de lo que construyas y de cuánta configuración quieras asumir tú.

Esta guía cubre las tres, con prompts y los límites de cada una. Para la idea general, consulta qué es el vibe coding.

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

En la aplicación 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 ejercicio de tarjetas de memoria, un juego pequeño, un gráfico con datos que pegas. Lo cambias respondiendo.

Un buen prompt aquí es autocontenido:

Haz una herramienta interactiva en la que pegue una lista de gastos (uno por línea, «importe, categoría») y muestre un gráfico circular por categoría y un total. Incluye una lista de ejemplo para que funcione de inmediato.

Lo que mejor hace: herramientas rápidas de una sola página que usas tú o compartes como enlace, y aprender, porque puedes pedirle a Claude que explique cada parte.

Hasta dónde llega: estas se ejecutan dentro del entorno de Claude. No hay una base de datos persistente propia, ni cuentas de usuario, ni dominio propio, ni dónde ejecutar un servidor. Cuando una idea se sale de una sola página, necesitas una de las dos opciones siguientes.

Opción 2: Claude Code para una base de código 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, y lee tu proyecto, edita archivos, ejecuta comandos y pruebas, y te muestra lo que ha cambiado. En el momento de escribir esto está incluido en los planes de pago de Claude y disponible a través de la API; consulta la web de Anthropic para los planes actuales.

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

Añade una página /reservas que liste las reservas del usuario actual, las más recientes primero, con un botón de cancelar que esté desactivado a menos de dos horas de la clase. Usa el asistente de autenticación existente. Ejecuta las pruebas cuando termines.

Lo que mejor hace: personas que programan y fundadores técnicos que ya tienen un proyecto, quieren control total de la pila y están dispuestos a ejecutarlo y desplegarlo ellos mismos. Destaca en cambios de varios archivos y en seguir las convenciones que ya existen en una base de código.

Donde requiere 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 comparativa con otras herramientas para desarrolladores, consulta Cursor vs Windsurf vs Claude Code.

Hábitos que funcionan bien con Claude Code

• Pide un plan antes de los cambios grandes. «Describe 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, así que no tienes que repetirlas.
• Revisa las diferencias. Aunque hagas vibe coding, repasa lo que cambió en las zonas sensibles: autenticación, pagos, cualquier cosa con datos de usuarios.
• Confirma (commit) 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 al final una app real (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 ejecuta un servidor MCP. Una vez conectado, Claude puede crear un proyecto de Mythex, escribir el código en un entorno aislado en la nube, iniciar una vista previa en directo, añadir 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 conectarlo

1. En Mythex, abre los Ajustes de cuenta y copia la URL MCP: https://mcp.mythex.ai/mcp.
2. En Claude, ve a Ajustes → Conectores → Añadir conector personalizado, pega la URL y haz clic en Conectar.
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 conectarse en cualquier plan; las herramientas del entorno necesitan Mythex Pro (25 $ al mes). El uso de Claude sigue en tu plan de Claude, y el tiempo de entorno, las vistas previas y el alojamiento 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

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

Después, 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 directo.

Lo que mejor hace: personas que piensan mejor en Claude y quieren el resultado alojado, con base de datos, sin configurar servidores. También puedes cambiar de herramienta: 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 las instrucciones detalladas con mucha precisión, lo cual juega a favor y en contra.

• Di qué no cambiar. «Mantén la maquetación 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 una recarga.»
• Pídele que compruebe su trabajo. En Claude Code eso significa ejecutar pruebas; con Mythex, revisar la vista previa en directo o ejecutar una prueba en el navegador.
• Pide explicaciones en palabras sencillas cuando no entiendas un cambio. Es la forma más rápida de aprender qué hace tu app.

Nuestra chuleta 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 que ha iniciado sesión 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 el vibe coding significa que no lees cada línea, así que elige las que importan. Consulta ¿es seguro el vibe coding?.

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

Preguntas