01 · Proyectos
Proyecto personal
Un CRM ficticio, del design system al prototipo
Un proyecto escaparate que muestra cómo trabajo hoy: el design system generado desde Claude Cowork conectado a Figma, y después la experiencia de usuario y el prototipado terminados a mano en Figma.
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.