PANTALLAS DE CONSTRUCCIÓN

• muestra el curso del tiempo
• permite que la construcción se active

Ejemplo:

2025 ───────── 2026 ───────── 2027

        (ahora)

Conducta de la interfaz

Click en el objeto

Muestra:

• Pasaporte
• participantes
• condición jurídica
• Riesgos

Click en la compañía. Muestra:

• proyectos
• función
• cargar

Click en línea. Muestra:

• Contrato
• Monto
• Plazos
• condición jurídica

Un click de riesgo. Muestra:

• descripción
• Crítica
• responsable

Sistema de color (necesario)

Esto convierte la interfaz en una interfaz inteligente sin texto:

• - No pasa nada.
• ○ Riesgo
• - El problema
• Datos/ neutral
• • Finanzas

Hipótesis de usuario mínima. Imaginen a un funcionario o inversionista:

• Abre el sistema
• Ve el objeto
• Ve lo siguiente:
• contratista
• Banco
• Riesgos
• Nota ○
• Clínica.
• Ve el problema.
• Adopta una decisión.

Todo en 10–20 segundos.

MVP versión de pantalla (realmente posible)

Tiene que ser:

- Condición (puntos + enlace)

Tarjeta del objeto

Lista de participantes

- Situación básica

- 1–2

No tienes que hacerlo.

❌ BIM

Analista complejo

- filtros complejos

○ Paneles sobrecargados

Cómo realizarlo (por el vidrio)

Frontend:

• React + Next.js
• Cytoscape.js (gráfico)
• React Query
• Tailwind

Componentes:

GraphCanvas

• dibujo de nodos
• Zoom
• drag

NodeCard

• Tarjeta emergente

SidePanel

• datos del objeto

Timeline

• Escala provisional

JSON para la columna (UI)

Este es el formato que debería venir con backend:

{

  "nodes": [

    { "id": "p1," "type": "project," "label": "GK North," "status": "risk"},

    { "id": "c1," "type": "company," "label": "El Empleador," "Estatus": "active"},

    { "id": "c2," "type": "company," "label": "Contractor," "status": "active"},

    { "id": "r1," "type": "risk," "label": "salir del plazo," "status": "high"}

  ],

  "edges": [

    { "source": "c1", "target": "p1", "type": "customer" },

    { "source": "c2", "target": "p1", "type": "contractor" },

    { "source": "p1", "target": "r1", "type": "risk" }

  ]

El mensaje principal de la pantalla. En términos duros:

No es una interfaz.

- Es una visualización de la realidad de la construcción.

Lo que tienes. Con esta pantalla, puedes:

• Mostrar un producto al inversor
• mostrar al Estado el sistema
• dar a los desarrolladores una tarea
• iniciar MVP

Siguiente paso. Ahora hay 3 puntos fuertes:

1. ○ Hacer una especialidad UI (pixel en pixel) para el diseñador

2. ○ Iniciar el código (React + Cytoscape)

3. Recoger la presentación del producto para atraer recursos

UI SPEC: CRISTALL DE CONSTRUCCIÓN (CORE SCREEN)

Estructura general layout

○ Red de pantalla

┌───────────────────────────────────────────────┐

│ TOP BAR                                      │

├──────────────┬───────────────────────┬────────┤

│ LEFT MENU    │   GRAPH CANVAS        │ RIGHT  │

│              │                       │ PANEL  │

│              │                       │        │

├──────────────┴───────────────────────┴────────┤

│ TIMELINE                                      │

└───────────────────────────────────────────────┘

TOP BAR

Composición:

○ Buscar

• Localización de objetos, empresas...
• debounce: 300ms
• Resultados:
• proyectos
• empresa

○ filtros

• Región (dropdown)
• situación (multi-select)
• Fase (multi-select)

○ Régimen

• toggle:
• Objeto
• Región
• Industria

- Usuario

• Avatar
• menú:
  
• perfil
• Salir

LEFT MENU ( Navigación)

Ancho:

• 72px (collapsed)
• 240px (expanded)

Párrafos

Conducta:

• hover → tooltip
• Resalto activo
• click ○ Cambio de contexto

GRAPH CANVAS (centro)

Componente sustantivo: GraphCanvas

Funciones: Representación del grafo

• Biblioteca: Cytoscape.js
• layout: force-directed

Espejos

Tipos de nodos:

• Título
• Situación (color)
• Fase
• Presupuesto
• Plazos

○ Asistencia

• Lista de empresas
• función
• condición jurídica

○ Riesgos

• Lista de riesgos
• severity
• condición jurídica

○ Contratos

• Número
• Monto
• condición jurídica

○ Medidas

• Nombrar una tarea
• :: Actualizar la situación
• Añadiendo riesgos

Empresa seleccionada

• Título
• tipo
• Calificación
• proyectos
• cargar

Riesgo seleccionado

• descripción
• Nivel
• Fecha
• responsable
• Botón cerrado

TIMELINE (base inferior)

Componente: Timeline

Visual:

• drag ○ Desplazamiento temporal
• clic → ir a la fecha
• Modo:
• Situación real
• Proyección

SITUACIÓN DEL SISTEMA

Loading

• skeleton UI
• Spinner en el centro

Empty

• No se dispone de datos
• El botón Crear objeto

Error

• mensaje
• retry

Partial Data

• parte de los nodos
• prevención

UX-PRAVIL (muy importante)

No hay formularios sobrecargados.

- sólo acciones a través del contexto;

Todo a través de un clic

- No hay navegación compleja.

Color = significado

El usuario lee una pantalla sin texto

80% ○ visual

→ 20% — Texto

DESIGN TOKENS

Colores:

• Primary: #2563EB
• Success: #16A34A
• Warning: #F59E0B
• Danger: #DC2626
• Neutral: #64748B

Fondo:

• Dark mode:
• bg: #0F172A
• panel: #1E293B

Impresión:

• Título: 16–20px
• Texto: 14px
• Firma: 12px

COMPONENT TREE

App

 ├── TopBar

 ├── Sidebar

 ├── GraphCanvas

 │    ├── Node

 │    ├── Edge

 │    └── Tooltip

 ├── EntityPanel

 └── Timeline

COMPONENTE CRÍTICO

En el caso de MVP, concéntrate en:

• GraphCanvas
• EntityPanel
• API graph

¿Qué es eso? Eso es lo siguiente:

• Diseño de documento
• misión de diseñador
• misión de frente a frente
• prototipo de producto

Una conclusión justa. No solo estás dibujando la interfaz.

○ Creamos una nueva forma de ver la construcción

Siguiente paso. Ahora hay dos vías poderosas:

1. ○ Crear una estructura Figma (pantallas + estados)

2. Empezar código (React + Cytoscape)

Hacemos una estructura Figma de nivel de producto, no sólo pantallas bonitas. Se trata de un sistema de archivos, páginas, componentes y estados que se puede entregar inmediatamente al diseñador y comenzar a trabajar.

🎯 FIGMA STRUCTURE

Cristal de Construcción (MVP)

○ Estructura del archivo Figma

Nombre del archivo: Crystal Construction — MVP UI Kit & App

Páginas (Pages)

1. Cover

2. Design System

3. Components

4. Layouts

5. Screens (Core)

6. Screens (States)

7. Flows

8. Dev Handoff

Page 1: Cover

Contenido:

• Nombre del producto
• Logotipo (si existe)
• (v0.1 MVP)
• Fecha

- Es importante para las presentaciones.

○ Page 2: Design System. La base de todo. Sin ella, habrá caos.

Color

○ Recursos básicos

• Primary — #2563EB
• Success — #16A34A
• Warning — #F59E0B
• Danger — #DC2626

Fondo (Dark UI)

• Background — #0F172A
• Panel — #1E293B
• Border — #334155

Neutral

• Text Primary — #E2E8F0
• Text Secondary — #94A3B8

Impresión

Rejilla

• 12-column grid
• Margin: 24px
• Gutter: 16px

Spacing

• 4 / 8 / 12 / 16 / 24 / 32

Página 3: Components. Eso es lo más importante. Hazlo como una biblioteca.

Buttons

Opciones:

• Primary
• Secondary
• Danger

Antecedentes:

• Default
• Hover
• Active
• Disabled

Input

• Default
• Focus
• Error
• Filled

Status Badge

Node. Es un componente clave.

Opciones:

Project Node

• Grande
• azul

Company Node

• Media
• gris

Risk Node

• Pequeño
• Rojo

Edge (comunicaciones)

• solid
• dashed
• red (risk)
• double (finance)

Panel Card

Usada en el panel derecho:

• title
• content
• actions

Page 4: Layouts. Recogemos el esqueleto de la pantalla.

Layout 1: Main App

TopBar

Sidebar | Graph | RightPanel

Timeline

Layout 2: Full Graph

Sin el panel derecho

Layout 3: List View

Para proyectos/empresas

Contenido:

• Graph
• Right Panel (object)
• Top Bar
• Timeline

Esta es la pantalla principal del producto.

Screen 2: Project Lis

• tabla
• filtros
• condición jurídica

Screen 3: Company List

• Lista de empresas
• Calificación
• función

Screen 4: Analytics

• KPI
• gráficos
• Mapa de riesgos

Page 6: Screens (States). Es muy importante. Aquí hay 80% UX.

Para Graph:

State 1 — Default

• objeto seleccionado

State 2 — Node Hover

• iluminación de los vínculos

State 3 — Node Selected

• Barra activa

Para el sistema:

Loading

• skeleton
• spinner

Empty

• No se dispone de datos
• CTA Botón

Error

• mensaje
• retry

Para Right Panel:

Object selected

Company selected

Risk selected

Page 7: Flows. Muestra los guiones.

Flow 1: Ver objeto

• Apertura
• Selección de objeto
• Análisis de las relaciones
• Ver el riesgo

Flow 2: Trabajo de riesgo

• Click de riesgo
• Abrir el panel
• Cierre del riesgo

Flow 3: Adición de un participante

- Los desarrolladores lo necesitan.

Page 8: Dev Handoff. Para ser entregado al desarrollo.

Contenido:

• tamaño de los componentes
• spacing
• colores
• estado

Obligación de:

• Auto Layout
• Variants
• Naming system

Naming Convention

Es muy importante.

Componentes:

Button/Primary

Button/Secondary

Node/Project

Node/Company

Node/Risk

Panel/Object

Panel/Company

Panel/Risk

Antecedentes:

Button/Primary/Hover

Node/Project/Active

Panel/Object/Expanded

Lo que debe hacerse primero

Día 1–2:

• Design System
• Colors
• Typography

Día 3–4:

• Components
• Node
• Panel

Día 5–6:

• Main Screen

- En una semana, ya tienes un producto.

Una conclusión justa. Esto ya no es un diseño.

Este es el modelo operativo de la interfaz del sector.

Siguiente paso 

1. Iniciar el desarrollo de UI (React)

2. Recoger la presentación del producto (basada en Figma)