Guia tecnica paso a paso

Cómo crear un portfolio profesional con Claude Code

Guía práctica para crear un portfolio profesional con Claude Code: preparar el contenido, construir el sitio con IA y publicarlo paso a paso.

3 fases guiadas
9 pasos tecnicos
4 fuentes revisadas

En resumen

Crear un portfolio profesional con Claude Code significa describir en lenguaje natural qué quieres mostrar y dejar que la herramienta escriba, organice y publique el sitio por ti, mientras tú decides el contenido y apruebas cada cambio. Claude Code es un asistente de codificación que se instala en tu terminal, entiende un proyecto completo de archivos y ejecuta las acciones necesarias para construirlo: crear páginas, aplicar estilos, generar componentes y subir el resultado a un repositorio.

El proceso tiene tres fases claras: primero preparas el contenido real (tus proyectos, tu biografía profesional y el objetivo comercial del sitio); después construyes el portfolio con Claude Code mediante peticiones concretas y revisiones sucesivas; y por último lo revisas, lo publicas y lo mantienes actualizado a medida que sumas trabajos nuevos.

Antes de escribir el primer prompt, conviene tener claro a quién quieres atraer con el portfolio: revisa cómo crear un plan de marketing con IA para que el sitio responda a un objetivo comercial concreto y no sea solo una lista de trabajos sin propósito.

Mapa del tutorial

  1. Fase 1

    Fase 1: Preparar el Contenido y el Proyecto

  2. Fase 2

    Fase 2: Construir el Portfolio con Claude Code

  3. Fase 3

    Fase 3: Revisar, Publicar y Mantener el Portfolio

Fase 1

Fase 1: Preparar el Contenido y el Proyecto

Antes de tocar una sola línea de código, se reúne el material real que llenará el portfolio y se instala la herramienta. Un portfolio construido sin este trabajo previo termina siendo una plantilla vacía con texto de relleno, por bonito que resulte el diseño final.

Terminal o símbolo del sistemaCuenta de Claude con acceso a Claude CodeMaterial profesional propio (proyectos, textos, capturas)
Paso 1

Reunir tus Proyectos y Definir el Objetivo Comercial del Portfolio

El primer paso no es técnico, es editorial: decidir qué proyectos vas a mostrar y para qué perfil de cliente o empleador los enseñas. Un portfolio genérico que intenta gustar a todo el mundo no convence a nadie; uno que habla directamente a un tipo de proyecto y de cliente genera más contacto real.

Para cada proyecto que quieras incluir, reúne tres piezas: el problema que resolviste, cómo lo resolviste y qué resultado obtuvo la persona o empresa que contrató el trabajo. Si no tienes capturas o enlaces públicos de un proyecto, decide ahora mismo si lo sustituyes por otro o si lo describes solo como caso de estudio sin imagen. Añade también tu biografía profesional en dos versiones: una de dos frases para la portada y otra más extensa para la sección sobre ti, con tu trayectoria y tu propuesta de valor concreta.

  • Cada proyecto tiene problema, solución y resultado documentados
  • La biografía corta y la extendida están redactadas y revisadas
Rol: Actúa como asesor de posicionamiento profesional especializado en portfolios comerciales. Tarea: Ayúdame a decidir qué proyectos incluir en mi portfolio y con qué objetivo comercial. Contexto: Mi actividad profesional es [descríbela], estos son los proyectos de los que dispongo con su resultado real [lista cada uno], y el tipo de cliente o empleador que me gustaría atraer es [descríbelo]. Formato de salida: Una selección razonada de los proyectos que debería incluir y en qué orden, un borrador de mi biografía corta de portada y otro de mi biografía extendida, y las preguntas que aún debo responder sobre cada proyecto antes de poder describirlo bien. Restricciones: Señala si algún proyecto no aporta valor comercial y debería quedar fuera, aunque me cueste admitirlo.
Paso 2

Instalar Claude Code y Abrir tu Primer Proyecto

Con el contenido ya reunido, toca instalar la herramienta. Claude Code se instala con un único comando desde la terminal: en macOS, Linux o WSL se ejecuta curl -fsSL https://claude.ai/install.sh | bash, y en Windows PowerShell el equivalente es irm https://claude.ai/install.ps1 | iex. También existen paquetes para Homebrew y WinGet si prefieres esos gestores.

Una vez instalado, necesitas iniciar sesión con una cuenta de Claude que incluya acceso a Claude Code (los planes de pago lo incluyen; el plan gratuito no). Crea una carpeta vacía para tu portfolio, entra en ella desde la terminal y ejecuta el comando claude. La primera vez te pedirá autenticarte desde el navegador; después de eso, la sesión queda abierta y lista para recibir instrucciones en español natural, sin que tengas que memorizar comandos técnicos.

  • El comando `claude` abre una sesión sin errores
  • La cuenta usada tiene un plan que incluye Claude Code
Rol: Actúa como guía técnico para personas sin experiencia previa en terminal. Tarea: Ayúdame a comprobar que mi instalación de Claude Code funciona correctamente antes de empezar el portfolio. Contexto: Mi sistema operativo es [Windows, macOS o Linux], y esta fue la salida que obtuve al ejecutar el comando de instalación: [pega el resultado]. Formato de salida: Confirmación de si la instalación salió bien o qué paso concreto falló; los comandos exactos para solucionarlo en mi sistema operativo; y una checklist de tres puntos para verificar que todo está listo antes de crear el proyecto. Restricciones: Explica cada comando con una frase en español antes de pedirme que lo ejecute, sin dar por hecho que conozco la terminal.
Paso 3

Escribir el Brief del Proyecto en un Archivo CLAUDE.md

Antes de pedir la primera página, se escribe un documento breve que Claude Code leerá al inicio de cada sesión: el archivo CLAUDE.md en la raíz del proyecto. Ahí se recogen las decisiones que no quieres repetir en cada petición: el tono de la web, la paleta de colores si ya la tienes definida, las secciones obligatorias y el tipo de proyecto (una página estática sencilla suele bastar para un portfolio).

Este documento no sustituye tu criterio, lo hace más eficiente: cada vez que abras una nueva sesión de Claude Code sobre este proyecto, la herramienta ya conocerá tus preferencias de partida y no tendrás que repetirlas. Guarda también en una carpeta del proyecto los textos y biografías que redactaste en el paso uno, para que Claude Code trabaje sobre tu contenido real desde la primera petición, en lugar de inventar textos de relleno que luego tendrás que sustituir entero.

Rol: Actúa como redactor técnico especializado en documentos de proyecto para herramientas de IA. Tarea: Redacta un primer borrador de mi archivo CLAUDE.md para el proyecto de mi portfolio. Contexto: Mi sector es [descríbelo], el tono que quiero transmitir es [descríbelo], y estas son mis preferencias de diseño si las tengo [colores, tipografía, referencias que me gustan o 'sin preferencia aún']. Formato de salida: El contenido completo del archivo CLAUDE.md, con secciones claras para tono de marca, secciones obligatorias del sitio, y reglas de estilo del código. Restricciones: Manténlo en menos de una página; si algo no lo he definido todavía, indícalo como pendiente en lugar de inventar una decisión por mí.
Únete a la lista de espera de CodeMarketers
Unirme a la lista de espera

Fase 2

Fase 2: Construir el Portfolio con Claude Code

Con el material y la herramienta listos, empieza la construcción propiamente dicha: pedir la primera versión funcional, revisarla con calma y añadir las piezas que hacen que un portfolio se sienta completo en lugar de una plantilla a medio terminar.

Contenido del paso anterior ya redactadoArchivo CLAUDE.md guardado en la raíz del proyecto
Paso 1

Pedir la Primera Versión Funcional del Sitio

La primera petición debe ser concreta pero no exhaustiva: describe la estructura general (portada, sección de proyectos, sobre ti, contacto) y deja que Claude Code proponga la primera versión completa. La herramienta explorará el proyecto, planteará el enfoque técnico y, antes de crear o modificar cualquier archivo, te mostrará qué va a hacer y esperará tu aprobación.

Es buena práctica pedir explícitamente una página estática sencilla, sin dependencias complejas, salvo que tengas una razón concreta para algo distinto: cuanto más simple sea la base técnica, más fácil será mantenerla tú solo dentro de un año. Revisa la propuesta antes de aceptar los cambios, y si algo no encaja con lo que tenías en mente, dilo con la misma naturalidad con la que se lo pedirías a una persona: Claude Code ajusta el enfoque sin que tengas que empezar de nuevo.

  • Claude Code explicó su plan antes de crear archivos
  • El sitio usa el contenido real preparado en la fase anterior, no relleno genérico
Rol: Actúa como desarrollador frontend especializado en sitios de portfolio sencillos y rápidos de mantener. Tarea: Construye la primera versión de mi portfolio profesional como página estática. Contexto: Mis secciones son portada, proyectos, sobre mí y contacto; mi contenido está en la carpeta [nombre de la carpeta]; mi tono de marca está descrito en CLAUDE.md. Formato de salida: Explícame primero tu plan de archivos y estructura antes de crear nada; después implementa la primera versión completa con mi contenido real, no con texto de relleno. Restricciones: Usa tecnología sencilla de mantener sin experiencia avanzada de programación, y pregunta antes de instalar cualquier dependencia adicional.
Paso 2

Revisar y Refinar el Diseño en Rondas Sucesivas

La primera versión rara vez es la definitiva, y no tiene por qué serlo: el valor real de trabajar con Claude Code está en la conversación de ida y vuelta. Mira el resultado con calma, apunta lo que no encaja (un color, un espaciado, una sección que sobra o que falta) y descríbelo en la siguiente petición con el mismo detalle con el que se lo explicarías a una persona de diseño.

Conviene revisar en rondas temáticas en lugar de mezclar todo a la vez: una ronda para la estructura y el contenido, otra para el aspecto visual, y otra para el comportamiento en móvil. Cada ronda deja el sitio en un estado estable antes de pasar a la siguiente, así que si algo se rompe en el camino sabes exactamente qué petición lo causó y puedes deshacerla o corregirla sin perder el resto del trabajo ya aprobado.

  • El sitio se revisó por separado en escritorio y en móvil
  • Cada ronda de cambios quedó registrada y es reversible
Rol: Actúa como diseñador de interfaces especializado en sitios personales y portfolios. Tarea: Ayúdame a refinar el diseño visual de mi portfolio en una ronda de revisión concreta. Contexto: Este es el estado actual del sitio [descríbelo o indica la ruta], y estos son los ajustes que quiero en esta ronda: [lista de cambios de diseño concretos]. Formato de salida: Los cambios aplicados uno por uno con una frase de explicación de cada uno, y una comprobación de cómo se ve el resultado en móvil y en escritorio. Restricciones: No cambies el contenido de texto ni la estructura de secciones en esta ronda, limítate estrictamente al aspecto visual solicitado.
Paso 3

Añadir Funcionalidades Concretas: Contacto y Proyectos Detallados

Un portfolio que solo enseña imágenes sin forma de contactarte pierde buena parte de su función comercial. En esta fase se añaden las piezas funcionales: un formulario o un enlace de contacto claro, y páginas o secciones individuales para los proyectos que merezcan una explicación más larga que una tarjeta resumen.

Describe con precisión qué debe pasar cuando alguien use el formulario de contacto (a qué correo electrónico debe llegar el mensaje, qué campos son obligatorios) y qué información quieres que tenga cada ficha de proyecto ampliada. Pide también que Claude Code compruebe que los enlaces internos funcionan y que las imágenes tienen un texto alternativo descriptivo, porque son detalles pequeños que marcan la diferencia entre un sitio cuidado y uno que se nota hecho deprisa.

Rol: Actúa como desarrollador full-stack especializado en formularios de contacto y páginas de detalle para portfolios. Tarea: Añade el formulario de contacto y las páginas de detalle de proyecto a mi portfolio. Contexto: Mi correo de contacto es [tu correo], los proyectos que necesitan página propia son [lista los proyectos], y esta es la información que debe aparecer en cada uno [descríbela]. Formato de salida: El formulario de contacto funcionando con los campos indicados, las páginas de detalle de cada proyecto listado, y una comprobación final de enlaces internos y textos alternativos de imagen. Restricciones: Si el formulario necesita un servicio externo para enviar los correos, explícamelo antes de configurarlo y pide mi confirmación.

Fase 3

Fase 3: Revisar, Publicar y Mantener el Portfolio

El portfolio construido todavía necesita una revisión de calidad, un lugar donde vivir públicamente y un plan sencillo para mantenerlo actualizado. Esta fase cierra el proceso y deja el sitio en manos de una rutina que puedes repetir cada vez que sumes un proyecto nuevo.

Portfolio funcional de la fase anteriorCuenta en un servicio de alojamiento estático o repositorio Git
Paso 1

Revisar Calidad, Accesibilidad y Rendimiento antes de Publicar

Antes de hacer público el sitio, conviene una última pasada de revisión que no dependa solo de la vista: pide a Claude Code que revise el proyecto completo buscando enlaces rotos, imágenes sin optimizar, textos alternativos ausentes y problemas evidentes de accesibilidad, como contrastes de color insuficientes o botones sin etiqueta clara para lectores de pantalla.

Esta revisión técnica se suma a tu propia lectura del contenido: comprueba que no queda ningún texto de ejemplo sin sustituir, que los enlaces a tus proyectos externos abren donde deben, y que la biografía y los datos de contacto son los definitivos. Un portfolio profesional se juzga también por estos detalles pequeños, porque una persona que revisa docenas de portfolios nota enseguida un enlace roto o una imagen que tarda demasiado en cargar.

  • No quedan enlaces rotos ni imágenes sin texto alternativo
  • No queda ningún texto de ejemplo sin sustituir por contenido real
Rol: Actúa como auditor de calidad web especializado en sitios estáticos pequeños. Tarea: Revisa mi portfolio completo antes de publicarlo y detecta cualquier problema pendiente. Contexto: El proyecto está en [ruta o descripción de la carpeta], y quiero una revisión centrada en enlaces, imágenes, accesibilidad básica y restos de contenido de ejemplo. Formato de salida: Una lista de problemas encontrados ordenada por gravedad, con el archivo exacto donde corregir cada uno, y confirmación explícita de si el sitio queda listo para publicar tras aplicar las correcciones. Restricciones: Señala también cualquier texto que parezca contenido de ejemplo sin sustituir por el mío.
Paso 2

Publicar el Sitio en un Repositorio y en un Alojamiento Gratuito

Claude Code trabaja de forma natural con git: puede preparar los cambios, escribir el mensaje de la confirmación y crear el repositorio si aún no existe, siempre pidiendo tu aprobación antes de cada acción. Una vez el código está en un repositorio, un sitio estático como un portfolio puede publicarse gratis en varios servicios habituales para este tipo de proyectos, sin necesidad de contratar un servidor propio.

Describe a Claude Code en qué servicio quieres publicar y pídele que prepare la configuración necesaria y los pasos exactos que debes seguir tú mismo en la interfaz de ese servicio, ya que la conexión final de una cuenta externa suele requerir una acción manual tuya por motivos de seguridad. Guarda la dirección definitiva del sitio en cuanto la tengas, porque la necesitarás para tus perfiles profesionales y para cualquier campaña donde quieras dirigir tráfico hacia el portfolio.

  • El repositorio contiene el proyecto completo con un historial claro
  • El sitio responde públicamente en la dirección de despliegue
Rol: Actúa como ingeniero de despliegue especializado en sitios estáticos pequeños. Tarea: Prepara mi portfolio para publicarse en un repositorio y guíame en el despliegue en un alojamiento gratuito. Contexto: Todavía no tengo repositorio creado, y el servicio de alojamiento que prefiero es [indica el servicio o pide una recomendación razonada]. Formato de salida: Los archivos de configuración necesarios para ese alojamiento, el mensaje de confirmación del cambio en git, y la lista exacta de pasos manuales que debo completar yo en la interfaz del servicio externo. Restricciones: No asumas credenciales ni datos de cuentas externas; limítate a indicarme qué debo introducir yo mismo y dónde.
Paso 3

Mantener el Portfolio Actualizado con Nuevos Proyectos

Un portfolio publicado no es un documento cerrado: cada vez que termines un proyecto que merezca aparecer, el mismo flujo sirve para actualizarlo sin rehacer nada desde cero. Abre de nuevo Claude Code dentro de la carpeta del proyecto, describe el nuevo trabajo con el mismo detalle que usaste en la fase de preparación, y pide que se integre siguiendo la estructura ya existente.

El archivo CLAUDE.md que creaste al principio sigue ahí, así que Claude Code recordará el tono y las reglas de estilo sin que tengas que repetirlas cada vez. Fija un ritmo razonable de actualización, por ejemplo cada vez que cierres un proyecto relevante o cada varios meses si tu actividad es más pausada, y aprovecha esa misma sesión para retirar trabajos antiguos que ya no representen tu nivel actual ni el tipo de cliente que buscas ahora.

Rol: Actúa como editor de contenido de portfolios profesionales. Tarea: Ayúdame a añadir un proyecto nuevo a mi portfolio ya publicado, siguiendo la estructura existente. Contexto: El proyecto nuevo consiste en [descríbelo con problema, solución y resultado], y mi portfolio actual sigue la estructura de CLAUDE.md ya definida. Formato de salida: La integración del proyecto nuevo en la sección correspondiente, respetando el tono y el formato de los proyectos existentes, y una recomendación de si algún proyecto antiguo debería retirarse ahora. Restricciones: No alteres los proyectos existentes salvo que te lo pida explícitamente en esta misma sesión.

Preguntas frecuentes

¿Necesito saber programar para crear un portfolio con Claude Code?

No es necesario tener experiencia previa de programación. Claude Code está pensado para recibir instrucciones en lenguaje natural: describes lo que quieres conseguir y la herramienta se encarga de escribir el código, mostrarte los cambios propuestos y aplicarlos solo cuando das tu aprobación. Ayuda tener claro qué contenido quieres mostrar y expresar los cambios con el mismo nivel de detalle con el que se los explicarías a una persona, pero no hace falta conocer ningún lenguaje de programación para completar el proceso descrito en esta guía.

¿Qué plan de Claude necesito para usar Claude Code?

Claude Code se incluye en los planes de pago de Claude (Pro, Max, Team y Enterprise) y también puede usarse con una cuenta de Claude Console mediante créditos de API; el plan gratuito de Claude no da acceso a Claude Code. Si tu actividad se limita a construir y mantener un portfolio personal, el plan individual de nivel de entrada suele ser suficiente para el volumen de peticiones que este proceso requiere.

¿Dónde puedo publicar el portfolio una vez terminado?

Un portfolio construido como página estática sencilla puede publicarse de forma gratuita en varios servicios habituales para este tipo de proyectos, conectados directamente al repositorio donde Claude Code guarda el código. Pídele a Claude Code que prepare la configuración concreta para el servicio que elijas y que te indique los pasos manuales que debes completar tú mismo al conectar tu cuenta, ya que esa parte final requiere una acción de seguridad que no puede automatizarse por completo.

¿Puedo pedir cambios de diseño después de haber publicado el sitio?

Sí, y es precisamente la ventaja de mantener el proyecto abierto con Claude Code: puedes volver a abrir la sesión en la misma carpeta cuando quieras, describir el cambio que necesitas y revisarlo antes de aprobarlo, exactamente igual que durante la construcción inicial. El archivo CLAUDE.md conserva las reglas de tono y estilo ya definidas, así que cada cambio posterior se mantiene coherente con el resto del sitio sin que tengas que repetir el contexto desde cero.

Fuentes y referencias