Cómo crear un dashboard y su landing page con Claude Code

Por qué casi todos los dashboards fallan donde importa

Un cliente que te paga cada mes juzga tu servicio por lo que ve, no por lo que haces. Si el trabajo no aparece en un tablero claro, para él no existe. Y el día que un cliente ve los datos de otra empresa, no importa lo bonito que se veía el panel: perdiste la confianza.

Los errores se repiten:

• Permisos que solo esconden botones. La pantalla no muestra el menú, pero el servidor le responde a cualquiera que llame a la ruta.
• El número en la URL. Un cliente cambia el número de empresa y ve la de otro.
• Datos internos que viajan escondidos. El costo interno o la nota del equipo llegan al navegador del cliente "aunque no se muestren".
• Métricas sin fecha. "143 tickets" no dice si vas mejor o peor.
• Reportes que no salen del sistema. Sin PDF ni Excel, alguien los rehace a mano cada mes.
• Los rincones olvidados. La pantalla filtra bien, pero la exportación, el buscador o el aviso por Telegram no.

Esta skill trae esas reglas puestas. Está escrita a partir de patrones que corren en producción en xytask.com, la plataforma de operaciones multiempresa que construimos sobre Cloudflare.

Qué construye la skill

Las dos caras de un producto digital, hechas con Claude Code y contigo decidiendo cada paso:

1. El dashboard, para tu equipo y para cada cliente de su propia empresa. Responde en cinco segundos si todo va bien, y un clic más muestra por qué.
2. La landing page que vende ese producto: enseña el producto real, explica cada función con un diagrama animado que se entiende en tres segundos, existe en dos idiomas con una URL por idioma y carga rápido en un teléfono lento.

Todo sobre Cloudflare: un Worker con la API, una base D1, archivos en R2 y la landing en su propio Worker. Un comando para publicar cada pieza y ningún servidor que mantener.

Lo que trae para los reportes

• Rango de fechas con atajos (30 días, 90 días, 12 meses, todo) y fechas propias, en la zona horaria de tu negocio. El rango queda en el enlace, para compartirlo.
• Comparación justa contra el período anterior con los mismos días, no contra un mes más corto.
• Cada número se abre. La barra "8 a 14 días" muestra qué tickets son, quién los atiende y cuánto llevan esperando.
• Imprimir como PDF con encabezado de informe, siempre en tema claro y con el nombre del archivo ya puesto.
• Vista del cliente para tu equipo: ves el tablero exactamente como lo ve el cliente antes de mandarle un PDF.
• Portal del cliente: cada cliente entra a su tablero, imprime y exporta, sin ver nunca lo interno.
• Exportar a Excel con tildes bien, sin columnas internas y sin fórmulas que se ejecuten al abrir el archivo.

Seguridad multiempresa, resuelta desde el primer día

El servidor decide quién ve qué, denegado por defecto. Cada ruta aplica el alcance de la persona, incluidas las que se olvidan: exportar, imprimir, buscar, contar, avisos y adjuntos. Las respuestas se arman con una lista blanca de campos por rol, así que un costo interno nunca sale del servidor. La skill trae ese código listo para adaptar, con sus pruebas automáticas: que un cliente no vea otra empresa, que no pueda pedir la vista del equipo y que, sin sesión, todo responda 401.

Paso 1. Instala la skill

Necesitas Node.js 22 o más reciente, git y una cuenta de Cloudflare. Descarga el archivo, descomprímelo y copia la carpeta dentro de tus skills:

~/.claude/skills/dashboard-y-landing/

En Windows es C:\Users\TU-USUARIO\.claude\skills\, con SKILL.md directo dentro de la carpeta.

Antes de construir nada, abre templates/dashboard/index.html con doble clic: es un tablero de demostración con datos inventados donde ves en vivo el rango de fechas, el detalle al clic, la vista del cliente, el informe para imprimir y la exportación.

Paso 2. Pega este primer prompt

Abre Claude Code en una carpeta vacía (o en tu proyecto, si ya existe) y pega algo así, con los datos de tu negocio:

Usa la skill dashboard-y-landing. Quiero el tablero para mis clientes y la landing de mi servicio.

Mi negocio: soporte técnico para empresas en Ciudad de Panamá.
Quién entra: yo, mi equipo de técnicos y un contacto de cada empresa cliente.
Lo que cada cliente quiere ver: sus tickets abiertos, cuánto tardamos en responder y las horas del mes.
Lo que el cliente nunca debe ver: notas internas, estimados y quién registró cada hora.
Zona horaria: Panamá. Idiomas de la landing: español e inglés.

Empecemos por la Ficha: hazme las preguntas que falten, de dos o tres a la vez. Muéstrame la matriz
de roles antes de las pantallas. No escribas código hasta que te diga "adelante" y pídeme permiso
antes de tocar mi cuenta de Cloudflare.

Mientras construyes, usa datos de prueba inventados. Nunca pegues datos reales de tus clientes en el chat.

Qué tienes al final

• Un tablero que responde en cinco segundos, con modo claro y oscuro y que se usa en el celular.
• Reportes por fechas con comparación, detalle al clic, PDF y Excel.
• Un portal donde cada cliente ve solo su empresa, y una vista del cliente para tu equipo.
• Pruebas que pasan, y en producción: 401 sin sesión y 403 al pedir otra empresa.
• Una landing bilingüe con el producto real, lista para Google y medida con números (Lighthouse y CLS).

Errores típicos

• "En la pantalla no se ve, así que está protegido." No: si el dato llega al navegador, cualquiera lo ve en la pestaña de red. Se corta en el servidor.
• El reporte de septiembre cuenta tickets del 1 de octubre. El servidor cortó el día en UTC. Los cortes se hacen en la zona horaria del negocio.
• La migración se aplicó en local y no en producción. La ruta nueva falla con el primer cliente. Primero la migración remota, verificada, y después el código.
• El segundo idioma se cambia con JavaScript. Para Google no existe. Cada idioma necesita su URL.
• Cambiar el dominio y romper el correo. Antes de tocar el DNS se listan todos los registros y el correo no se toca.

Para quién es

Para quien vende un servicio recurrente y quiere que sus clientes vean el trabajo: agencias, soporte técnico, contabilidad, mantenimiento, consultoras. Para quien tiene un producto SaaS y necesita su panel y su landing. Y para quien ya armó un panel con IA y quiere revisarlo contra la lista de seguridad multiempresa: esa lista sola vale la descarga.

No es para quien quiere que se haga solo. Tú decides, pruebas y apruebas; Claude construye, explica y verifica.

Si prefieres hacerlo acompañado

En el taller presencial se construye en vivo. Y si necesitas el dashboard o la landing de tu producto hechos por nuestro equipo, agenda una conversación.