3.2 Construye tu tablero

Información
⏱ Duración: ~40 min · 🎯 Objetivo: construir —desde un solo prompt— un tablero HTML que lee kpis-elektra.csv, muestra tarjetas de KPI con semáforos y una tabla de detalle, y verificarlo en el Browser pane. Este es el ejercicio estrella de la sesión.
Nota
3 términos que verás hoy: CSV = una tabla en texto plano, como un Excel simple. diff = la lista de cambios que Claude propone, como Control de cambios en Word. HTML = el formato de una página web.

Eres el director; hoy no esperas a IT. Vas a construir un tablero ejecutivo de Elektra Rewards con tus propios datos ficticios. Todo desde el tab Code, en modo Manual.

Paso 1 — Da el encargo

En el pane de chat, escribe (o copia) este prompt. Asegúrate de que datos/kpis-elektra.csv esté en la carpeta que seleccionaste.

Crea una página HTML que lea datos/kpis-elektra.csv y muestre tarjetas
de KPI con semáforos, más una tabla de detalle con todas las filas.
El CSV incluye columnas meta_ por KPI (meta_churn_pct, meta_redencion_pct,
meta_nps, meta_roi_campanas_pct). Aplica el semáforo por KPI: verde si el
valor cumple su meta_, ámbar si está a menos de 15% de incumplir, rojo si
la incumple. Ábrela en el navegador para verificar.
Consejo
Nota cómo el encargo pide construir un artefacto (una página que se abre y se verifica), no una respuesta de texto. Ese es el trabajo de Code.

Paso 2 — Revisa el diff, archivo por archivo

Cuando Claude propone cambios, aparece un indicador de diff tipo +N −M (líneas agregadas/quitadas). En el pane diff:

  1. Abre cada archivo propuesto y léelo.
  2. Comenta líneas concretas si quieres pedir un ajuste antes de aceptar.
  3. Decide Accept o Reject para cada cambio.

En Manual, nada se escribe en tu carpeta hasta que aceptas. Tú tienes el control.

Paso 3 — Verifica en el Browser pane

Claude abre tu página en el Browser pane y se auto-verifica: toma screenshots, hace clics y revisa que las tarjetas y la tabla se vean bien. Confirma tú mismo:

  • Las tarjetas de KPI muestran el semáforo correcto (verde/ámbar/rojo) según cada valor vs su meta.
  • Los KPIs en rojo (churn alto en feb/mar y ROI caído en feb/mar) saltan a la vista. La redención va en aumento, así que nunca aparece en rojo.
  • La tabla de detalle lista todas las filas del CSV.

Paso 4 — Itera con contexto

Refina sin reescribir todo. Dos formas potentes de dar contexto:

  • @menciones de archivos: escribe @kpis-elektra.csv para señalar exactamente qué archivo mirar.
  • Arrastra mockups o capturas: suelta una imagen de referencia o un screenshot del layout que quieres.
Ordena las tarjetas por severidad (rojo primero) y agrega un encabezado
"Elektra Rewards · Tablero ejecutivo" con la fecha de hoy.
Aviso
Sigue en Manual: revisa el diff de cada iteración antes de aceptar. No aceptes a ciegas solo porque “se ve bien”.
Aviso
Si algo sale mal: (1) Página en blanco o rota → copia el mensaje de error y pégalo de vuelta en el chat pidiendo “arréglalo”. (2) El Browser pane no abre → abre el archivo desde el file pane, o haz doble clic sobre él en Finder/Explorer. (3) Carpeta de solo lectura → elige una carpeta escribible, como el Escritorio.

✅ Checkpoint

Tienes un tablero HTML funcionando, abierto en el Browser pane, con tarjetas de KPI que muestran semáforos correctos y una tabla de detalle. Aceptaste los cambios revisando el diff, y refinaste al menos una vez con una @mención o una iteración.

¿Te quedó claro? — 2 preguntas

1. ¿Qué indica el +N −M del diff y qué haces con él? Las líneas agregadas/quitadas de un cambio propuesto. Lo revisas archivo por archivo y decides Accept o Reject; en Manual nada se guarda hasta que aceptas.

2. ¿Para qué sirve el Browser pane en este ejercicio? Previsualiza el tablero y deja que Claude se auto-verifique (screenshots/clics); tú confirmas que los semáforos y la tabla se ven correctos.