distill

Visión general de la skill distill

Qué hace distill

La skill distill es un flujo de simplificación de interfaces pensado para reducir un diseño a su función esencial. Está hecha para esos momentos en los que una interfaz se siente recargada, ruidosa, demasiado decorada, sobredimensionada en funciones o difícil de escanear. En lugar de proponer más UI, distill empuja en la dirección contraria: quitar, combinar, ocultar y aclarar hasta que el objetivo principal del usuario sea evidente.

Cuándo encaja mejor distill para diseño de UI

Usa distill for UI Design cuando ya tienes una pantalla, un componente o un flujo y quieres limpiarlo sin perder utilidad. Encaja bien para diseñadores, frontend engineers y product builders que se enfrentan a:

• dashboards saturados
• formularios con demasiadas opciones
• CTAs que compiten entre sí
• jerarquía visual débil
• exceso de colores, estilos o tratamientos visuales
• feature creep que oculta la tarea principal

El trabajo real que resuelve

La función práctica de la skill distill no es “hacerlo más bonito”. Es identificar el único objetivo principal de una UI y después reducir todo lo que distrae de ese objetivo. En la práctica, eso implica decidir qué eliminar por completo, qué colapsar mediante progressive disclosure, qué fusionar y qué enfatizar.

Qué diferencia a distill de un prompt genérico

Un prompt genérico del tipo “simplifica esta UI” suele dar consejos vagos. distill resulta más útil porque plantea la simplificación como una auditoría deliberada:

1. evaluar de dónde viene la complejidad
2. identificar la tarea esencial
3. eliminar elementos y variaciones innecesarias
4. mantener la utilidad mientras se gana claridad

Esa estructura es la principal razón para instalarla en vez de depender de prompts improvisados.

Precaución clave antes de adoptarla

La principal limitación es que distill no funciona de forma independiente. Sus propias instrucciones exigen invocar primero /frontend-design y, si todavía no existe contexto de diseño, ejecutar /teach-impeccable antes de continuar. Si buscas una skill que funcione como un añadido inmediato y aislado, esta cadena de dependencias es el principal freno de adopción que conviene conocer desde el principio.

Cómo usar la skill distill

Contexto de instalación de distill

Esta skill vive en pbakaus/impeccable dentro de .agents/skills/distill. Un patrón de instalación habitual es:

npx skills add pbakaus/impeccable --skill distill

Como el fragmento del repositorio solo expone SKILL.md, conviene tratar ese archivo como la fuente de uso autoritativa y asumir que la skill se apoya en skills complementarias del mismo repo.

Lee primero este archivo

Empieza por:

• SKILL.md

Para el uso de distill, este archivo importa más que un README porque contiene el contrato real de invocación, el flujo de trabajo y los pasos previos obligatorios.

Respeta la cadena de dependencias obligatoria

Antes de usar distill, haz esto en este orden:

1. invoca /frontend-design
2. sigue su protocolo de recopilación de contexto
3. si aún no hay contexto de diseño, ejecuta /teach-impeccable
4. solo entonces ejecuta distill

No es un detalle cosmético opcional. La skill depende explícitamente de un contexto de diseño previo, así que saltarte este paso aumenta la probabilidad de obtener una simplificación superficial o arbitraria.

Qué input necesita distill

La skill distill funciona mejor cuando le das un objetivo concreto y contexto suficiente para juzgar qué es esencial. Los buenos inputs suelen incluir:

• la pantalla, componente o flujo específico
• la tarea principal del usuario
• problemas actuales como saturación, demasiadas acciones, jerarquía débil o ruido visual
• restricciones como campos obligatorios, legal copy, límites de plataforma o reglas del design system existente

Ejemplos mínimos de objetivo:

• distill checkout sidebar
• distill onboarding modal
• distill analytics dashboard header

Cómo convertir un objetivo difuso en un buen prompt para distill

Prompt débil:

• “Simplify this page.”

Prompt más sólido, en estilo distill guide:

• “Use distill on the settings screen. The main goal is helping users change notification preferences quickly. Current issues: too many card sections, repeated labels, three competing save actions, and decorative borders everywhere. Keep required compliance copy and email/SMS toggles. Recommend what to remove, combine, hide, or restyle.”

Por qué funciona:

• nombra un único objetivo principal
• expone las posibles fuentes de complejidad
• deja claro qué no se puede eliminar
• pide decisiones de simplificación accionables, no una crítica genérica

Qué está buscando distill

Según la fuente, distill audita activamente:

• demasiados elementos
• variación excesiva de estilos
• sobrecarga de información
• ruido visual
• jerarquía confusa
• feature creep

Si ya sabes cuál de estos problemas aplica, dilo. La skill toma decisiones con más claridad cuando no tiene que inferirlo todo a partir de contexto limitado.

Flujo de trabajo recomendado con distill en la práctica

Un buen flujo realista es:

1. recopilar contexto de pantalla con /frontend-design
2. definir el único objetivo principal del usuario
3. ejecutar distill sobre un objetivo específico
4. revisar sus sugerencias de eliminación y consolidación
5. pedir una justificación de layout revisado o un plan de implementación
6. comprobar si la versión simplificada sigue cubriendo los edge cases necesarios

Esto importa porque simplificar en exceso es fácil. El mejor uso de distill suele ser una pasada para quitar ruido y otra para verificar que las tareas esenciales siguen intactas.

Qué tipo de salida puedes esperar

Deberías esperar recomendaciones sobre:

• qué eliminar por completo
• qué ocultar detrás de progressive disclosure
• qué fusionar en un único control o sección
• qué tratamientos visuales reducir
• cómo reforzar la jerarquía en torno a la acción principal

No esperes detalles de implementación pixel-perfect a partir de la skill por sí sola, salvo que hagas preguntas de seguimiento explícitas.

Consejos prácticos que mejoran la calidad del resultado

Para un mejor uso de distill:

• trabaja una pantalla cada vez, no un producto entero
• define la tarea principal en una sola frase
• separa los elementos obligatorios de los opcionales
• menciona las acciones críticas para negocio que deben seguir visibles
• incluye capturas, listas de componentes o estructura de código cuando sea posible

La lógica central de la skill es “qué se puede quitar sin perjudicar el objetivo principal”, así que la ambigüedad sobre qué elementos son obligatorios es la forma más rápida de obtener recomendaciones flojas.

Cuándo distill es especialmente eficaz

La skill distill rinde mejor en UIs que ya funcionan pero se sienten abarrotadas. Resulta especialmente útil para:

• herramientas internas con años de controles acumulados
• pantallas enterprise con demasiados datos visibles
• vistas móviles donde la densidad dificulta el escaneo
• rondas de rediseño en las que el alcance del producto está fijado pero la claridad es baja

Preguntas frecuentes sobre la skill distill

¿distill es buena para principiantes?

Sí, siempre que ya tengas algo concreto que simplificar. La skill ofrece un marco de simplificación más claro que una crítica de diseño abierta. El principal reto para principiantes es el flujo previo obligatorio: necesitas seguir la preparación de contexto de diseño del repo en lugar de tratar distill como un comando mágico de una sola línea.

¿distill sirve solo para limpieza visual?

No. La skill distill también apunta a la complejidad estructural: demasiadas acciones, demasiada información visible a la vez, prioridades poco claras y sobrecarga de funcionalidades. Tiene tanto que ver con interacción y jerarquía como con el estilo visual de superficie.

¿Cuándo no debería usar distill?

No uses distill cuando el problema principal sea una capacidad ausente, requisitos poco claros o una mala definición del flujo de tarea. Simplificar una UI antes de entender el objetivo real del usuario puede hacer que elimines lo incorrecto. Tampoco encaja bien si necesitas ideación amplia en lugar de reducción.

distill frente a prompting normal

La ventaja de distill frente a un prompt normal del tipo “haz esto más limpio” está en su modelo de decisión más acotado. Pregunta explícitamente qué es necesario, qué es nice-to-have y qué se puede eliminar, ocultar o combinar. Por eso funciona mejor para decidir cómo despejar una interfaz que para exploración visual libre.

¿distill funciona sin el resto de impeccable?

No de forma limpia. Según la fuente, distill espera que antes se ejecuten /frontend-design y, a veces, /teach-impeccable. Si tu entorno no puede invocar esas skills complementarias, todavía puedes imitar el flujo manualmente, pero pierdes parte de la preparación de contexto prevista.

¿distill encaja en equipos code-first?

Sí. La decisión de instalar distill tiene sentido para equipos muy centrados en frontend, porque la simplificación suele depender de entender qué es realmente obligatorio en el código y en la lógica de producto. Resulta especialmente útil cuando la deuda de diseño se manifiesta como demasiados controles, estados y tratamientos visuales en una UI ya entregada.

Cómo mejorar la skill distill

Dale a distill un único objetivo principal

La mejora con más impacto es definir una sola tarea principal para la UI objetivo. La propia fuente enfatiza que debe haber ONE primary user goal. Si proporcionas varios objetivos con el mismo peso, la skill distill no puede simplificar con decisión porque todo empieza a parecer esencial.

Marca qué se puede quitar, qué debe quedarse y qué sigue abierto

Un buen prompt para distill separa:

• lo que debe mantenerse
• lo que se puede eliminar con seguridad
• lo que es incierto o negociable

Este encuadre evita dos fallos habituales: una salida tímida que no elimina nada, o una salida agresiva que recorta elementos necesarios.

Nombra las fuentes reales de complejidad

No digas solo “se siente recargado”. Dile a distill si la saturación viene de:

• demasiados botones
• información repetida
• demasiados estilos visuales
• bordes o sombras innecesarios
• mala agrupación
• demasiadas opciones visibles

Esto mejora la precisión de las recomendaciones porque la skill ya razona en esas categorías.

Pide decisiones de eliminación, no crítica genérica

Un prompt mejor sería:

• “Use distill and list what should be removed, combined, hidden, or visually softened.”

Un prompt más débil sería:

• “Thoughts on this design?”

El primero genera una salida útil para implementar. El segundo invita a comentarios amplios y reduce el valor del flujo distill guide.

Usa una iteración para simplificar y otra para validar

Después de la primera pasada, pregunta:

• qué riesgos de usabilidad introduce la simplificación
• qué edge cases pueden haber quedado demasiado ocultos
• si el CTA principal ahora está más claro
• si las acciones secundarias críticas siguen siendo fáciles de descubrir

Esta segunda pasada mejora el uso de distill porque la calidad de la simplificación no depende solo de reducir, sino de conservar la capacidad correcta.

Aporta artefactos, no solo descripciones

Si puedes, aporta:

• una captura de pantalla
• un wireframe
• un inventario de componentes
• la jerarquía de información actual
• fragmentos de código relevantes para UI condicional

Cuanto más concreto sea el objetivo, más confianza tendrá distill para identificar qué es decorativo, redundante o estructuralmente innecesario.

Vigila los modos de fallo más comunes

Los resultados débiles suelen aparecer cuando:

• el propósito principal de la pantalla no está claro
• cada petición de stakeholders se trata como igual de importante
• se omiten restricciones obligatorias
• pides simplificar un producto entero de una sola vez
• se omitió la recopilación de contexto con /frontend-design

Si distill se siente genérica, la causa habitual no es la skill, sino un input poco especificado.

Pídele a distill que explique los tradeoffs

Una de las mejores formas de confiar en la salida es pedir:

• qué beneficio para el usuario aporta cada eliminación
• qué coste de discoverability implica ocultar funcionalidades
• por qué un control fusionado es mejor que controles separados

Eso convierte la skill distill de una herramienta de limpieza en una herramienta de apoyo a la toma de decisiones, que suele ser más valiosa para su adopción dentro de equipos.

Combina distill con un seguimiento de implementación

Una vez que distill haya identificado la dirección de simplificación, continúa con una segunda petición para obtener:

• estructura de layout revisada
• elecciones de componentes alineadas con el design system
• notas de implementación frontend
• criterios de aceptación para la pantalla simplificada

Ese traspaso suele ser el punto en el que la skill se vuelve realmente útil en la práctica y no solo correcta en lo conceptual.