gabrielciprianoo/design-review

Revisión de Diseño (Refactoring UI)

El conocimiento vive en references/. Nunca cargues todo. Sigue la cadena: SKILL.md → INDEX.md → solo el/los archivo(s) necesario(s).

1. Clasificar la solicitud

Tipo de tarea	Señales	Cargar
Arreglo de componente	"revisa estas tarjetas / este formulario / la barra de navegación"	references/components/INDEX.md → 1–2 components/<name>.md
Auditoría de pantalla	"revisa esta página / pantalla / app"	references/principles/INDEX.md → hierarchy.md, layout-spacing.md, typography.md, color.md; añade depth.md, images.md, finishing.md solo si es relevante
Rediseño	"rediseña / propón una versión mejorada"	Conjunto de auditoría de pantalla + personality.md + systems.md (+ process.md)
Pulido	"haz que se vea más pulido / toques finales"	finishing.md, depth.md, images.md
Diseño nuevo	"diseña un/a … desde cero"	process.md, personality.md, systems.md, luego archivos de tema según sea necesario

También identifica qué componentes están en pantalla (ver descripciones en components/INDEX.md); para una auditoría de pantalla, abre los archivos de componente de los 1–2 componentes dominantes.

2. Capturar la interfaz

Usa lo que esté disponible, en este orden:

1. Herramienta de navegador (Claude en Chrome, navegador integrado, Playwright MCP): abre la página, toma una captura de pantalla, luego ejecuta scripts/measure_styles.js con la ejecución de JavaScript de la herramienta. Para limitar a una región, primero ejecuta window.__DR_ROOT = '<selector css>'.
2. Shell + Playwright (Claude Code): python3 scripts/capture.py <url|archivo> [--selector ".card"] [--out dir] → captura de pantalla, captura en escala de grises, measurements.json.
3. Solo captura de pantalla: solo verificaciones visuales; indica que las mediciones no estuvieron disponibles.
4. Solo código: lee el CSS/marcado y calcula las mismas señales manualmente.

Siempre realiza la prueba de escala de grises (PRO-03): visualiza una versión desaturada (capture.py crea una; en una herramienta de navegador aplica document.documentElement.style.filter='grayscale(1)', captura, luego elimínala).

3. Analizar

• Mapea cada hallazgo a un ID de principio. Usa las mediciones como evidencia (las claves de measurements.json hacen referencia a IDs en comentarios de measure_styles.js).
• Verifica en este orden de impacto: jerarquía → espaciado/layout → tipografía → color/contraste → profundidad → imágenes → toques finales.
• Las mediciones son pistas, no veredictos: confirma cada una contra la captura de pantalla antes de informarla.
• Respeta la marca/personalidad existente a menos que se pida cambiarla (PER-*). Para rediseños, indica primero la personalidad objetivo.
• Los principios de [process] guían los rediseños; no los informes como defectos en una auditoría.

4. Entregar

A. Hallazgos — ordenados por impacto, máximo ~10, cada uno como: [ID] Problema — evidencia (valor medido o lo que es visible) → solución (valores concretos de las escalas del libro)

B. Diseño corregido — a menos que el usuario solo quiera la crítica:

• Reconstruye la pantalla/componente como una página HTML/CSS autocontenida aplicando las correcciones, usando las escalas de los archivos de principios (espaciado 4/8/12/16/24/32/48/64…, tipo 12/14/16/18/20/24/30/36/48…, sombras de 5 niveles, tonos de color 100–900). Muestra el antes (captura de pantalla) y el después lado a lado cuando sea posible.
• O, si el usuario quiere cambios de código, proporciona un parche de CSS/marcado.

C. Resumen del sistema (rediseños) — la escala tipográfica, escala de espaciado, paleta (grises + primario + acentos en HSL) y sombras utilizadas, para que el equipo pueda adoptarlas.

Reglas

• Cita IDs; nunca inventes principios más allá de las referencias. Si algo no está cubierto, di que está fuera del libro.
• Prefiere pocos cambios de alto impacto sobre listas largas.
• No copies el texto del libro; las referencias son resúmenes parafraseados.

Mantenimiento

Los archivos de principios son la fuente de verdad. Después de editarlos, regenera los índices y archivos de componente: python3 tools/build_indexes.py skills/design-review (el script vive en tools/ del repositorio fuente, no en el skill instalado).