Vas a crear un portafolio profesional en línea sin escribir una sola línea de código. Claude Code lo hace por ti — tú solo describes lo que quieres en español.
tunombre.netlify.app.tunombre.com en vez de tunombre.netlify.app, compras el dominio en Hostinger y lo conectas a Netlify. Toma 15 minutos.Es la aplicación de Anthropic para Mac y Windows. Dentro de ella hay tres modos: Chat (conversación normal), Cowork (tareas en tu computadora) y Code (para crear y editar código y archivos).
Para tu portafolio, vas a usar la pestaña Code. Sin terminal, sin instalar nada extra.
Requiere plan Pro o Maxindex.html con todo el diseño, el texto y las imágenes de tu portafolio. Puedes verlo en tiempo real en el panel de preview.
Cuatro herramientas, todas gratuitas o de costo bajo, que trabajan juntas para que tu portafolio funcione perfecto.
Genera todo el código HTML y CSS de tu portafolio a partir de tus instrucciones en texto.
Almacena tus fotos y trabajos en la nube. Las imágenes cargan rápido desde cualquier parte del mundo.
Aloja tus reels y showreels. Se incrustan directamente en tu página sin publicidad.
Con solo arrastrar una carpeta, tu portafolio queda en línea con HTTPS y una URL pública.
Si nunca has hecho una página web, algunas palabras te van a sonar raras. Aquí están las más importantes, explicadas simple. No necesitas memorizarlas — vuelve aquí cuando las oigas.
Un archivo especial que los navegadores (Chrome, Safari) saben leer como página web. Claude lo escribe por ti.
Esa línea que empieza con https://. Es como la dirección de una casa, pero en internet.
tunombre.com es un dominio. Lo compras, lo tienes. Netlify te presta uno gratis (tunombre.netlify.app).
Cuando un video de Vimeo aparece DENTRO de tu página (no te manda a Vimeo a verlo), eso es un embed.
Antes de empezar a construir tu portafolio, necesitas tener estas cuatro cuentas activas. Todas tienen plan gratuito suficiente para esta clase.
Cloudinary guarda tus imágenes en la nube y las entrega de forma ultrarrápida a cualquier visitante de tu sitio. En lugar de guardar las fotos dentro de tu página (lo que la haría muy pesada), las guardas en Cloudinary y tu página las llama desde ahí.
Gratis: 25GB de almacenamientodxyz1234). Guárdalo en un bloc de notas — lo vas a usar muchas veces más adelante para construir las URLs de tus imágenes. Sin este dato, nada funciona.
portfolio/ puedes crear subcarpetas por proyecto (por ejemplo portfolio/proyecto-nike/, portfolio/proyecto-adidas/) para mantener tus trabajos separados y fáciles de encontrar.
Vimeo aloja tus videos y te da un código para incrustarlos en tu página. A diferencia de YouTube, los videos de Vimeo no muestran publicidad ni recomendaciones de otros canales — el foco queda en tu trabajo.
Free: 5GB · Basic: $7/mes<iframe>. Guárdalo en un documento de texto, lo usarás al construir tu página.
Netlify publica tu portafolio en internet con solo arrastrar una carpeta. Te da automáticamente HTTPS (el candado verde del navegador) y una URL del tipo tu-nombre.netlify.app.
La app de Claude para escritorio (Mac y Windows) incluye la pestaña Code, que es el agente que va a construir tu sitio. Descárgala desde claude.ai/download e inicia sesión con tu cuenta.
Requiere plan Pro o MaxAntes de abrir Claude Code necesitas tener todo listo: imágenes optimizadas en Cloudinary, videos en Vimeo, y tus textos organizados. Esto es lo que Claude usará para construir tu página.
Lo único que tú necesitas hacer es ubicar una carpeta en tu computadora donde vivirá este proyecto. De ahí en adelante, Claude Code crea solito las subcarpetas y archivos que necesite.
mi-portafolio/. Puede estar vacía — no necesitas poner nada adentro.
cd seguido de la ruta de tu carpeta y luego claude. O más fácil: arrastra la carpeta a la terminal después de escribir cd , da enter, y después escribe claude.
index.html, style.css, etc.) y creará las subcarpetas necesarias. Tú solo escribes los prompts.
Las imágenes pesadas hacen que tu sitio cargue lento. El objetivo es llegar a menos de 300KB por imagen en formato WebP, sin perder calidad visible.
En el navegador, sin instalar nada. Arrastra la imagen, selecciona formato WebP, ajusta calidad al 80% y descarga.
Convierte tus imágenes a WebP (el formato más ligero para web) en un clic. Arrastra, espera unos segundos y descarga. Ideal antes de subir a Cloudinary.
hero (imagen principal), trabajos (tu galería), perfil (tu foto). Una carpeta por tipo de imagen.
res.cloudinary.com/[tu-cloud]/image/upload/portfolio/trabajos/foto1.webp
Si tu portafolio va a tener muchas imágenes, copiar URL por URL se vuelve tedioso. Puedes pedirle a Claude Code que se conecte a tu cuenta de Cloudinary y cargue las URLs de todas tus imágenes por sí solo. No necesitas instalar nada — Claude Code escribe un script rápido que usa tus credenciales y lista todas tus imágenes automáticamente.
dxyz1234)Crea un documento de texto con toda esta información. La copiarás directamente en tu prompt para Claude Code.
Un prompt es el mensaje que le escribes a Claude Code. Cuanto más específico y completo sea, mejor será el resultado. Aquí tienes los prompts exactos para cada etapa.
Un skill le da a Claude Code criterio profesional de diseño. Sin él, la página se ve genérica. Con él, se ve como si la hubiera hecho un estudio. Para este portafolio usamos solo frontend-design — los demás skills de la sección 5 son recomendaciones extra que puedes probar después.
El más importante. Reemplaza todo lo que está en azul con tu información real antes de pegarlo en Claude Code.
Después de que Claude genera el sitio, revísalo en el panel de preview y pide los ajustes que necesites:
Puedes pedir efectos específicos. Para inspiración visual, ve a la pestaña Inspiración.
index.html — no la carpeta madre. Soltarla en la zona de drop de Netlify.
tunombre.netlify.app.
Un dominio propio cuesta aproximadamente $10-15 USD al año y se ve mucho más profesional. El proceso toma 10-15 minutos. Los proveedores más recomendados son Hostinger, Namecheap o GoDaddy.
tunombre.com y cómpralo. Usa .com o la extensión de tu país (.mx, .ar). En el checkout, no compres los extras que te ofrecen — solo necesitas el dominio.
tunombre.com y dale a "Verify". Netlify te mostrará una pantalla con "los datos de conexión" — son unas líneas con letras y números. Déjala abierta, las necesitarás en el siguiente paso.
https://tunombre.com con el candado verde de seguridad — todo gratis.
Los Skills son instrucciones especializadas que le dan a Claude Code conocimiento experto sobre temas específicos. Activarlos hace una diferencia enorme en la calidad de tu portafolio.
Imagina que contratas a un diseñador. Sin skills, es un diseñador "en general". Con un skill activado, es como si ese mismo diseñador acabara de terminar un curso específico — sabe más, tiene mejor criterio, y el resultado se nota.
Son gratis, se instalan una sola vez, y los usas cuando quieras. Esto es lo que separa un portafolio "bonito" de uno que parece hecho por un estudio profesional.
Cada skill viene con: qué hace, cuándo usarlo, y el prompt exacto para pedirle a Claude Code que lo instale. Solo copia y pega.
Qué hace: enseña a Claude a tomar decisiones de diseño como lo haría un diseñador senior — tipografías interesantes (no el Arial de siempre), paletas con carácter, composiciones con intención. Evita el típico look "página hecha con IA".
Cuándo usarlo: siempre que estés construyendo o rediseñando tu portafolio. Es el skill base para todo lo visual.
Qué hace: mira tu página terminada y detecta los detalles que hacen que se vea amateur — gradientes morados, fuentes genéricas, contraste pobre, íconos que no combinan, espaciados raros. Te da una lista de arreglos.
Cuándo usarlo: al final, cuando ya tengas tu portafolio listo, para pulirlo antes de publicar.
.claude/skills/ y actívalo. Avísame cuando esté listo.Qué hace: es como darle a Claude un catálogo gigante con 50+ estilos UI, 97 paletas de color y 57 combinaciones tipográficas. Tú solo dices "quiero algo elegante y minimal" y él elige lo correcto de la biblioteca.
Cuándo usarlo: si no sabes qué estilo quieres y necesitas que Claude te proponga opciones bien fundamentadas.
.claude/skills/ y actívalo.Qué hace: contiene 68 estilos inspirados en marcas reconocidas (Apple, Framer, Stripe, Linear, Vercel, etc.). Tú dices "al estilo de Framer" y Claude imita esa estética.
Cuándo usarlo: cuando ya tienes una referencia clara — "quiero que se vea como la página de [marca]".
.claude/skills/ y actívalo para que Claude pueda imitar estilos de marcas conocidas.Qué hace: revisa si tu sitio carga rápido, si se ve bien en celular, si Google lo va a poder encontrar, y si cumple con buenas prácticas de accesibilidad. Te entrega un reporte con puntuación y arreglos.
Cuándo usarlo: justo antes de publicar, para asegurarte que tu portafolio no solo se ve bien — también funciona bien.
.claude/skills/ y actívalo.Qué hace: cambia todo el "look" de tu sitio a un tema predefinido (oscuro cinematográfico, minimalismo de lujo, editorial cálido, brutalista, etc.) manteniendo la coherencia entre colores, tipografías y espaciados.
Cuándo usarlo: si ya tienes tu portafolio y quieres experimentar con looks completamente distintos sin rehacerlo desde cero.
.claude/skills/ y actívalo.Tienes dos caminos. Prueba el A primero (es un clic). Si no aparece ahí, usa el B (copiar el prompt).
~/.claude/skills/. No tienes que tocar esa carpeta manualmente — Claude Code lo hace por ti. Solo es bueno saber que ahí viven.Explora todos estos efectos en vivo. Cuando encuentres algo que te guste, copia el prompt sugerido y pégalo en Claude Code para aplicarlo en tu portafolio.
Mesh gradients, grids, estrellas, auroras, spotlights, noise — los atmosféricos que vas a poder aplicar con un solo prompt.
Arrastra el divisor horizontal. Izquierda: una página genérica hecha con IA sin skills. Derecha: la misma info con frontend-design. La diferencia son las decisiones de diseño, no el código.
→ arrastra, o usa ← →, para comparar
Seis estilos distintos, mismo contenido. Pasa el cursor encima para verlos en detalle. Reemplaza estos placeholders por screenshots reales de tus alumnos cuando los tengas.
Pequeños ejemplos de causa-efecto. El prompt de arriba te da el look de abajo. Haz clic en "COPIAR" y úsalo tal cual.
Cada tarjeta muestra: qué hace, nombre del efecto y el prompt exacto. Las etiquetas de color indican la dificultad.
→ el "Hero" es lo primero que ve quien entra a tu página, la portada de bienvenida
→ pasa el mouse sobre cada cuadro
Elige la paleta que mejor representa tu estilo y menciónala en tu prompt.
↗ clic en cualquier color para copiar el HEX→ dan sensación de profundidad en tu portafolio
Todo lo que aprendí haciendo portafolios con Claude Code, condensado en consejos prácticos. Si tienes cero conocimiento técnico, esta sección es tu red de seguridad. Léela antes y durante el proceso.
#4A90FF). Suena raro pero es solo un nombre de color.
Una imagen de 8MB hace que tu sitio tarde 6 segundos en cargar. Siempre optimiza antes de subir a Cloudinary. Usa Squoosh o toWebP.io.
Si empiezas sin tus textos, Claude rellenará con texto ficticio. Eso después es difícil de reemplazar. Escribe tus textos primero, diseña después.
"Cambia el color, agrega una sección, modifica la tipografía y haz responsive". Claude se pierde. Una cosa a la vez.
Si arrastras la carpeta madre en lugar de la subcarpeta del portafolio, Netlify no encuentra el index.html. Arrastra la carpeta que CONTIENE el index.html.
Tu sitio puede verse hermoso en la laptop y horrible en celular. Revisa en móvil antes de publicar — el 70% de tus visitantes usarán celular.
Antes de un cambio fuerte, duplica la carpeta del proyecto. Si algo sale mal, recuperas la versión anterior con un clic.
Genera paletas de color armónicas con un clic. Copia los códigos HEX y pégalos en tu prompt a Claude.
Combinaciones probadas de fuentes de Google Fonts. Busca por estilo y copia los nombres para tu prompt.
Si te faltan imágenes para rellenar secciones provisionalmente, usa fotos gratuitas de alta calidad de Unsplash.
Íconos minimalistas para servicios y decoración. Copia el SVG y pídele a Claude que lo incluya.
Los mejores sitios del mundo. Busca "portfolio" y guarda capturas de los que te gusten como referencia.
Animaciones prefabricadas que puedes descargar e integrar en tu sitio con un prompt simple a Claude.
tunombre.com en lugar de tunombre.netlify.app se ve mucho más profesional y cuesta solo $10-15 USD al año. Los pasos completos están en la sección 4 (Prompt 6). Recomiendo Hostinger por su panel sencillo, pero Namecheap y GoDaddy funcionan igual.
No esperes a que esté "perfecto". Publícalo cuando esté al 80% y mejóralo con el tiempo. Un portafolio imperfecto en vivo vale más que uno perfecto en tu computadora.