Vista previa del sistema de diseño

Foundation.

Un único sistema de diseño, calmo, generoso, moderno y atemporal, pensado para alojar el Blueprint de cualquier proyecto y, mediante el ajuste de una sola capa de variables, ser reutilizado en cualquier organización.

WCAG 2.1 AA Responsive: móvil · tablet · escritorio Bilingüe ES / EN nativo Re-skinable por cliente
Ejemplo · KPIs del programa

Así se ven los indicadores.

Entregables Etapa 1
9 / 9
Aceptados por el cliente
Entrevistas planificadas
24+
120% del mínimo contractual
Perfiles diferenciados
15
P01 al P15
Sprint actual
1 / 5
Tipografía

Inter para todo, serif para los titulares heroicos.

Source Serif 4

--font-display

Reservada para titulares heroicos y números grandes (KPIs). Aporta peso institucional sin sentirse arcaica.

Inter

--font-body

Cuerpo, navegación, etiquetas, tablas, formularios. Excepcional legibilidad en pantallas y a tamaño pequeño.

Paleta

Un acento institucional, neutros cálidos.

Brand · Teal
#0d5b54
Brand soft
#d6ebe6
Ink
#0c0e10
BG warm white
#fafaf7
Success
#16704a
Warn
#8a5a00
Danger
#9b2c2c

Para reutilizar Foundation en otra organización en el futuro, basta con editar la variable --color-brand (y opcionalmente --color-brand-soft / --color-brand-2). Todo el sistema sigue.

Componentes base

Cómo se sienten al usarlos.

Botones

Etiquetas

Marca Completo Pendiente Info Neutro

Tooltips bilingües

Pase el cursor sobre TDR o BPMN para ver la explicación.

Cómo se verá el Blueprint

Vista de Inicio (avance).

Estado del Programa

Etapa 1 (Discovery) firmada y cerrada. Etapa 2 (Sistema Core) inició el 21 de abril de 2026 con cinco sprints quincenales hasta el 30 de junio.

Sprint 1 / 512% · Día 7 de 70

Hallazgos clave del Discovery

"El mismo productor tiene una carpeta aquí, otra en FOTESIR, y el ingeniero de campo lleva sus notas en una libreta aparte." INT-E1-007 · Técnico de oficina regional
Entregables oficiales

Etapa 1, los nueve entregables firmados.

ID Entregable Formato Estado
E1.1Plan de Trabajo DetalladoDocumentoFirmado
E1.2Diagnóstico InstitucionalDocumentoFirmado
E1.3Mapeo de Procesos AS-IS / TO-BE (BPMN)Documento + diagramasFirmado
E1.4Arquitectura Técnica + Diagramas C4Documento + diagramasFirmado
E1.5Sistema de Diseño Interactivo (prototipo navegable)Prototipo HTMLFirmado
E1.6Especificación Funcional DetalladaDocumentoFirmado
E1.7Plan de Proyecto Etapa 2 + GanttDocumento + GanttFirmado
E1.8Matriz de RiesgosDocumento + hoja de cálculoFirmado
E1.9Presentación Ejecutiva FinalPresentaciónFirmado

Panel Interno disponible

Vista para admins y managers con telemetría real en vivo del proyecto: tiempo, tokens, costo IA y ahorro vs. equivalente humano. Oculta para el rol Cliente.

Construido íntegramente en HTML, CSS y JavaScript vivos, sin dependencia de plataformas de prototipado externas. Cada artefacto del proyecto es navegable, modificable, exportable y propiedad permanente del cliente final.

Área restringida · Visible para admins y managers. Oculta para roles Cliente. MFA requerido en producción.
Panel Interno · Telemetría real

Cuánto tiempo, cuántos tokens, cuánto valor.

Datos reales extraídos del transcripto de la sesión de Claude Code en Cowork dedicada a este proyecto. Refresco mediante telemetry/extract-telemetry.py, sin datos de muestra.

Tiempo activo IA
,
Suma de turnos < 30 min
Tokens consumidos
,
Input + output + caché
Costo IA acumulado
,
Tarifas Sonnet 4.x retail
Ahorro vs. equivalente humano
,
,
IA · este proyecto

Lo que costó hacerlo con Claude

Horas activas
, h
Costo en USD
$,

Tarifas Sonnet 4.x: input $3/M, output $15/M, lectura caché $0.30/M, escritura caché $3.75/M.

Equivalente humano · estimado

Lo que habría costado solo con personas

Horas estimadas
, h
Costo estimado
$,

Multiplicador 10× (rango industria 8–15× para análisis + redacción + investigación). Tarifa $125 USD/h consultor sénior.

Tareas, tiempo y costo real por actividad

Cada hora invertida y cada token consumido se atribuye a una tarea concreta. Las tareas pertenecen a hitos. Los costos se calculan en tiempo real y se acumulan al hito y al programa completo.

Trabajando ahora en
,
00:00:00

Usa Registro manual para tiempo trabajado fuera de la sesión (entrevistas, visitas a oficinas, llamadas). Usa el cronómetro de arriba para sesiones en vivo.

Costo acumulado por hito

Suma de horas humanas + costo IA + gastos manuales de todas las tareas que pertenecen al hito.

Actividad por día

Turnos (mensajes + respuestas) por jornada de trabajo.

Herramientas más usadas

Top operaciones invocadas por la IA en este proyecto.

Detalle de tokens e interacciones
MétricaValor

Gastos del proyecto (entrada manual)

Combustible, comida, herramientas, hosting, licencias. Los consultores agregan entradas a medida que avanza el proyecto.

Aún no hay gastos registrados. La primera entrada habilita la columna de costos no-IA.

Cómo se calculan estos números

Los datos provienen del transcripto JSONL que Claude Code mantiene por sesión local. El script telemetry/extract-telemetry.py recorre el archivo, agrega tokens reportados por la API por cada turno asistente, y aplica las tarifas vigentes de Sonnet 4.x para producir el costo. El tiempo activo se calcula sumando los intervalos entre turnos consecutivos cuando son menores a 30 minutos (intervalos mayores se asumen como pausas humanas).

El equivalente humano usa 10× como multiplicador del tiempo activo IA, punto medio del rango 8–15× que la industria reconoce para tareas de análisis, redacción técnica e investigación documental ejecutadas a nivel consultor sénior. Tarifa horaria base: $125 USD.

Refresco: corre python3 telemetry/extract-telemetry.py desde la carpeta del dashboard después de cada sesión significativa. El JSON resultante se sirve estáticamente al panel.

Sección en construcción

Esta vista forma parte de el Blueprint completa. Se construirá una vez aprobado el sistema de diseño Foundation que estás viendo en Inicio.