Cómo crear un portfolio con IA, Next.js y WordPress: guía paso a paso con prompts

En esta guía

1. Qué vamos a construir
2. Cómo encajan Next.js, WordPress y Codex
3. Define el objetivo de tu portfolio
4. Prepara el contenido y los proyectos
5. Elige las referencias visuales
6. Crea la primera versión con Codex
7. Revisa el resultado
8. Qué deberías tener al terminar

Crear un portfolio con inteligencia artificial resulta mucho más útil cuando sabes qué quieres comunicar, qué contenido necesitas y cómo vas a comprobar el resultado. Pedir simplemente “hazme una web bonita” deja demasiadas decisiones importantes al azar.

En esta guía vamos a construir un portfolio con Next.js para la web, WordPress para gestionar los artículos y Codex como ayuda durante el desarrollo. Compartiré los prompts, las decisiones de diseño y las comprobaciones que puedes aplicar a tu propio proyecto.

La idea es que puedas editar y publicar contenido desde WordPress, manteniendo una web personalizada donde presentar tus servicios, proyectos y resultados.

Qué vamos a construir

El resultado será una web con una presentación clara, proyectos seleccionados, una forma sencilla de contactar y un blog integrado en el mismo dominio.

• Una página principal: explica quién eres, qué haces y para quién puedes resultar útil.
• Una sección de proyectos: presenta trabajos reales, tu participación y los resultados que puedas demostrar.
• Un blog: permite compartir guías, aprendizajes y ejemplos relacionados con tu trabajo.
• Una página para cada artículo: muestra su contenido, imágenes y datos de publicación.
• Una base técnica para SEO: incluye títulos, descripciones, enlaces e información de indexación coherentes.
• Un contacto visible: facilita que una persona interesada dé el siguiente paso.

Puedes adaptar esta estructura si eres desarrollador, diseñador, consultor o trabajas en otro servicio profesional. Lo importante es que cada sección ayude a entender tu trabajo o a tomar una decisión.

Cómo encajan Next.js, WordPress y Codex

Antes de empezar conviene entender qué función cumple cada herramienta. Así sabrás dónde realizar los cambios y podrás detectar problemas con más facilidad.

Next.js: la web que visita el usuario

Next.js se encargará de las páginas del portfolio, la navegación y la presentación de los artículos. Aquí definiremos el diseño y cómo se muestra la información que obtenemos de WordPress.

WordPress: el lugar donde escribimos

WordPress será nuestro gestor de contenidos. Lo utilizaremos para redactar artículos, añadir imágenes y actualizar publicaciones. Next.js obtendrá el contenido mediante una API y lo mostrará dentro del portfolio.

A esta forma de utilizar WordPress como gestor separado de la web pública se la suele llamar WordPress headless.

Codex: la ayuda para implementar y revisar

Utilizaremos Codex para crear componentes, conectar el blog y resolver problemas concretos. Para obtener resultados útiles le daremos contexto, requisitos y una forma de comprobar cada cambio.

Aunque utilices IA, tendrás que revisar los textos, abrir las páginas y comprobar que lo que has pedido funciona. Una captura atractiva no demuestra que los enlaces, el blog o la versión móvil estén bien.

Paso 1. Define qué quieres conseguir con el portfolio

Antes de elegir colores o componentes, escribe qué debería entender y hacer una persona al entrar en tu web.

Por ejemplo, un portfolio orientado a conseguir clientes necesita explicar los servicios, mostrar trabajos relevantes y facilitar el contacto. Uno orientado a encontrar empleo puede dar más protagonismo a la experiencia, las responsabilidades y las decisiones técnicas.

Si buscas ambas cosas, elige un mensaje principal y añade caminos claros para cada tipo de visitante.

Completa este pequeño briefing

• Quién eres: tu nombre y actividad profesional.
• A quién ayudas: el tipo de cliente o empresa.
• Qué haces: dos o tres servicios concretos.
• Qué puedes demostrar: proyectos y resultados reales.
• Qué acción buscas: contacto, consulta o descarga del CV.

Una frase como “Creo webs y trabajo su posicionamiento para negocios que necesitan captar clientes por internet” aporta más contexto que una lista aislada de tecnologías.

Después podrás explicar con qué herramientas trabajas. Primero, asegúrate de que el visitante entiende para qué sirve tu trabajo.

Prompt para convertir tu información en una estructura

Sustituye los campos entre corchetes antes de utilizarlo. Si no tienes un dato, indícalo: así evitarás que la IA complete los huecos con afirmaciones inventadas.

Ayúdame a definir el contenido de mi portfolio profesional.

Mi información:
- Nombre: [TU NOMBRE].
- Actividad principal: [TU ACTIVIDAD].
- Público al que quiero llegar: [CLIENTES O EMPRESAS].
- Servicios: [TUS SERVICIOS].
- Experiencia: [EXPERIENCIA REAL].
- Proyectos disponibles: [PROYECTOS Y TU PARTICIPACIÓN].
- Resultados demostrables: [DATOS REALES O "NO DISPONGO DE MÉTRICAS"].
- Acción principal que busco: [CONTACTO, CONSULTA O CV].
- Tono: profesional, cercano y claro.

Necesito:
1. Una propuesta de valor concreta.
2. Un titular principal y un texto breve de presentación.
3. Una estructura de secciones para la página principal.
4. El objetivo de cada sección.
5. Los datos que me faltan para completar el contenido.
6. Una llamada a la acción coherente con mi objetivo.

No inventes clientes, testimonios, cifras ni experiencia.
Evita frases genéricas y promesas que no pueda demostrar.
Diferencia claramente entre texto publicable y notas pendientes.

Paso 2. Reúne el material antes de pedir el diseño

El diseño será más útil si trabaja con contenido parecido al que vas a publicar. Antes de generar la primera versión, reúne los materiales esenciales.

• Una fotografía o imagen personal, si quieres utilizarla.
• Capturas de dos o tres proyectos que representen tu trabajo.
• Una descripción breve de tu participación en cada proyecto.
• Resultados que puedas explicar y respaldar.
• Testimonios que tengas permiso para publicar.
• Los enlaces de contacto y perfiles profesionales.

Para cada proyecto, responde a tres preguntas: qué necesitaba el cliente, qué hiciste tú y qué cambió después.

Si todavía no tienes métricas, puedes mostrar decisiones, entregables o funcionalidades. Explicar cómo digitalizaste un proceso también aporta información valiosa cuando describe un trabajo real.

Paso 3. Elige referencias visuales que puedas explicar

Las referencias ayudan a concretar el diseño. Sin embargo, una captura sin explicación deja abiertas muchas interpretaciones.

Anota qué quieres tomar de cada referencia: la densidad de información, la tipografía, el ancho del contenido, las tarjetas o la forma de mostrar los proyectos.

En mi portfolio busqué una composición compacta y ordenada, con tipografía contenida y espacio para información complementaria. La intención era dar protagonismo al contenido y conseguir que las distintas secciones mantuvieran una apariencia coherente.

Si quieres una sensación más compacta, ajusta tamaños, anchos y espaciados. No reduzcas toda la página con una transformación de escala: necesitas que la lectura y la navegación sigan funcionando en distintos tamaños de pantalla.

Paso 4. Crea la primera versión con Codex

Con el contenido y las referencias preparados, podemos pedir una primera versión. En este paso nos centraremos en la estructura y el diseño. La conexión con WordPress llegará después.

Si ya tienes un proyecto, pide a Codex que lo revise antes de hacer cambios. Así podrá reutilizar los componentes y las herramientas que ya existen.

Quiero construir mi portfolio profesional con Next.js.

Primero revisa el proyecto y sus instrucciones. Si ya existe, conserva
su arquitectura y reutiliza las herramientas instaladas. Si está vacío,
crea una base con Next.js App Router, TypeScript y Tailwind CSS usando
versiones estables compatibles.

Objetivo:
Presentar mi trabajo, mostrar proyectos reales y facilitar el contacto.

Utiliza el briefing y los textos que adjunto como fuente de contenido.
Las capturas adjuntas son referencias visuales. Interpreta los detalles
que indico, sin copiar marcas, textos ni recursos ajenos.

Dirección visual:
- Composición compacta, ordenada y profesional.
- Tipografía contenida pero cómoda de leer.
- Anchos de contenido y espaciados coherentes.
- Tarjetas con bordes y fondos discretos.
- Jerarquía clara entre títulos, texto y datos.
- Animaciones sutiles únicamente cuando aporten utilidad.
- No uses zoom ni transform: scale para reducir toda la página.

Secciones:
1. Cabecera y navegación.
2. Presentación con una llamada a la acción principal.
3. Servicios o capacidades.
4. Proyectos con problema, participación y resultado.
5. Testimonios, solo si proporciono textos reales.
6. Área prevista para los últimos artículos.
7. Contacto.
8. Footer.

Comportamiento:
- Adapta la composición a móvil, tablet y escritorio.
- Mantén enlaces y botones accesibles con teclado.
- Usa HTML semántico y un único H1 para la página.
- No inventes resultados, reseñas ni clientes.
- Identifica claramente cualquier contenido provisional.
- Para contacto, utiliza por ahora un enlace mailto con el email
  del briefing.
- No conectes todavía WordPress ni simules un envío de formulario.
- Prepara componentes que permitan integrar el blog después.

Implementa la primera versión y ejecuta las comprobaciones disponibles.
Al terminar, explica cómo abrirla y qué contenido falta por completar.

Paso 5. Revisa el resultado antes de seguir

Antes de integrar el blog, comprueba que la base del portfolio comunica lo que necesitas y se puede utilizar con comodidad.

• Mensaje: ¿se entiende qué haces sin tener que recorrer toda la página?
• Proyectos: ¿queda clara tu participación?
• Lectura: ¿los textos tienen suficiente tamaño y contraste?
• Móvil: ¿hay tarjetas cortadas o desplazamiento horizontal?
• Navegación: ¿los enlaces llevan a su destino?
• Contacto: ¿la llamada a la acción resulta fácil de encontrar?
• Contenido: ¿queda algún dato provisional que pueda confundirse con información real?

Cuando detectes un problema, descríbelo indicando dónde ocurre, qué sucede y qué resultado esperas. Adjunta una captura si el problema es visual.

Por ejemplo: “En la sección de proyectos, a 390 píxeles de ancho, las tarjetas se salen de la pantalla. Ajusta su tamaño y el texto para que el contenido se vea completo sin desplazamiento horizontal”.

Qué deberías tener al terminar esta primera fase

Ahora deberías contar con una primera versión del portfolio, un mensaje principal definido y proyectos preparados para publicar. También deberías haber revisado su lectura, navegación y adaptación a móvil.

En el siguiente paso conectaremos WordPress como gestor de contenidos: veremos cómo obtener los artículos mediante la API y qué información necesita Next.js para mostrarlos dentro de nuestra web.