Prop For That es una herramienta desarrollada por Adam que permite a los diseñadores agénticos crear propiedades CSS en vivo basadas en datos que normalmente no están accesibles en el navegador. Esto incluye datos como la posición del cursor, el progreso de una carga o el estado de un formulario. La herramienta utiliza atributos de datos para desencadenar scripts que luego pasan los datos a las hojas de estilo CSS. Los diseñadores pueden entonces utilizar estas propiedades en vivo para crear efectos visuales dinámicos y personalizados. Por ejemplo, se puede utilizar la posición del cursor para mover un elemento en la pantalla o el progreso de una carga para mostrar una barra de progreso. La herramienta es fácil de usar, ya que solo requiere importar la biblioteca, declararla en HTML y luego estilo en CSS. Los demos de la herramienta muestran su potencial, con ejemplos como un slider de color que cambia según la posición del cursor o un efecto de sombra que se ajusta según el estado de un formulario. Esta herramienta puede ser útil para los diseñadores agénticos que buscan crear experiencias visuales más interactivas y personalizadas. En relación con el Theming, Prop For That puede ser utilizado para crear temas dinámicos que se ajusten a las preferencias del usuario o a las condiciones de la aplicación. Además, la herramienta puede ser utilizada en conjunto con el Style Dictionary para crear un sistema de diseño más coherente y escalable.
Fuentes
- 01 css-tricks.comcss-tricks.com/prop-for-that →
- 02 Theming/glosario/theming
- 03 Cursor/glosario/cursor
- 04 Token de componente/glosario/token-de-componente
- 05 Style Dictionary/glosario/style-dictionary
A seguir
Redactado con ayuda de IA, contrastado contra su fuente y firmado por Redacción del Instituto.
Del diario al fondo de armario
- GlosarioAI-readiness de un design systemHasta qué punto un design system está preparado para que lo use una IA por su cuenta: con los valores de diseño (tokens) en un formato estándar, la documentación escrita de forma que una máquina pueda leerla, las reglas dichas de forma explícita y una vía de conexión (un servidor MCP) para que el agente lo consulte.
- GlosarioFigma Code ConnectUna función de Figma que conecta cada elemento de diseño con el trozo de código real que le corresponde en tu proyecto. Así, cuando un agente de IA genera pantallas, usa tus componentes ya construidos en lugar de inventarse otros nuevos. La conexión se le pasa al agente a través de un MCP (un canal por el que las herramientas le dan contexto al modelo).
- GlosarioFigma MCP (Dev Mode MCP server)Una conexión que pasa al agente de IA los datos reales de un diseño de Figma (sus colores, sus componentes, sus medidas) en vez de una simple imagen. Así, cuando el agente convierte el diseño en código, parte de la información exacta y no tiene que adivinar mirando una captura. MCP es el estándar que hace posible esa conexión.
