jesusgarciafernandez 0. Filosofía Human-Centric AI
Esta habilidad construye el lenguaje común de la creación digital, utilizando la tecnología para automatizar la repetición y liberar al ser humano para que se centre en la innovación y la empatía.
El Rol del Humano: El Arquitecto del Sistema de Diseño debe ser un "Legislador de la Coherencia". La IA puede generar variantes de componentes, documentar propiedades técnicas y verificar contrastes automáticamente, pero solo el humano puede definir la "voz" visual del sistema, decidir cuándo romper una regla por un bien experiencial mayor y asegurar que los componentes respeten la diversidad humana, facilitando una interacción inclusiva y digna para todos. Empoderamiento: Usamos la tecnología para automatizar el traspaso (hand-off) a código y sincronizar librerías de forma masiva, permitiendo que el equipo de diseño se centre en la experiencia de usuario y en la resolución de problemas complejos.
1. Descripción Detallada
Un Design System (DS) es la fuente única de verdad de un producto digital. No es solo un UI Kit o una librería de Figma; es Ingeniería de la Escalabilidad Creativa. El enfoque v2.0 incorpora la Gobernanza de Diseño y los Design Tokens Dinámicos, donde la arquitectura de los componentes (Átomos, Moléculas, Organismos) está vinculada a variables de código (Tokens) que permiten actualizar toda la plataforma en minutos, garantizando una consistencia absoluta, una accesibilidad nativa y una reducción drástica de la deuda técnica tanto en diseño como en desarrollo (DesignOps).
2. Escenarios de Aplicación
- Productos Digitales de Gran Escala: Coordinación de múltiples equipos que necesitan usar las mismas piezas sin inventar soluciones desde cero.
- Estrategias Multi-plataforma (Web/iOS/Android): Unificación del lenguaje visual para que la marca se sienta igual en todos los dispositivos.
- Rediseños y Rebrandings Masivos: Repintado de cientos de pantallas de forma automática modificando los Design Tokens centrales.
- Mejora de la Eficiencia en el 'Hand-off': Eliminación de las dudas de desarrollo mediante una documentación viva y componentes listos para usar en código.
- Sistemas de Diseño para White-label: Creación de arquitecturas de componentes que cambian de "piel" (Skinning) fácilmente para diferentes clientes.
3. Requisitos de Implementación
- Dominio Avanzado de Figma Sistémico: Uso de Componentes, Variantes, Propiedades, Auto Layout y Variables (Modos).
- Conocimiento de Arquitecturas Front-end: Familiaridad con React, Vue o Web Components para alinear el diseño con la realidad tecnológica.
- Gestión de Design Tokens: Uso de herramientas de sincronización (ej: Tokens Studio, Style Dictionary) para conectar Figma con el repositorio de código.
4. Diferencial: Librería de Diseño vs. Design System Estratégico v2.0
| Dimensión | Enfoque "Caja de Herramientas" | Design System Sistémico (v2.0) |
|---|---|---|
| Conectividad | Aislado de desarrollo (Solo visual). | Sincronizado mediante Design Tokens (SSOT). |
| Mantenimiento | Manual / Penoso. | Centralizado y Automático (Escalabilidad real). |
| Documentación | Inexistente / Estática. | Viva, técnica y basada en escenarios reales. |
| Gobernanza | "Vale todo" / Anarquía. | Reglas de contribución y de uso claras. |
5. Instrucciones y Pasos Detallados (Protocolo Maestro)
Fase 1: Definición de Fundaciones y Tokens de Diseño
Objetivo: Crear el ADN del sistema antes de construir las piezas.
- Auditoría de Tokens: Define los valores base (Colores, Tipografía, Espacios, Sombras) con nombres semánticos (Ej:
button-primary-bgvsblue-500). - Arquitectura Atómica: Empieza por los elementos más pequeños (Botones, Inputs, Badges) y escala hacia estructuras complejas.
Prompt Maestro de Dirección de Design Systems:
Actúa como Design Systems Architect y Especialista en DesignOps. Para el producto [PRODUCTO], realiza el siguiente plan estructural:
1. Define la 'Estrategia de Nombramiento' de los Design Tokens (Semántica vs Primitiva).
2. Diseña la Arquitectura de Componentes Core: [Botones con sus 5 estados, Formularios, Sistema de Iconografía].
3. Establece las Reglas de Adaptación: [Grid responsivo, márgenes de seguridad y política de 'Dark Mode'].
4. Documenta la 'Gobernanza': ¿Cómo se propone un componente nuevo y cuándo se debe descartar uno antiguo?
5. Propón el 'Pipeline de Entrega': Sincronización entre Figma y el repositorio de GitHub mediante [HERRAMIENTA].
Fase 2: Construcción de Componentes, Documentación y Lanzamiento
... (Expansión técnica sobre el uso de Storybook para documentar componentes en código, la creación de guías de accesibilidad por componente y el plan de adopción para los equipos de producto) ...
Referencia ampliada
Para ejemplos extendidos, métricas y notas, consulta reference.md (cárgalo solo cuando necesites ese detalle).