distill

Descripción general de distill skill

Qué hace distill

distill skill es un flujo de simplificación de diseño de UI centrado en reducir una pantalla a su función esencial. Está pensado para esos casos en los que una interfaz se siente recargada, ruidosa, demasiado decorada o saturada de opciones, y lo que necesitas es una dirección más limpia y más sólida, no más funcionalidades.

Cuándo encaja mejor distill for UI Design

Usa distill for UI Design cuando ya tienes una pantalla, flujo o componente y necesitas hacerlo más sereno y más claro. Encaja bien para diseñadores, frontend engineers, equipos de producto y agentes de IA que trabajen en:

• despejar dashboards, formularios, settings y páginas de detalle
• reducir acciones que compiten entre sí
• simplificar la jerarquía visual
• eliminar ruido decorativo
• convertir layouts “feature-rich” en layouts centrados en la tarea

El trabajo real que resuelve

Los usuarios no instalan distill skill solo para obtener un “diseño más simple”. Lo instalan para responder preguntas más difíciles:

• ¿Qué debe quedarse?
• ¿Qué debe irse?
• ¿Qué conviene ocultar, fusionar o posponer?
• ¿Cuál es el único objetivo principal del usuario en esta pantalla?

Ahí está el valor de distill frente a un prompt genérico de “haz esto más limpio”. Su utilidad está en forzar la priorización antes del rediseño.

Diferenciadores clave

El principal diferenciador es que distill no es un prompt de estilo independiente. La skill depende explícitamente de contexto de diseño previo:

• ejecuta /frontend-design primero
• si todavía no existe contexto de diseño, ejecuta /teach-impeccable antes
• detente y haz preguntas aclaratorias si el objetivo principal o las restricciones no están claras

Esta dependencia importa al decidir si instalarla: distill funciona mejor dentro del sistema de diseño más amplio de impeccable que como un prompt aislado de uso puntual.

Qué conviene saber antes de instalarla

Esta es una skill ligera con un único archivo principal, SKILL.md, y sin scripts, ejemplos ni recursos de referencia incluidos. Eso hace que sea fácil de revisar, pero también significa que la calidad de la salida depende mucho del contexto que aportes. Si buscas una distill guide autosuficiente y muy guiada, esta ruta del repositorio está más orientada a principios que a herramientas.

Cómo usar distill skill

Contexto de instalación de distill

El SKILL.md de origen no incluye un comando de instalación, así que usa tu flujo habitual de instalación de Claude Skills para el repositorio y apunta a la skill distill dentro de pbakaus/impeccable. Si instalas desde el repo, la ruta relevante es:

https://github.com/pbakaus/impeccable/tree/main/.claude/skills/distill

Como esta skill puede invocarla el usuario y acepta una sugerencia de argumento [target], el patrón de uso más práctico es ejecutar distill sobre una pantalla, flujo o componente concreto, no sobre una petición vaga a nivel de todo el producto.

Lee primero este archivo

Empieza por:

• SKILL.md

No hay archivos complementarios como README.md, metadata.json, rules/ o references/ dentro de esta carpeta de skill, así que casi todo el comportamiento útil está definido en ese único archivo. Para evaluar si te conviene instalarla, esto es una buena noticia: puedes revisar toda distill skill rápidamente.

La dependencia obligatoria que muchos pasarán por alto

Antes de usar distill, la skill indica que debes invocar /frontend-design. Ese paso previo contiene principios de diseño, anti-patrones y el “Context Gathering Protocol”. Si todavía no existe contexto de diseño, se espera que ejecutes /teach-impeccable primero.

Esto importa porque los resultados flojos suelen venir de saltarse esta preparación. Si llamas a distill directamente sobre una captura de pantalla o una queja poco concreta, el modelo puede terminar quitando lo que no debe.

Qué input necesita distill

Un buen uso de distill usage empieza con un objetivo concreto y suficiente contexto para identificar la función principal de la UI. Los buenos inputs incluyen:

• la pantalla o el componente exacto
• la tarea principal del usuario
• los problemas actuales, como demasiadas acciones o una jerarquía débil
• restricciones duras, como compliance, controles que deben mantenerse o límites de ingeniería
• si la simplificación debe eliminar, fusionar, ocultar o revelar contenido progresivamente

Un input débil:

• “Simplify this page.”

Un input más sólido:

• “Use distill on our analytics dashboard. The primary user goal is to spot traffic changes in under 10 seconds. Keep the date range picker and export action. We can remove secondary filters from the default view if needed. Current issues: too many cards, repeated metrics, heavy borders, and three competing CTAs.”

Cómo convertir un objetivo difuso en un prompt completo

Una estructura de prompt práctica para una distill guide:

1. Nombra el objetivo.
2. Indica el único objetivo principal del usuario.
3. Enumera los elementos que deben mantenerse.
4. Enumera los candidatos probables para eliminar u ocultar.
5. Describe qué se siente recargado.
6. Pide un plan de simplificación antes del rediseño final.

Ejemplo:

“Apply distill to the onboarding modal for first-time team admins. The one goal is helping them invite teammates. Must keep: email entry, role selector, skip option. Nice-to-have elements that can be deferred: tips carousel, template preview, feature badges. The current design feels crowded because it mixes setup, education, and marketing. First identify complexity sources, then propose what to remove, combine, or hide.”

Flujo de trabajo recomendado

Un flujo de alta señal para distill usage:

1. Reúne contexto mediante /frontend-design.
2. Confirma que el objetivo principal del usuario sea único.
3. Ejecuta distill sobre una sola pantalla, no sobre todo el producto.
4. Revisa qué recomienda eliminar, combinar u ocultar.
5. Comprueba si algún elemento “eliminado” en realidad es obligatorio por política, soporte o lógica de negocio.
6. Itera con restricciones más precisas.
7. Solo entonces pasa al refinamiento visual o a la implementación.

Este orden importa porque distill es, sobre todo, una herramienta de priorización, no una pasada final de pulido.

Qué es probable que analice distill

Por el texto de la skill, distill busca:

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

También empuja de forma explícita a identificar el “20% que aporta el 80% del valor”. Si a tu equipo le cuesta recortar alcance, ese enfoque es una de las razones más útiles para usar esta skill.

Cuándo parar y aclarar en lugar de seguir avanzando

La guía fuente dice que hay que detenerse y hacer preguntas si el codebase o el prompt no dejan claros estos puntos:

• el objetivo principal del usuario
• qué es necesario frente a qué es accesorio
• qué se puede eliminar, ocultar o combinar

Ese límite es importante. Si tu equipo no logra ponerse de acuerdo sobre la tarea central de la pantalla, distill hará visible esa ambigüedad de producto en lugar de resolverla mágicamente.

Mejores objetivos para un primer uso de distill

Buenos primeros objetivos:

• una página de settings recargada
• un dashboard con demasiadas cards
• un formulario con demasiados campos opcionales visibles al mismo tiempo
• un modal que intenta hacer varias cosas a la vez
• una sección landing con varias CTAs compitiendo

Malos primeros objetivos:

• flujos muy regulados donde las eliminaciones están muy limitadas
• trabajo de design systems sin una pantalla concreta
• pantallas que ya son mínimas pero sufren más bien problemas de interacción

Qué esperar de la salida

Es razonable esperar que distill skill sea más útil cuando produce:

• un diagnóstico de las fuentes de complejidad
• una jerarquía más clara de contenido y acciones
• recomendaciones para eliminar, fusionar o revelar progresivamente
• un recorrido de usuario más enfocado

No esperes transformaciones de código, auditorías automatizadas ni diffs de componentes listos para implementar solo con esta skill.

Preguntas frecuentes sobre distill skill

¿distill es mejor que un prompt normal de simplificación?

Por lo general, sí, si necesitas simplificación estructurada y no solo una limpieza genérica. La skill aporta un enfoque repetible para detectar fuentes de complejidad y obliga a definir un único objetivo principal. Un prompt normal puede decir “hazlo más limpio”, pero distill tiene más probabilidades de preguntar qué debería desaparecer realmente.

¿distill es apta para principiantes?

Sí, con un matiz. El lenguaje es directo y el repo es fácil de inspeccionar porque básicamente se reduce a un archivo. La parte difícil no es la instalación, sino contar con suficiente contexto de UI para usar la skill bien. Quienes empiezan deberían trabajar con una sola pantalla y restricciones explícitas.

¿Necesito el resto del repositorio impeccable?

No hace falta leer todo el repo antes de probar distill install, pero sí conviene respetar la dependencia documentada de /frontend-design y, si hace falta, /teach-impeccable. Esta skill está diseñada para funcionar dentro de ese ecosistema, no para sustituirlo por completo.

¿Cuándo no debería usar distill?

Evita distill cuando el problema principal sea:

• lógica de interacción rota más que desorden visual
• falta de investigación de usuarios
• estrategia de producto poco clara a través de muchas pantallas
• problemas de accesibilidad o compliance que requieren añadir soluciones, no restar elementos

En esos casos, simplificar por sí sola puede llevar a conclusiones engañosas.

¿distill sirve para tareas que no son de UI?

La evidencia del repositorio apunta a uso en UI y diseño frontend. La redacción, la dependencia de /frontend-design y las categorías de análisis giran todas en torno a la simplificación de interfaces. Si quieres simplificar copy, sistemas o arquitectura, tómalo como inspiración, no como una opción garantizada.

Cómo mejorar distill skill

Dale a distill una sola pantalla y un solo objetivo

La forma más rápida de mejorar la salida de distill skill es acotar el alcance. “Simplify our app” es demasiado amplio. “Distill the billing settings page so users can update payment method faster” sí es accionable. La skill funciona mejor cuando el objetivo tiene una sola tarea dominante.

Separa lo obligatorio de lo negociable

Un prompt sólido debería distinguir entre:

• contenido o acciones obligatorios
• elementos opcionales que se pueden ocultar o eliminar
• elementos decorativos que se pueden retirar primero

Sin esto, distill puede recomendar recortar algo que no es negociable ni política ni funcionalmente, lo que solo hace perder una ronda de revisión.

Dile a distill qué tipo de simplificación quieres

No toda simplificación consiste en eliminar. Los resultados mejoran cuando especificas las palancas preferidas:

• eliminar
• combinar
• ocultar mediante progressive disclosure
• rebajar el énfasis visual
• secuenciar en varios pasos en lugar de mostrarlo todo de una vez

Esto convierte distill usage de un simple “hazlo más simple” en una operación de diseño mucho más precisa.

Incluye síntomas reales de complejidad

No digas solo que la pantalla se siente recargada. Nombra el desorden:

• cinco botones above the fold
• métricas duplicadas
• tres estilos de texto sin significado claro
• cards con sombras, bordes y fondos tintados al mismo tiempo
• settings secundarios visibles antes de completar lo principal

Los síntomas concretos ayudan al modelo a mapear el problema con las propias categorías de complejidad de la skill.

Vigila el modo de fallo principal

El mayor riesgo en distill for UI Design es simplificar en exceso lo que no toca. Una pantalla puede verse más limpia visualmente y, aun así, volverse menos usable si desaparecen contexto crítico, señales de confianza o controles para casos límite. Tras la primera pasada, revisa cada eliminación propuesta frente a tareas reales de usuario.

Pide una respuesta por etapas

Un prompt más sólido pide la salida en etapas:

1. identificar fuentes de complejidad
2. definir la tarea esencial
3. listar eliminaciones, fusiones y elementos ocultos
4. proponer la estructura simplificada

Ese enfoque por etapas hace que la distill guide sea más auditable y más fácil de refinar que pedir un rediseño inmediato.

Itera con restricciones después de la primera pasada

Si la primera salida es demasiado agresiva o demasiado conservadora, afínala con indicaciones concretas:

• “Keep all legal disclosures visible.”
• “Do not add more steps.”
• “We can hide advanced filters behind an accordion.”
• “The primary CTA must remain above the fold.”

Esta es la forma más práctica de mejorar los resultados de distill skill sin reescribir todo el brief.

Combina distill con una revisión de implementación

Una vez que distill identifique qué conviene recortar o restar protagonismo, pasa el resultado por tu revisión habitual de frontend y producto. La skill destaca en el encuadre de decisiones. Aun así, tu equipo debe validar manejo de estado, accesibilidad, claridad del contenido y casos límite antes de publicar.