02 · Proyectos
Proyecto personal
CRM – Design system SLDS 2
La solicitud
Un showcase sobre un caso realista: un equipo comercial que sigue sus cuentas, sus oportunidades, sus tareas y las renovaciones de contratos. El proyecto también debía mostrar mi forma de trabajar hoy, con la IA para la puesta en marcha y Figma para la experiencia.
La solución
Partí del Salesforce Lightning Design System 2 y conservé sus nombres de tokens, para que una pantalla diseñada en Figma se programe directamente. Claude Cowork, conectado a Figma, generó las tres colecciones de variables y una primera versión de los componentes, controles de contraste incluidos. Después definí la identidad del proyecto y terminé a mano la lista de cuentas, la ficha de cuenta, la página de inicio comercial y el prototipo.
Partir de un design system probado
Un CRM es una herramienta densa: listas, fichas, un pipeline, tareas. Salesforce Lightning Design System 2 ya resolvió buena parte de esas cuestiones, y sus global styling hooks (--slds-g-color-*, --slds-g-spacing-*) dan un vocabulario común al diseño y al código. Mantener esos nombres tal cual permite que una pantalla diseñada en Figma se programe directamente con SLDS.
Una nueva identidad encima
Sobre esa base, una identidad visual propia del proyecto: un azul marino para todo lo interactivo, botones, navegación, foco; un rojo reservado al logo y a los estados de alerta; una paleta secundaria limitada a los iconos de objetos y a la visualización de datos. En tipografía, Ubuntu, sobre la escala de SLDS: base de 13 px, ratio 1,15.
El design system, generado desde Claude Cowork
Claude Cowork, conectado a Figma mediante el servidor MCP, creó las tres colecciones de variables. Las primitivas contienen los valores en bruto, de navy-50 a navy-900. Las fundaciones reúnen espaciados (de 4 a 56 px), radios, elevaciones y estilos de texto. Los alias retoman los hooks semánticos de SLDS y apuntan a las primitivas. Después Claude montó una primera versión de los componentes: botones, campos, celdas de tabla, badges, pestañas, tarjetas. Mi trabajo en esa etapa: encuadrar la petición, revisar cada colección, ajustar.
La IA se encarga de la puesta en marcha. El tiempo ganado va a la jerarquía, a los recorridos y a los detalles de interacción.
Accesibilidad comprobada desde las variables
Antes de dibujar una sola pantalla, Claude comprobó los contrastes de los pares texto y superficie en nivel AA. Se nota en la paleta: los enlaces en azul (blue-600), los mensajes de alerta en rojo oscuro (red-600), y el rojo de marca reservado al logo. Cada componente interactivo tiene además su estado de foco, hasta las casillas de las tablas.
Terminar la experiencia en Figma
La generación da una base sólida, no un producto terminado. Lo demás se hizo en Figma, pantalla por pantalla: la lista de cuentas, la ficha de cuenta y el inicio comercial. Densidad de las tablas, orden de la información en la ficha, lugar de las acciones: ahí se juega la experiencia.
Un prototipo para probar
El prototipo arranca en la lista de cuentas. Pasar el ratón por una fila, seleccionar con una casilla, abrir la ficha desde el nombre de la cuenta, un menú de acciones al final de cada fila: las interacciones viven en las variantes de los componentes, lo que las hace reutilizables de una pantalla a otra.