Written with AI assistance from the source video. The video is the authority.
Log in to leave a comment
No posts yet
Cualquier desarrollador frontend que haya escrito código con IA lo sabe bien. Las pantallas generadas por los agentes se parecen todas un poco. La fuente Inter, degradados mezclados de morado y azul, y un diseño de tarjeta que parece visto en todas partes. Esto no se puede usar tal cual en un proyecto de agencia o de cliente. Al final, hay que tirar todo el código y empezar de nuevo desde cero. En lugar de aumentar la productividad, termina generando más trabajo.
La razón por la cual la IA escupe este tipo de código es simple. Ha aprendido directamente datos de plantillas de Tailwind o páginas de aterrizaje de SaaS que rondan por internet. Si no se establecen restricciones básicas, el agente deduce que el estilo más común es la respuesta correcta. Impeccable 4.0 resuelve este problema insertando reglas de diseño únicas entre el desarrollador y la IA. Incluso si se inyecta solo una capa de vocabulario de diseño sin cambiar el modelo de IA, la puntuación de calidad de UI aumenta 1.59 veces en comparación con la anterior.
Para evitar que la IA traiga estilos arbitrarios a su antojo, primero hay que controlar el entorno del proyecto.
PRODUCT.md y DESIGN.md en el directorio raíz del proyecto.## Anti-references en PRODUCT.md. Coloque allí reglas como prohibir el uso de la fuente Inter, prohibir el uso de negro puro (#000000) y grises sin matices, y prohibir degradados de texto.DESIGN.md el sistema de color OKLCH que realmente utiliza el proyecto, la escala de tipografía fluida y los tokens de espaciado de línea base de 8px.node skill/scripts/context.mjs --target <target_path> para vincular las especificaciones de tokens en la memoria del agente de IA.Una vez finalizada esta configuración, se elimina la tendencia de la IA a crear fuentes o márgenes extraños a su antojo. Reducir el tiempo de reconstruir componentes desde cero debido a estilos incorrectos permite ganar fácilmente más de 5 horas a la semana.
Si se integran herramientas a un proyecto existente sin pensar, se mezclará con las reglas existentes de Tailwind CSS o Styled-Components y colapsará. El repositorio de Git también se ensuciará con archivos temporales. El orden para extraer y aislar de forma segura los recursos heredados es el siguiente:
npx impeccable install en la terminal para instalar los arneses y binarios de habilidades dentro del proyecto./impeccable document para escanear el tailwind.config.js existente y las variables CSS, generando automáticamente el documento DESIGN.md exclusivo del proyecto./impeccable extract para extraer valores codificados de forma rígida y patrones de estilo repetidos 3 o más veces en el proyecto como tokens de diseño comunes./impeccable init para fijar el objetivo y luego agregue .impeccable/live/*, .impeccable/hook.cache.json y .impeccable/config.local.json al archivo .gitignore./impeccable doctor.Al seguir este proceso, la biblioteca de UI existente y el motor Impeccable funcionarán sin entrar en conflicto.
A veces es necesario cambiar la pantalla directamente durante una reunión con un cliente. Si activa el modo en vivo con el comando /impeccable live, puede crear modificaciones de diseño directamente a través del selector de elementos en la pantalla del navegador.
/impeccable live en la terminal y especifique el elemento de UI a modificar en el selector del navegador para aplicar las modificaciones./impeccable normalize en la terminal. Los estilos en línea ingresados durante el trabajo en el navegador se cambian a tokens que se ajustan a las reglas de DESIGN.md./impeccable polish, y ejecute /impeccable distill para eliminar divs contenedores innecesarios y marcado duplicado./impeccable audit antes de confirmar en la rama de trabajo.Esto evita la situación en la que el código corregido rápidamente en el navegador ingresa a la rama principal en un estado desordenado.
Impeccable 4.0 incluye 59 reglas de detección para capturar defectos visuales creados por la IA. El gancho posterior a la edición (Per-edit Hook) que se ejecuta inmediatamente después de editar un archivo detecta tasas de contraste insuficientes o desbordamiento de elementos, y el gancho de parada (Stop Hook) que se ejecuta al finalizar la sesión diagnostica el ritmo de diseño y la armonía de color.
Aquí se muestra cómo expandir este sistema de inspección para que coincida con el estilo de diseño interno de la empresa:
node skill/scripts/hook-admin.mjs ignore-value "Inter" --rule overused-font.node skill/scripts/hook-admin.mjs ignore-file "src/legacy/Card.tsx".// impeccable-disable-next-line: intentional-brand-exception justo encima de la línea de código que requiere una excepción./impeccable audit para verificar el informe cuantitativo de los 5 elementos de accesibilidad, rendimiento, tema, responsividad y antipatrones, y corregir los defectos.Al configurar este proceso de inspección, se puede reducir a la mitad el tiempo dedicado a buscar visualmente roturas de diseño o discrepancias de diseño durante las revisiones de código.