# Auditoria De Diseno Gestion De Deuda UX Y Control De Calidad Vis > La Auditoría de Diseño es una inspección técnica profunda del estado visual y funcional de un producto. No es solo "mirar qué está feo"; es Ingeniería del Saneamiento UX. Úsala para tareas de Generación de Contenido: design-audit, consistency, ux-debt, visual-inventory, quality-assurance, design-system. - Skill: `jesusgarciafernandez/auditoria-de-diseno-gestion-de-deuda-ux-y-control-de-calidad` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add jesusgarciafernandez/auditoria-de-diseno-gestion-de-deuda-ux-y-control-de-calidad` - Raw SKILL.md: https://api.skillmd.com/api/skills/jesusgarciafernandez/auditoria-de-diseno-gestion-de-deuda-ux-y-control-de-calidad/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Security - License: CC BY-NC-SA 4.0 - Author: jesusgarciafernandez (https://skillmd.com/u/jesusgarciafernandez) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/jesusgarciafernandez/auditoria-de-diseno-gestion-de-deuda-ux-y-control-de-calidad --- ## 0. Filosofía Human-Centric AI *Esta habilidad garantiza la honestidad visual y la integridad del diseño, utilizando la tecnología para diagnosticar y sanar las inconsistencias que degradan la experiencia humana.* **El Rol del Humano:** El auditor de diseño debe ser un "Detective de la Excelencia". La IA puede escanear miles de pantallas buscando valores de color fuera de rango o botones sin alineación matemática, pero solo el humano puede evaluar si la "sensación" de la marca se mantiene en un flujo complejo, decidir qué deuda técnica es prioritaria para el confort del usuario y asegurar que el sistema no solo sea correcto, sino que transmita la calidad y la confianza que una relación humana requiere. **Empoderamiento:** Usamos la tecnología para automatizar la recopilación de activos y realizar comparativas de regresión visual masivas, permitiendo que el experto se centre en la estrategia de unificación y en la toma de decisiones sobre la arquitectura del sistema de diseño. --- ## 1. Descripción Detallada La Auditoría de Diseño es una inspección técnica profunda del estado visual y funcional de un producto. No es solo "mirar qué está feo"; es **Ingeniería del Saneamiento UX**. El enfoque v2.0 incorpora la **Gestión Proactiva de la Deuda UX y la Auditoría de Escalabilidad**, donde se analizan las inconsistencias tipográficas, el uso errático del color, la fragmentación de componentes y la falta de accesibilidad, generando un inventario crítico y un plan de acción (Roadmap de Saneamiento) que unifica la experiencia y mejora la eficiencia del equipo de producto. ## 2. Escenarios de Aplicación - **Integración en Proyectos Maduros y Fragmentados:** Unificación de un producto que ha crecido de forma desorganizada en diferentes manos. - **Pre-fase de Rediseño Integral (Re-branding):** Diagnóstico preciso del punto de partida para no repetir errores históricos. - **Control de Calidad tras Lanzamientos de Alta Presión:** Verificación de que la implementación en código respeta fielmente los estándares del Design System. - **Auditoría Periódica de Consistencia:** Revisión semestral para asegurar que la "entropía de diseño" no está degradando la marca. - **Auditoría de Accesibilidad Legal (WCAG):** Verificación técnica de cumplimiento de normativas de inclusión para evitar riesgos legales. ## 3. Requisitos de Implementación - **Maestría en Fundamentos de Diseño Visual:** Ojo entrenado para detectar falta de alineación, jerarquía débil o uso inconsistente de tokens de color. - **Dominio de Herramientas de Inspección Técnica:** Chrome DevTools, Figma Dev Mode y herramientas de auditoría automática (Lighthouse, Axe). - **Capacidad de Documentación de Deuda Técnica:** Habilidad para categorizar errores por impacto (Usuario) y esfuerzo (Desarrollo). --- ## 4. Diferencial: Feedback Subjetivo vs. Auditoría Técnica Profesional v2.0 | Dimensión | Enfoque "Me parece que..." | Auditoría de Alta Densidad (v2.0) | | :--- | :--- | :--- | | **Evidencia** | Opinión personal. | Capturas, datos de código y cumplimiento de normas. | | **Alcance** | Visual / Superficial. | Sistémico (Componentes, Tokens, Código, UX). | | **Documentación** | Reunión breve. | Reporte detallado con Inventario de Inconsistencias. | | **Resultado** | "Hay que arreglarlo". | Plan de acción priorizado por Severidad e Impacto. | --- ## 5. Instrucciones y Pasos Detallados (Protocolo Maestro) ### Fase 1: Inventario Visual y Muestreo de Pantallas Críticas **Objetivo:** Obtener una visión real y cruda del estado actual del sistema. 1. **Extracción de Componentes:** Captura todos los tipos de botones, formularios y tipografías que conviven hoy en la Web/App. 2. **Identificación de Patrones Rotos:** Detecta dónde se están usando 3 tonos de azul diferentes para el mismo tipo de acción. **Prompt Maestro de Dirección de Auditoría de Diseño:** ```text Actúa como Auditor de Diseño Senior y Especialist en Quality Assurance (QA) Visual. Para el producto [NOMBRE], realiza el siguiente diagnóstico técnico: 1. Realiza un 'Inventario de Inconsistencias' en: Tipografía (fuentes y escalas), Color (uso de paleta), y Espaciado (grids y márgenes). 2. Clasifica cada hallazgo en: [Inconsistencia Visual / Error de Usabilidad / Falta de Accesibilidad]. 3. Asigna un Nivel de Impacto: [Bajo / Medio / Crítico] basado en cuánto afecta a la tarea principal del usuario. 4. Propón la 'Normalización' de cada grupo de errores: [Ej: Sustituir todos los botones flotantes por el componente oficial del Design System v2]. 5. Resume la 'Deuda UX' estimada en horas de diseño/desarrollo para alcanzar la coherencia total. ``` ### Fase 2: Análisis de Accesibilidad, Evaluación de Código y Reporte Final ... (Expansión técnica sobre el check de contraste WCAG 2.1, la verificación de la semántica HTML de los componentes y la redacción del reporte ejecutivo de 'Estado del Diseño' para stakeholders) ... --- ## Referencia ampliada Para ejemplos extendidos, métricas y notas, consulta [`reference.md`](reference.md) (cárgalo solo cuando necesites ese detalle).