Comandos de refinamiento: bolder, quieter, distill, harden

En el capítulo anterior vimos los comandos de revisión (critique, audit, polish): la familia que diagnostica un diseño ya construido y emite un juicio sobre su calidad. Pero diagnosticar no es lo mismo que corregir. Una vez que sabes qué está mal —o, más sutil, qué está bien pero podría tener más carácter— necesitas herramientas que muevan el diseño en una dirección concreta. Esa es la misión de los comandos de refinamiento.

Si los comandos de revisión son el médico que ausculta, los de refinamiento son las perillas (knobs) que giras para ajustar la intensidad y la resiliencia del resultado. Hay cuatro, y forman dos pares conceptuales muy claros:

• bolder y quieter son opuestos en un mismo eje: el de la intensidad expresiva. Uno sube el volumen, el otro lo baja.
• distill y harden actúan sobre ejes distintos: distill reduce a lo esencial (simplicidad), harden añade robustez para el mundo real (resiliencia).

En este capítulo aprenderás cuándo girar cada perilla, cómo combinarlas según tu PRODUCT.md, y qué transformación concreta produce cada comando. Todos se invocan con la misma forma que el resto de la suite de Impeccable: /impeccable <comando> <target>.

El modelo mental: perillas de intensidad

Antes de ver cada comando, asienta esta idea: el refinamiento no tiene un único destino correcto. Una landing de un producto de música electrónica quiere ser audaz; el dashboard de una herramienta financiera quiere ser sobrio. El mismo botón, la misma tipografía, la misma paleta pueden ser “demasiado” en un contexto y “demasiado tímidos” en otro.

Por eso Impeccable no impone un nivel de intensidad: te da perillas y deja que el contexto decida. Y el contexto vive en tu PRODUCT.md y DESIGN.md, los documentos que generaste en el capítulo 3. Allí declaras la personalidad de la marca, el tono, la audiencia. Los comandos de refinamiento leen ese contexto y empujan el diseño hacia el punto que tu producto pide, no hacia un promedio genérico.

flowchart LR
    subgraph eje1["Eje de intensidad expresiva"]
        Q["quieter<br/>(sobrio, calmado)"] <--> B["bolder<br/>(audaz, expresivo)"]
    end
    subgraph eje2["Eje de simplicidad"]
        D["distill<br/>(quita lo superfluo)"]
    end
    subgraph eje3["Eje de resiliencia"]
        H["harden<br/>(estados y edge cases)"]
    end
    PRODUCT["PRODUCT.md + DESIGN.md<br/>(personalidad, tono, audiencia)"] --> eje1
    PRODUCT --> eje2
    PRODUCT --> eje3

La clave: bolder y quieter comparten un mismo eje y son mutuamente excluyentes en una iteración (no subes y bajas el volumen a la vez). En cambio, distill y harden son ortogonales: puedes destilar y robustecer el mismo componente, porque actúan sobre cosas distintas (cantidad de elementos vs. comportamiento ante datos reales).

bolder: subir el volumen expresivo

bolder amplifica el impacto visual y la distintividad de un diseño. Su propósito explícito es rechazar los defaults de la IA —gradientes morados, glassmorphism, neón gratuito— y construir personalidad a través de los tres pilares que sí funcionan: jerarquía, escala y confianza tipográfica.

Cuándo aplicarlo

• El diseño se siente genérico, predecible o demasiado seguro.
• El peso visual carece de contraste o de drama; todo tiene un peso similar.
• La personalidad de marca necesita una expresión más fuerte.
• Estás en un contexto de marketing o branding donde la experimentación es bienvenida.

Target

Interfaces web, landings, aplicaciones de marca: cualquier superficie donde la memorabilidad importe.

Cómo invocarlo

/impeccable bolder hero
/impeccable bolder src/components/PricingCard.tsx

También responde a instrucciones en lenguaje natural alineadas con su intención, como “hazlo más audaz sin caer en AI slop” o “amplifica el impacto visual manteniéndolo funcional”.

Las dimensiones que amplifica

Dimensión	Qué hace bolder
Tipografía	Reemplaza fuentes genéricas; crea contraste de peso dramático (900 con 200, no 600 con 400) y saltos de escala de 3x a 5x
Color	Deja que un color audaz domine el 60% del diseño; evita los defaults morado-azul
Espacio	Huecos de 100-200px, layouts asimétricos, solapamientos para crear profundidad
Efectos	Sombras dramáticas, textura, elementos a medida (NUNCA glassmorphism)
Movimiento	Una entrada “firma”, una sola vez por momento hero, con transiciones suaves ease-out

Antes y después conceptual

Antes (estado tímido): fuentes de sistema, colores básicos, layouts estándar, escala tímida con pesos visuales parecidos, patrones sin sorpresas.

Después (estado audaz): elección tipográfica distintiva con diferencias de escala de 3x-5x, saltos de escala extremos en el hero, combinaciones de color inesperadas que huyen del morado-azul de fábrica.

Las reglas que bolder nunca rompe

El comando trae salvaguardas explícitas. Nunca debe:

• Añadir efectos al azar sin propósito.
• Sacrificar la legibilidad por la estética.
• Hacer que todo sea audaz (si todo grita, nada destaca).
• Copiar tendencias a ciegas: la distintividad pesa más que la imitación.

Su test de calidad es brutal y honesto: “¿un usuario asumiría de inmediato que esto lo creó una IA?” Si la respuesta es sí, la estrategia falló. Ser audaz significa diferenciación memorable, no acumulación de efectos. Por eso bolder termina recomendando pasar el resultado a /impeccable polish para el pulido final.

quieter: bajar el volumen

quieter es el par opuesto de bolder. Reduce la intensidad visual de diseños que se sienten demasiado ruidosos o sobreestimulantes, pero —y esto es lo importante— preservando la personalidad, el refinamiento y el mensaje central. Bajar el volumen no es enmudecer.

Cuándo aplicarlo

• Diseños con estética agresiva o estimulación excesiva.
• Materiales de marketing o interfaces de producto que necesitan transmitir sofisticación.
• Experiencias de lectura que requieren comodidad visual.
• Contextos donde la contención señala calidad por encima de la audacia.

Target

Dos modos según el tipo de superficie:

• Refinamiento de marca: “quieter significa una paleta más contenida, más whitespace, más aire tipográfico”.
• Refinamiento de producto: reducir el ruido visual con menos acentos, tarjetas más planas, menos color y menos movimiento.

Cómo invocarlo

/impeccable quieter dashboard
/impeccable quieter src/app/settings/page.tsx

Las dimensiones que calma

quieter empieza por una fase de evaluación: identifica las fuentes de intensidad en seis dimensiones —saturación de color, extremos de contraste, peso visual, exceso de animación, complejidad y disparidad de escala—. Luego refina:

Dimensión	Qué hace quieter
Color	Desatura al 70-85%, usa grises tintados, aplica la regla del 10% de color de acento, evita texto gris sobre fondos coloreados
Peso visual	Reduce pesos de fuente (900 → 600), aumenta el whitespace, minimiza bordes y líneas
Simplificación	Quita decoraciones no funcionales, aplana la jerarquía, elimina efectos de blur/glow
Movimiento	Distancias más cortas (10-20px), easing más gentil (ease-out-quart), elimina animaciones decorativas
Composición	Reduce los saltos de escala, alinea de forma sistemática, establece un ritmo de espaciado consistente

Antes y después conceptual

Antes: seis colores saturados compitiendo, pesos 900 por todas partes, sombras y glows acumulados, animaciones decorativas que distraen, saltos de escala estridentes.

Después: paleta desaturada con un único acento al 10%, pesos contenidos en torno a 600, superficies planas, micro-movimientos discretos, ritmo de espaciado regular que respira.

Las reglas que quieter nunca rompe

Calmar no es destruir. quieter nunca debe:

• Eliminar la jerarquía.
• Quitar todo el color.
• Despojar al diseño de su personalidad.
• Sacrificar la funcionalidad.
• Hacer que todo sea uniformemente pequeño.

Su verificación de calidad confirma que tras la calma sigue habiendo funcionalidad, distintividad, legibilidad y un punto de vista reconocible. Un diseño “quieto” bien hecho sigue teniendo opinión; simplemente la dice en voz baja.

bolder vs. quieter: el mismo eje, direcciones opuestas

flowchart TD
    start{"¿Cómo se siente el diseño<br/>frente a lo que pide PRODUCT.md?"}
    start -->|"Genérico, plano,<br/>sin personalidad"| bolder["/impeccable bolder"]
    start -->|"Ruidoso, agresivo,<br/>sobreestimulante"| quieter["/impeccable quieter"]
    bolder --> check["Verificar: ¿sigue siendo<br/>funcional y legible?"]
    quieter --> check
    check -->|sí| polish["/impeccable polish"]
    check -->|no| start

Nunca uses ambos en la misma iteración: estarías girando la perilla en dos sentidos a la vez. Decide primero, observando el contexto, en qué dirección necesitas moverte.

distill: destilar a lo esencial

distill opera en un eje distinto al de intensidad. Su trabajo es eliminar complejidad: elementos redundantes, ruido visual y funcionalidades que no sirven al objetivo primario del usuario. No baja el volumen como quieter; reduce la cantidad de cosas.

La distinción es fina pero crucial. quieter puede dejar los mismos seis elementos pero más calmados; distill se pregunta si esos seis elementos deberían existir.

Cuándo aplicarlo

• El diseño se siente abarrotado o confuso.
• Hay demasiados elementos visuales o acciones compitiendo.
• Los usuarios tienen dificultad para identificar el siguiente paso.
• El feature creep ha enterrado la funcionalidad central.

Target

Cualquier componente, interfaz o flujo que requiera simplificación.

Cómo invocarlo

/impeccable distill checkout
/impeccable distill src/components/OnboardingFlow.tsx

distill funciona como una metodología sistemática más que como un comando de sintaxis rígida. Se aplica de forma secuencial: evaluar → planear → simplificar → verificar → documentar.

Antes y después conceptual

Antes: múltiples colores, varias familias tipográficas, tarjetas anidadas, navegación lateral, flujos multipaso, CTAs que compiten, copy redundante, grids complejos.

Después: paleta unificada, una sola familia tipográfica, layouts lineales, acciones inline, una acción primaria, contenido escaneable, espaciado generoso.

Los principios que lo guían

distill se apoya en una filosofía explícita:

• “La simplicidad no consiste en quitar funcionalidades. Consiste en quitar obstáculos” entre el usuario y su objetivo.
• La cita de Antoine de Saint-Exupéry que vertebra el comando: “La perfección se alcanza no cuando no hay nada más que añadir, sino cuando no queda nada que quitar”.
• Quita solo obstáculos: preserva la funcionalidad necesaria y la accesibilidad.

Las reglas que distill nunca rompe

• Nunca sacrifica la accesibilidad por el minimalismo.
• Nunca simplifica tanto que el diseño se vuelva confuso.
• Nunca quita información que el usuario necesita para decidir.
• Nunca sobresimplifica dominios genuinamente complejos.

Sus métricas de éxito son medibles: finalización de tareas más rápida, menor carga cognitiva, jerarquía más clara, completitud mantenida y mejor rendimiento.

harden: robustecer para el mundo real

harden actúa en el tercer eje, el de la resiliencia. Su directiva central lo resume todo: “los diseños que solo funcionan con datos perfectos no están listos para producción”. Mientras bolder, quieter y distill trabajan la estética y la claridad, harden se asegura de que el diseño no se rompa cuando la realidad —textos larguísimos, errores de red, idiomas RTL— llega de visita.

Cuándo aplicarlo

• Antes de un despliegue a producción.
• Durante la fase de revisión de diseño.
• Al probar interfaces con datos imperfectos.
• Antes de pasar el resultado a /impeccable polish.

Las tres áreas que endurece

1. Extremos de entrada (input extremes)

• Textos muy largos (nombres, descripciones, títulos).
• Entradas vacías o de un solo carácter.
• Caracteres especiales, emoji, texto RTL.
• Números grandes y listas extensas (más de 1000 ítems).

2. Escenarios de error

Fallos de red, errores de API (400, 401, 403, 404, 500), errores de validación, problemas de permisos, rate limiting y operaciones concurrentes.

3. Internacionalización (i18n)

• Reservar un presupuesto de espacio del 30-40% extra para traducciones.
• Soporte RTL (árabe, hebreo).
• Conjuntos de caracteres (CJK, emoji, cirílico).
• Formateo localizado de fecha, hora y números.

Cómo invocarlo

/impeccable harden src/components/UserTable.tsx
/impeccable harden profile

Patrones concretos que aplica

Para el desbordamiento de texto, harden recurre a CSS resiliente en lugar de anchos fijos:

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
}

Para fechas internacionalizadas, usa la API nativa de formateo:

new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024

Y para los estados de error, exige siempre una ruta de recuperación visible:

{error && (<button onClick={retry}>Try again</button>)}

Antes y después conceptual

Mal: anchos fijos, asume la longitud del inglés, errores genéricos sin salida.

Bien: layouts flexibles, tamaño dirigido por el contenido, mensajes de error específicos con opciones de recuperación.

Checklist de verificación

harden valida sistemáticamente contra estos casos: textos de 100+ caracteres, emoji en todos los campos, idiomas RTL (árabe/hebreo), caracteres CJK, conexión deshabilitada o limitada, datasets de 1000+ ítems, acciones concurrentes rápidas, todas las variaciones de estado de error y los estados de datos vacíos.

Su regla crítica, válida más allá del diseño: “nunca confíes solo en la validación del lado del cliente” y evita los contenedores de texto de ancho fijo.

Tabla comparativa de los cuatro comandos

Comando	Eje	Propósito	Target típico	Regla de oro
bolder	Intensidad ↑	Amplificar impacto y personalidad sin AI slop	Landings, hero, branding	No hacer que todo sea audaz
quieter	Intensidad ↓	Reducir ruido visual preservando carácter	Dashboards, lectura, ajustes	No eliminar jerarquía ni personalidad
distill	Simplicidad	Quitar lo superfluo hasta lo esencial	Flujos, checkout, formularios	No sacrificar accesibilidad ni claridad
harden	Resiliencia	Soportar datos reales, errores e i18n	Tablas, perfiles, listas	Nunca confiar solo en validación cliente

Cómo combinar las perillas según el contexto

La maestría con estos comandos no está en aplicarlos aislados, sino en secuenciarlos según lo que tu PRODUCT.md declara y lo que el detector y la revisión detectaron. Un flujo típico de refinamiento:

sequenceDiagram
    participant Dev as Tú
    participant Imp as Impeccable
    Dev->>Imp: /impeccable critique hero
    Imp-->>Dev: "Genérico, sin personalidad"
    Dev->>Imp: /impeccable bolder hero
    Imp-->>Dev: Tipografía dramática, color dominante
    Dev->>Imp: /impeccable distill hero
    Imp-->>Dev: Una sola CTA, copy escaneable
    Dev->>Imp: /impeccable harden hero
    Imp-->>Dev: Estados de error, i18n, textos largos
    Dev->>Imp: /impeccable polish hero
    Imp-->>Dev: Pulido final

Algunas combinaciones que conviene memorizar:

• bolder + distill: sube la personalidad y, a la vez, quita el ruido que la audacia podría introducir. Resultado: audaz pero limpio. Es la receta de un hero memorable.
• quieter + harden: ideal para herramientas internas o productos serios (finanzas, salud). Calma la estética y la blinda contra datos reales.
• distill + harden: un flujo de checkout no quiere ni un elemento de más (distill) ni romperse con una tarjeta rechazada (harden).
• Nunca bolder + quieter en la misma iteración: son extremos del mismo eje. Elige una dirección.

El criterio para decidir siempre vuelve al mismo sitio: ¿qué pide el producto? Una marca de moververde y experimental tolera mucho bolder; un panel de administración hospitalaria pide quieter y mucho harden. Las perillas son universales; la posición correcta la dicta tu contexto.

Resumen

• Los comandos de refinamiento mueven un diseño en una dirección concreta tras haberlo diagnosticado; son las perillas de intensidad y resiliencia de Impeccable.
• bolder sube la expresividad (tipografía dramática, un color dominante, escala 3x-5x) rechazando los defaults de la IA; nunca hace que todo sea audaz.
• quieter es su opuesto: baja el ruido visual (desaturar al 70-85%, acento del 10%, pesos contenidos) sin perder personalidad ni jerarquía.
• distill actúa en otro eje: elimina lo superfluo hasta lo esencial, quitando obstáculos pero nunca accesibilidad ni claridad.
• harden robustece para el mundo real: extremos de entrada, escenarios de error (400-500), i18n con 30-40% de espacio extra y estados vacíos.
• Se combinan según el PRODUCT.md: bolder+distill para un hero, quieter+harden para herramientas serias; nunca bolder y quieter juntos.
• Todos se invocan como /impeccable <comando> <target> y suelen cerrar pasando el resultado a /impeccable polish.

Siguiente: Estructura visual: layout, typeset, colorize