Vibe coding de tu portfolio fotográfico

01En qué se diferencia de un selector de plantillas

Las galerías de plantillas te enseñan un diseño terminado y te preguntan si te gusta o no. Esta herramienta va una capa más allá: cada una de las seis direcciones de abajo se basa en un portfolio fotográfico real y en funcionamiento que se inspeccionó de verdad (capturas, maquetación en vivo, colores calculados, tipografías calculadas), no en una paleta inventada para que quede bien en una muestra. La dirección Editorial, por ejemplo, usa EB Garamond porque es literalmente la tipografía con la que está compuesta la web de una fotógrafa de moda real, copiada inspeccionando la página directamente.

Dos patrones aparecieron casi en todas las webs reales en las que se basa esto, y están incorporados en cada dirección: la navegación oculta tras un único icono de hamburguesa sin lista de enlaces visible, incluso en escritorio, y una imagen grande cada vez en lugar de una cuadrícula. El color de la interfaz se mantiene cerca de cero: el color lo pone la fotografía, no la interfaz.

02Lo que obtienes al final

Un único prompt estructurado que cubre la dirección general, los colores hexadecimales exactos, los nombres y la combinación de tipografías, la lista de páginas, el comportamiento de la navegación, la disposición de la galería y el encuadre de las imágenes, las funciones que incluir, una recomendación de alojamiento con costes reales y compensaciones, y un conjunto fijo de requisitos de calidad de construcción (texto alternativo accesible, puntos de corte adaptables, sin secretos escritos en el código, imágenes con carga diferida). Pégalo en la app de programación con IA que prefieras y tendrá todo lo necesario para empezar.

03De prompt a web en línea: el recorrido completo

El prompt es el briefing de diseño, no la meta. Estos son todos los pasos entre copiarlo y tener una URL real que puedas poner en una tarjeta de visita, gratis o casi.

Copia el prompt y abre una app de programación con IA

Sirven Claude, Cursor, Claude Code, Windsurf o el agente de IA de Replit, cualquier cosa que pueda escribir y guardar archivos por ti, no solo chatear. Si nunca has usado una, una opción en el navegador como claude.ai o Replit no necesita instalación: pega el prompt como tu primer mensaje.

Deja que lo construya y luego mira de verdad lo que ha hecho

Pídele que construya la web como HTML/CSS/JS estático (o lo que indicara la sección de alojamiento del prompt) y que te enseñe una vista previa. Comprueba las seis cosas que pedía el prompt (colores, tipografías, comportamiento de la galería, navegación, encuadre, páginas) antes de seguir. Corregir ahora un color de acento equivocado es mucho más barato que hacerlo cuando ya están puestas las fotos.

Cambia las fotos, la biografía y los datos de contacto por los tuyos

Sustituye todas las imágenes de relleno y todas las líneas de texto de relleno. Pide a tu app de IA que escriba un atributo alt real y concreto para cada foto sobre la marcha, no «image1.jpg», sino una descripción de verdad, porque es a la vez un requisito de accesibilidad y un pequeño empujón de SEO. También es el momento de comprobar que el formulario de contacto apunta de verdad a una dirección de correo que consultas.

Despliégala en un alojamiento gratuito

Si elegiste el nivel «Estático y gratis», pide a tu app de IA que te guíe para conectar la carpeta del proyecto o el repositorio de GitHub con uno de los alojamientos de la página Alojamiento del menú de arriba. Los cuatro compilan y despliegan automáticamente cada vez que subes un cambio; una vez conectado, no hay que subir nada a mano.

Conecta un dominio propio (opcional, pero merece la pena)

Un subdominio gratuito (como yourname.netlify.app) va bien para empezar. Cuando quieras yourname.com, es la compra de un dominio más un cambio de DNS, explicado en detalle más abajo.

04¿Qué alojamiento gratuito deberías usar?

Cualquiera de estos pondrá en línea una web estática sin coste, con HTTPS gratuito y un nivel gratuito que cubre de sobra el tráfico de un portfolio personal. Los límites de los niveles gratuitos cambian con bastante frecuencia, así que toma las cifras de la página Alojamiento como una idea general y no como cifras actuales exactas, y consulta la página de precios de cada proveedor antes de decidirte.

Pide a tu app de programación con IA que haga contigo los pasos de despliegue: «conecta este proyecto con Netlify» es algo totalmente normal de pedirle, y normalmente puede guiarte por la creación de la cuenta y el primer despliegue en un par de minutos.

05Conectar un dominio propio

Un dominio es una pequeña cuota anual (normalmente de 10 a 20 $ al año según la extensión), aparte del alojamiento, que sigue siendo gratuito. Las tres piezas:

1. Compra el dominio. Namecheap, Cloudflare Registrar o el sucesor de Google Domains (Squarespace Domains).
2. Añade un registro DNS. Un CNAME (o un registro A) que apunte tu dominio a tu alojamiento, añadido en el panel del registrador. Son dos líneas en la tabla del registrador: un CNAME para www que apunte a la dirección que te da tu alojamiento, como your-portfolio.netlify.app, y un registro A para el dominio sin www que apunte a la IP del alojamiento.
3. Añádelo en tu alojamiento. Pega el mismo dominio en los ajustes de «dominio personalizado» de tu alojamiento; el HTTPS se configura solo.

Todos los alojamientos de la página Alojamiento tienen una pestaña «Custom domain» o «Domains» que te da el registro exacto que añadir: cópialo, añádelo en tu registrador y espera. Los cambios de DNS suelen tardar de minutos a unas horas en aplicarse y, en ocasiones, hasta 24 o 48 horas. Tu app de programación con IA puede guiarte por el panel de tu registrador concreto si te atascas; haz una captura de la página de ajustes y pregúntale dónde pulsar. Candado visible, sin aviso de «no seguro»: esa es la meta.

06Lista de comprobación antes del lanzamiento

Cinco minutos con esta lista detectan casi todo lo que hace que un portfolio parezca sin terminar. Las comprobaciones son la página Antes del lanzamiento del menú de arriba; ve marcándolas.

07Preguntas frecuentes