Tu web, hecha con Claude

01Cuatro cosas y ya entendiste cómo funciona

No hace falta saber nada más que esto. Léelo una vez y ya puedes seguir toda la clase sin perderte.

La carpeta

Tu página vive en una carpeta de tu computadora. Tú eliges dónde está y cómo se llama; en los ejemplos de esta guía le decimos mi-web. Adentro están el archivo de la página y tus fotos. Esa carpeta es el original y es tuyo: si mañana desaparecieran Claude y Netlify, tu página seguiría estando ahí.

index.html

El archivo que es la página. Conviene que se llame así, en minúsculas. Dale doble clic y se abre en tu navegador — sin internet, desde tu propia computadora. Si se le cambia el nombre, la página deja de abrir — es lo único que de verdad conviene respetar.

Subir publicar

Internet no puede ver tu computadora. Subir es darle una copia de tu carpeta a una empresa cuyas computadoras nunca se apagan. Esa empresa es Netlify, y a cambio te da una dirección para que cualquiera entre. Es gratis.

El dominio

La dirección que te regala Netlify es larga y fea (algo como tu-pagina-8f3a.netlify.app). El dominio es un nombre bonito —tunombre.com— que apunta al mismo lugar. Es lo único que se paga: entre 15 y 25 dólares al año.

02Antes de empezar

Seis pasos cortos. Si llegas a la clase con esto listo, sales con tu página publicada; si no, se nos va la sesión en preparativos.

1 · Elige tu carpeta

Crea una carpeta nueva y vacía donde tú quieras: en Documentos, en el Escritorio, en una carpeta de trabajo que ya tengas. Da igual el lugar y da igual el nombre — es tu carpeta y tú la nombras. Lo que mejor nos ha funcionado es que sea una carpeta solo para este proyecto, sin otras cosas adentro.

2 · Ábrela en Claude Code

Este es el momento que cambia todo: hasta ahora Claude era una conversación, y a partir de aquí, con Claude Code, escribe archivos en tu computadora. Para eso hay que decirle en qué carpeta va a trabajar — en Claude Code a esa carpeta se le llama espacio de trabajo.

1. Abre la aplicación de escritorio de Claude (la app, no la página web).
2. Entra a la parte de Claude Code.
3. Abre una sesión nueva.
4. Te va a pedir que escojas el espacio de trabajo: elige la carpeta que acabas de crear.
5. La sesión se abre ya dentro de esa carpeta. A partir de aquí, todo lo que Claude cree o cambie vive ahí.

Para comprobar que quedó bien conectado, pregúntale algo tonto:

3 · Deja que Claude la prepare

La carpeta está vacía. En lugar de crear tú los archivos, se lo pides a Claude con este prompt: crea la carpeta de fotos, el archivo donde vas a escribir tu contenido y un archivo de instrucciones con las reglas del proyecto.

Al terminar, mira tu carpeta: tendría que tener la carpeta fotos, el archivo mi-contenido.txt y el CLAUDE.md. Si es así, ya tienes un proyecto.

4 · Tu contenido: hay dos caminos

Todo lo que va a decir tu página —quién eres, qué haces, tus números, tus trabajos— tiene que salir de algún lado. Según lo que ya tengas, te conviene uno u otro. Los dos terminan en el mismo sitio: el archivo mi-contenido.txt lleno.

Camino A · Ya tienes Instagram o Facebook con movimiento

Entonces no lo escribas de cero: tu perfil ya lo dice casi todo. Toma capturas de pantalla de tu Instagram —tu bio, tu cuadrícula, tus tres o cuatro publicaciones que mejor funcionaron— y súbelas a ChatGPT con este prompt. Te devuelve el texto listo para guardar en tu archivo de contenido:

Camino B · Empiezas de cero

Es el camino normal, y funciona igual de bien. Abre mi-contenido.txt (doble clic) y responde las cinco preguntas. Escribe como hablas, no como currículum; en clase lo arreglamos. Mete tus fotos en la carpeta fotos.

5 · Crea tu cuenta en Netlify

Es la empresa que va a guardar tu página y ponerla en internet. Gratis. Entra a netlify.com y usa el botón de entrar con Google: es un clic.

6 · Nombra bien tus fotos

Suena a detalle menor y es, por mucho, la causa más común de fotos que no aparecen. Lo que nos ha funcionado: sin acentos, sin espacios, todo en minúsculas.

03Tu foto

La foto de la portada es lo primero que ve alguien que entra a tu página, y es donde más se nota si algo está descuidado. Aquí hay dos situaciones distintas: no tienes una foto buena, o la tienes pero no está lista para web. No son lo mismo.

Qué foto funciona en una página

• Tu cara bien visible y enfocada. Si hay que explicar cuál eres, no funciona.
• Fondo simple. Lo que hay detrás compite con tu cara y siempre gana el desorden.
• Horizontal o cuadrada para la portada. Las verticales de celular se cortan mal.
• Mejor sin fotos de grupo, ni de hace diez años, ni capturas de pantalla de otra red.

¿No tienes una buena? Créala

Con cualquier foto tuya del celular y un prompt, ChatGPT o Nano Banana te hacen un retrato profesional conservando tu cara. Los doce prompts, cada uno con su ejemplo, están en la siguiente sección: Retratos de regalo. Para la portada de tu página, empieza por los marcados «web».

¿Ya la tienes? Déjala lista

Mete tu foto en la carpeta fotos y pídele a Claude lo que necesites. Estos tres resuelven casi todo:

04Retratos de regalo

Doce prompts para crear retratos tuyos. Subes cualquier foto tuya —una normal, del celular— y pegas el que más te guste: te devuelve un retrato con ese estilo, conservando tu cara. Funciona en ChatGPT y con Nano Banana — en Gemini o en Magnific, como lo hicieron en clase.

Las muestras son de Roco — con tu foto saldrá tu cara; lo que se repite es el estilo. Los marcados «web» funcionan como foto de portada de una página; los demás son para redes.

Editorial blanco y negro webCopiar

Utiliza la imagen adjunta únicamente para identificar a la persona. Preserva con máxima fidelidad la identidad facial, estructura ósea, proporciones naturales, forma de ojos, cejas, nariz, labios, mandíbula, orejas, línea del cabello, peinado, tono y textura de piel, barba, bigote, pecas, lunares y cualquier característica distintiva. No embellezcas, rejuvenezcas, envejezcas ni modifiques artificialmente sus facciones. No copies la pose, ropa, fondo, iluminación ni composición de la fotografía original salvo que el prompt lo solicite explícitamente. Retrato editorial masculino o femenino en blanco y negro, close-up / busto, con el sujeto mirando directamente a cámara, expresión seria, segura y dominante, composición centrada y simétrica, encuadre vertical. Fondo blanco limpio y uniforme, minimalista, estilo portada de revista premium. El sujeto viste ropa negra elegante, como blazer negro y camiseta negra, sin accesorios distractores. Iluminación beauty lighting de alto nivel, con luz frontal suave pero intensa que defina perfectamente los rasgos faciales, combinada con rim light blanca en ambos bordes del rostro, orejas, mandíbula y hombros, separándolo claramente del fondo blanco. La luz debe marcar fuertemente los pómulos, la línea de la mandíbula, el puente de la nariz y el contorno del rostro. Aplicar un look HDR cinematográfico, con microcontraste elevado, gran rango dinámico, negros profundos, altas luces limpias y detalle bien conservado en sombras y luces. La piel debe mostrar mucha textura realista, poros visibles, detalle fino en barba o bigote, textura natural del rostro y definición precisa en labios, cejas y cabello, sin perder elegancia editorial. Los ojos deben tener catchlight bien visible, limpio y atractivo, para dar vida a la mirada y reforzar la intensidad del retrato. Mantener una nitidez muy alta, acabado high-end fashion/editorial portrait, poderoso, masculino o femenino, atemporal, refinado y visualmente impactante. Sin elementos distractores, sin fondo complejo, sin texto ni logos.

Caricatura 3DCopiar

Utiliza la imagen adjunta únicamente para identificar a la persona. Preserva con máxima fidelidad la identidad facial, estructura ósea, proporciones naturales, forma de ojos, cejas, nariz, labios, mandíbula, orejas, línea del cabello, peinado, tono y textura de piel, barba, bigote, pecas, lunares y cualquier característica distintiva. No embellezcas, rejuvenezcas, envejezcas ni modifiques artificialmente sus facciones. No copies la pose, ropa, fondo, iluminación ni composición de la fotografía original salvo que el prompt lo solicite explícitamente. Transforma la foto de referencia en una caricatura 3D hiperrealista de alta gama, manteniendo al personaje claramente reconocible y conservando sus rasgos esenciales, pero exagerándolos de forma elegante y divertida. Aumenta ligeramente el tamaño de la cabeza en relación con el cuerpo, enfatiza de manera sutil la frente, ojos, nariz, mejillas, mandíbula y expresión facial, sin convertirlo en un personaje infantil ni perder su identidad. Conserva con precisión el peinado, línea del cabello, barba, cejas, tono de piel, ropa, accesorios, postura corporal y gesto de las manos de la imagen original. Respeta también la dirección de la mirada y la expresión general del rostro. El rostro debe tener un acabado 3D extremadamente realista, con poros visibles, textura natural de la piel, pequeñas arrugas, líneas de expresión, pliegues, detalle en labios, barba individual, vello facial fino y textura realista del cabello. Evitar piel plástica o excesivamente suavizada. Estética de película animada premium, combinando proporciones caricaturizadas con materiales y superficies fotorrealistas. Ojos ligeramente más expresivos y grandes, pero anatómicamente coherentes, con catchlights naturales, córnea brillante, iris detallado y profundidad realista. Iluminación cinematográfica suave y envolvente, con key light cálida sobre el rostro, sombras naturales, relleno delicado y un ligero rim light para separar la silueta del fondo. Gran rango dinámico, contraste refinado, microdetalle y acabado HDR, manteniendo textura tanto en luces como en sombras. La ropa debe conservar su tejido y construcción realistas, mostrando costuras, arrugas, pliegues, cremalleras, textura de la tela y pequeños detalles materiales. Los accesorios metálicos deben tener reflejos físicamente correctos. Mantener el entorno original reconocible, pero con una adaptación estilizada a 3D hiperrealista, con profundidad de campo moderada, perspectiva natural y detalles secundarios ligeramente suavizados para que el rostro sea el punto focal. Cámara ligeramente gran angular y cercana al rostro, como una fotografía tomada con lente de aproximadamente 24–28 mm, creando una leve exageración de perspectiva en cabeza y rasgos faciales. Composición vertical, plano medio corto, sujeto ocupando gran parte del encuadre. Resultado final: realistic 3D caricature, high-end animated film look, oversized head proportions, recognizable identity, ultra-detailed skin, pores, wrinkles, realistic facial hair, expressive eyes, cinematic lighting, HDR, lifelike materials, physically based rendering, subtle subsurface scattering, ray-traced reflections, global illumination, extremely detailed, photorealistic 3D render, premium character design, 8K quality.

Fashion flash directo webCopiar

Utiliza la imagen adjunta únicamente para identificar a la persona. Preserva con máxima fidelidad la identidad facial, estructura ósea, proporciones naturales, forma de ojos, cejas, nariz, labios, mandíbula, orejas, línea del cabello, peinado, tono y textura de piel, barba, bigote, pecas, lunares y cualquier característica distintiva. No embellezcas, rejuvenezcas, envejezcas ni modifiques artificialmente sus facciones. No copies la pose, ropa, fondo, iluminación ni composición de la fotografía original salvo que el prompt lo solicite explícitamente. Utiliza la imagen de referencia únicamente para preservar con máxima fidelidad la identidad de la persona. Mantén forma del rostro, proporciones, ojos, cejas, nariz, labios, dientes, mandíbula, orejas, cabello, tono de piel, textura, barba y cualquier elemento facial distintivo. No copies la pose, vestuario, accesorios, fondo ni iluminación presentes en la referencia original. Transforma al sujeto en un retrato fashion editorial contemporáneo, divertido, llamativo y muy limpio. El encuadre debe ser un close-up frontal, aproximadamente desde la parte superior del pecho o clavículas hasta encima de la cabeza. La persona mira directamente a cámara y muestra una sonrisa amplia y natural, transmitiendo confianza, energía y actitud relajada. Añadir unas gafas de sol de diseño audaz, con montura negra gruesa y lentes translúcidos en tonos naranja o ámbar. Los ojos pueden ser parcialmente visibles a través de las lentes. Las gafas deben verse físicamente realistas, con cristales transparentes, reflejos controlados, sombras sobre el rostro y materiales de alta calidad. Vestir al sujeto con una sudadera oversized de color marrón chocolate, negro, gris oscuro u otra tonalidad neutra profunda, con una silueta voluminosa y textura textil visible. Añadir opcionalmente pequeños aretes o accesorios metálicos minimalistas, siempre secundarios respecto al rostro y las gafas. Utilizar un fondo blanco o gris muy claro completamente uniforme, similar a una sesión fotográfica de estudio de moda. La iluminación debe imitar un flash frontal directo de editorial, brillante, limpio y relativamente duro, generando sombras definidas pero controladas. El flash debe resaltar la textura del rostro, dientes, labios, gafas y tejido de la ropa, creando una estética ligeramente cruda y muy moderna. Añadir grano fotográfico fino y uniforme, semejante a película analógica escaneada o fotografía editorial impresa, pero manteniendo alta nitidez en los ojos y rostro. La piel debe conservar poros visibles, textura natural, pequeñas arrugas, brillo realista y variación tonal, sin suavizado excesivo. Mantener los dientes naturales, sin blancura artificial extrema. La composición debe ser prácticamente simétrica, limpia y muy gráfica, con el sujeto ocupando la mayor parte del encuadre. Resultado final: retrato fashion editorial, flash directo, gafas negras con lentes naranja, sonrisa natural, fondo blanco limpio, sudadera oversized, grano fotográfico, piel detallada, estética de revista contemporánea, moderna, vibrante y ligeramente retro, sin texto, sin tipografía, sin marcas de agua ni logotipos.

Editorial naranja webCopiar

Utiliza la imagen adjunta únicamente para identificar a la persona. Preserva con máxima fidelidad la identidad facial, estructura ósea, proporciones naturales, forma de ojos, cejas, nariz, labios, mandíbula, orejas, línea del cabello, peinado, tono y textura de piel, barba, bigote, pecas, lunares y cualquier característica distintiva. No embellezcas, rejuvenezcas, envejezcas ni modifiques artificialmente sus facciones. No copies la pose, ropa, fondo, iluminación ni composición de la fotografía original salvo que el prompt lo solicite explícitamente. Utiliza a la persona de la imagen de referencia únicamente como referencia de identidad facial. Conserva con máxima precisión sus rasgos reconocibles: forma del rostro, ojos, cejas, nariz, labios, mandíbula, línea del cabello, peinado, tono de piel, barba, bigote, pecas, lunares o cualquier característica facial distintiva presente en la referencia. No copies la pose, expresión, iluminación, ropa ni fondo de la fotografía original. Reconstruye una nueva sesión fotográfica desde cero manteniendo exclusivamente la identidad de la persona. Crea un retrato editorial hiperrealista y cinematográfico, encuadrado desde la parte superior del pecho hasta ligeramente por encima de la cabeza. La persona debe aparecer con el cuerpo ligeramente girado respecto a cámara, mientras el rostro apunta hacia uno de los lados del encuadre. El mentón debe estar ligeramente elevado y la mirada dirigida suavemente hacia arriba, transmitiendo seguridad, serenidad, autoridad y una presencia escultórica, sin expresión exagerada. Vestir al sujeto con una camisa polo negra o prenda negra minimalista de cuello estructurado, completamente limpia, elegante y sin logotipos. Utilizar un fondo continuo con degradado profundo entre rojo oscuro, carmesí y naranja intenso, creando una atmósfera cálida, sofisticada y cinematográfica. La iluminación debe ser dramática y de alto contraste. Colocar una key light fuerte y direccional desde un lateral, modelando pómulos, mandíbula, nariz y frente. Añadir un rim light cálido y definido desde el lado contrario o desde atrás, delineando el cabello, orejas, mandíbula y hombros. Mantener una ligera zona de sombra sobre una parte del rostro para aumentar sensación de profundidad tridimensional. La piel debe conservar una apariencia extremadamente natural y detallada, con poros visibles, pequeñas líneas de expresión, microtextura, vello facial individual, textura de labios y transiciones tonales suaves. Evitar completamente la piel plástica, excesivamente suavizada o retocada. Añadir microcontraste elevado y rango dinámico amplio, conservando información tanto en sombras como en las zonas más iluminadas. Los ojos deben permanecer extremadamente nítidos, con iris detallado, humedad natural y catchlights pequeños y definidos provenientes de la iluminación principal. La fotografía debe sentirse realizada con un teleobjetivo corto de retrato, con compresión facial natural, perspectiva favorecedora y profundidad de campo reducida. El rostro debe permanecer completamente definido mientras el fondo cae suavemente fuera de foco. Composición vertical, elegante y editorial, dejando una pequeña cantidad de espacio alrededor de la cabeza. Resultado final: retrato masculino o femenino hiperrealista, fondo rojo y naranja cinematográfico, iluminación lateral dramática, rim light cálido, piel extremadamente detallada, estructura facial definida, profundidad tonal refinada, estética de campaña de moda premium y retrato de celebridad, sin texto, sin marcas de agua y sin logotipos.

Ángulo bajo carmesíCopiar

Utiliza la imagen adjunta únicamente para identificar a la persona. Preserva con máxima fidelidad la identidad facial, estructura ósea, proporciones naturales, forma de ojos, cejas, nariz, labios, mandíbula, orejas, línea del cabello, peinado, tono y textura de piel, barba, bigote, pecas, lunares y cualquier característica distintiva. No embellezcas, rejuvenezcas, envejezcas ni modifiques artificialmente sus facciones. No copies la pose, ropa, fondo, iluminación ni composición de la fotografía original salvo que el prompt lo solicite explícitamente. Utiliza a la persona de la imagen de referencia para crear un retrato vertical hiperrealista y cinematográfico, manteniendo de forma precisa su identidad, estructura facial, peinado y proporciones. La cámara debe colocarse en un ángulo ligeramente bajo apuntando hacia arriba, creando una perspectiva que enfatice la mandíbula, el cuello y la estructura ósea del rostro. La posición debe transmitir presencia, dominio tranquilo y elegancia escultórica. El sujeto viste ropa oscura o negra de líneas limpias, permitiendo que el rostro sea el elemento principal de la composición. La expresión debe ser seria, contenida y segura, con una mirada ligeramente alejada de cámara o dirigida hacia un punto elevado, evitando poses excesivamente dramáticas. El fondo debe utilizar un color profundo y altamente saturado, preferentemente carmesí oscuro o una tonalidad intensa que contraste fuertemente con la piel iluminada y el vestuario oscuro. Iluminación cinematográfica de alto contraste, con una luz principal lateral o frontal elevada que modele el rostro, resaltando pómulos, mandíbula, nariz y cuello, mientras el lado opuesto cae suavemente hacia la sombra. Agregar rim light sutil en hombros y contorno del rostro, separación clara respecto al fondo, gran rango dinámico, negros profundos y altas luces limpias. La piel debe conservar poros visibles, pequeñas líneas de expresión, textura natural, barba o vello fino, detalle en labios y ojos, evitando cualquier suavizado plástico. Los ojos deben incluir catchlight discreto pero definido, reforzando profundidad e intensidad. Resultado final: retrato hiperrealista, cinematográfico, elegante, escultórico, angular, de alto contraste, textura de piel natural, profundidad tonal refinada, fondo saturado, estética editorial premium, sin texto ni logotipos.

Designer toy 3DCopiar

Utiliza la imagen adjunta únicamente para identificar a la persona. Preserva con máxima fidelidad la identidad facial, estructura ósea, proporciones naturales, forma de ojos, cejas, nariz, labios, mandíbula, orejas, línea del cabello, peinado, tono y textura de piel, barba, bigote, pecas, lunares y cualquier característica distintiva. No embellezcas, rejuvenezcas, envejezcas ni modifiques artificialmente sus facciones. No copies la pose, ropa, fondo, iluminación ni composición de la fotografía original salvo que el prompt lo solicite explícitamente. Transforma a la persona de la imagen de referencia en un personaje 3D estilo designer toy de alta gama, manteniendo claramente reconocibles su rostro, peinado, proporciones faciales y rasgos más característicos. La cabeza puede ser ligeramente más grande que el cuerpo, pero sin llegar a una caricatura extrema. El diseño debe sentirse como una figura coleccionable premium, combinando suavidad de animación 3D con estética de moda urbana futurista. El rostro debe tener superficies suaves pero detalladas, con textura sutil de piel, subsurface scattering, labios definidos, ojos expresivos con brillo realista y acabados limpios de CGI de alta calidad. La expresión debe ser relajada, fría y ligeramente distante, transmitiendo actitud moderna y segura. El cabello debe respetar el estilo de la referencia, reinterpretado en volúmenes 3D limpios, definidos y pulidos. La ropa debe mezclar streetwear contemporáneo, diseño futurista y moda experimental, con prendas volumétricas, cuellos altos, correas, hebillas o elementos gráficos simplificados. Añadir uno o dos accesorios fuertes, como gafas voluminosas, aretes metálicos, piercings, gorro tejido, parches, insignias o elementos cromados, siempre integrados de manera coherente. La paleta puede usar colores vivos y contrastantes, por ejemplo verdes neón, rosa pastel, blanco, negro y plata, manteniendo un equilibrio entre juguetón y sofisticado. Iluminación de estudio con global illumination suave, rim light delicado, reflejos especulares limpios, materiales físicamente creíbles y sombras suaves. El fondo debe ser simple, preferentemente un degradado limpio o color sólido, sin elementos complejos. Resultado final: designer toy 3D, CGI premium, figura coleccionable futurista, moda Gen-Z, streetwear experimental, superficies suaves, accesorios brillantes, render ultra limpio, estética cute pero rebelde, sin texto, sin marcas reales y sin logotipos reconocibles.

Neón morado y rosaCopiar

Utiliza la imagen adjunta únicamente para identificar a la persona. Preserva con máxima fidelidad la identidad facial, estructura ósea, proporciones naturales, forma de ojos, cejas, nariz, labios, mandíbula, orejas, línea del cabello, peinado, tono y textura de piel, barba, bigote, pecas, lunares y cualquier característica distintiva. No embellezcas, rejuvenezcas, envejezcas ni modifiques artificialmente sus facciones. No copies la pose, ropa, fondo, iluminación ni composición de la fotografía original salvo que el prompt lo solicite explícitamente. Utiliza a la persona de la imagen de referencia para crear un retrato moderno hiperrealista con estética cyber contemporánea, manteniendo fielmente su rostro, peinado y proporciones. El sujeto viste un sudadero negro minimalista y lleva gafas de armazón transparente, limpias y modernas. La cabeza debe estar ligeramente elevada, con la mirada dirigida apenas hacia arriba, transmitiendo confianza, curiosidad y serenidad. El fondo debe estar compuesto por una iluminación degradada entre morado neón y rosa magenta, con transición suave pero vibrante. La iluminación de fondo debe reflejarse sutilmente sobre los cristales de las gafas, bordes del rostro y hombros, sin ocultar los ojos. Utilizar una key light frontal suave para mantener el rostro correctamente expuesto, combinada con rim lights morado y rosa en los laterales para separar al sujeto del fondo. La piel debe conservar textura realista, poros visibles, microdetalle, pequeñas líneas de expresión, vello facial y volumen natural, evitando acabado plástico. Los ojos deben permanecer muy nítidos, con catchlights limpios y naturales detrás de las gafas. Las gafas deben mostrar reflejos realistas y sutiles, evitando brillos excesivos o distorsión. Composición tipo retrato editorial moderno, plano medio corto o busto, sujeto centrado, fondo limpio. Resultado final: retrato cyber-modern, hiperrealista, iluminación neón morada y rosa, gafas transparentes, rim lighting suave, piel detallada, contraste vibrante, estética tecnológica elegante, fotografía de estudio premium, sin texto ni logotipos.

B/N cinematográfico webCopiar

Utiliza la imagen adjunta únicamente para identificar a la persona. Preserva con máxima fidelidad la identidad facial, estructura ósea, proporciones naturales, forma de ojos, cejas, nariz, labios, mandíbula, orejas, línea del cabello, peinado, tono y textura de piel, barba, bigote, pecas, lunares y cualquier característica distintiva. No embellezcas, rejuvenezcas, envejezcas ni modifiques artificialmente sus facciones. No copies la pose, ropa, fondo, iluminación ni composición de la fotografía original salvo que el prompt lo solicite explícitamente. Utiliza al hombre de la imagen de referencia para crear un retrato cinematográfico en blanco y negro, manteniendo exactamente su identidad, estructura facial, peinado, perforaciones y proporciones naturales. La composición debe enfatizar una estructura ósea angular, mandíbula definida, pómulos marcados y cejas rectas, conservando una expresión calmada, introspectiva y ligeramente distante. El sujeto viste un cuello alto negro de tejido mate, con una silueta limpia y sin accesorios distractores. La piel debe mostrar textura natural de alta fidelidad, incluyendo poros finos, pequeñas líneas de expresión, transición tonal suave, ligera dispersión subsuperficial en nariz y párpados, textura delicada en labios y vello facial muy fino visible en los contornos. El cabello debe verse bien peinado y pulido, con textura definida pero brillo controlado. Iluminación natural suave y direccional, modelando de forma delicada pómulos, mandíbula, nariz y cuello, manteniendo sombras limpias y suaves. Los ojos deben conservar detalle y contar con catchlight discreto, reforzando una mirada humana e introspectiva. El fondo debe ser gris neutro, liso y minimalista, ligeramente separado del sujeto mediante profundidad de campo. La imagen debe tener una gradación monocromática elegante, con especial atención a los tonos medios, negros profundos pero no empastados y altas luces suaves. Composición centrada con un pequeño desplazamiento de mirada, encuadre de busto o primer plano amplio. Resultado final: retrato blanco y negro cinematográfico, elegante, íntimo, atemporal, textura de piel realista, contraste refinado, profundidad tonal, estilo editorial premium, sin texto, sin marcas de agua ni logotipos.

Estudio rojoCopiar

Utiliza la imagen adjunta únicamente para identificar a la persona. Preserva con máxima fidelidad la identidad facial, estructura ósea, proporciones naturales, forma de ojos, cejas, nariz, labios, mandíbula, orejas, línea del cabello, peinado, tono y textura de piel, barba, bigote, pecas, lunares y cualquier característica distintiva. No embellezcas, rejuvenezcas, envejezcas ni modifiques artificialmente sus facciones. No copies la pose, ropa, fondo, iluminación ni composición de la fotografía original salvo que el prompt lo solicite explícitamente. Utiliza a la persona de la imagen de referencia para crear un retrato editorial cinematográfico de cuerpo completo, manteniendo con precisión su rostro, peinado, proporciones corporales y apariencia general. El sujeto viste chaqueta negra con cierre, pantalones negros y botas negras, con un estilismo completamente monocromático, minimalista y sofisticado. Debe aparecer sentado de forma relajada y reclinada sobre una silla moderna de estructura metálica delgada, inclinando ligeramente el torso hacia atrás. Las piernas se extienden hacia adelante con una postura natural y segura. Una mano descansa sobre el brazo o estructura de la silla y la otra sobre el muslo. La cabeza gira ligeramente hacia un lado, con una expresión calmada, segura y distante, sin mirar directamente a cámara. Toda la escena debe estar bañada por una iluminación roja intensa y saturada, incluyendo fondo, piso y ambiente general. El rojo debe dominar completamente la imagen, mientras que la ropa negra absorbe la luz y genera una silueta fuerte. Iluminación dramática de alto contraste, con una fuente principal roja intensa, sombras profundas, bordes ligeramente definidos mediante luz lateral o contraluz y reflejos rojos controlados sobre la piel y la tela. Añadir alto rango dinámico, microcontraste, textura fina en piel, cabello y ropa, conservando detalle tanto en zonas iluminadas como en sombras profundas. El estudio debe ser minimalista, sin objetos secundarios ni elementos distractores, con fondo continuo y piso limpio. Composición vertical de moda, encuadre amplio mostrando la totalidad del cuerpo y la silla, con perspectiva ligeramente baja para reforzar presencia y elegancia. Resultado final: retrato fashion editorial, estética cinematográfica monocromática roja, ropa negra, pose relajada, alto contraste, iluminación dramática, texturas realistas, actitud sofisticada, composición minimalista de revista premium, sin texto ni logotipos.

B/N clásico de estudio webCopiar

Utiliza la imagen adjunta únicamente para identificar a la persona. Preserva con máxima fidelidad la identidad facial, estructura ósea, proporciones naturales, forma de ojos, cejas, nariz, labios, mandíbula, orejas, línea del cabello, peinado, tono y textura de piel, barba, bigote, pecas, lunares y cualquier característica distintiva. No embellezcas, rejuvenezcas, envejezcas ni modifiques artificialmente sus facciones. No copies la pose, ropa, fondo, iluminación ni composición de la fotografía original salvo que el prompt lo solicite explícitamente. Utiliza a la persona de la imagen de referencia exclusivamente para preservar su identidad facial. Mantén exactamente la forma y proporciones naturales del rostro, ojos, cejas, nariz, labios, mandíbula, orejas, cabello, tono y textura de piel, barba, bigote, pecas y demás características distintivas. Ignora completamente el fondo, la pose, el vestuario y la iluminación presentes en la referencia. Transforma al sujeto en un retrato fotográfico clásico en blanco y negro, inspirado en fotografía editorial y documental de estudio de alta gama. La persona debe aparecer en una pose de tres cuartos moderada, con el torso ligeramente girado mientras el rostro se orienta hacia el lado opuesto. La cabeza permanece recta o ligeramente elevada. La mirada debe dirigirse hacia un punto fuera del encuadre, nunca directamente a cámara, transmitiendo una sensación tranquila, reflexiva, sobria e introspectiva. Mantener suficiente espacio negativo alrededor de la cabeza para conseguir una composición elegante y respirada. Vestir al sujeto con una camiseta, jersey o prenda superior gris oscuro o negra de textura mate, extremadamente sencilla, sin logos, estampados ni accesorios distractores. Utilizar un fondo completamente blanco o gris muy claro, limpio, ligeramente sobreexpuesto para funcionar como espacio negativo. La iluminación debe ser suave pero escultórica. Utilizar una fuente principal grande y difusa colocada lateralmente, generando gradaciones delicadas de luz y sombra sobre pómulos, nariz, mandíbula y cuello. El lado opuesto puede caer hacia una sombra más profunda, pero conservando detalle. Evitar negros empastados o contrastes excesivamente duros. Añadir una ligera luz de separación sobre el contorno del cabello o cuello cuando sea necesario. La piel debe conservar poros, textura natural, arrugas pequeñas, cicatrices, textura de barba, vello fino y variaciones tonales reales, evitando cualquier efecto de belleza artificial. Los ojos deben estar muy definidos, con pupilas, iris y un catchlight discreto que mantenga la mirada viva. La gradación monocromática debe priorizar tonos medios ricos, grises profundos, altas luces suaves y detalle fino, con apariencia fotográfica clásica. Simular una lente de retrato de focal media a larga, evitando cualquier distorsión angular. El rostro debe conservar proporciones naturales. El resultado debe recordar a un retrato de archivo realizado por un fotógrafo legendario, sobrio, documental, elegante y atemporal. Resultado final: retrato clásico en blanco y negro, fondo blanco limpio, iluminación lateral suave, microtextura de piel, expresión introspectiva, composición respirada, elegancia editorial atemporal, detalle extremadamente realista, sin texto, sin marcas de agua ni logotipos.

Contraluz rojoCopiar

Utiliza la imagen adjunta únicamente para identificar a la persona. Preserva con máxima fidelidad la identidad facial, estructura ósea, proporciones naturales, forma de ojos, cejas, nariz, labios, mandíbula, orejas, línea del cabello, peinado, tono y textura de piel, barba, bigote, pecas, lunares y cualquier característica distintiva. No embellezcas, rejuvenezcas, envejezcas ni modifiques artificialmente sus facciones. No copies la pose, ropa, fondo, iluminación ni composición de la fotografía original salvo que el prompt lo solicite explícitamente. Utiliza la persona de la imagen de referencia exclusivamente para conservar la identidad facial, incluyendo forma del rostro, ojos, nariz, labios, mandíbula, cejas, cabello, tono de piel, textura, barba, pecas y cualquier característica reconocible. No mantengas la iluminación, pose, vestuario ni fondo de la imagen original. Crea un retrato editorial dramático de medio busto, con el sujeto mirando directamente hacia cámara o ligeramente fuera de ella. Vestir a la persona con una prenda superior negra o muy oscura, preferentemente camiseta, vestido, top o cuello sencillo, de manera que el cuerpo se convierta en una silueta elegante y discreta. El fondo debe ser de un rojo profundo y completamente saturado, uniforme y limpio, sin textura ni elementos adicionales. La característica principal de la imagen debe ser una potente luz de contraluz situada detrás del sujeto, fuera de la vista de cámara. Esta luz debe crear un halo luminoso fuerte alrededor del cabello, hombros, brazos y bordes del cuerpo, generando una separación intensa respecto al fondo. El contraluz puede tener tonalidades cálidas entre blanco, naranja y rojo brillante, haciendo que los cabellos individuales en los bordes se iluminen y formen una corona luminosa. La iluminación frontal debe ser extremadamente tenue, permitiendo que gran parte del rostro y el torso permanezcan en sombra. Sin embargo, todavía debe existir suficiente información para reconocer con claridad los rasgos faciales. Mantener el rostro con sombras profundas, pero preservar detalle en ojos, labios, textura de piel y contorno de nariz y mandíbula. Añadir sutilmente luz de relleno desde cámara para evitar que las zonas oscuras pierdan toda información. La piel debe conservar poros reales, textura fina, brillo natural, pequeñas imperfecciones y variación tonal, incluso dentro de las zonas oscuras. Si la persona tiene cabello largo, ondulado o rizado, enfatizar cada mechón mediante el contraluz. Si tiene cabello corto, crear una línea luminosa limpia siguiendo la silueta. Utilizar alto rango dinámico para evitar quemar completamente el halo luminoso y mantener textura en las luces. La imagen debe transmitir una combinación de misterio, sensualidad editorial, dramatismo y elegancia cinematográfica, evitando verse como fotografía casual o iluminación de concierto. Resultado final: retrato hiperrealista con fondo rojo profundo, contraluz intenso, halo luminoso alrededor del cuerpo, sombras frontales profundas, cabello delineado por luz, piel detallada, alto contraste y estética cinematográfica editorial, sin texto, sin códigos, sin marcas de agua ni logotipos.

Cartoon geométrico 2DCopiar

Utiliza la imagen adjunta únicamente para identificar a la persona. Preserva con máxima fidelidad la identidad facial, estructura ósea, proporciones naturales, forma de ojos, cejas, nariz, labios, mandíbula, orejas, línea del cabello, peinado, tono y textura de piel, barba, bigote, pecas, lunares y cualquier característica distintiva. No embellezcas, rejuvenezcas, envejezcas ni modifiques artificialmente sus facciones. No copies la pose, ropa, fondo, iluminación ni composición de la fotografía original salvo que el prompt lo solicite explícitamente. Transforma a la persona de la imagen de referencia en un personaje original de animación 2D con estilo geométrico moderno, manteniendo los rasgos principales suficientemente reconocibles, pero reinterpretándolos mediante proporciones estilizadas, formas limpias y una silueta visualmente distintiva. El rostro debe construirse con planos angulares bien definidos, pómulos marcados, nariz simplificada, cejas expresivas, ojos estilizados ligeramente entrecerrados y labios gráficos. Utilizar un cuello ligeramente alargado y proporciones exageradas propias de una serie animada de diseño contemporáneo. La expresión debe transmitir una personalidad clara, pudiendo sentirse segura, elegante, misteriosa, rebelde, fría, glamurosa o traviesa, evitando una expresión neutra o genérica. La pose de la cabeza debe ser dinámica y poco convencional, por ejemplo en tres cuartos, ligeramente inclinada, mirando por encima del hombro, con el mentón elevado o con una mirada lateral dramática. El cabello debe convertirse en un elemento importante del diseño, con una forma estilizada y reconocible, manteniendo su esencia pero simplificándolo mediante grandes masas gráficas, curvas limpias, puntas angulares o volúmenes geométricos. La ropa debe reinterpretarse con un diseño elegante y minimalista, utilizando formas geométricas fuertes, siluetas limpias y pocos detalles, acompañada por uno o dos accesorios visualmente potentes como aretes largos, collar geométrico, gargantilla o elementos metálicos estilizados. Iluminación tipo cel shading, con pocas masas de luz y sombra claramente separadas, bordes nítidos, sombras gráficas de alto contraste y sin degradados realistas. Mantener una apariencia limpia, plana y editorial. Utilizar un fondo sólido de un solo color, con buen contraste frente al personaje. La paleta general debe ser armónica pero audaz, combinando tono de piel, cabello, vestuario y uno o dos colores de acento. Composición vertical tipo retrato, busto o medio cuerpo corto, personaje ocupando la mayor parte del encuadre, dejando suficiente espacio negativo alrededor para reforzar la estética de póster. Resultado final: retrato de personaje original 2D, diseño geométrico audaz, cel shading limpio, formas vectoriales, silueta distintiva, actitud de moda, composición editorial, acabado pulido de serie animada premium, sin realismo, sin 3D, sin textura pictórica, sin texto y sin logotipos.

05Que no parezca hecha con IA

Esta sección es opcional y es la que más se nota de toda la guía. Hay dos formas de conseguir lo mismo: que tu página se vea diseñada y no genérica. Puedes usar cualquiera de las dos, o las dos juntas.

Opción 1 · Instalarle una skill de diseño

Una skill es una receta que le instalas a Claude —como las de fotografía y video que ya usaron en el curso— y que cambia cómo trabaja sin que se lo pidas cada vez. La de diseño se llama frontend-design.

Es la skill oficial de Anthropic, la gente que hace Claude. Le enseña criterio de diseño: jerarquía, espacio, tipografía y, sobre todo, a huir de lo genérico. Instálala antes de pedir tu página y todo lo que venga después sale mejor.

⬇ Descargar frontend-design.skill

Se instala igual que las demás del curso: mira las instrucciones en la página de skills. Es gratuita y de código abierto — puedes ver qué hace por dentro en el repositorio de Anthropic.

Una vez instalada no tienes que hacer nada más: Claude la usa solo. Si quieres asegurarte, díselo:

Opción 2 · Copiar el estilo de una página que te guste

Sin instalar nada. Existe un catálogo con más de dos mil estilos sacados de páginas reales —de las que ya te gustan— y cada uno trae una ficha que describe sus colores, sus tipografías y su forma de hacer las cosas. Le pasas esa ficha a Claude y te copia ese look.

1. Entra a styles.refero.design y navega hasta encontrar un estilo que te guste. Cada tarjeta es el diseño de una página real.
2. Ábrelo y busca la pestaña que dice DESIGN.md.
3. Presiona Copy para copiar toda la ficha.
4. Pégasela a Claude en el chat de tu página, junto con este prompt.

06El prompt de arranque

Este es el único prompt largo de toda la clase. Cópialo, rellena lo que está en verde y pégaselo a Claude con tu carpeta ya abierta. De ahí en adelante todo se pide con frases sueltas.

07Biblioteca de prompts

Una sección a la vez. Copia el que necesites, rellena lo verde y pégaselo a Claude. Después de cada uno: guarda, refresca el navegador y mira cómo quedó antes de pedir el siguiente.

Todos suponen que ya hiciste el prompt de arranque y que tu página ya existe.

08Cómo pedir cambios sin romper nada

Aquí es donde la gente se frustra, y casi siempre por la misma razón: pedir ocho cosas de un jalón. Con tres ideas se resuelve casi todo.

Y si algo se rompió —la página se descuadró, desapareció una sección, se ve en blanco—, lo más rápido no es arreglarlo a mano. Este es el botón de emergencia:

09Que no pese: fotos y videos

Es lo que separa una página que abre al instante de una que tarda ocho segundos y hace que la gente se salga antes de verla. Lo que hemos visto que funciona: las fotos van dentro de tu carpeta, y los videos casi nunca.

Las fotos las arregla Claude por ti. Sube las que tengas, aunque sean las pesadísimas del celular, y después pídele esto:

Con el video hay tres caminos. Busca cuál es tu caso:

10Publicar tu página

Aquí es donde tu página deja de vivir solo en tu computadora. Es la parte que más miedo da y la más fácil de todas: se arrastra una carpeta y ya. No hay que configurar nada.

1. Entra a tu cuenta en Netlify (la que creaste en el paso 2).
2. Ve a la zona de arrastrar, en el enlace de aquí abajo.
3. Arrastra tu carpeta completa hasta el recuadro.
4. Espera unos segundos. Te va a salir una dirección, algo como melodic-arithmetic-205174.netlify.app.
5. Ábrela. Esa dirección ya funciona en el mundo entero.

Abrir la zona de arrastrar de Netlify →

Dos cosas que te van a pasar

• El nombre que te dio es horrible. Es normal, Netlify pone uno al azar. Puedes cambiarlo en la configuración de tu página, en la opción de cambiar el nombre del sitio. Elige algo con tu nombre y queda tunombre.netlify.app.
• Arrastraste los archivos sueltos en vez de la carpeta. Se nota porque la página sale en blanco o como una lista de archivos. Vuelve a arrastrar, pero la carpeta entera.

11Tu propio dominio

Opcional, y es lo único de toda la guía que cuesta dinero: entre 15 y 25 dólares al año. Es lo que convierte melodic-arithmetic-205174.netlify.app en tunombre.com.

1. En tu página dentro de Netlify, busca la sección de dominios.
2. Escribe el nombre que quieres y Netlify te dice si está libre y cuánto cuesta.
3. Págalo con tarjeta. Es un cobro al año, no mensual.
4. Espera. Ese es el paso 4, y cuenta como paso de verdad.

Dos cosas que conviene saber antes de pagar

• Se cobra cada año y la renovación automática viene encendida. Nosotros la dejamos así. Si se te vence, tienes un mes para recuperarlo escribiendo al soporte de Netlify; el mes siguiente no puedes ni renovarlo ni comprarlo; y a los dos meses queda libre para que lo compre cualquiera.
• No se pueden comprar dominios con ñ ni con acentos. Si tu nombre lleva una —Muñoz, Peña, diseño— tendrás que escribirlo sin ella (munoz.com) o elegir otra cosa. Es una limitación de Netlify, no un error tuyo.

¿El nombre que querías está ocupado? Pasa casi siempre. Prueba con tu profesión (anagarcia-fotografia.com), con un guion, con estudio adelante, o con otra terminación como .mx o .co. Ayuda tener tres opciones pensadas antes de sentarte a comprar.

12Actualizarla después

Tu página no queda congelada. Cuando quieras cambiar algo, se lo pides a Claude en tu carpeta como siempre, y después vuelves a subirla.

Camino 1 · Volver a arrastrar (el recomendado)

Entras a tu página en Netlify, buscas la zona de arrastrar y sueltas la carpeta otra vez. Se reemplaza sola y tu dirección no cambia. Es simple, no se configura nada y funciona siempre.

Camino 2 · Conectar Netlify a Claude

Exactamente igual que cuando conectaste Magnific en la Clase 6: se hace una sola vez, todo desde la aplicación, sin escribir ni un comando. A partir de ahí Claude puede ver tus páginas y publicarlas desde la propia conversación.

1. En la aplicación de escritorio de Claude, entra a Configuración y busca Conectores. Es la misma app donde usas Claude Code.
2. Presiona Agregar, escribe Netlify en el buscador y selecciónalo.
3. Presiona Conectar y autoriza con tu cuenta de Netlify. Te va a abrir una ventana para confirmar.
4. Ajusta los permisos: deja que consultar no te pregunte cada vez, pero que todo lo que modifique sí te pida permiso.

Con el conector puesto ya puedes pedirle cosas como «¿cómo se llama mi página en Netlify?», «¿cuándo se me vence el dominio?» o «sube los cambios», sin salir de la conversación.

13Qué no le pidas todavía

Claude puede hacer todo esto — pero no en una tarde, no sin que alguien lo mantenga y no sin costos mensuales. Si te lo propones ahorita, vas a terminar con algo a medias en vez de con una página terminada. Esto es lo que sí puedes tener hoy:

14Cuando algo no sale

Los seis problemas que le pasan a todo el mundo la primera vez. Ninguno es tu culpa y todos se arreglan en un minuto.

Ver el paso a paso, clic por clic →