
Galería de vista previa
Skills similares
Ver todas las SkillsLo que obtienes
- El código fuente completo del bloque Panel de líneas de KPI: el archivo del componente más un ejemplo de uso ejecutable, listo para pegar y editar.
- Un contrato visual por escrito: paleta, escala tipográfica, radio, grosor de iconos y tiempos de animación, todo como tokens que editas en un solo lugar.
- La configuración del gráfico se entrega como datos simples: cambia las series por las tuyas y la capa de gráficos se encarga del resto.
Ideal para
- Necesitas una visualización de datos en una página y prefieres no configurar una librería de gráficos.
- Quieres que la paleta y los espaciados del gráfico encajen con el resto de la página.
- Quieres código fuente legible que puedas editar, no otra dependencia que mantener actualizada.
No es para
- Equipos que ya tienen un sistema de diseño maduro: esta paleta y esta escala tipográfica chocarán con las suyas.
- Quien busque un paquete npm versionado; esto te entrega código fuente que mantienes tú.
- Gráficos que necesiten datos en streaming en tiempo real o desplazamiento virtualizado sobre conjuntos muy grandes.
Informes para clientes y direcciónDivulgación científica y técnicaDiseño web y experiencias digitalesCrear infografíaCrear visuales de UICrear página webResultado editableVisualmente pulidoPara principiantesNeutro cálidoAcento verde azuladoFondo generativo
Acerca de esta Skill

Pegas un bloque y aparece en la página una visualización de datos real, bien dibujada y no esbozada en SVG. Pon tus cifras y las formas se vuelven a dibujar solas.
Lo que obtienes
- El código fuente completo del bloque Panel de líneas de KPI: el archivo del componente más un ejemplo de uso ejecutable, listo para pegar y editar.
- Un contrato visual por escrito: paleta, escala tipográfica, radio, grosor de iconos y tiempos de animación, todo como tokens que editas en un solo lugar.
- La configuración del gráfico se entrega como datos simples: cambia las series por las tuyas y la capa de gráficos se encarga del resto.
Cómo usarlo
- Dile a tu asistente dónde va la sección: primero lee tu proyecto y luego escribe el bloque tal como ya está escrito ese proyecto.
- Sustituye los textos por los tuyos. Los tamaños de letra y el espaciado se mantienen solos.
- Cambia las cifras por tus propias series: el gráfico se redibuja y los colores y ejes se mantienen coherentes.
- Revísalo en un móvil antes de publicar. Ya está construido para verse bien ahí.
Lo que necesitas antes de empezar
- Dependencias
- ECharts — obligatorio
- Última prueba
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Reseñas de usuarios
Cargando reseñas…






