05
Bloque 05 — Respuestas visuales
Curso de Claude AI

Respuestas
que se ven

6 formatos de respuesta visual dentro del chat
Qué es un artefacto y por qué importa
Editar, compartir y reutilizar lo que Claude entrega
ERNESTO ARGÜELLES | estrategia e ia aplicadaknowmad.mx
6 tipos visuales
Bloque 05 · Respuestas visuales

6 tipos de
respuesta visual

Toca cada tipo
📊
Tipo 1 · Visualización
Datos + gráfico + tarjetas
Mini-dashboard HTML+SVG dentro del chat. KPIs, gráfico y tabla. Interactivo — pasa el cursor y ves valores.
⬇ ventas-2025.csv
🔀
Tipo 2 · Diagrama
Flowchart que responde
Nodos conectados donde clicas cada punto y se expande con el detalle de esa etapa.
🎛️
Tipo 3 · Explainer
Sliders que enseñan
Mini-herramienta con sliders y controles reales — mueves la barra y la visualización se actualiza al instante.
🗂️
Tipo 4 · Comparativa
Tarjetas comparativas
Tarjetas lado a lado con checks, pros, contras, precios. Con búsqueda web activa, los precios son de hoy.
🧩
Tipo 5 · Diagrama
Conceptos abstractos
SVG o HTML que explica un concepto difícil. Editable por palabras: "más azul", "flechas más gruesas".
🛠️
Tipo 6 · La estrella
Mini-app real
Aplicación funcional con botones, inputs, estado y lógica. Ya no es "te explica" — te da la cosa hecha.
Todo esto aparece dentro del chat — no tienes que abrir ningún editor
Ernesto Argüelles  |  Estrategia e IA aplicada — knowmad.mx
ERNESTO ARGÜELLES | estrategia e ia aplicadaknowmad.mx
Qué es un artefacto
Bloque 05 · Respuestas visuales · Definición · Desde aquí ya no es efímero

Un artefacto es
lo que vive a la derecha

Panel lateral · persistente · editable · compartible
¿Qué es?
Un archivo completo y funcional que Claude genera y abre en el panel derecho — no desaparece cuando terminas el mensaje.
¿Cómo se crea?
Claude detecta automáticamente cuándo crear un artefacto — o tú lo pides explícitamente con "como artefacto" o "en el panel derecho".
¿Qué puedo hacer?
Iterar con lenguaje natural · Publicar con un click · Descargar como .html, .docx, .pptx, .pdf · Compartir por link · Embeber en tu web
Diferencia clave
Respuesta en el chat = efímera. Artefacto en el panel = vive, se edita, se comparte, se descarga.
Conversación Artefacto →
Hazme una calculadora de ROI de Meta Ads
Hecho. La tienes abierta en el panel →
Cambia el acento a azul
Actualizado · sin rehacer nada
PUBLISH ⇣
REMIX
⬇ .html
Ernesto Argüelles  |  Estrategia e IA aplicada — knowmad.mx
ERNESTO ARGÜELLES | estrategia e ia aplicadaknowmad.mx
Capacidades del arte
Bloque 05 · Respuestas visuales · Potencial

No es un bloque de código —
es una app

8 capacidades que se combinan
🎛️
Interactivo
Sliders, inputs, botones, estado real
🧠
IA dentro
Llamadas a Claude desde dentro del artefacto
💾
Memoria
Datos que sobreviven sesiones (Pro y Max)
🌐
3D · WebGL
Three.js, escenas navegables
📊
Datos vivos
Charts Recharts, filtros, zoom real
🔗
Compartible
Link público, embed, remix sin cuenta Claude
📦
Exports
.docx .pptx .xlsx .pdf PNG SVG
🎯
Producto
Mezcla 3 capacidades y tienes un producto digital vendible
Ernesto Argüelles  |  Estrategia e IA aplicada — knowmad.mx
ERNESTO ARGÜELLES | estrategia e ia aplicadaknowmad.mx
5 artefactos en vivo
Bloque 05 · Respuestas visuales · El cambio de paradigma

De "Claude te explica"
a "Claude te entrega"

5 artefactos reales — abre y usa
🪐
Sistema Solar
3D interactivo · datos reales de la NASA
↗ Abrir
🌌
The Orbital
Landing newsletter con scroll 3D
↗ Abrir
🎯
Hábitos
Tracker con memoria persistente
↗ Abrir
🚀
Órbita Defender
Space invaders 3D jugable
↗ Abrir
📰
Generador SEO
Artículos SEO con IA dentro — sin servidor
↗ Abrir
Gratis para quien lo recibe. 10 o 10.000 usuarios — mismo coste para ti
Ernesto Argüelles  |  Estrategia e IA aplicada — knowmad.mx
ERNESTO ARGÜELLES | estrategia e ia aplicadaknowmad.mx
Claude Design
Bloque 05 · Respuestas visuales · Claude Design · Anthropic Labs

Más allá del artefacto —
Claude Design

Research preview · Pro y Max
¿Qué es?
Un espacio aparte que genera HTML en vivo, no imágenes planas — lo refinas con comentarios o sliders de color.
¿Qué come?
Texto · DOCX · PPTX · XLSX · imágenes · tu codebase · captura de una web que te guste
¿Qué escupe?
Landing, deck, one-pager, sistema de marca — exporta a Canva · PDF · PPTX · HTML o pasa un bundle a Code
Estado
Research preview · Modelo Opus 4.7 · Cuota semanal aparte del plan
Ejemplo real · landing "Domina Excel"
Deja de pelearte con Excel.
↑ Generado con Claude Design desde el brief · exportable a Canva, PDF, HTML o bundle para Code.
brief-domina-excel.md
Para cuando el artefacto se queda corto — una landing que vende, un deck para inversores, la marca entera de tu producto.
Ernesto Argüelles  |  Estrategia e IA aplicada — knowmad.mx
ERNESTO ARGÜELLES | estrategia e ia aplicadaknowmad.mx