Cómo crear un sitio web de portafolio con IA

Antes de abrir el generador, escribe el alcance mínimo. La mayoría de los portafolios personales no necesitan muchas páginas, pero sí contenido claro.

Una estructura común es:

• Página de inicio con nombre, rol, breve introducción y algunos proyectos destacados
• Página de proyectos o secciones de proyectos con capturas, resúmenes, herramientas usadas y resultados
• Página Acerca de con trayectoria, habilidades y forma de trabajar
• Sección de contacto con correo, enlaces sociales y, opcionalmente, un formulario

También decide para quién es el sitio:

• Responsables de contratación que buscan pruebas rápidas de trabajo
• Clientes que quieren ver si encajas con su tipo de proyecto
• Colaboradores que quieren conocer tu proceso y tu criterio

Luego enumera el contenido que ya tienes:

• Títulos de proyectos
• 1–3 capturas por proyecto
• Descripciones breves
• Enlaces al trabajo en vivo o a GitHub
• Biografía y foto de perfil

Si haces esto primero, la IA tendrá suficiente contexto para construir algo útil desde el primer intento en lugar de devolverte una plantilla genérica.

En Moremade, describes el sitio en lenguaje natural. El agente de IA escribe el código fuente, te muestra una vista previa en vivo y puedes seguir haciendo cambios por chat.

Tu primer prompt debe cubrir:

• Qué tipo de portafolio es
• Qué páginas o secciones necesita
• Qué contenido incluir
• La dirección visual
• Cualquier detalle funcional, como un formulario de contacto o enlaces

Sé específico. Si solo dices "hazme un portafolio", acabarás dedicando más tiempo a corregir el resultado.

Ejemplo de primer prompt:

Crea un sitio web de portafolio personal para una diseñadora de producto freelance llamada Maya Chen. Usa un diseño limpio y minimalista, con tipografía potente, colores apagados y mucho espacio en blanco. Crea una página de inicio con una breve introducción hero, proyectos destacados, una sección Acerca de, un espacio de testimonios de ejemplo y una sección de contacto. Añade una página de proyectos con 4 tarjetas de casos de estudio. Cada proyecto debe mostrar el título, un resumen de una línea, las herramientas usadas y un botón para ver más detalles. Incluye navegación, pie de página, diseño adaptable a móviles y un formulario de contacto. Usa convenciones de estilo de React y Tailwind y haz que el sitio se sienta profesional más que llamativo.

Para un portafolio sencillo, pide primero las páginas principales y un diseño base sensato. Después puedes afinar los detalles visuales cuando veas la vista previa.

Una vez generada la primera versión, inspecciona con cuidado la vista previa en vivo. Primero mira la estructura del contenido y luego el acabado visual.

Comprueba estos puntos:

• ¿La jerarquía visual se entiende en la primera pantalla?
• ¿Los proyectos se pueden escanear con facilidad?
• ¿La sección Acerca de suena lo bastante personal?
• ¿Los botones, espacios y tamaños de texto son coherentes?
• ¿Hay algo que parezca texto de relleno que debas reemplazar?

Moremade te permite cambiar cosas por chat y también tiene un inspector visual para señalar un elemento y editarlo. Usa prompts de seguimiento breves que ataquen un problema a la vez.

Tres ejemplos útiles:

• "Reduce la altura de la sección hero, mueve los proyectos destacados más arriba en la página y haz que el texto de introducción sea más conciso."
• "Convierte las tarjetas de proyecto en vistas previas de casos de estudio con una miniatura arriba, etiquetas de herramientas y una línea breve de resultado debajo de cada resumen."
• "Usa una paleta neutra más cálida, aumenta el contraste del texto del cuerpo y haz que el botón del formulario de contacto ocupe todo el ancho solo en móvil."

Esta fase suele ir más rápido si evitas pedir un rediseño total, a menos que la estructura inicial esté claramente mal.

Muchos portafolios no necesitan una base de datos, inicio de sesión ni pagos. Mantener la primera versión simple hace que sea más fácil terminarla.

Usa Supabase solo si el portafolio necesita funciones como:

• Un formulario de contacto que guarde envíos
• Contenido protegido con inicio de sesión
• Una pequeña configuración tipo CMS para actualizar entradas de proyectos desde datos

Usa Stripe solo si el portafolio también vende algo, como:

• Plantillas de diseño de pago
• Sesiones de consultoría
• Descargas digitales

Moremade incluye conectores integrados para Supabase y Stripe, junto con proveedores de correo como Resend y SendGrid. Si añades uno de estos, escribe el requisito de forma clara.

Por ejemplo:

• "Conecta el formulario de contacto a Supabase para que los envíos se guarden con nombre, correo y mensaje."
• "Añade una página de pago con Stripe para una sesión de revisión de portafolio de 60 minutos con el precio que yo indique."

Si tu objetivo es publicar un sitio personal profesional, omite estas integraciones salvo que resuelvan una necesidad real.

Un portafolio suele revisarse primero en el móvil, sobre todo desde un enlace en un correo o en perfiles sociales. Los problemas en móvil son una de las formas más fáciles de hacer que un buen trabajo parezca descuidado.

En la vista previa, revisa:

• El comportamiento del menú de navegación
• El ajuste del texto hero
• El espaciado de las tarjetas de proyecto
• El recorte de imágenes
• El tamaño de los botones y las zonas de toque
• El espaciado de los campos del formulario de contacto
• La legibilidad de los enlaces del pie de página

Pide correcciones precisas en lugar de decir "mejorar el móvil".

Ejemplos:

• "En pantallas por debajo del ancho móvil, apila el contenido hero en vertical y reduce el tamaño del titular un nivel."
• "Haz que todas las miniaturas de proyecto tengan la misma proporción y evita que los subtítulos ocupen tres líneas en teléfonos."
• "Aumenta el padding lateral en la sección de contacto y haz que el botón de enviar sea más fácil de pulsar en pantallas pequeñas."

Moremade también te da vista de código, lo cual es útil si quieres inspeccionar exactamente qué cambió en el código de React y Tailwind.

Cuando el sitio se vea bien, publícalo. Moremade puede publicar con un clic en un subdominio gratis yourname.moremade.ai. En los planes de pago, puedes conectar un dominio personalizado. Los dominios también se pueden comprar dentro de Moremade.

Un orden práctico de lanzamiento es:

• Publica primero en el subdominio gratuito
• Abre el sitio en vivo en escritorio y móvil
• Corrige cualquier último problema de contenido o espaciado
• Conecta tu dominio personalizado si estás en un plan de pago

Moremade genera código real de React + Tailwind para sitios web. Puedes exportar todo el código fuente como un ZIP en cualquier momento o enviarlo a GitHub. Eso importa para un portafolio, porque quizá quieras alojarlo en otro sitio más adelante, entregárselo a un desarrollador o seguir iterando fuera de la plataforma.

Si esperas seguir cambiando el sitio a menudo, el historial de versiones en los planes de pago es útil para comparar y revertir ediciones.

El principal modo de fallo no es técnico. Es publicar un portafolio que parece terminado pero dice muy poco.

Vigila estos problemas habituales:

• Demasiadas secciones en la página de inicio, sin una prioridad clara
• Resúmenes de proyectos vagos que nunca explican qué hiciste
• Prompts visuales genéricos que producen un resultado parecido a una plantilla
• Añadir Stripe, inicio de sesión o base de datos sin un caso de uso real
• Saltarse la revisión móvil
• Publicar texto provisional, imágenes de stock o páginas de casos de estudio vacías

Un buen portafolio suele hacer bien unas pocas cosas simples:

• Explica quién eres y qué tipo de trabajo haces
• Muestra proyectos seleccionados, no todo
• Da suficientes detalles para juzgar tu forma de pensar
• Facilita que te contacten

Usa la IA para llegar rápido a un buen borrador y luego dedica tu tiempo a mejorar la sustancia del contenido.