Crea tu portafolio de fotógrafo con vibe coding

01En qué se diferencia de un selector de plantillas

Las galerías de plantillas te muestran un diseño terminado y te piden que digas si te gusta o no. Esta herramienta va una capa más profunda: cada una de las seis direcciones de abajo se basa en un portafolio real de un fotógrafo en activo que se inspeccionó de verdad (capturas, diseño en vivo, colores calculados, tipografías calculadas), no en una paleta que alguien inventó para que se viera bien en una muestra. La dirección Editorial, por ejemplo, usa EB Garamond porque es literalmente la tipografía del sitio de un fotógrafo de moda real, copiada al inspeccionar la página directamente.

Dos patrones aparecieron casi en todas partes en los sitios reales a partir de los cuales se hizo esto, y están incorporados en cada dirección: la navegación escondida detrás de un único ícono de hamburguesa, sin lista de enlaces visible ni siquiera en escritorio, y una imagen grande a la vez en lugar de una cuadrícula. El color de la interfaz se mantiene casi en cero: el color lo pone la fotografía, no la interfaz.

02Qué obtienes al final

Un único prompt estructurado que cubre la dirección general, los colores hex exactos, los nombres y la combinación de tipografías, la lista de páginas, el comportamiento de la navegación, el diseño de la galería y el encuadre de las imágenes, qué funciones incluir, una recomendación de hosting con sus costos reales y un conjunto fijo de requisitos de calidad (texto alternativo accesible, puntos de quiebre 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.

03Del prompt a un sitio en línea: el recorrido completo

El prompt es el brief de diseño, no la meta. Estos son todos los pasos entre copiarlo y tener una URL real que puedes poner en una tarjeta de presentación, 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 hizo

Pídele que construya el sitio como HTML/CSS/JS estático (o lo que haya especificado la sección de hosting del prompt) y que te muestre una vista previa. Revisa las seis cosas que pedía el prompt (colores, tipografías, comportamiento de la galería, navegación, encuadre, páginas) antes de seguir. Es mucho más barato corregir un color de acento equivocado ahora que después de conectar las fotos.

Cambia por tus fotos reales, tu biografía y tus datos de contacto

Reemplaza cada imagen de relleno y cada línea de texto de relleno. Pídele a tu app de IA que escriba un atributo alt real y específico para cada foto sobre la marcha, no “image1.jpg”, sino una descripción de verdad, porque es un requisito de accesibilidad y además un pequeño empujón de SEO. Este también es el momento de revisar que el formulario de contacto apunte de verdad a un correo que sí revisas.

Publícalo en un hosting gratuito

Si elegiste el nivel “Estático y gratis”, pídele a tu app de IA que te guíe para conectar la carpeta del proyecto o el repositorio de GitHub con uno de los hosts de la página Hosting del menú de arriba. Los cuatro compilan y publican automáticamente cada vez que subes un cambio; sin subida manual una vez conectado.

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

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

04¿Qué hosting gratuito debes usar?

Cualquiera de estos pone un sitio estático en línea sin costo, con HTTPS gratis y un plan gratuito que cubre de sobra el tráfico de un portafolio personal. Los límites de los planes gratuitos cambian con bastante frecuencia, así que toma los números de la página Hosting como una idea general y no como cifras exactas y actuales, y revisa la página de precios de cada proveedor antes de decidir.

Pídele a tu app de programación con IA que haga contigo los pasos de publicación: “conecta este proyecto a Netlify” es algo totalmente normal de pedirle, y por lo general puede guiarte para crear la cuenta y hacer la primera publicación en un par de minutos.

05Cómo conectar un dominio propio

Un dominio es un pequeño pago anual (normalmente de 10 a 20 dólares al año según la extensión), aparte del hosting, que sigue siendo gratis. Las tres piezas:

1. Compra el dominio. Namecheap, Cloudflare Registrar o el sucesor de Google Domains (Squarespace Domains).
2. Agrega un registro DNS. Un CNAME (o un registro A) que apunte tu dominio a tu host, que se agrega 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 host, como your-portfolio.netlify.app, y un registro A para el dominio sin www que apunte a la IP del host.
3. Agrégalo en tu host. Pega el mismo dominio en los ajustes de “dominio personalizado” de tu host; el HTTPS se configura solo.

Todos los hosts de la página Hosting tienen una pestaña “Dominio personalizado” o “Dominios” que te da el registro exacto que debes agregar: cópialo, agrégalo en tu registrador y espera. Los cambios de DNS suelen tardar de unos minutos a unas horas en aplicarse, y a veces hasta 24 o 48 horas. Tu app de programación con IA puede guiarte por el panel de tu registrador si te atoras; haz una captura de la página de ajustes y pregúntale dónde hacer clic. Candado visible y ningún aviso de “no seguro”: esa es la meta.

06Lista de verificación antes del lanzamiento

Cinco minutos con esta lista detectan casi todo lo que hace que un portafolio se vea sin terminar. Las verificaciones están en la página Antes del lanzamiento del menú de arriba; ve marcándolas.

07Preguntas frecuentes