Vibe Coding: crea tu web sin escribir código

Tu competidor ya tiene web. Tú todavía no.

Tu competidor acaba de lanzar una landing page. Tiene formulario de contacto, calculadora de precios y un diseño profesional. Tú necesitas una también. Pero no sabes programar.

Hace un año, tus opciones eran tres: contratar un desarrollador (semanas y miles de euros), aprender a programar (meses) o usar una plantilla genérica en Wix que se parece a otras mil páginas. Hoy existe una cuarta opción que cambia las reglas: describir lo que quieres en español y que una inteligencia artificial lo construya por ti.

Eso es vibe coding.

Qué es vibe coding (y por qué importa)

El término lo acuñó Andrej Karpathy, uno de los fundadores de OpenAI, para describir una forma completamente nueva de crear software: te dejas llevar por la "vibra", describes lo que imaginas y la IA escribe el código.

En la práctica, vibe coding con Claude Code funciona en tres pasos:

1. Describes lo que quieres ("Hazme una landing page para mi consultoría de nutrición con sección de servicios, testimonios y formulario de contacto")
2. Claude lo construye generando código real, funcional y profesional
3. Iteras pidiendo cambios ("Cambia los colores a verde oscuro", "Añade una sección de preguntas frecuentes", "Haz que el formulario envíe un correo")

No necesitas saber qué es HTML, CSS o JavaScript. No necesitas entender frameworks ni servidores. Solo necesitas saber qué quieres y cómo pedirlo.

12 minutos para una landing page profesional

En el Módulo 4 de nuestro workshop Código para Humanos, los participantes crean una landing page completa desde cero. Sin plantillas. Sin código. Solo con instrucciones en lenguaje natural.

El ejercicio funciona así:

Minutos 1-3: Le describes a Claude el contexto de tu proyecto. Qué empresa es, a quién se dirige, qué problema resuelve. Cuanto mejor sea tu descripción, mejor será el resultado. Esto conecta directamente con lo que enseñamos sobre dar contexto efectivo a Claude: la calidad de lo que recibes depende de la calidad de lo que comunicas.

Minutos 4-8: Claude genera la estructura completa: navegación, sección principal con propuesta de valor, bloques de servicios o características, testimonios, llamada a la acción y pie de página. Todo con diseño responsivo (se adapta a móvil y escritorio).

Minutos 9-12: Iteras. "Hazlo más minimalista." "Cambia la foto por un degradado." "Añade mi logo." Cada instrucción produce un cambio inmediato que puedes ver en el navegador.

El resultado: una web que parece hecha por un diseñador profesional. En 12 minutos. Sin escribir una sola línea de código.

Añadir funcionalidad real en 15 minutos más

Una landing page bonita está bien. Pero lo que separa a los participantes del workshop de alguien que usa Canva es la capacidad de añadir funcionalidad interactiva. Esto es lo que convierte una página estática en una herramienta de negocio.

En la segunda parte del ejercicio, los participantes eligen una funcionalidad para integrar:

• Calculadora de precios: El visitante selecciona opciones y ve un presupuesto en tiempo real. Ideal para consultores, agencias o servicios con variables.
• Cuestionario de diagnóstico: Un quiz interactivo que cualifica al visitante y le muestra una recomendación personalizada. Perfecto para coaches, terapeutas o asesores.
• Formulario inteligente: Un formulario que valida datos, muestra mensajes de confirmación y puede enviar notificaciones por correo.
• Generador de contenido: Una herramienta que usa la API de Claude para generar textos, ideas o análisis directamente en la web.

La instrucción es tan simple como: "Añade una calculadora de precios. Mis servicios son: consultoría básica (500 euros al mes), consultoría avanzada (1.200 euros al mes) y auditoría completa (3.000 euros, pago único). Si eligen dos servicios, aplica un 10% de descuento."

Claude entiende la lógica de negocio, genera el componente interactivo y lo integra dentro de la página existente. En 15 minutos tienes una herramienta funcional que antes habría requerido un desarrollador dedicado.

Pulir para presentar

La diferencia entre "algo que funciona" y "algo que impresiona" está en los detalles. Y esos detalles también se los pides a Claude:

• Animaciones suaves: "Añade una animación de entrada cuando el usuario hace scroll hasta la sección de testimonios"
• Tipografía profesional: "Usa una fuente más elegante para los títulos y aumenta el espaciado entre párrafos"
• Colores de marca: "Mi paleta es azul marino (#1a365d) y dorado (#d69e2e). Aplícala a toda la página"
• Optimización para móvil: "Revisa que todo se vea bien en pantallas pequeñas y ajusta lo que haga falta"

Cada instrucción es una conversación natural. No necesitas saber qué es Tailwind, Flexbox o media queries. Solo necesitas ojos para ver qué quieres cambiar y palabras para describirlo.

Qué han construido los participantes

En las ediciones anteriores del workshop, los participantes han creado proyectos reales que siguen usando en sus negocios:

• Una consultora de recursos humanos creó un sitio con calculadora de costes de rotación de personal que usa con clientes durante reuniones de venta
• Un arquitecto construyó un portafolio interactivo con galería de proyectos filtrable por tipo de obra
• Una psicóloga lanzó una web con cuestionario de autoevaluación que genera recomendaciones personalizadas
• Un abogado creó una herramienta que calcula honorarios según tipo de caso y complejidad

Ninguno de ellos sabía programar. Todos terminaron con productos funcionales que usan profesionalmente.

Por qué esto no es lo mismo que Wix o Squarespace

La pregunta más frecuente es: "¿Y por qué no uso Wix?" Es una buena pregunta. La respuesta tiene tres partes.

Primero, la personalización. Las herramientas de arrastrar y soltar te limitan a las opciones que decidió su equipo de diseño. Con vibe coding, si lo puedes describir, lo puedes construir. No hay restricciones de plantilla.

Segundo, la funcionalidad. Wix o Squarespace ofrecen funcionalidades predefinidas (formularios, galerías, tiendas). Pero si necesitas algo específico para tu negocio, como una calculadora con tu lógica particular de precios o un generador de contenido con inteligencia artificial, estás fuera de sus límites. Con Claude Code, describes la lógica y se construye.

Tercero, la propiedad. Lo que genera Claude Code es código tuyo. Lo puedes alojar donde quieras, modificar cuando quieras y no dependes de una suscripción mensual a una plataforma que puede cambiar sus precios o cerrar. Eres dueño del producto.

El cambio de mentalidad

Lo más valioso del vibe coding no es la tecnología. Es el cambio de mentalidad.

Durante años, crear software era algo reservado a personas con formación técnica. Si no sabías programar, dependías de quien sí sabía. Esa dependencia generaba cuellos de botella, costes altos y frustración.

Vibe coding elimina esa barrera. No te convierte en programador. Te convierte en algo más valioso: en la persona que sabe qué construir y por qué. Eres el director de producto. Claude es tu equipo de desarrollo.

Eso no significa que programar deje de tener valor. Los desarrolladores profesionales usan Claude Code para multiplicar su productividad. Pero para ti, que no programas, la oportunidad es diferente: por primera vez puedes crear herramientas digitales a la velocidad de tus ideas.

Y esa velocidad cambia todo. Puedes probar una idea el lunes, lanzarla el martes y saber si funciona el miércoles. Sin presupuestos, sin esperas, sin intermediarios.

Para profundizar en todo lo que Claude Code puede hacer más allá de crear webs, consulta la guía completa de Claude Code.

Siguiente lectura: Skills vs. CLAUDE.md: cuándo usar cada uno | Ver la guía completa