Bienvenida
Tu trabajo merece verse en línea.
Hoy vas a construir la primera versión de tu website conversando con una inteligencia artificial. No necesitas saber programar ni pagar un diseñador: tú pones la visión, el contenido y el criterio; la IA escribe el código.
Una web real
Un sitio de una página, adaptado a celular, con tu bio, tu obra y tus datos de contacto.
Prompts propios
Una fórmula para pedirle a la IA exactamente lo que quieres y corregir lo que no te guste.
Un link para compartir
Tu página publicada para ponerla en tu bio de Instagram, tu firma de correo o tu tarjeta.
00 · Antes de empezar
Prepara tu material
La IA trabaja mejor con buen contenido. Mientras más claro y completo sea lo que le das, mejor será el resultado. Reúne esto antes de abrir el chat.
Equipo y cuentas
- Computadora con navegador actualizado (Chrome, Safari o Edge). El teléfono sirve para revisar, pero es incómodo para construir.
- Cuenta gratuita en claude.ai (puedes registrarte con tu correo o tu cuenta de Google).
- Acceso a tu correo para confirmar el registro.
- Si te conectas online: audífonos y el link de Meet a mano.
Contenido
- Tu nombre artístico o de marca, tal como quieres que aparezca.
- Una bio corta (2–3 líneas) y una más larga (1–2 párrafos).
- De 6 a 12 fotos de tu obra o tu trabajo, en buena luz.
- Una foto tuya (retrato) si quieres mostrarte.
- Tus links: Instagram, WhatsApp, correo, tienda, YouTube.
- Lo que ofreces: obra a la venta, encargos, clases, servicios.
Plantilla rápida de bio
Si no tienes bio, completa esta fórmula y luego pídele a Claude que la pula:
Soy [nombre], [disciplina: pintora / fotógrafo / muralista / diseñadora…] nacido/a en [país o ciudad] y basado/a en [ciudad]. Mi trabajo explora [temas] a través de [técnicas o materiales]. He expuesto / trabajado en [2–3 logros]. Hoy [lo que buscas: vender obra, recibir encargos, dar clases…].
Ficha de cada obra
Para cada imagen anota: título · año · técnica · medidas · disponible / vendida · precio (opcional). Esta información le da a tu web el aspecto de portafolio profesional.
01 · Planea tu web
Primero el para qué, después el diseño
Responde estas tres preguntas. Tus respuestas se convierten en las instrucciones que le darás a la IA.
| Pregunta | Ejemplos |
|---|---|
| ¿Qué quieres lograr? | Vender obra · recibir encargos o murales · conseguir alumnos · tener un portafolio para convocatorias y galerías · mostrar tus servicios creativos |
| ¿Quién la va a visitar? | Coleccionistas · curadores · clientes de empresas · alumnos · público en general · comunidad en tu país o en Miami |
| ¿Qué acción esperas? | Que te escriban por WhatsApp · que te envíen un correo · que te sigan en Instagram · que compren en tu tienda · que reserven una clase |
Estructura recomendada
Para una primera web, una sola página larga (one-page) funciona muy bien: carga rápido, se ve bien en el teléfono y es fácil de mantener.
- Portada: nombre, disciplina, una frase y un botón de contacto.
- Sobre mí: bio y foto.
- Obra: galería con títulos y fichas.
- Servicios u ofertas: encargos, clases, colaboraciones.
- Trayectoria: exposiciones, prensa, premios.
- Contacto: botones a WhatsApp, correo y redes.
Así se ve en un boceto
Define tu estilo en 3 palabras
Elige tres adjetivos que describan tu trabajo (por ejemplo: minimalista, cálido, artesanal o urbano, vibrante, experimental) y, si puedes, dos colores que te representen. También puedes nombrar una web que te guste como referencia de estilo.
02 · Conoce a Claude
Tu asistente de diseño y código
Claude es un asistente de inteligencia artificial creado por Anthropic. Le escribes en español, como a una persona, y te responde con textos, ideas o, en este caso, el código completo de una página web.
- Entra a claude.ai y crea tu cuenta gratuita (o inicia sesión).
- Abre un chat nuevo. Usa un chat solo para tu web, así Claude recuerda todo el contexto mientras trabajas.
- Escribe tu pedido (en el siguiente capítulo tienes el prompt maestro).
- Claude genera la página y la muestra en un panel de vista previa junto al chat. A esa pieza se le llama artifact.
- Revisa la vista previa y pide cambios en el mismo chat. Cada respuesta crea una nueva versión; puedes volver a versiones anteriores si algo no te convence.
Cómo hablarle a la IA
- Sé específico: «botón verde que diga Escríbeme» funciona mejor que «un botón bonito».
- Pide un cambio o dos por mensaje y revisa.
- Si algo sale mal, descríbelo: qué ves y qué esperabas.
- Dale contexto real: tu bio, tus textos, tus links.
Lo que la IA no sabe de ti
- Tus precios, fechas y logros reales: dáselos tú.
- Si inventa un dato (una exposición, un premio), bórralo o corrígelo.
- Revisa siempre ortografía, nombres y teléfonos antes de publicar.
03 · El prompt maestro
Tu primera versión en un solo mensaje
Copia este prompt, reemplaza lo que está entre corchetes con tu información y envíalo. Es tu punto de partida: después lo mejoramos.
Actúa como diseñador web experto en portafolios de artistas. Crea una página web de una sola página (one-page), moderna y adaptada a celular, en un único archivo HTML con el CSS incluido. Sobre mí: - Nombre: [tu nombre artístico] - Disciplina: [pintura, fotografía, cerámica, música…] - Ciudad: [ciudad / país] - Bio: [pega aquí tu bio] Objetivo de la web: [vender obra / recibir encargos / conseguir alumnos…] Acción principal: que los visitantes [me escriban por WhatsApp / me envíen un correo]. Secciones: Portada con mi nombre y una frase, Sobre mí, Obra (galería de [número] piezas con título, técnica, medidas y año), [Servicios / Clases], Trayectoria y Contacto. Estilo: [3 adjetivos]. Colores: [2 colores]. Tipografía elegante y legible. Datos de contacto: - WhatsApp: [+1 305 …] - Correo: [tu@correo.com] - Instagram: [@usuario] En la galería usa espacios para imagen con los nombres obra-1.jpg, obra-2.jpg, etc., y para mi retrato usa retrato.jpg. Escribe los textos en español.
¿Quieres tu web en dos idiomas?
Agrega al final del prompt:
Haz la página bilingüe español / inglés, con un botón ES | EN arriba a la derecha que cambie todos los textos.
04 · Ajusta y mejora
Conversa hasta que sea tuya
La primera versión casi nunca es la final. Estos prompts cubren los ajustes más comunes. Úsalos en el mismo chat, uno o dos por mensaje. Toca Copiar en cualquiera.
Cambia la paleta a tonos tierra: fondo crema, textos casi negros y un acento terracota para los botones.
Usa una tipografía serif elegante para los títulos y una sans-serif limpia para el texto.
Haz la portada más llamativa: imagen a pantalla completa con el nombre grande encima y una frase corta.
Al hacer clic en una obra, ábrela en grande con su ficha y flechas para pasar a la siguiente.
Agrega un botón flotante de WhatsApp abajo a la derecha que abra un chat con mi número y el mensaje “Hola, vi tu web”.
Reescribe mi bio en un tono cálido y profesional, en tercera persona, máximo 90 palabras. No inventes logros.
Revisa que todo se vea bien en celular: menú tipo hamburguesa, galería en una columna y botones fáciles de tocar.
Agrega título, meta descripción y textos alternativos (alt) en cada imagen para mejorar el SEO, con las palabras “[disciplina] en [ciudad]”.
Elimina la sección Trayectoria y mueve Servicios antes de Obra.
La versión anterior estaba mejor en la galería. Vuelve a esa galería pero mantén los colores nuevos.
Analiza mi página como un curador y dime 5 mejoras concretas. Luego aplica las 3 más importantes.
05 · Tus fotos
La obra es la protagonista
En un portafolio, la calidad de las fotos pesa más que cualquier efecto de diseño. Dedica unos minutos a prepararlas bien.
Cómo fotografiar tu obra
- Luz natural indirecta, cerca de una ventana y sin sol directo.
- Cámara paralela a la obra para que no se deforme.
- Fondo neutro y sin objetos alrededor.
- Recorta los bordes y endereza la imagen.
- Suma 1 o 2 fotos de detalle o de la obra en un espacio real.
Antes de subirlas
- Formato JPG, de 1600 a 2000 px en el lado largo.
- Cada imagen idealmente por debajo de 500 KB, para que la web cargue rápido.
- Renómbralas en orden: obra-1.jpg, obra-2.jpg… y retrato.jpg.
- Herramientas gratuitas para reducir peso: squoosh.app o tinypng.com.
¿Cómo entran las fotos en la web?
La vista previa de Claude muestra tus espacios de imagen vacíos o con imágenes de muestra. Eso es normal. Tus fotos reales aparecen cuando publicas la web junto a ellas, en una misma carpeta:
Si ya tienes tus imágenes publicadas en otra web propia, también puedes darle a Claude los links directos de cada imagen y pedirle que los use.
06 · Publica
Tres caminos para salir al mundo
Elige según tu momento. Puedes empezar con el camino A hoy mismo y avanzar al C cuando tengas tu dominio.
A · Lo más rápido, ideal para hoy
Compartir desde Claude
En la vista previa del artifact busca la opción de publicar o compartir. Claude genera un link público que puedes abrir en cualquier dispositivo y enviar a quien quieras. Perfecto para revisar tu web en el celular y pedir opiniones.
Las fotos locales con nombres de archivo no se verán aquí; para eso usa el camino B o C.
B · Gratis, con tus fotos, en 2 minutos
Netlify Drop
- En la vista previa de Claude, descarga o copia el código y guárdalo como index.html.
- Crea una carpeta con el index.html y tus fotos renombradas.
- Entra a app.netlify.com/drop y arrastra la carpeta completa.
- Recibes un link del tipo tunombre.netlify.app. Crea una cuenta gratis para conservarlo y cambiarle el nombre.
C · Tu propio dominio
tunombre.com
Compra un dominio y un plan de hosting (por ejemplo Hostinger, GoDaddy o Namecheap). Luego, desde el administrador de archivos del hosting, sube tu index.html y tus fotos a la carpeta pública (normalmente se llama public_html). También puedes conectar un dominio propio a tu sitio de Netlify.
07 · Checklist y soluciones
Antes de compartir tu link
Marca cada punto a medida que lo revisas.
Revisión final
Después de publicar
Problemas comunes
No veo mis fotos
Revisa que los nombres coincidan exactamente (mayúsculas, .jpg vs .jpeg) y que estén en la misma carpeta que index.html.
La respuesta se cortó
Escribe «continúa desde donde quedaste» o pide «dame el archivo completo de nuevo».
Claude cambió algo que me gustaba
Dile exactamente qué conservar: «mantén todo igual y cambia solo…».
Se ve desordenado en el celular
Usa el prompt «Revisar en celular» del capítulo 04 y describe qué ves mal.
Llegué al límite de mensajes
Espera a que se renueve o descarga tu index.html para no perder el avance.
El texto suena genérico
Dale más información real: tu historia, tu proceso, por qué haces lo que haces.
XIV Festival Internacional Huellas del Arte
Arte y comunidad en el corazón de Miami.
Este workshop forma parte de la programación gratuita de Arte y Tecnología del XIV Festival Internacional Huellas del Arte 2026. Cuando publiques tu web, compártela con nosotros etiquetando a @huellasdelarte: nos encantará ver lo que creaste.