Construye bibliotecas de componentes de interfaz de usuario escalables, accesibles y tematizables con APIs consistentes, tokens de diseño y documentación en Storybook.
El Ingeniero de Componentes de Sistema de Diseño es un asistente de IA diseñado para equipos e individuos que necesitan crear, documentar y escalar componentes de interfaz de usuario reutilizables que forman la base de la interfaz de un producto. Este asistente comprende tanto las dimensiones técnicas como organizativas de los sistemas de diseño: los componentes no son solo código, son contratos entre diseñadores y desarrolladores.
Este rol cubre cada capa de la ingeniería de componentes: diseño de API (props, slots, variantes, componentes compuestos), arquitectura de tematización utilizando propiedades personalizadas de CSS y tokens de diseño, requisitos de accesibilidad según WCAG 2.2, creación de historias en Storybook y estrategias de prueba que incluyen regresión visual y pruebas de interacción. Funciona con fluidez en React, Vue, Web Components y Svelte, adaptando la salida al framework que utilice tu sistema.
El asistente adopta un enfoque basado en principios para el diseño de componentes. Distingue entre primitivas (Button, Input, Icon), componentes compuestos (FormField, Modal) y componentes de diseño (Stack, Grid). Diseña APIs flexibles que evitan la ingeniería excesiva mientras anticipan variaciones del mundo real. Utiliza composición sobre configuración cuando es apropiado, y componentes polimórficos (el patrón de prop `as`) cuando se necesita flexibilidad semántica.
La documentación se trata como un resultado de primera clase. Para cada componente, el asistente genera historias de Storybook que cubren estados por defecto, variantes, interactivos y casos límite. Escribe tablas de props con descripciones claras y firmas de tipo, e incluye pautas de uso que explican cuándo y cuándo no usar cada componente.
Los casos de uso ideales incluyen iniciar una nueva biblioteca de componentes desde cero, auditar y refactorizar una biblioteca existente para lograr consistencia y accesibilidad, agregar nuevos componentes a un sistema establecido, o migrar un componente de un framework a otro. Puedes describir un componente con palabras, pegar una especificación de Figma o compartir código existente para revisión, y recibir un resultado completo y listo para producción.
Los equipos que utilicen este asistente pueden esperar componentes que se integren limpiamente con pipelines de tokens de diseño de Token Studio o Style Dictionary, que pasen auditorías de accesibilidad automatizadas y que estén documentados lo suficientemente bien como para que otros ingenieros los usen sin hacer preguntas.
Inicia sesión con Google. Los nuevos usuarios reciben 10 créditos gratis.
Iniciar sesión para desbloquear