M3: Artifacts — mini-apps directo en el chat

Nivel: Free Duración: ~15 minutos Necesitas: Cuenta gratis en claude.ai (la del módulo 1)

Lo que vas a lograr

• Crear una mini-app (calculadora, landing o dashboard) en 5–10 minutos sin tocar código.
• Compartirla con un cliente vía link de Claude o subirla a un hosting gratis.
• Conocer las 6 categorías de Artifacts y saber cuándo usar cada una en tu trabajo freelance.

Al final vas a tener un Artifact real publicado, listo para meter en una propuesta.

Qué es un Artifact

Un Artifact es cualquier bloque de contenido auto-contenido que Claude genera y que puede vivir fuera del chat: un componente React interactivo, un SVG, un documento HTML, un bloque de código, una hoja de cálculo en CSV o un texto largo como un contrato.

Lo diferencial no es solo que Claude los genere — es que los genera en un panel lateral separado del chat, con previsualización en tiempo real. Y desde mayo de 2025 puedes publicarlos con un clic en claude.ai/share/... (link público, sin login).

Las 6 categorías de Artifacts

1. React components — mini-apps interactivas con estado, botones, formularios. La más poderosa.
2. SVG — gráficos vectoriales: iconos, diagramas, infografías simples.
3. HTML — páginas estáticas completas: landings, páginas de gracias, mockups de email.
4. Code — fragmentos de código en cualquier lenguaje, listos para copiar.
5. Markdown — documentos largos (contratos, briefs, reportes) con formato.
6. CSV/texto — datos tabulares, listas de precios, bases de contactos.

Casos de uso para freelancers LATAM

• SMM: carrusel de 7 slides como SVG con medidas exactas para Instagram.
• Diseño: calculadora de precios para presupuestos en tiempo real.
• Copywriting: página de gracias post-compra como HTML que el cliente puede publicar.
• Marketing: dashboard de métricas en React con datos pegados a mano.
• Cliente service: formulario de onboarding interactivo para nuevos clientes.

Paso a paso: crear tu primer Artifact

1. Pide a Claude que cree un Artifact

Claude detecta automáticamente cuándo el output debería ser un Artifact. Pero puedes pedirlo explícitamente:

«Crea un Artifact React con una calculadora de presupuesto para servicios SMM. Entradas: horas por mes y tarifa por hora. Salida: total mensual y anual con un desglose visual.»

2. Editar el Artifact

En el panel lateral verás el código y la preview. Pide cambios en el chat:

«Cambia el color primario a #D97148. Agrega un campo para descuento en porcentaje.»

3. Publicar el Artifact

Botón «Publish» en la esquina superior del panel. Claude genera un link claude.ai/share/... que cualquiera puede abrir sin login.

Mini-ejercicio (15 minutos)

1. Pide a Claude un Artifact para tu caso (calculadora, landing mini, FAQ interactivo).
2. Itera 2 veces con cambios específicos.
3. Publica con el botón Publish.
4. Comparte el link con alguien de tu equipo o pégalo en un DM de prueba.

Límites actuales

• Free: Artifacts disponibles, Publish disponible.
• Tamaño: componentes muy complejos (>500 líneas) pueden truncarse.
• APIs externas: los React Artifacts no pueden llamar APIs externas desde el browser (CORS). Para conectar datos reales, el fetch debe ir desde el servidor.