lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

skill principiante coding & devclaude-code

Taste Skill: corrige el diseño genérico de IA con tres controles

Úsalo para orientar a tu agente hacia interfaces distintivas con movimiento, variedad y densidad visual deliberados.

✓ verificado el 10 jun 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Este es un archivo de configuración para tu agente de IA. Adjúntalo a Claude Code, Codex, OpenClaw, Hermes o cualquier agente (o pégalo allí) y di «ayúdame a configurar esto». Contiene las herramientas, claves, comandos y pasos prácticos del recurso, no el recurso en sí.

  • Dificultad: principiante
  • Recurso de origen: «Taste Skill: corrige el diseño genérico de IA con tres controles» — WISD Lab, /hub/taste-skill

Para tu agente de IA: lee esto primero

Vas a ayudarme a HACER QUE ESTO FUNCIONE de verdad y a enseñarme cómo funciona mientras avanzamos. No te limites a soltar la solución. Sigue este método (extraído de la skill /teach de Matt Pocock):

  1. Primero, la misión. Antes de configurar nada, hazme UNA pregunta: ¿para qué quiero usar esto? Vincula todo a ese objetivo. Omite los pasos que no contribuyan a él.
  2. Adáptate a mi nivel. Pregunta una vez por mi experiencia y sitúa cada explicación un poco por encima de ella. Ni una clase para principiantes ni algo que me supere.
  3. Constrúyelo CONMIGO, no POR mí. En cada paso: di qué vamos a hacer en una frase sencilla y después haz que YO ejecute el comando o realice la edición.
  4. Comprueba que lo entiendo. Después de cada paso, hazme una pregunta breve o pídeme que prediga el resultado. Si me pierdo, vuelve a enseñar ese punto antes de continuar.
  5. Este archivo es solo para configurar. La explicación completa de POR QUÉ funciona cada pieza está en el Hub de agentes de WISD Lab; cuando pregunte por qué, remíteme al recurso allí.
  6. Termina con el siguiente paso. Cuando funcione, dame UN lugar para profundizar.

Pasos de configuración

Este recurso no tiene pasos de configuración que se puedan extraer: es un recurso conceptual. Pregunta al miembro qué quiere construir a partir de él.

Solo pasos de configuración: el tutorial completo, el razonamiento y cualquier prompt listo para usar están en el recurso: /hub/taste-skill.

ver en .md ¿Prefieres el recurso entero?

Taste Skill: corrige el diseño genérico de IA con tres controles

Taste Skill es una skill que da a tu agente de programación con IA mejor criterio de diseño para que deje de producir el aspecto genérico de «contenido mediocre de IA», con degradados morados y tarjetas previsibles, al que recurren por defecto todos los modelos.

La instalas una vez y tu agente la lee antes de escribir cualquier código de frontend.

Tres controles ajustables te permiten acercar el resultado a tu gusto sin escribir una sola línea de CSS.

Recursos

Cómo funciona

Una skill es una carpeta de instrucciones que tu agente lee y sigue, y su archivo principal de instrucciones se llama SKILL.md.

Taste Skill coloca tres controles numéricos al principio de SKILL.md: VARIANCE controla cuánto se aleja el diseño de los valores seguros por defecto, MOTION_INTENSITY controla cuánta animación aparece y VISUAL_DENSITY controla lo compacta que es la distribución.

Cada control usa una escala del uno al diez, y los valores predeterminados son 8 para VARIANCE, 6 para MOTION_INTENSITY y 4 para VISUAL_DENSITY.

Cuando editas esas cifras en SKILL.md, la siguiente generación de tu agente usa los ajustes nuevos y nunca tienes que reinstalar nada.

Paso 1: instala la skill

Abre tu terminal dentro del proyecto donde trabaja tu agente, porque la skill debe instalarse en esa carpeta.

Ejecuta el comando de instalación siguiente para obtener la variante principal de diseño.

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Este comando descarga la skill y la coloca en tu proyecto para que el agente la encuentre en la siguiente ejecución.

Paso 2: confirma que se instaló la skill

Conviene verificar la instalación antes de pedir al agente que construya nada, porque la ausencia de una skill falla en silencio.

Comprueba que ahora existe una carpeta de skill llamada design-taste-frontend en tu proyecto y que contiene un archivo llamado SKILL.md.

Abre SKILL.md y mira el principio del archivo.

Deberías ver los tres controles con sus cifras, lo que indica que la skill se instaló correctamente y está lista para leerse.

Paso 3: genera un frontend y observa cómo se aplica el criterio predeterminado

Ahora pide al agente que construya algo para ver cómo la skill cambia el resultado.

Pega esto en tu agente:

Construye la sección principal de una página de destino para una aplicación de productividad. Usa la skill design-taste-frontend para todas las decisiones de estilo y distribución.

Tu agente lee primero la skill y después escribe el código usando los controles predeterminados.

Mira el resultado y observa que evita el degradado morado habitual y las tres tarjetas idénticas de características, porque la skill carga sus reglas de diseño en el agente antes de que recurra a sus propios valores por defecto.

Paso 4: abre SKILL.md y ajusta los tres controles

Si el aspecto predeterminado se acerca a tu gusto pero no encaja del todo, cambia tú las cifras.

Abre SKILL.md y encuentra los tres controles al principio del archivo.

Edita las cifras según lo que quieras; por ejemplo, baja VARIANCE a 4 para una distribución centrada más tranquila, sube MOTION_INTENSITY a 8 para más movimiento ligado al desplazamiento o sube VISUAL_DENSITY a 7 para un aspecto de panel compacto.

Guarda el archivo, porque tu agente lee las cifras nuevas en la siguiente generación sin reinstalar nada.

Paso 5: vuelve a generar con tus ajustes nuevos

Pide al agente que reconstruya el mismo componente para compararlo con la primera versión.

Pega esto en tu agente:

Reconstruye la sección principal usando los controles actualizados de design-taste-frontend.

Compara el resultado nuevo con el primero y comprueba que aparezca el cambio que hiciste, como más movimiento o una distribución más densa.

Repite este bucle de ajustar y regenerar hasta que el resultado encaje con tu gusto.

Paso 6: actualiza una página ya generada por IA con la variante de rediseño

El repositorio incluye una variante redesign-skill que corrige páginas que tu agente construyó antes de tener orientación de diseño.

Instala la variante de rediseño con el comando siguiente.

npx skills add https://github.com/Leonxlnx/taste-skill --skill "redesign-skill"

Después dirige a tu agente al archivo que quieres corregir.

Pega esto en tu agente:

Rediseña la página existente en app/page.tsx usando redesign-skill. Conserva el contenido y la estructura, pero elimina el aspecto genérico de IA y aplica un criterio de diseño real.

Tu agente reescribe el estilo conservando el contenido, lo que te evita reconstruir la página desde cero.

Paso 7: elige una variante que encaje con el aspecto que quieres

El repositorio incluye varias variantes además de la predeterminada, cada una ajustada a un estilo concreto.

Elige minimalist-skill si quieres distribuciones sobrias y contenidas, o brutalist-skill si quieres diseños crudos, de alto contraste y formas en bloque.

Elige soft-skill si quieres superficies redondeadas suaves y colores tranquilos, o gpt-taste para un aspecto equilibrado de propósito general.

Instala cualquier variante igual que la primera, cambiando el nombre tras la opción --skill, porque cada variante es otra carpeta de instrucciones que lee tu agente.

Recursos relacionados