360 lines
8.6 KiB
Markdown
360 lines
8.6 KiB
Markdown
# 🎨 Actualización UI Basada en ChatGPT UI Kit (Figma)
|
|
|
|
## Referencia
|
|
**Figma Design**: [ChatGPT UI Kit - AI Chat - Community](https://www.figma.com/design/e0F6ZXsMuseZpKbc6IU3jR/ChatGPT-UI-Kit--AI-Chat--Community-?node-id=665-2049&p=f&t=c4ig0zh1Et0ksmww-0)
|
|
|
|
**Node ID**: 665-2049
|
|
|
|
---
|
|
|
|
## ✅ Cambios Implementados
|
|
|
|
### 1. **Paleta de Colores Exacta del UI Kit**
|
|
|
|
#### Antes (Genérico)
|
|
```css
|
|
--bg-primary: #0f0f0f
|
|
--bg-secondary: #171717
|
|
--accent-primary: #19c37d
|
|
```
|
|
|
|
#### Después (ChatGPT UI Kit)
|
|
```css
|
|
--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:
|
|
|
|
```css
|
|
/* 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**
|
|
|
|
```css
|
|
/* 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**
|
|
|
|
```css
|
|
.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**
|
|
|
|
```css
|
|
.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**
|
|
|
|
```css
|
|
/* 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**
|
|
|
|
```css
|
|
--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**
|
|
|
|
```css
|
|
/* 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
|
|
```css
|
|
max-width: 48rem; /* 768px */
|
|
padding: 24px 16px;
|
|
```
|
|
|
|
### Mensajes
|
|
```css
|
|
padding: 24px 0;
|
|
gap: 24px; /* Entre avatar y texto */
|
|
```
|
|
|
|
### Avatares
|
|
```css
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 4px;
|
|
```
|
|
|
|
### Input
|
|
```css
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
min-height: 44px; /* Tappable en móvil */
|
|
```
|
|
|
|
### Botones
|
|
```css
|
|
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**:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
2. **Abrir en navegador**:
|
|
```
|
|
http://localhost:3000
|
|
```
|
|
|
|
3. **Comparar con Figma**:
|
|
- Abrir el [diseño de Figma](https://www.figma.com/design/e0F6ZXsMuseZpKbc6IU3jR)
|
|
- 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
|
|
|