neoris/Nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Nexus/FIGMA-UI-UPDATE.md

8.6 KiB
Raw Blame History

🎨 Actualización UI Basada en ChatGPT UI Kit (Figma)

Referencia

Figma Design: ChatGPT UI Kit - AI Chat - Community

Node ID: 665-2049

✅ Cambios Implementados

1. Paleta de Colores Exacta del UI Kit

Antes (Genérico)

--bg-primary: #0f0f0f
--bg-secondary: #171717
--accent-primary: #19c37d

Después (ChatGPT UI Kit)

--bg-primary: #202123        /* Sidebar - color oficial */
--bg-secondary: #343541      /* Main chat area */
--bg-tertiary: #444654       /* User messages */
--message-user-bg: #343541   /* Fondo mensaje usuario (oscuro) */
--message-ai-bg: #444654     /* Fondo mensaje AI (claro) */
--accent-primary: #10a37f    /* OpenAI green oficial */
--text-primary: #ececf1      /* White text */
--text-secondary: #c5c5d2    /* Gray text */

2. Diseño de Mensajes Alternado

El ChatGPT UI Kit usa un patrón distintivo donde los mensajes alternan entre dos fondos:

/* Usuario - fondo más oscuro */
.message.user {
    background: #343541;
}

/* AI - fondo más claro */
.message.ai {
    background: #444654;
}

Características:

  • ✅ Fondos alternados (no transparentes)
  • ✅ Ancho máximo de 48rem (768px)
  • ✅ Padding de 24px vertical
  • ✅ Gap de 24px entre avatar y texto
  • ✅ Borde divisor sutil entre mensajes

3. Avatares Tipo ChatGPT

/* Avatar del usuario - Purple */
.message.user .message-avatar {
    background: #5436da;
    border-radius: 4px;  /* Semi-redondeado, no circular */
    width: 30px;
    height: 30px;
}

/* Avatar de AI - OpenAI Green */
.message.ai .message-avatar {
    background: #10a37f;
    border-radius: 4px;
    width: 30px;
    height: 30px;
}

4. Input Area Mejorado

.input-wrapper {
    background: #444654;        /* Fondo gris claro */
    border-radius: 16px;        /* Muy redondeado */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Focus state con el verde de OpenAI */
.input-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 3px rgba(16, 163, 127, 0.2);
}

Botón de envío:

  • ⭕ Deshabilitado: fondo transparente, gris
  • ✅ Habilitado: fondo verde #10a37f

5. Tarjetas de Sugerencias

.suggestion-card {
    background: #444654;           /* Gris claro */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
}

.suggestion-card:hover {
    background: #40414f;           /* Más oscuro al hover */
    transform: translateY(-2px);
}

6. Tipografía

/* Mensajes */
font-size: 16px;
line-height: 1.75;  /* Más espaciado que antes */

/* Input */
font-size: 16px;
line-height: 1.5;

/* Títulos de sugerencias */
font-size: 14px;
font-weight: 600;

7. Espaciado Consistente

--spacing-xs: 4px
--spacing-sm: 8px
--spacing-md: 12px
--spacing-lg: 16px
--spacing-xl: 20px
--spacing-2xl: 24px    /* Nuevo */
--spacing-3xl: 32px    /* Nuevo */

8. Bordes y Sombras

/* Bordes sutiles con transparencia */
--border-color: rgba(255, 255, 255, 0.1);
--border-light: rgba(255, 255, 255, 0.15);
--divider: rgba(255, 255, 255, 0.05);

/* Sombras más pronunciadas */
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
--shadow-focus: 0 0 0 3px rgba(16, 163, 127, 0.2);

📊 Comparación Visual

Antes

┌────────────────────────────────────┐
│ 👤 Mensaje usuario                │  ← Fondo #2f2f2f
│    (gris oscuro uniforme)          │
└────────────────────────────────────┘

┌────────────────────────────────────┐
│ 🤖 Mensaje AI                      │  ← Fondo transparente
│    (sin fondo)                     │
└────────────────────────────────────┘

Después (ChatGPT UI Kit)

┌────────────────────────────────────┐
│ 👤 Mensaje usuario                │  ← Fondo #343541 (oscuro)
│    Avatar: Purple #5436da          │
└────────────────────────────────────┘

┌────────────────────────────────────┐
│ 🤖 Mensaje AI                      │  ← Fondo #444654 (claro)
│    Avatar: Green #10a37f           │
└────────────────────────────────────┘

🎯 Elementos Clave del UI Kit

1. Sistema de Color Dual

  • Oscuro (#343541): User messages, sidebar
  • Claro (#444654): AI messages, input, cards

2. Verde OpenAI Oficial

  • Primary: #10a37f
  • Hover: #0e8c6f
  • Active: #0d7a5f

3. Purple para Usuario

  • Avatar: #5436da (distintivo de ChatGPT)

4. Transparencia Sutil

  • Bordes: rgba(255, 255, 255, 0.1) a 0.15
  • Divisores: rgba(255, 255, 255, 0.05)
  • Hover: rgba(255, 255, 255, 0.025)

5. Bordes Semi-redondeados

  • Avatares: 4px (no circulares)
  • Cards: 12px
  • Input: 16px (muy redondeado)
  • Botones: 6-8px

📐 Dimensiones Exactas

Contenedor Principal

max-width: 48rem;  /* 768px */
padding: 24px 16px;

Mensajes

padding: 24px 0;
gap: 24px;  /* Entre avatar y texto */

Avatares

width: 30px;
height: 30px;
border-radius: 4px;

Input

border-radius: 16px;
padding: 12px;
min-height: 44px;  /* Tappable en móvil */

Botones

width: 32px;
height: 32px;
border-radius: 6px;

🎨 Guía de Uso de Colores

Fondos

Elemento Color Uso
Sidebar #202123 Navegación lateral
Chat principal #343541 Área de mensajes
Mensajes usuario #343541 Fondo oscuro
Mensajes AI #444654 Fondo claro
Input #444654 Campo de texto
Cards #444654 Sugerencias

Interacciones

Estado Color Uso
Hover rgba(255,255,255,0.05) Hover sutil
Active rgba(255,255,255,0.1) Click/press
Focus rgba(16,163,127,0.2) Input focus
Disabled rgba(255,255,255,0.1) Deshabilitado

Textos

Nivel Color Uso
Primary #ececf1 Texto principal
Secondary #c5c5d2 Texto secundario
Tertiary #8e8ea0 Texto terciario
Link #10a37f Enlaces

🚀 Cómo Probar

  1. Iniciar servidor:

    npm run dev

  2. Abrir en navegador:

    http://localhost:3000

  3. Comparar con Figma:

    • Abrir el diseño de Figma
    • Comparar colores con el inspector
    • Verificar espaciados
    • Probar interacciones

✨ Mejoras vs Versión Anterior

Aspecto Antes Ahora Mejora
Colores Genéricos Oficiales ChatGPT 100%
Mensajes Un fondo Alternados ✅
Avatares Circulares Semi-cuadrados ✅
Input Básico Redondeado + sombra ✅
Tipografía 15px 16px +6.7%
Espaciado Inconsistente Sistema 4-32px ✅
Bordes Sólidos Transparentes ✅
Max-width 780px 768px (48rem) Exacto

📱 Responsive

Los colores y espaciados se mantienen consistentes en todas las pantallas:

Desktop (> 768px)

  • Sidebar visible: #202123
  • Chat: #343541 / #444654
  • Max-width: 48rem

Tablet (≤ 768px)

  • Sidebar overlay: #202123
  • Mismos colores de chat
  • Padding reducido

Móvil (≤ 480px)

  • Header móvil: #202123
  • Mismos colores
  • Padding mínimo

🎯 Resultado Final

La interfaz ahora coincide exactamente con el ChatGPT UI Kit de Figma:

  • ✅ Colores oficiales de OpenAI
  • ✅ Patrón de mensajes alternados
  • ✅ Avatares semi-redondeados
  • ✅ Input redondeado con focus verde
  • ✅ Verde oficial #10a37f
  • ✅ Purple para usuario #5436da
  • ✅ Tipografía 16px
  • ✅ Espaciado consistente 24px
  • ✅ Bordes con transparencia
  • ✅ Max-width 48rem

Fecha de actualización: 13 de Febrero, 2026
Diseño base: ChatGPT UI Kit (Figma Community)
Node ID: 665-2049
Estado: ✅ 100% Implementado y funcional