Qué vas a conseguir
Consigue que Claude genere gráficas y widgets interactivos directamente dentro del chat, con sliders que puedes mover en tiempo real para explorar datos sin salir de la conversación.
Para este caso hemos creado el ejemplo grafico con un widget capaz de calcular hipotecas en tiempo real, tal como puedes ver en el video:
Cómo hacerlo
PASO 1 — Abre Claude y crea una conversación nueva
Entra en claude.ai desde el navegador de tu ordenador o móvil.
Una vez dentro, pulsa el botón Nueva conversación que aparece en la barra lateral izquierda. Esto abre un chat en blanco donde escribirás el prompt del siguiente paso.
Este caso de uso funciona tanto en la versión web (claude.ai desde el navegador) como en la app móvil de Claude para iOS y Android.
No necesitas activar ningún modo especial ni cambiar ningún ajuste, Claude tiene activado por defecto el Visualizador, que es la función que permite renderizar widgets interactivos directamente dentro del chat en lugar de mostrarte solo texto.
PASO 2 — Envía el prompt con el tema que quieres calcular
Copia el prompt de abajo y pégalo en el campo de texto del chat.
Antes de enviarlo, sustituye la primer variable llamada [TEMA] y en la última línea, la que empieza por El tema es: (aquí añade una descripción de lo que quieres calcular).
El resto del prompt no hace falta tocarlo de momento.
Estructura:
* Sliders de control en grid 2 columnas, con label en 13px gris, valor actual alineado a la derecha en 14px bold
* Tarjetas de métricas resumen (grid de 3-4 columnas) con fondo `var(–color-background-secondary)`, label en 11px y valor en 18px bold. Usa colores semánticos: azul `#378ADD` para datos neutros, verde `#1D9E75` para positivo, rojo `#E24B4A` para coste/pérdida
* Gráfico de barras apiladas con Chart.js (altura 240-260px), leyenda custom en HTML encima del canvas, tooltips con totales
* Números siempre formateados con `toLocaleString(‘es-ES’)` y prefijo €. Sin decimales en importes grandes
Reglas de diseño:
* Sin gradientes, sin sombras, sin colores de fondo en el contenedor raíz (transparente)
* Bordes `0.5px solid var(–color-border-tertiary)` en cards
* Border-radius: `var(–border-radius-md)` para métricas, `var(–border-radius-lg)` para cards
* Textos siempre con CSS variables: `var(–color-text-primary)` y `var(–color-text-secondary)`
* Compatible con modo oscuro obligatoriamente
* Separadores de sección con `<hr>` de `0.5px` y títulos de sección en 11px uppercase tracking
Técnico:
* Chart.js desde `cdnjs.cloudflare.com` versión 4.4.1, build UMD
* Canvas envuelto en `<div style=»position:relative; height:240px»>`
* Cada slider dispara `update()` con `addEventListener(‘input’)`
* Sin `<html>`, `<head>`, `<body>` ni DOCTYPE
* Sin comentarios en el código
El tema es: [DESCRIBE AQUÍ LO QUE QUIERES CALCULAR]
Por ejemplo, si quieres calcular una hipoteca, la última línea quedaría así:
Una vez editada la última línea del prompt, pulsa Intro para lanzarlo, Claude es muy rápido, tardará entre 10 y 20 segundos en generar el widget completo.
PASO 3 — Interactúa con el widget que aparece en el chat
Cuando Claude termine de responder, verás el widget renderizado directamente en la conversación. Mueve los sliders y el gráfico se actualiza al instante, sin abrir ninguna herramienta externa.
Así puedes usarlo
Sustituye la última línea del prompt con cualquiera de estos ejemplos y obtienes un widget diferente en segundos.
1. Hipoteca
El tema es: una hipoteca con sliders de precio del inmueble (50.000€–800.000€), entrada (5%–50%), tipo de interés anual (0,5%–10%) y plazo en años (5–40). Métricas: capital prestado, cuota mensual, total intereses y coste total. Gráfico de barras apiladas con capital amortizado, intereses pagados y deuda pendiente por año.
2. Rentabilidad de negocio
El tema es: rentabilidad de un negocio con sliders de precio de venta por unidad, coste por unidad, unidades vendidas al mes y gastos fijos mensuales. Métricas: margen bruto, beneficio neto mensual y punto de equilibrio en unidades. Gráfico de barras apiladas con ingresos, costes variables y costes fijos por mes a lo largo de 12 meses.
3. Interés compuesto
El tema es: interés compuesto con sliders de capital inicial (1.000€–100.000€), aportación mensual (0€–2.000€), rentabilidad anual (1%–15%) y horizonte en años (1–40). Métricas: capital final, total aportado y total generado por rentabilidad. Gráfico de barras apiladas con capital aportado y rentabilidad acumulada año a año.
Mejoras
Una vez tienes el widget en pantalla puedes seguir la conversación para ampliarlo. Claude mantiene el contexto y construye sobre lo que ya generó:
- Añadir variables → «Añade un slider de ITP entre 6% y 10% que sume el impuesto al coste total de compra»
- Cambiar el gráfico → «Convierte el gráfico de barras en un gráfico de líneas que muestre la tendencia a lo largo del tiempo»
- Añadir tabla de datos → «Añade debajo del gráfico una tabla con los valores numéricos de cada año»
- Comparar escenarios → «Añade una segunda línea al gráfico que represente el mismo cálculo con un 1% más de interés»
- Exportar → «Añade un botón que descargue los datos actuales del widget en formato CSV»
Cada mejora se consigue con un mensaje de seguimiento. No hace falta reescribir el prompt desde cero.