Crea un sistema de diseño que la IA sepa usar y revisa los componentes que genera

## Averigua qué paquetes llevan los componentes y la documentación antes de cambiar nada Trata el sistema de diseño como un contrato de producto compartido, no como una colección de fragmentos visuales. Antes de cambiar nada, identifica qué paquetes son responsables de los componentes, la documentación, los ejemplos, las superficies de previsualización, las herramientas de pruebas y las utilidades de migración. Usa la rama actual del repositorio como fuente autorizada para las API y convenciones disponibles. No deduzcas que algo es compatible a partir de conocimientos generales sobre la plataforma web, otra rama o una versión más reciente de la biblioteca. Conserva el gestor de paquetes, el entorno de ejecución, el formato de módulos y el ejecutor de pruebas configurados, salvo que la tarea cambie explícitamente la cadena de herramientas. ## Lee la documentación y la lista de componentes de la rama actual antes de empezar Antes de trabajar en un componente: 1. Lee las instrucciones del repositorio y del paquete que rigen el objetivo. 2. Consulta la ayuda local de la línea de comandos y enumera los temas de documentación disponibles. 3. Carga los principios de diseño, los tokens de diseño, las reglas de temas y el inventario de componentes. 4. Examina las plantillas de página cuando la tarea se refiera al diseño de la página y no a un único elemento básico. 5. Lee la API actual, las variantes, la anatomía, los ejemplos y las restricciones del componente objetivo. Repite esta inicialización en cada rama, porque la documentación generada y las API compatibles pueden variar. Después de actualizar una dependencia del sistema de diseño, ejecuta la utilidad de migración del repositorio antes de realizar modificaciones manuales no relacionadas. ## Actualiza a la vez la cabecera de cada archivo y la documentación del componente Mantén dos capas de documentación complementarias. Incluye metadatos concisos sobre entradas, salidas y posición arquitectónica en la cabecera de cada archivo fuente. Conserva las propiedades, funciones, ejemplos, notas de accesibilidad y directrices de composición detalladas en un archivo de documentación administrado por el componente. Cuando cambie la implementación, actualiza ambas capas y sigue los marcadores de sincronización que identifican los archivos vinculados. Usa el formato de documentación que admita realmente el renderizador; por ejemplo, utiliza delimitadores de ejemplo sin etiqueta cuando los delimitadores con etiqueta de lenguaje rompan el analizador activo de documentación automática. Verifica el resultado renderizado en vez de suponer que una sintaxis fuente válida produce documentación válida. ## Anota qué funciones de CSS admite de verdad la herramienta de estilos Registra la versión del motor de estilos y su compatibilidad verificada con reglas @, pseudoclases, pseudoelementos, selectores compuestos, valores, animaciones, variables, temas, valores dinámicos y selectores condicionales. Distingue la sintaxis compatible de aquella que compila, pero produce CSS no válido o inutilizable. Prefiere soluciones nativas de CSS cuando la matriz confirme que son compatibles. Entre las opciones habituales se encuentran las consultas de medios, de características y de contenedor; los estilos iniciales; los ámbitos; las pseudoclases de interacción y estructurales; los pseudoelementos de contenido generado; las funciones modernas de color y tamaño; las transiciones; y los fotogramas clave. No construyas una solución alternativa en JavaScript solo porque una tabla de capacidades anterior no incluyera la función. ## Mantén los efectos de hover y foco dentro de su propio componente Representa los estados de ancestros, descendientes y hermanos mediante el mecanismo de selectores condicionales compatible con el motor de estilos. Cuando ese mecanismo requiera un marcador, aplica el marcador al ancestro real y mantén su definición cerca del componente responsable. Usa marcadores con alcance de componente para los controles de formulario y otros elementos interactivos anidados. Nunca uses un marcador global predeterminado cuando ventanas emergentes, paneles o contenedores externos puedan propagar al control estados de puntero encima o de foco. Respeta los contratos de los selectores, como las condiciones de ancestro que solo admiten pseudoselectores, y no simules un anidamiento CSS no compatible. Protege los efectos exclusivos de puntero encima con una consulta de medios que compruebe esa capacidad, para que los dispositivos táctiles no hereden estados de interacción persistentes. Conserva el comportamiento del foco mediante teclado y del estado deshabilitado con independencia del estado de puntero encima. ## Usa CSS para la maquetación y la animación en lugar de JavaScript Cuando sean compatibles, usa directamente cuadrículas, flexbox con separaciones, relaciones de aspecto, controles de desbordamiento y propiedades de las barras de desplazamiento. Para lograr un comportamiento adaptable al contenedor del componente, prefiere consultas de contenedor en lugar de medir elementos con observadores; para las franjas alternas, usa pseudoclases estructurales en lugar de JavaScript basado en índices. Implementa las transiciones de entrada con estilos iniciales, en vez de combinar estado y coordinación de fotogramas de animación. Expresa las alternativas ordenadas de CSS mediante la abstracción de alternativas del motor de estilos, en vez de detectar manualmente el entorno de ejecución. Usa capacidades especializadas de posicionamiento solo cuando el CSS generado se haya verificado en el conjunto de navegadores compatibles. ## Haz que enlaces y temas se puedan cambiar para no copiar componentes Canaliza los valores dependientes del entorno de ejecución mediante funciones de estilo tipadas, en vez de usar estilos en línea. Compón los estilos condicionales mediante el mecanismo de propiedades de estilo del sistema, en vez de alternar nombres de clase improvisados. Mantén las variables y la creación de temas en los tipos de archivo exigidos por el compilador, y utiliza variables tipadas o constantes de tiempo de compilación cuando mejoren la validación. Renderiza la navegación mediante una abstracción de enlaces inyectable, en vez de codificar directamente elementos de anclaje. Así, quienes usan el sistema pueden proporcionar su enrutador sin bifurcar los componentes. Respeta los contratos del repositorio para recursos, fuentes, rutas públicas y proveedores de temas, de modo que los componentes empaquetados sigan siendo portátiles. ## Prueba si la IA crea bien los componentes, también al final de una charla larga Mide si las instrucciones para el agente ayudan a los modelos a generar código de componentes válido. Ejecuta el conjunto completo de indicaciones o una muestra estratificada para obtener resultados rápidos. Para cada indicación, usa un trabajador aislado que lea la tarea, genere un componente mediante el sistema documentado, identifique por sí mismo las vías de escape y guarde tanto el código como los metadatos de evaluación. Añade un modo de degradación para medir la retención del contexto durante una conversación de 10 turnos que contenga turnos de relleno, distracción y recuperación. Examina puntos representativos, como los turnos 0, 6, 8 y 10, y compara la trayectoria de cada indicación en vez de informar únicamente del turno final. Asocia las indicaciones de prueba, los resultados generados y las capturas de pantalla a un identificador de iteración estable. Procesa en paralelo las indicaciones independientes, pero no permitas que los trabajadores compartan archivos de resultados mutables. ## Guarda cada resultado de prueba y localiza dónde la IA se saltó el sistema de diseño Guarda suficientes metadatos estructurados para reproducir y comparar cada caso: identificadores de iteración y de indicación, marca de tiempo, modelo, perfil, categoría de la indicación, profundidad de la trayectoria, indicación, respuesta generada, valoración del éxito, componentes utilizados y vías de escape detectadas. Crea páginas de previsualización y captura pantallas antes de agregar los resultados. Evalúa tanto el éxito funcional como si el resultado eludió el sistema de diseño mediante elementos sin abstraer, estilos en línea, navegación codificada directamente, selectores no compatibles, elementos básicos duplicados o soluciones alternativas en JavaScript para funciones de CSS compatibles. Considera la autoevaluación del modelo como una señal, no como una prueba. Combina comprobaciones automáticas, pruebas de la previsualización y una revisión humana por muestreo. Usa los resultados agregados para mejorar la documentación o las API solo después de localizar el patrón de fallo recurrente. ## Haz comprobaciones pequeñas tras cada cambio e informa de cuáles se superaron Antes de modificar un componente, examina su documentación actual y decide si la necesidad se resuelve mejor mediante configuración, composición, una nueva variante o una extracción explícita del código fuente para una personalización profunda. Conserva los contratos públicos y evita crear un elemento básico paralelo cuando ya exista un punto de extensión establecido. Después del cambio, actualiza la documentación sincronizada y ejecuta las pruebas unitarias, las comprobaciones de tipos y de lint, el análisis de capacidades de estilo y la previsualización del componente que sean pertinentes en el menor ámbito posible. Amplía la comprobación al conjunto completo solo cuando el cambio atraviese contratos compartidos. Si cambia la versión del paquete principal, ejecuta el paso de migración documentado e inspecciona sus diferencias. Informa del comportamiento modificado, la documentación actualizada, las comprobaciones superadas, cualquier capacidad no compatible descubierta y cualquier validación que no se haya podido ejecutar.