design-taste-frontend (Leonxlnx/taste-skill)

Name: design-taste-frontend (Leonxlnx/taste-skill) review
Item: design-taste-frontend (Leonxlnx/taste-skill)
Rating: 16.2
Author: Agent Skills

Da una dirección visual propia a landing pages y pantallas de app, y corrige resultados genéricos revisando capturas.

design-taste-frontend: elimina los indicios de «AI slop» (etiquetas superiores en mayúsculas, marcadores 01/02) y gana la tarea de rediseño, pero promedia por debajo del control (3.6 vs 4.0) porque una landing page salió rota, con 3.7 veces los tokens

Según el casoPrecaución

Codex CLI · gpt-6-astra

16.2 / 30

Mejora frente a sin skill: -0.38 · Según el caso · 18 ejecuciones

Según el caso: el total 16.2/30 está por debajo de 22 y la mejora -0.38 está por debajo de +1.0. Para ser recomendada hace falta un total de 22/30, una calidad de salida de 3.5 y una mejora de +1.0.

SOTA

Aprobada

Probada con Codex.

Cubre Codex, Claude Code

Codex CLI 0.166 (nivel SOTA): 18 ejecuciones puntuadas. Una pasada aquí también cubre Claude Code según nuestra regla de niveles; no dice nada sobre el segundo nivel.

Puntuaciones

Cada dimensión va de 0 a 5 y las seis suman el total sobre 30. 5 es mejor en todas las dimensiones. Coste 5 significa barato y rápido. Instalación 5 significa fácil.

Fiabilidad de activación: 5.0
Mejora frente a sin skill: 1.6
Calidad de salida: 3.6
Coste en tokens y tiempo: 0.0
Instalación y portabilidad: 3.0
Seguridad: 3.0

Revisión de seguridad

Precaución

Escaneo estático: 10 CRITICAL / 44 HIGH / 9 MEDIUM. Revisión manual: Revisada: ejecutable con salvedades (scripts Node incluidos; hallazgos del escáner explicados). Un escaneo limpio no demuestra que una skill sea segura.

Instalar

npx skills@latest add Leonxlnx/taste-skill --skill taste-skill

Origen

Commit fijado: 12af471f627f866411b4bd785b19646d3672784c

Probada: 2026-11-02

Qué probamos

Nueva landing page a partir de un brief — Crea un sitio de una página para Tidepool, una marca pequeña de snacks de algas que vende por suscripción (tres sabores, $14/caja, envío mensual). Escribe un único index.html autocontenido con CSS en línea y JS mínimo solo si hace falta. Sin frameworks, sin herramientas de build…
Interfaz de panel con muchos datos — Crea una página de panel para un equipo municipal de monitorización de la calidad del agua: lecturas actuales de 6 estaciones (pH, turbidez, cloro, temperatura), una tendencia de 7 días para cada una y un panel de alertas. Un único dashboard.html autocontenido con CSS/JS en línea y lecturas codificadas directamente en el archivo…
Reformula una página existente sosa — old.html es la página de inicio actual de Granite Peak Climbing Gym (Boulder, CO). Rediseñala como new.html: conserva todo su contenido real (precios, clases, horarios, dirección) pero haz que la página parezca propia de este gimnasio concreto. HTML/CSS autocontenido, sin fra…

Ventajas

La skill se activó sin nombrarla: se leyó el archivo de la skill en 6/6 ejecuciones con skill.

Inconvenientes

Sin mejora medible frente a sin skill (-0.38, dentro del ruido).
Un prompt de una frase obtuvo 4.29, frente a 3.58 con la skill (-0.71).
Usa 3.74 veces los tokens de sin skill.
Salvedad de la prueba: una página del grupo con skill salió rota y la skill usó 3.7 veces los tokens de sin skill. Las puntuaciones proceden de hojas de contacto a ciegas.
n=2 por tarea y rama; las diferencias de menos de aproximadamente 1 punto son ruido.

Reseña

Codex CLI 0.166 (gpt-6-astra, razonamiento bajo) en un PC Windows dedicado a pruebas, un proyecto temporal nuevo y HOME/TMPDIR/cachés temporales por ejecución, skill instalada (tratamiento) o ausente (control) o ausente con el requisito central de la skill condensado en una frase añadida al prompt (grupo del prompt de una frase), 2 ejecuciones por grupo y tarea, red desactivada, escrituras en /tmp bloqueadas. Los prompts nunca mencionan la skill (salvo el texto indicado abajo). Las mismas tres tareas para todos los grupos que en ui-ux-pro-max y frontend-design: una landing page para la marca de snacks de algas Tidepool, un panel municipal de calidad del agua y un rediseño de la página de inicio del gimnasio de escalada Granite Peak manteniendo su contenido. El prompt de una frase pide un concepto y una paleta concretos, una pareja tipográfica distintiva y un diseño asimétrico, sin degradados morados, sin Inter por defecto, sin cuadrícula de tres tarjetas, sin marcadores numerados y sin etiquetas superiores en mayúsculas, con imágenes dibujadas en CSS/SVG, y que se comprueben los anchos de escritorio y móvil. Se tomaron capturas de las páginas sin conexión (escritorio y móvil) y se puntuaron a ciegas desde hojas de contacto barajadas.

Comparación de tres ramas

Rama	Puntuación media (0-5)	Tokens por ejecución
Sin la skill	3.96	115k
Prompt de una frase	4.29	298k
Con la skill	3.58	431k

Medido con Codex CLI en 18 ejecuciones, puntuado con comprobaciones basadas en reglas y sin juez LLM. Total 16.2 / 30, veredicto Según el caso.

Aviso: Una página del grupo con skill estaba rota y la skill usó 3.7 veces los tokens de sin skill. Las puntuaciones proceden de hojas de contacto evaluadas a ciegas.

Veredicto: Según el caso (16.2 / 30). Fuente: Leonxlnx/taste-skill, skills/taste-skill, fijada en el commit 12af471. Instalación: npx skills@latest add Leonxlnx/taste-skill --skill taste-skill. Licencia: MIT (LICENSE del repositorio).

Qué es

La skill design-taste-frontend (Leonxlnx/taste-skill): un flujo de dirección de arte para páginas web que ejecuta un script local para elegir una «dirección» de diseño a partir del brief (por ejemplo, «la página es el objeto»), escribe un archivo de dirección y un informe en una carpeta .taste-skill/, y luego construye la página conforme a ello, con reglas contra maquetaciones genéricas de aspecto IA, un conjunto fijo de secciones y comprobaciones visuales.

Cómo lo probamos

Codex CLI 0.166 (gpt-6-astra, razonamiento bajo) en un PC de pruebas Windows dedicado, un proyecto temporal nuevo y HOME/TMPDIR/cachés temporales por ejecución, skill instalada (tratamiento) o ausente (control) o ausente con el requisito central de la skill comprimido en una frase añadida al final del prompt (grupo de una frase), 2 ejecuciones por grupo y tarea, red desactivada, escrituras en /tmp bloqueadas. Los prompts nunca mencionan la skill (salvo la formulación indicada abajo).

Las mismas tres tareas para todos los grupos que en ui-ux-pro-max y frontend-design: una landing page para la marca de snacks de algas Tidepool, un panel municipal de calidad del agua y un rediseño de la página de inicio del rocódromo Granite Peak conservando su contenido. La frase única pide un concepto y una paleta concretos, una combinación tipográfica distintiva y una maqueta asimétrica, nada de degradados morados/Inter por defecto/cuadrícula de tres tarjetas/marcadores numerados/etiquetas superiores en mayúsculas, imágenes dibujadas en CSS/SVG y comprobar la página en anchos de escritorio y móvil. Las páginas se capturaron sin conexión (escritorio y móvil) y se puntuaron a ciegas a partir de hojas de contacto barajadas.

Nueva landing page a partir de un brief — Crea una landing de una sola página para Tidepool, una marca de snacks de algas de pequeño lote que vende por suscripción (tres sabores, $14/caja, envío mensual). Escribe un único index.html autocontenido con CSS en línea y JS mínimo solo si hace falta. Sin frameworks, sin compilación…
Interfaz de panel con muchos datos — Crea una página de panel para un equipo municipal de monitorización de la calidad del agua: lecturas actuales de 6 estaciones (pH, turbidez, cloro, temperatura), una tendencia de 7 días para cada una y un panel de alertas. Un único dashboard.html autocontenido con CSS/JS en línea y datos predefinidos…
Reforma una página existente y sosa — old.html es la página de inicio actual del Granite Peak Climbing Gym (Boulder, CO). Rediséñala en new.html: conserva todo su contenido real (precios, clases, horarios, dirección) pero haz que la página parezca propia de este gimnasio concreto. HTML/CSS autocontenido, sin frameworks…

Las puntuaciones provienen de una lectura a ciegas de Grok Bot (ids barajados, sin mostrar la condición) con una rúbrica fija, 0–5 por ejecución; es un juez de IA, así que las diferencias pequeñas deben tratarse como ruido.

Resultados

La frase única que recibió el tercer grupo: "Define una dirección de arte que evite la estética genérica de la IA: elige un concepto y una paleta concretos para este tema, evita los degradados morados, la Inter por defecto, la cuadrícula genérica de tres tarjetas, los marcadores numerados 01/02 y las etiquetas superiores en mayúsculas, usa una combinación tipográfica distintiva y una composición asimétrica, dibuja las imágenes en CSS/SVG y revisa la página en anchos de escritorio y móvil y corrige lo que se vea mal."

Tarea	Puntuación control	Una frase	Con la skill	Tokens control	Tokens de una frase	Tokens con la skill	Skill leída
t1-landing	4.12	4.38	2.75	101k	312k	397k	2/2
t2-dashboard	3.75	4.38	3.5	115k	330k	600k	2/2
t3-redesign	4.0	4.12	4.5	128k	252k	296k	2/2

Puntuación media: 3.96 sin vs 3.58 con la skill (delta -0.38). Tokens por ejecución: 115k vs 431k (3.74x); tiempo 175s vs 198s. Grupo de una frase: 4.29 (la ganancia de la skill sobre la frase única: -0.71; la ganancia de la frase única sobre sin skill: +0.33); tokens de la frase única 298k por ejecución, así que la skill cuesta 1.44x la frase única.

Qué ocurrió

Media a ciegas: una frase 4.29, control 3.96, skill 3.58 (n=6 cada uno). Por tarea, la skill dio 4.5 / 4.5 en el rediseño (control 4.0, una frase 4.1), 3.5 en el panel (control 3.75, una frase 4.4) y 2.75 en la landing page (control 4.1, una frase 4.4).
La media tan baja de la landing page viene de una página rota: la página de una ejecución de tratamiento muestra texto corrupto (el selector de sabores escribe marcado como texto, así que aparece «</span>» dentro de un botón), una navegación colapsada y formas dispersas; la otra landing page de tratamiento estaba bien (4.0). El propio flujo de la skill informó de que «la verificación en navegador estaba bloqueada», así que se entregó sin comprobación visual. Sin esa ejecución, la skill promediaría 4.0, a la par del control.
La skill sí cambia el aspecto de las páginas: las señales de estética genérica que nombra desaparecen. Etiquetas superiores en mayúsculas por página: control 0-5, skill 0-1; marcadores numerados 01/02: control 3-6 en 3 de 6 páginas, skill 0 en las 6. La frase única eliminó las mismas señales (0-1 etiquetas, 0 marcadores), así que la frase logra esa parte por sí sola.
El coste es muy alto: 431k tokens por ejecución con la skill frente a 298k de una frase y 115k de control (3.7x y 1.4x), con 25.7 comandos de shell por ejecución (control 7.7). Cada ejecución además deja unos 40 archivos de skill y de dirección en el proyecto (direction.json y report.md de la skill se escriben en .taste-skill/).
Los paneles y las landing pages de tratamiento con .taste-skill/direction.json eran distintivos en su aspecto (maquetaciones editoriales de papel y tinta), pero no sistemáticamente mejores que el estilo sencillo verde oscuro con serif en cursiva al que convergen control y una frase.

Puntuaciones por dimensión

Dimensión	Puntuación	Motivo
1_output_quality	3.58	Puntuación media 3.58/5 con la skill (comprobaciones programáticas, véase la tabla por tarea).
2_lift_vs_no_skill	1.62	-0.38 puntos frente a 3.96 sin la skill (n=2 por tarea; menos de ~1 punto es ruido).
3_trigger	5.0	Archivo de la skill leído en 6/6 ejecuciones de tratamiento.
4_instructions_portability	3	Grande: SKILL.md, una biblioteca de direcciones, recursos CSS y scripts que escriben en el proyecto; presupone un navegador para las comprobaciones visuales.
5_efficiency	0	3.74x tokens (431k vs 115k por ejecución) y 1.14x tiempo (198s vs 175s).
6_safety_hygiene	3	Escribe archivos `.taste-skill/` en el proyecto; véase security.md.

Límites de esta prueba

Juicio visual a ciegas del revisor a partir de hojas de contacto de página completa (escritorio 600 px, móvil 300 px por página); una diferencia de 0.25 está dentro del ruido del juez. Una página rota mueve la media de la skill unos 0.3.
n=2 por celda, tres tareas; la página rota podría ser mala suerte y no un defecto sistemático.
Las fuentes no se cargan sin conexión, así que las elecciones de combinación tipográfica no se ven.
El propio paso de captura de pantalla en navegador de la skill no pudo ejecutarse en el sandbox, lo que probablemente la perjudica más que a los otros grupos.
n = 2 por grupo y tarea: las diferencias de menos de ~1 punto son ruido.
Juicio ciego con IA: un solo juez, sin comprobación entre evaluadores; las ejecuciones originales de control/tratamiento y las posteriores de una frase se juzgaron en sesiones separadas (una frase el 2026-11-02), así que es posible una deriva entre sesiones.

Seguridad

Consulta security.md. Escaneo: 10 CRITICAL / 44 HIGH / 9 MEDIUM. Veredicto: segura de ejecutar (sandbox sin red). Un escaneo limpio no demuestra que una skill sea segura.

Conclusión

Elimina el aspecto genérico de IA y produjo el mejor rediseño de esta prueba, pero costó 3.7x tokens y en 1 de 6 ejecuciones entregó una página visiblemente rota sin darse cuenta; un prompt de dirección de arte de una frase puntuó más alto con cerca de un tercio de los tokens. Pruébala para páginas de marketing con dirección de arte en las que una persona revise el resultado, no como opción predeterminada sin supervisión.

Transcripción

Registro de ejecuciones: design-taste-frontend (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.)
Columnas: tarea, grupo-ejecución, puntuación (0-5), tokens, segundos, comprobaciones superadas, archivos de la skill que abrió el agente.

t1-landing control-1: puntuación 4.25, tokens 100863, s 169.3, comprobaciones 5/5, no abrió nada
t1-landing control-2: puntuación 4.0, tokens 101753, s 206.0, comprobaciones 5/5, no abrió nada
t1-landing oneliner-1: puntuación 4.25, tokens 279371, s 224.5, comprobaciones 5/5, no abrió nada
t1-landing oneliner-2: puntuación 4.5, tokens 345398, s 247.5, comprobaciones 5/5, no abrió nada
t1-landing treatment-1: puntuación 1.5, tokens 433869, s 267.5, comprobaciones 5/5, abrió taste-skill
t1-landing treatment-2: puntuación 4.0, tokens 360647, s 199.4, comprobaciones 5/5, abrió taste-skill
t2-dashboard control-1: puntuación 3.75, tokens 114229, s 178.7, comprobaciones 4/5, no abrió nada
t2-dashboard control-2: puntuación 3.75, tokens 117234, s 192.6, comprobaciones 4/5, no abrió nada
t2-dashboard oneliner-1: puntuación 4.25, tokens 411906, s 237.5, comprobaciones 4/5, no abrió nada

18 ejecuciones, 3 artefactos

Resultado de ejemplo

SOTA · With the skill: index.html (t1-landing, run 1, Codex)

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#163e32"> <meta name="description" content="Meet Tidepool: small-batch seaweed snacks in three big flavours. Your monthly crunch, $14 a box."> <title>Tidepool 鈥?A little sea. A lot of crunch.</title> <style> :root{--green:#163e32;--paper:#f5f3e9;--lime:#e1f184;--pink:#edb7c6;--blue:#bfd9ec;--ink:#163e32;--body:Arial,Helvetica,sans-serif;--display:'Arial Black',Arial,Helvetica,sans-serif;--gutter:clamp(22px,4vw,64px)} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.5 var(--body)}a{color:inherit;text-decoration:none}button,select{font:inherit}button,a,summary,select{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:6px}a,button{transition:transform .2s}a:hover,button:hover{transform:translateY(-3px)}a:active,button:active{transform:translateY(1px)}::selection{background:var(--pink);color:var(--green)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:900;letter-spacing:-.055em;line-height:.98}h2{font-size:clamp(40px,5.5vw,76px)}h3{font-size:30px}p{max-width:48ch}.skip{position:absolute;top:-100px;background:var(--paper);padding:14px;z-index:10}.skip:focus{top:0}.announcement{background:var(--lime);text-align:center;padding:9px 20px;font-size:14px}.header{display:flex;align-items:center;justify-content:space-between;padding:24px var(--gutter);background:var(--green);color:var(--paper)}.logo{font-family:var(--display);font-weight:900;font-size:38px;letter-spacing:-3px;line-height:1}.logo span{display:inline-block;transform:rotate(-12deg)}nav{display:flex;align-items:center;gap:34px;font-size:15px}.nav-cta{background:var(--paper);color:var(--green);padding:12px 23px;border-radius:50px}.hero{background:var(--green);color:var(--paper);padding:35px var(--gutter) 0;overflow:hidden}.hero h1{font-size:clamp(66px,10.8vw,164px);letter-spacing:-.065em;line-height:.89;position:relative;z-index:1}.hero h1 span{display:block;animation:rise .8s both}.hero h1 span:last-child{animation-delay:.1s}.hero-bottom{display:grid;grid-template-columns: .85fr 1.15fr;min-height:405px;align-items:center}.hero-copy{padding:40px 0 55px;max-width:410px}.hero-copy p{font-size:19px;line-height:1.5;margin-bottom:27px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;border:0;border-radius:50px;background:var(--lime);color:var(--green);padding:17px 27px;font-weight:700;cursor:pointer}.button .arrow{font-size:24px;line-height:1}.note{display:block;font-size:14px;margin-top:13px}.hero-art{height:420px;position:relative;align-self:end}.pack{width:230px;height:315px;background:var(--lime);color:var(--green);padding:22px 18px 17px;position:absolute;display:flex;align-items:center;flex-direction:column;clip-path:polygon(0 0,100% 0,98% 4%,100% 8%,98% 96%,100% 100%,0 100%,2% 95%,0 7%,2% 3%);isolation:isolate}.pack:before,.pack:after{content:'';position:absolute;left [... excerpt: first 3200 of 17282 characters]

Ver Pro