Guía Claude para crear tu propia web y artefactos

Si alguna vez has pensado en tener un portfolio online o un currículum en formato web pero te ha frenado la idea de «tendría que aprender a programar«, esta guía es para ti. Vamos a usar Claude, la IA de Anthropic, y una de sus funciones menos conocidas pero más útiles: los Artefactos.

Con los Artefactos, Claude no solo te explica cómo hacer una web: la construye delante de ti, en la misma conversación, y puedes verla funcionando en tiempo real. Puedes pedirle cambios como si hablaras con un diseñador («hazlo más colorido», «quita esa sección», «cambia la foto de perfil por este texto») y la web se actualiza al momento.

En esta guía te voy a enseñar a hacer dos cosas muy prácticas:

1. Crear un portfolio personal paso a paso, con ejemplos de qué escribirle a Claude en cada momento.
2. Adaptar ese mismo proceso para montar un currículum vitae en formato web.

Y al final te dejo unas cuantas ideas más por si quieres seguir practicando.

Antes de empezar: ¿necesito saber programar?

No necesitas instalar nada, ni saber programar. Solo hace falta:

• Una cuenta gratuita en Claude.ai.
• Tener claro qué quieres contar de ti: a qué te dedicas, qué proyectos quieres enseñar y cómo quieres que te contacten.
• Cinco minutos de paciencia para ir puliendo el resultado con Claude, igual que harías con cualquier borrador.

No hace falta que sepas qué es HTML, CSS o JavaScript (aunque si quieres aprender te dejo unos cursos gratuitos de programación). Claude se encarga de esa parte, tú solo tienes que describir lo que quieres con tus propias palabras.

Paso 1: pide tu portfolio con un mensaje claro

Cuanto más contexto le des a Claude desde el principio, menos vueltas tendrás que dar después. No hace falta que sea perfecto, pero cuantos más datos reales incluyas, más personalizado saldrá el resultado.

Un mensaje de ejemplo, con datos inventados para este tutorial:

Quiero que me crees un portfolio personal en formato de página web (como Artefacto). Soy diseñadora de producto (UX/UI), me llamo Marta Ruiz y vivo en Valencia. Llevo 6 años trabajando y quiero mostrar
tres proyectos: el rediseño de una app de finanzas, un sistema de diseño para una clínica y una web de reservas para un estudio de cerámica. Quiero una sección de "sobre mí" breve, mis habilidades (Figma, investigación con usuarios, prototipado, sistemas de diseño, HTML/CSS básico) y una forma de contactarme por correo. El estilo
que me gusta es sobrio, editorial, con tipografía con cuerpo, nada de plantillas genéricas ni colores pastel típicos de IA.

Verás que Claude abre un panel a la derecha (o, si estás en el móvil, una pantalla aparte) y empieza a construir la página ahí mismo. Cuando termina, puedes ver el resultado ya funcionando, con sus textos, sus secciones y sus estilos.

Paso 2: pide cambios como si hablaras con un diseñador

Aquí está la parte más potente de trabajar con Artefactos: no tienes que quedarte con la primera versión. Puedes seguir la conversación y pedir ajustes concretos, uno a uno o varios juntos:

• «Cambia la frase principal, quiero que hable de resolver problemas para gente que no se lleva bien con la tecnología.»
• «Añade un cuarto proyecto sobre una tienda online que hice para una amiga.»
• «El botón de contacto no destaca, dale más presencia.»
• «Quita la sección de habilidades, no la necesito.»
• «Hazlo responsive para que se vea bien en el móvil» (aunque normalmente Claude ya cuida esto por defecto).

Cada vez que pidas un cambio, el Artefacto se actualiza y puedes comparar con la versión anterior desde el propio panel, ya que Claude guarda un historial de versiones.

Un consejo: pide los cambios de uno en uno al principio, así es más fácil detectar si algo no ha quedado como esperabas. Cuando ya tengas soltura, puedes agrupar varias peticiones en un mismo mensaje.

Paso 3: personaliza los detalles que te representan

Una vez tengas la estructura, es el momento de afinar todo lo que te hace única o único: tu foto, tus enlaces reales, tu forma de hablar de ti.

Cosas que puedes pedirle a Claude en esta fase:

• «Sustituye el texto de ejemplo por este que te paso» (y le pegas tu propia bio).
• «Añade mis redes: LinkedIn, GitHub e Instagram, con estos enlaces.»
• «Quiero un tono más cercano, como si hablara directamente contigo.»
• «Traduce toda la página al inglés también, con un botón para cambiar de idioma.»

Si tienes tu foto o tu logo en un archivo, puedes subirlo directamente a la conversación y pedirle a Claude que lo incorpore al diseño.

Paso 4: descarga tu web o publícala online

Cuando estés contenta o contento con el resultado, tienes dos caminos:

Opción A: descargarla para tenerla guardada. Pídele a Claude algo como «descárgame este Artefacto como archivo HTML». Te dará un archivo que puedes abrir directamente con doble clic desde tu ordenador, sin necesidad de internet.

Opción B: publicarla para que cualquiera pueda verla con un enlace. Aquí tienes varias opciones gratuitas, pensadas para quien no tiene experiencia técnica:

• GitHub Pages: subes el archivo HTML a un repositorio de GitHub y en un par de clics tienes una URL pública.
• Netlify (la opción «Drop»): arrastras el archivo a su web y te da un enlace al instante, sin registrarte siquiera.
• Vercel: parecido a Netlify, también admite arrastrar y soltar.
• Comprar tu propio dominio y subirlo en una carpeta al servidor (yo por ejemplo lo suelo hacer con Webempresa, que es donde tengo instalado todo de AprenderGratis.es)

Lo mejor, también le puedes decir a Claude que publique el Artefacto y lo que hayas hecho aparecerá público, para ello sólo debes marcarle esta opción que aparece en la pantalla de la derecha:

Ahora el mismo proceso, pero para tu currículum

La lógica es exactamente la misma que con el portfolio, cambia el contenido, no el método. Un mensaje de partida podría ser:

Quiero un currículum en formato de página web (como Artefacto), pensado para poder compartir con un enlace en vez de mandar un PDF. Mis datos: [nombre, puesto al que aspiro, experiencia laboral con fechas, formación, idiomas e informática]. Quiero que se pueda leer rápido, en menos de un minuto, con lo más importante bien visible arriba. Al final, un botón para descargar la versión en PDF y otro para escribirme un correo.

Algunas peticiones útiles específicas de un CV:

• «Ordena la experiencia de la más reciente a la más antigua.»
• «Resalta solo los logros con números, no hace falta poner toda la descripción del puesto.»
• «Añade una versión imprimible, que se vea bien en una sola hoja A4.»
• «Quiero una barra de progreso o etiquetas para el nivel de idiomas» (aunque ojo: a veces es más honesto simplemente escribir el nivel, como «inglés B2», que una barra que puede parecer arbitraria).

Así un currículum inventado para este ejemplo se vería así (link de publicación en Claude):

Otras ideas para seguir practicando

Una vez le pilles el truco, este mismo método sirve para muchas más cosas. Algunas ideas para vuestra comunidad:

• Landing page para un negocio pequeño o un servicio freelance (peluquería, clases particulares, un pequeño taller).
• Página de invitación para un evento, con la fecha, el lugar y un formulario sencillo de confirmación.
• Una «link in bio» al estilo Linktree, con todos tus enlaces importantes en una sola página.
• Un porfolio de fotografía, con una galería y tus datos de contacto.
• Una calculadora sencilla (de propinas, de presupuesto para una boda, de conversión de divisas) como proyecto de práctica antes de aprender a programar «de verdad».

Por ejemplo, creé un Artefacto y lo publiqué en el propio servidor de Claude para enseñarte a aprender inglés acelerado en 90 días y que alcances un B2 (algo similar a la mega guía de inglés que puedes descargar gratis).

Este artefacto te hace un checklist de todo lo que debes saber y además, puedes ir clicando las acciones que ya tengas completas, el ejemplo (puedes verlo funcional aquí):

Consejos finales para sacarle más partido a Claude

• Sé concreta o concreto desde el primer mensaje. Cuanto más contexto real le des (a qué te dedicas, qué quieres transmitir, ejemplos de estilos que te gustan), menos ajustes tendrás que hacer después.
• Pide referencias de estilo con tus propias palabras, no hace falta que sepas términos de diseño. «Quiero que parezca una revista, con mucho texto y poco color» funciona perfectamente.
• No te quedes con la primera versión. La conversación con Claude está pensada para iterar, igual que un boceto en papel.
• Pide explicaciones si algo no entiendes. Puedes preguntarle «¿qué hace este botón?» o «¿por qué has puesto la foto ahí?» y te lo explica en un lenguaje sencillo.