splatstudio

Skill de Crítica · Revisión Experta en 5 Dimensiones

Produce un informe de revisión de diseño en un solo archivo HTML que puntúa cualquier artefacto en 5 dimensiones y propone correcciones accionables. Inspirado en el flujo de crítica experta de huashu-design.

Cuándo usarlo

• Después de que el agente (o el usuario) genere un artefacto (deck / prototipo / landing page) y el usuario pregunte "¿qué le falta a esto?" o "revísalo"
• Como un bucle de autoverificación que el agente puede ejecutar en su propia salida antes de emitirla
• Para comparar dos variantes del mismo diseño

Lo que produces

Un único informe de revisión autocontenido <artifact type="text/html"> que incluye:

1. Encabezado — qué artefacto se revisó, fecha, revisor ("OD · Skill de Crítica"), veredicto en una línea
2. Gráfico radial (SVG en línea, sin biblioteca) que muestra las 5 puntuaciones
3. Cinco tarjetas de dimensión, cada una con:
   • Puntuación 0–10 (con banda: 0–4 Roto · 5–6 Funcional · 7–8 Fuerte · 9–10 Excepcional)
   • 1 párrafo de evidencia (citar elementos / archivos / líneas específicos)
   • Un punto de Conservar / Corregir / Victoria rápida
4. Listas de acción combinadas al final:
   • Conservar — lo que funciona, no tocar
   • Corregir — problemas P0 / P1 que son visualmente costosos
   • Victorias rápidas — ajustes de 5 a 15 minutos con impacto desproporcionado

Las 5 dimensiones

Cada dimensión es independiente: un deck puede tener 9/10 en Innovación pero 4/10 en Jerarquía y el informe debe decirlo claramente. No promedies fallos interesantes.

1. Consistencia filosófica · 哲学一致性

¿El artefacto elige una dirección clara y se mantiene en cada microdecisión (chrome / kicker / espaciado / acento)?

Evidencia a buscar:

• ¿Hay una dirección de diseño declarada (por ejemplo, Monocle / WIRED / Kinfolk) o son tres estilos mezclados?
• ¿El vocabulario de chrome / kicker se mantiene en un mismo registro, o la página 3 dice "Vol.04 · Primavera" y la página 7 dice "PERO ESPERA 🔥"?
• ¿Se usan acento / serif / mono con la misma regla en todo momento?

0–4 Tres estilos peleando entre sí. 5–6 Una dirección pero la mitad de los elementos se desvían. 7–8 Coherente, con desvíos ocasionales en páginas secundarias. 9–10 Cada elemento argumenta la misma tesis.

2. Jerarquía visual · 视觉层级

¿Puede un extraño identificar qué leer primero, segundo, tercero — sin que se lo digan?

Evidencia a buscar:

• ¿El tipo de letra más grande es claramente lo más importante en cada página?
• ¿Los roles de mono / serif / sans coinciden con el rol de la información (meta / cuerpo / exhibición)?
• ¿Muchos elementos "ruidosos" compitiendo? ¿O una jerarquía clara de primario + secundario + terciario?

0–4 Todo grita. 5–6 La jerarquía funciona en páginas principales pero se rompe en el cuerpo. 7–8 Niveles claros, colisiones ocasionales. 9–10 El ojo se mueve sin fricción.

3. Ejecución de detalles · 细节执行

El 90/10 — alineación, interlineado, kerning en tamaños grandes, encuadre de imágenes, pulido de pie/chrome, espaciado en casos extremos.

Evidencia a buscar:

• Páginas con números grandes: ¿el número se asienta sobre la línea base o flota?
• ¿Partes superiores de columnas izquierda/derecha alineadas en grid-2-7-5?
• ¿Proporciones de frame-img + título consistentes entre páginas?
• Etiquetas mono: ¿mismo espaciado entre letras? ¿misma regla de mayúsculas?
• ¿Algún <br> huérfano que cause líneas de 1 carácter?

0–4 Cinta adhesiva e hilos visibles. 5–6 La mayoría de páginas limpias, 1–2 descuidadas. 7–8 Pulido, un ojo experto encuentra 2–3 fallas. 9–10 Calidad de revista — el tipo de detalle que hace asentir a tipógrafos que imprimen a mano.

4. Funcionalidad · 功能性

¿El artefacto funciona para su uso previsto? Objetivos de clic, navegación, legibilidad a distancia de presentación, capacidad de copiar y pegar para bloques de código, respaldo móvil si corresponde.

Evidencia a buscar:

• Deck: ¿navegación por teclado / rueda / táctil funcionando? ¿Respaldo de desplazamiento en iframe?
• Landing: ¿CTA visible sin desplazar? ¿Número de teléfono táctil en móvil?
• Runbook: ¿bloques de código copiables, fuente mono, sin comillas inteligentes?
• ¿Información crítica legible desde 4 m de distancia (pantalla grande)?

0–4 Visualmente bien pero no cumple su propósito. 5–6 Flujo principal funciona, casos extremos rotos. 7–8 Robusto en uso normal. 9–10 Ingeniería defensiva: maneja iframe / pantalla completa / pegar / imprimir sin pestañear.

5. Innovación · 创新性

¿Esto supera la mediana? ¿Hay un elemento que haga que la gente se incline?

Evidencia a buscar:

• ¿Un movimiento inesperado de diseño (layout / animación / tipográfico) que no era necesario?
• ¿O 100% seguro — podría ser cualquier deck/landing de cualquier agencia?
• ¿La innovación está ganada (coincide con la dirección) o añadida (WebGL aleatorio en un deck Kinfolk de vida lenta)?

0–4 Mediana genérica de IA. 5–6 Competente y olvidable. 7–8 Un momento memorable, el resto sólido. 9–10 Múltiples movimientos que robarías — pero cada uno sirve claramente a la tesis.

Disciplina de puntuación (léelo antes de puntuar)

• Cita siempre evidencia — "puntuación 4 porque la página principal mezcla Playfair display con Inter sans en la misma línea" es mejor que "se siente inconsistente". Las puntuaciones sin evidencia se rechazan.
• No promedies hacia arriba — si Jerarquía es 5 porque la página 3 está rota, no subas a 7 porque las páginas 1 y 2 están bien. La puntuación es la banda sostenida más baja.
• No infles calificaciones — un 7 significa fuerte, no aceptable. Si cada puntuación es 7+, no estás revisando críticamente.
• Está permitido que Innovación sea baja — 5/10 en entregables de producción está bien. No castigues el conservadurismo apropiado.

Flujo de trabajo

Paso 1 — Obtener el artefacto

Tres modos:

1. Archivo del proyecto — el usuario dijo "revisa el index.html que acabo de hacer": ábrelo desde la carpeta del proyecto.
2. HTML pegado — el usuario pegó código en el chat: léelo desde el mensaje.
3. Generado por ti en este turno — acabas de emitir un artefacto arriba y quieres autocrítica: vuelve a leer tu propio <artifact>.

Si hay varios archivos HTML, pregunta cuál (no los revises todos).

Paso 2 — Leer lo suficiente para puntuar

Examina todo el <style>, luego lee 6–8 bloques de contenido representativos. No puntúes solo desde el frontmatter. La puntuación depende del diseño ejecutado, no de la intención declarada.

Paso 3 — Puntuar con evidencia

Para cada una de las 5 dimensiones, escribe la puntuación y un párrafo de evidencia de 30 a 80 palabras que nombre elementos específicos. Usa números de línea, nombres de clase, números de página.

Ejemplo:

Dimensión: Ejecución de detalles
Puntuación: 6 / 10
Evidencia: Las tarjetas de estadísticas en la página 3 se alinean limpiamente (grid-6, 3×2), pero en
la página 8 el pie de la columna derecha está 2vh más arriba que el de la izquierda porque
.callout tiene margen superior de 3vh mientras que la figura no. Los títulos de imágenes
usan mono en la página 5 pero sans en la página 7 — elige uno.

Paso 4 — Construir las listas de acción

Agrega los 5 párrafos de evidencia en:

• Conservar (3–5 puntos) — cosas concretas que funcionan y el usuario no debe romper en la próxima iteración. Citar por clase / página / elemento.
• Corregir (3–6 puntos) — obligatorio, ordenado por costo visual ahorrado por minuto invertido. Cada punto ≤ 1 oración.
• Victorias rápidas (3–5 puntos) — 5–15 minutos cada una, alta relación señal/ruido (por ejemplo, "cambia display:flex por grid en la página 4 para arreglar la deriva de columna").

Paso 5 — Emitir el HTML del informe

Construye un solo archivo:

• Encabezado: nombre del artefacto + crédito del revisor + fecha
• Gráfico radial grande (SVG)
• 5 tarjetas de dimensión en una cuadrícula de 1 o 2 columnas
• Tres listas de acción al fondo con apariencia de casillas de verificación

Usa los tokens activos de DESIGN.md si existen; de lo contrario, usa un tema claro neutro (fondo blanco roto, texto casi negro, un acento para el relleno del radar).

Contrato de salida

<artifact identifier="critique-<slug-del-artefacto>" type="text/html" title="Crítica · <Título del Artefacto>">
<!doctype html>
<html>...</html>
</artifact>

Una oración antes del artefacto ("Se revisó X en 5 dimensiones, consulta el informe a continuación.") y detente después de </artifact> — no parafrasees el informe en el chat; el usuario leerá el artefacto.

Reglas estrictas

• 5 puntuaciones, siempre — no se permiten informes parciales (por ejemplo, solo 3 dimensiones).
• Evidencia por puntuación — no "se siente extraño" / "necesita trabajo". Si no puedes citar un elemento, la puntuación no está justificada.
• No infles calificaciones — una media general superior a 8 es sospechosa; revísate.
• No revises tu propio artefacto en el mismo turno — el usuario necesita verlo primero. Autocrítica solo bajo solicitud explícita ("ahora critica lo que acabas de hacer").
• Solo HTML en un solo archivo — sin CSS/JS externos. Todo en línea.
• El gráfico radial es obligatorio — le da al informe una silueta reconocible y permite al usuario identificar ejes débiles de un vistazo.