Blog de WisyLink

Portafolio webFreelanceDiseñadoresFormulario de contactoWeb personal

Cómo crear un portafolio web con IA y formulario de contacto

Crea tu portafolio web con IA: una página por proyecto con URL limpias, formulario de contacto que guarda y te reenvía mensajes, panel propio y tu dominio.

12 min de lectura
Cómo crear un portafolio web con IA y formulario de contacto

Para crear un portafolio web con IA, reúne tus mejores proyectos, sus imágenes y una biografía breve, y describe el diseño y el tono que buscas. El creador genera páginas de proyecto, una sección sobre ti y un formulario de contacto que guarda los mensajes. Puedes añadir trabajos nuevos desde un panel privado y publicarlo en tu propio dominio.

  • Entre ocho y doce proyectos sólidos, cada uno con una historia breve, consiguen más encargos que una galería con todo lo que has hecho.
  • Adjunta tus propias imágenes (hasta 25 MB por archivo) cuando describas la web. WisyLink las usa tal cual y no genera fotos.
  • Pide una página por proyecto con una URL limpia; los proyectos que añadas después desde el panel de administración se publican sin rehacer la web.
  • El formulario de contacto guarda todos los mensajes. Los avisos por correo necesitan tu propia cuenta SMTP, que añades una sola vez en Integraciones.
  • Los enlaces gratuitos duran 30 días. Un plan de pago mantiene la web publicada mientras sigas suscrito; tu propio dominio funciona en cualquier plan, también en el gratuito.

Qué necesita un portafolio para conseguir clientes

Un portafolio web tiene una sola misión: que la persona adecuada te contacte. Esa persona suele ser una directora de arte, un responsable de selección o el dueño de un negocio que revisa varios portafolios seguidos. Decide en poco tiempo si haces el tipo de trabajo que necesita, si se ve bien y si contactarte es fácil. Todo lo que haya en la web debe servir a esas tres decisiones.

Los elementos de un portafolio web que genera solicitudes de presupuesto
ElementoPara qué sirveConsejo
Frase de posicionamientoDice a quién ayudas y cómo«Identidad de marca para restaurantes independientes» funciona mejor que «Diseñador creativo»
Cuadrícula de trabajos seleccionadosMuestra variedad y calidad de un vistazoEmpieza por el proyecto más parecido al trabajo que quieres conseguir
Páginas de proyectoDemuestran cómo piensas, no solo el resultado visualContexto, tu papel, proceso y resultado
Sobre míGenera confianza en la persona detrás del trabajoUna foto real tuya y tres o cuatro frases
Servicios y forma de trabajarResponde a «¿cómo sería trabajar juntos?»Enumera lo que entregas y, a grandes rasgos, cómo se desarrolla un proyecto
TestimoniosPruebas de tercerosSolo citas reales, con permiso del cliente
Formulario de contactoConvierte el interés en una conversaciónPregunta el tipo de proyecto y el plazo para filtrar contactos
Tarjeta para compartirHace que tu enlace se vea cuidado en los mensajesCompruébala pegando el enlace en una app de mensajería antes del lanzamiento

Prepara tu trabajo: imágenes, casos breves y biografía

La preparación influye en la calidad del resultado más que el prompt. Dedícale una tarde antes de abrir el chat.

Imágenes

Elige primero los proyectos y después exporta sus imágenes a tamaño web en JPEG, PNG o WebP, con nombres descriptivos como cafe-del-puerto-portada-carta.jpg en lugar de IMG_0412.jpg. Cada archivo que adjuntes al chat puede ocupar hasta 25 MB, y el chat acepta, entre otros, los formatos de imagen habituales, PDF, documentos de Word y MP4. Si eres fotógrafo, elige una serie por proyecto en lugar de fotos sueltas, y comprueba que los acuerdos con tus clientes y las autorizaciones de los modelos permiten publicarlas.

¿Puedo subir mis propias imágenes y videos?

Sí. Los archivos que adjuntas se usan tal cual; el creador nunca sustituye tu trabajo por imágenes generadas. Los clips MP4 cortos de menos de 25 MB funcionan como archivos de la web, pero cada subida cuenta para el almacenamiento y el ancho de banda de tu plan. Para un showreel o una videoteca larga, aloja los videos en una plataforma de video y pide que se inserten en las páginas de proyecto.

Casos de estudio y biografía

Escribe cada caso de estudio en cinco partes breves: cliente y contexto, el problema, lo que hiciste, el resultado y los créditos (tu papel en los proyectos de equipo). Con tres a seis frases por proyecto basta. Para la sección sobre ti, escribe en primera persona si trabajas solo y en tercera si presentas un estudio. Reúnelo todo en un documento y adjúntalo al chat; así te ahorras escribirlo dentro del prompt.

Créala: plantilla de prompt

Si nunca has creado una web de esta forma, la guía paso a paso para crear una página web con IA cubre lo básico. Para un portafolio, el proceso es este:

  1. Crea una cuenta gratuita en el plan Community y abre un chat nuevo.
  2. Adjunta tus imágenes y el documento con tus casos de estudio.
  3. Pega el prompt de abajo, completado con tus datos.
  4. Responde a Wisy si te pregunta algo. En cada turno, o te hace una pregunta breve o inicia la compilación.
  5. Sigue la lista de tareas mientras se compila y después abre el enlace en vivo en tu teléfono y en un portátil.
  6. Pide cambios concretos, un tema por mensaje: «haz más grandes los títulos de los proyectos y pon el nombre del cliente debajo» funciona mejor que «hazlo más bonito».
  7. Añade tus datos SMTP en Integraciones para que los mensajes nuevos lleguen a tu bandeja de entrada.
  8. Conecta tu dominio cuando estés listo para el lanzamiento y cambia a un plan de pago para mantener la web publicada.

Crea un portafolio web para [tu nombre], [disciplina] en [ciudad] que trabaja con [tipo de clientes].

Páginas: una página de inicio con la frase «[frase de posicionamiento]» y una cuadrícula de trabajos seleccionados; una página Proyectos con todos los proyectos y un filtro por [lista de categorías]; una página por proyecto en /proyectos/[nombre-del-proyecto] con el texto del caso, las imágenes adjuntas y enlaces al proyecto anterior y al siguiente; una página Sobre mí con mi biografía y mi foto; una página de Contacto.

Campos del formulario de contacto: nombre, correo, tipo de proyecto, plazo y mensaje. Guarda cada mensaje y muéstralos en un panel de administración privado. Envíame por correo cada mensaje nuevo.

Panel de administración: un acceso solo para mí donde pueda añadir, editar, reordenar y ocultar proyectos y subir sus imágenes.

Estilo: [tres adjetivos], [preferencia de color], una tipografía que transmita [por ejemplo, un aire editorial y sereno]. Que las imágenes lleven el protagonismo; textos cortos.

Describe el estilo con palabras concretas en lugar de «moderno» o «limpio», que significan algo distinto para cada persona. Encontrarás más fórmulas en las plantillas de prompts para crear páginas web con IA. En el plan gratuito, Wisy limita cada compilación a una primera versión breve, así que si el primer resultado no incluye el panel de administración, pídelo en un segundo mensaje.

Una página por proyecto con URL limpias

Una sola página con scroll sirve para tres proyectos. A partir de ahí, dale a cada proyecto su propia página. Una página de proyecto en una dirección como /proyectos/rebranding-cafe-del-puerto se puede enviar directamente a un posible cliente que te pidió trabajos para restaurantes, tiene su propio título y su propia descripción en los resultados de búsqueda y puede posicionar por su tema, por ejemplo «diseño de packaging para una cervecería artesanal».

En WisyLink, cada proyecto que añades como registro obtiene su propia página rastreable, generada a partir de tus datos guardados. Un proyecto nuevo aparece en la página Proyectos, en su propia URL y en el sitemap de la web en cerca de un minuto desde que lo publicas, sin rehacer nada. Haz que cada página de proyecto cuente más que su tarjeta: el contexto, dos o tres imágenes del proceso, el resultado y los créditos. Una página que solo repite el título y una foto no da a los visitantes ni a los buscadores ningún motivo para quedarse.

Elige direcciones de proyecto cortas y descriptivas, y no las cambies. Si renombras un proyecto después de compartir su enlace, pide una redirección desde la dirección antigua para que los enlaces anteriores sigan funcionando.

Un formulario de contacto que guarda los mensajes y te avisa por correo (SMTP)

El formulario de contacto guarda cada envío en la base de datos de la propia web, y tú los lees en el panel de administración. Esa parte funciona desde la primera compilación. Los avisos por correo necesitan un paso más: la web envía el correo a través de tu propia cuenta SMTP, es decir, la configuración de correo saliente que te da tu proveedor de email. Pegas el servidor, el puerto, el usuario, la contraseña y la dirección del remitente en Integraciones, donde se cifran y no vuelven a mostrarse. Mientras no lo hagas, los mensajes se siguen guardando; simplemente no recibes un correo por cada uno. Nunca pegues una contraseña en el propio chat.

Tres detalles hacen el formulario más útil:

  • Campos para filtrar. El tipo de proyecto y el plazo te dicen en segundos qué solicitud responder primero. Un rango de presupuesto funciona en algunas disciplinas y ahuyenta a la gente en otras; si dudas, no lo pongas.
  • Límites contra el spam. Pide al creador que limite los envíos repetidos desde una misma dirección de correo, para que un script no pueda llenar tu bandeja de entrada ni tu base de datos.
  • Un remitente con tu dominio. En cuanto conectes tu dominio, usa como remitente una dirección como hola@tunombre.com, sobre todo si también pides un correo de confirmación automático para quien te escribe.

Antes del lanzamiento, envíate un mensaje de prueba y confirma que aparece en el panel y en tu bandeja de entrada, revisando también la carpeta de spam.

Rápido, fácil de compartir y de encontrar: tarjetas para redes y SEO básico

Todas las webs de WisyLink se generan en el servidor, así que los buscadores y las vistas previas de enlaces ven la página completa desde la primera solicitud. Cada página tiene su propio título, su metadescripción y su URL canónica, además de etiquetas Open Graph y de tarjeta de Twitter, datos estructurados, un favicon, un /sitemap.xml y un /robots.txt. La primera compilación también diseña una imagen para compartir la web, de modo que tu enlace muestra una tarjeta cuidada en lugar de un recuadro vacío cuando lo pegas en un mensaje.

Ten en cuenta un límite: la tarjeta para compartir es un único gráfico diseñado para toda la web, dibujado como arte vectorial. No muestra tus fotografías. Si quieres que tenga otro aspecto, describe el cambio en el chat.

El resto es contenido, y esa parte es tuya:

  • Texto alternativo. Describe con palabras sencillas lo que muestra cada imagen: «Portada de carta rotulada a mano para un café junto al puerto». Las prácticas recomendadas de SEO para imágenes de Google señalan el texto alternativo como el atributo más importante de los metadatos de una imagen, y además hace que la web se pueda usar con un lector de pantalla.
  • Texto en las páginas de proyecto. Los buscadores leen texto, no píxeles. Nombra el tipo de cliente, lo que entregaste y, si trabajas en una zona concreta, el lugar: «fotógrafo de bodas en Sevilla».
  • Tamaño de las imágenes. Las exportaciones a tamaño web mantienen las páginas rápidas en el teléfono, donde muchos posibles clientes abren el enlace que alguien les reenvió.

Añade proyectos nuevos desde el panel de administración

Un portafolio que nunca cambia empieza a parecer abandonado. Pide un panel de administración privado en el primer o el segundo mensaje, con un formulario para cada proyecto: título, dirección, resumen, texto del caso, imagen de portada, imágenes de la galería, categoría, orden de aparición y un interruptor de publicado.

¿Puedo añadir proyectos nuevos sin rehacer la web?

Sí. Los proyectos son datos guardados, no código, así que añadir uno desde el panel no inicia una compilación ni gasta tu cuota de uso. La página nueva llega a los visitantes en cerca de un minuto. Solo vuelves al chat cuando quieres cambiar el diseño o añadir una función, como una franja con logotipos de clientes o un aviso de «disponible para nuevos proyectos».

Las imágenes que subes desde el panel se guardan como archivos públicos, se sirven rápido y tienen un límite de 25 MB cada una. Las subidas públicas no aceptan archivos SVG, así que exporta los logotipos en PNG. La nota final de la compilación te explica cómo entrar en el panel: a menudo la primera cuenta que registras pasa a ser la de administrador, o la nota te da los datos de acceso. Inicia sesión, pruébalo y cambia cualquier contraseña inicial por una tuya.

Tu propio dominio y el lanzamiento

Tu web empieza en una dirección como https://<id>.wisylink.com, perfecta para hacer pruebas. En el plan gratuito Community, los enlaces duran 30 días y después quedan marcados para eliminación una semana más antes de borrarse. Puedes conectar tunombre.com en cualquier plan, pero para mantener el portafolio publicado pasados esos 30 días, pasa a un plan de pago; Starter cuesta 7 USD al mes (consulta los planes). Si lo contratas desde la app de iOS o Android, la App Store o Google Play te cobran en tu moneda local.

En Dominios conectas un dominio que ya tengas; si aún no tienes uno, regístralo primero en cualquier registrador de dominios. Conectarlo con un único registro DNS no toca tu correo; apuntar tus servidores de nombres a WisyLink sustituye todos los registros DNS existentes, también los del correo, así que elige esa opción solo si estás listo para volver a crearlos. El HTTPS se configura solo en cuanto el dominio se verifica. Tienes el proceso completo en cómo conectar un dominio propio a tu web creada con IA.

Antes de difundir el enlace:

  1. Abre cada página de proyecto en un teléfono y revisa cómo se recortan las imágenes.
  2. Envía una solicitud de prueba y confirma que llega tanto al panel como a tu correo.
  3. Pega el enlace en una app de mensajería y revisa la tarjeta de vista previa.
  4. Vuelve a leer cada palabra; una errata en un portafolio cuesta más que en cualquier otro sitio.
  5. Añade el enlace a tu firma de correo, a tus perfiles en redes y a tus facturas.

Crea tu portafolio con un solo mensaje

Lo difícil ya lo tienes: el trabajo. Reúne tus mejores proyectos, escribe cinco líneas sobre cada uno, adjunta las imágenes y pega la plantilla de prompt de arriba con tus datos. Revisa la primera versión en tu teléfono, pide los cambios que importan y conecta tu dominio cuando te convenza.

Puedes probarlo todo gratis: empieza con Community, sin tarjeta, y cambia a un plan de pago solo cuando el portafolio esté listo para quedarse publicado en tu propio dominio.

F.A.Q.

Preguntas frecuentes

¿Puedo subir mis propias imágenes y videos al portafolio?
Sí. Adjúntalos en el chat cuando describas la web o súbelos más tarde desde tu panel de administración. Cada archivo puede ocupar hasta 25 MB y se aceptan formatos habituales como JPEG, PNG, WebP, GIF y MP4. Las subidas cuentan para el almacenamiento y el ancho de banda de tu plan, así que aloja los videos largos o tu showreel en una plataforma de video e insértalos en las páginas de proyecto.
¿Puedo añadir proyectos nuevos sin rehacer la web?
Sí, en cuanto tu web tenga un panel de administración. Añadir, editar, ocultar o reordenar proyectos cambia datos guardados, así que no hace falta ninguna compilación y el cambio llega a los visitantes en cerca de un minuto. Solo vuelves al chat para cambios de estructura, como un campo nuevo en las páginas de proyecto, otro diseño o una sección nueva. Si tu primera compilación no trae panel, pídelo en un mensaje posterior.
¿Mi portafolio aparecerá en Google?
Puede aparecer, pero nada garantiza una posición. Lo técnico ya viene resuelto en cada web de WisyLink: páginas generadas en el servidor, títulos y descripciones, URL canónicas, datos estructurados, un sitemap y robots.txt. El resto depende del contenido y de tu reputación: páginas de proyecto descriptivas, texto alternativo, tu ciudad si trabajas en una zona concreta y enlaces desde webs de clientes, directorios y tus perfiles en redes. Verifica la web en Google Search Console después del lanzamiento.
¿Puedo proteger con contraseña los trabajos para clientes?
Sí, de dos maneras. Una contraseña para toda la web pone una única clave compartida delante de cada página, lo que encaja con una web aparte de revisión para un solo cliente. Para varios clientes en la misma web, pide accesos por cliente para que cada uno vea solo sus galerías. La protección con contraseña no se activa hasta que defines la clave en Integraciones, así que pruébala en una ventana de incógnito antes de enviar el enlace.
¿Puedo añadir animaciones o efectos 3D?
Sí. Las webs pueden usar animaciones CSS y SVG, efectos en canvas y escenas 3D en tiempo real en el navegador, y los modelos 3D que aportes en formato .glb, .gltf o .fbx se usan tal cual. En un portafolio, el movimiento debe estar al servicio del trabajo: las transiciones sutiles y los efectos al pasar el cursor ayudan, y los efectos pesados ralentizan los teléfonos. Pide que las animaciones respeten la preferencia de movimiento reducido de cada visitante.
¿Crear un portafolio web con IA es gratis?
Puedes crearlo y probarlo gratis en el plan Community, que permite una compilación por cada ventana de 5 horas. Los enlaces gratuitos siguen publicados 30 días y después una semana más marcados para eliminación. Para mantener el portafolio en línea mientras sigas suscrito, necesitas un plan de pago: Starter cuesta 7 USD al mes. Puedes conectar tu propio dominio en cualquier plan, y el dominio se paga aparte salvo que ya tengas uno.
Compartir
XLinkedInFacebook