Files

T

egutierrez 0883155432 feat(design-system): DESIGN_SYSTEM.md + prompts + extract-design command

- frontend/DESIGN_SYSTEM.md: contrato del @fn_library (regla suprema para
  Claude Design y agentes).
- frontend/design_prompts/: 11 plantillas de prompt (onboarding, dashboard,
  crud, detail, settings, auth, error, custom, handoff_integrate) +
  questionnaire numerado para arranque rapido.
- .claude/commands/extract-design.md: workflow de 10 pasos para extraer
  componentes nuevos y mejoras desde exports "standalone" de Claude Design
  al registry, sync al espejo fn-design-system y push a gitea+github.
- .claude/scripts/extract_design_bundle.py: decodificador del bundle
  (base64+gzip en manifest, nombra JSX por heuristica de header).
- .gitignore: ignorar subrepos/*/ (el mirror fn-design-system es repo
  propio con remotes dataforge/fn-design-system + gutierenmanuel/fn-design-system).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-04-21 20:46:00 +02:00

1.5 KiB

Raw Blame History

Dashboard de analytics

Diseña una página de analytics usando analyticsPage como generator raíz. Respeta DESIGN_SYSTEM.md.

Contexto

Dominio: {QUÉ MIDE — ej. monitoreo de pipelines / ventas / tráfico web}
Audiencia: {QUIÉN LO VE — ej. operador, ejecutivo}
Frecuencia: {tiempo real / cada hora / diario}

Header

Título: {TÍTULO}
Subtítulo: {SUBTÍTULO — ej. "últimas 24h"}
Acciones (botones a la derecha): {LISTA — ej. "Refresh" (outline + IconRefresh), "Export" (ghost + IconDownload)}
Date range selector: {sí / no}

KPIs (fila de KpiCards)

Entre 2 y 6. Para cada uno:

label	value	unit	delta
{Runs totales}	{1284}	—	+12% positivo
{Success rate}	{97.3}	%	+0.4% positivo
{P95 latency}	{842}	ms	-8% positivo (bajar es bueno)
{Errores}	{34}	—	+5 negativo destructivo

Charts

{ENTRE 2 Y 6 charts. Para cada uno:}

id · título · tipo (line / bar / area / pie) · span (1 o 2) · series
Ej. runs · "Runs por hora" · line · span 1 · series success + failure
Ej. top · "Top pipelines" · bar · span 1 · series count
Ej. latency · "Latencia por etapa" · area · span 2 · stacked · series p50 + p95
Ej. domain · "Distribución por dominio" · pie · span 1 · donut

Notas

{Restricciones adicionales, ej. "sin header, se embebe en otra página"}

Entrégalo listo para Handoff to Claude Code. Los datos pueden ser mock realistas.

1.5 KiB Raw Blame History