Inteligencia Artificial en Documentación de Sistemas de Diseño

Inteligencia Artificial para Sistemas de Diseño

La Inteligencia Artificial (IA) puede ayudar a los perfiles involucrados en el Sistema de Diseño -profesionales del UI y equipo de front - a la hora de mejorar sus flujos de trabajo y optimizar el proceso de creación, mantenimiento y documentación de los Sistemas de Diseño.

En términos prácticos, podemos hablar de la implementación de este tipo de herramientas en dos sentidos:

• Asistencia de chatbots, como ChatGPT para la creación de la documentación, y documentación de componentes. Uso de plugins en nuestra herramienta de diseño de cabecera. En el caso de Figma existen dos categorías de plugins: los que automatizan tareas existentes, como Automator, o los que extienden algún tipo de feature como revisión de analíticas, testing o mejora de la accesibilidad.
• A partir de un desing system ya existente, entrenar a herramientas de IA para que creen diseños a partir de ese sistema.

ChatGPT para crear y documentar Sistemas de Diseño

La incorporación de design tokens, librerías de componentes y guías de diseño en la documentación de un diseño, así como el ajuste de todos los prototipos y entregables a la guía de estilo y principios del sistema, son fundamentales para la consistencia de los diseños, la calidad del resultado y la colaboración entre los equipos de diseño y desarrollo. Este proceso puede simplificarse gracias a ChatGPT.

Veamos cómo utilizar ChatGPT en esta parte del proceso

Paso 1. Dale contexto a ChatGPT

Actúa como un product designer. Estás trabajando en [introduce aquí la información y contexto de tu producto].

Necesitas crear la documentación del sistema de diseño para un producto.

A continuación te iré especificando los componentes para los que vas a crear la documentación y te voy a dar la información que vas a crear en cada caso.

Toda la documentación que generes tiene que incluir títulos H1, H2… en su formato, así como cualquier otra consideración de formato que sea necesaria.

Paso 2. Crea la documentación componente por componente

Genera la documentación para el sistema de diseño para el componente Botón.

Incluye la siguiente información:

• Generalidades del componente
• Uso
• Anatomía
• Variantes
• Tamaños
• Do and dont’s

Ten en cuenta la siguiente información de mi sistema de diseño para crearlo:

• Tamaños
• Color de texto
• Color de background
• Especificaciones

👉Puedes ver un ejemplo práctico de uso ChatGPT para crear y documentar un sistema de diseño, en esta clase del curso Chat GPT para Product Designers👈

Diseñar con ChatGPT a partir de un Sistema de Diseño

El ritmo al que avanza la Inteligencia Artificial hace que ya sea posible ir un paso más allá y poder generar diseños con IA a partir de un design system ya desarrollado. De hecho, existen ya experiencias, como la del experimento llevado a cabo por el equipo de diseño de AirBnB. ¿Cómo se podría llevar a cabo esto con ChatGPT?

1. Entrenar a ChatGPT para entender tu sistema de diseño: puedes facilitar a ChatGPT toda la información contextual necesaria para entender tu sistema de diseño - con el uso de plugins, es tan sencillo como facilitarle una URL a la documentación-. Pídele que te haga tantas preguntas como sean necesarias.
2. Prototipado: una vez que has entrenado a ChatGPT, puedes pedirle que genere la estructura de páginas y plantillas de tu producto.
3. Generación de código: a partir de esas plantillas, y con la IA entrenada en el sistema de diseño, puedes solicitar que genere el código HTML, CSS y Javascript.
4. Revisión manual: es importante que revises manualmente lo que ha generado ChatGPT, al solicitarle la generación de plantillas, puede crear una estructura lógica, pero no entender bien el uso de cada componente. Recuerda que tu expertise como profesional del diseño es fundamental en todo el proceso.

Ejemplo: HTML y CSS con ChatGPT con base en Material Design

👉Consulta la conversación completa con ChatGPT 👈