Claude Code puede generar un sitio web impresionante a partir de una referencia de diseño, pero el primer resultado puede no coincidir completamente con el objetivo comercial previsto. En este ejemplo, Claude recreó con precisión el estilo visual, incluyendo las fuentes, colores, tarjetas interactivas, testimonios, formulario y pie de página. Sin embargo, construyó un sitio web para una clínica dental en lugar de una agencia web que crea sitios para dentistas.

Esto ocurrió porque la solicitud inicial no proporcionó suficiente contexto. En lugar de comenzar de nuevo, el diseño existente puede refinarse mediante un flujo de trabajo iterativo. Se le pidió a Claude que mantuviera la estructura pero reescribiera el contenido para Outbound, una agencia web dirigida a clínicas dentales en Austin. El llamado principal a la acción se cambió a una auditoría gratuita de sitio web.

Refinamiento del sitio web con entrada de voz

Las instrucciones extensas del proyecto no siempre necesitan escribirse manualmente. La función de micrófono de Claude puede utilizarse para describir los cambios de manera natural, incluyendo:

• Qué hace el negocio
• Quién es el público objetivo
• Qué contenido necesita cambiar
• Qué partes del diseño existente deben permanecer
• Cuál debe ser el llamado principal a la acción

Claude puede luego hacer preguntas de seguimiento cuando falte información importante y actualizar el sitio web en función de las respuestas.

Conexión de Claude con Vercel

Una vez que el sitio web está listo, debe desplegarse en una plataforma de alojamiento. En lugar de configurar manualmente Git, GitHub y los ajustes de despliegue, Claude Code puede conectarse directamente a Vercel mediante un conector MCP.

Para conectar Vercel:

1. Haz clic en el icono de más cerca del campo de entrada de chat de Claude.
2. Abre Conectores y selecciona Administrar conectores.
3. Haz clic en Explorar conectores.
4. Busca Vercel y haz clic en Conectar.
5. Autoriza a Claude para acceder al equipo y proyectos de Vercel correspondientes.

Después de establecer la conexión, Claude puede desplegar el proyecto, monitorear el despliegue, identificar errores y devolver la URL del sitio web en vivo.

Revisión de problemas de despliegue

El primer despliegue puede fallar si Claude todavía está modificando el proyecto en otra sesión o si los archivos actuales no coinciden con los utilizados durante la compilación. Claude puede inspeccionar el despliegue fallido, esperar a que finalicen los cambios en el sitio web, reconstruir el proyecto y desplegarlo nuevamente.

Antes de publicar, Claude también puede identificar elementos incompletos, tales como:

• Un formulario que no está conectado a un backend
• Contenido de marcador de posición
• Un dominio personalizado faltante
• Una política de privacidad incompleta

Estos problemas deben revisarse antes de lanzar un sitio web en producción. Sin embargo, aún se puede desplegar una versión temporal para pruebas o demostraciones.

Del diseño de referencia al sitio web en vivo

Después de un despliegue exitoso, Vercel proporciona una URL pública que se puede abrir en dispositivos de escritorio o móviles. El sitio web resultante es adaptable y posteriormente se puede conectar a un dominio personalizado.

Este flujo de trabajo demuestra que Claude Code puede hacer mucho más que escribir código. Puede refinar contenido, modificar archivos del proyecto, conectarse a servicios externos, solucionar errores de compilación y desplegar un sitio web funcional mediante instrucciones en lenguaje natural.

El error inicial también resalta una lección importante: Claude funciona mejor cuando recibe el contexto del proyecto de manera clara desde el principio. Definir el negocio, la audiencia, los objetivos y el resultado deseado ayuda a mantener el proyecto alineado y reduce revisiones innecesarias.