Construimos la misma landing page con y sin una skill

El Banco de Skills, parte 1 de 4. Mismo modelo, mismo prompt, una skill instalada o no. Esta entrada: una landing page. También en la serie: un bot de Telegram, depuración de un juego de serpientes, y auditoría de un script de Google zx.

Cada revisión de skill en este sitio termina con la misma pregunta sin resolver: ¿esta skill hace que Claude realice un trabajo mejor, o simplemente hace que Claude realice más trabajo? No son lo mismo, y la mayoría de las configuraciones de prueba no pueden distinguirlas porque las ejecuciones no están lo suficientemente controladas como para aislar la única variable que importa.

Así que realizamos un experimento. Dos ejecuciones, mismo modelo, mismo brief, hasta la puntuación. La única diferencia entre ellas es una instrucción: "lee y sigue esta skill instalada". En la ejecución uno, el modelo construye sin ayuda. En la ejecución dos, lo dirigimos a la skill frontend-design real, la que tiene una calificación de 9.6 sobre 10 en nuestro catálogo, y dejamos que lea el SKILL.md real antes de tocar cualquier código. Luego comparamos las dos landing pages línea por línea y contamos los tokens que costó cada ejecución.

Esta es la primera de cuatro comparaciones de este tipo. Elegimos una landing page para empezar porque el diseño visual es el dominio donde "mejor" es más fácil de discutir y más difícil de falsificar. Un hero con muchos gradientes o se parece a cualquier otra página construida por IA o no, y no se necesita un benchmark para ver cuál.

La configuración

El brief fue el mismo para ambas ejecuciones, una landing page de un solo archivo para "Nimbus", una API de clima ficticia, escrita con un estándar de calibre Stripe: sección hero, tres bloques de características, una tabla de precios con niveles Free, $29 y $199, un bloque de ejemplo de código y un pie de página. Sin frameworks, sin paso de compilación, un archivo HTML con CSS incrustado.

La ejecución uno recibió ese brief y nada más. La ejecución dos recibió el brief idéntico más un puntero a la skill frontend-design instalada, que el modelo leyó completamente antes de comenzar.

Una advertencia importante, declarada claramente en lugar de oculta: esto es N=1. Una ejecución por brazo, un modelo, un brief. No estamos afirmando que estos números sean estadísticamente estables a lo largo de cien pruebas, y si lo vuelves a ejecutar tú mismo, obtendrás números específicos diferentes. Lo que sí afirmamos es más limitado y, creemos, más útil: esto es lo que sucedió, en detalle, en una ejecución real, con telemetría real, y es un patrón que hemos visto con suficiente frecuencia en pruebas menos controladas como para confiar en su forma incluso antes de ejecutar las rondas dos y tres.

Lo que construyó la línea base

Dejado a su suerte, Claude produjo una página que la mayoría de las personas que han visto mucha salida de IA reconocerían inmediatamente. 890 líneas, un esquema de color claro construido alrededor de tonos papel y ámbar, y vale la pena ser justos aquí: el código estaba limpio, el texto era razonable, el diseño funcionaba, nada estaba roto.

Las señales estaban todas en los detalles. Once gradientes separados en toda la página, en el fondo del hero, en los estados de los botones, en los bordes de las tarjetas, en lugares donde un gradiente añadía ruido visual en lugar de cumplir una función. Dos titulares usaban background-clip: text para pintar el texto mismo con un gradiente, la firma de diseño de IA más reconocible que existe en este momento. Los números de estadísticas flotaban en sus propias tarjetas por encima del pliegue, desvinculados de cualquier lógica de diseño, el tipo de elemento que parece haber sido añadido porque alguna plantilla lo tiene, no porque esta página en particular lo necesitara.

Nada de esto es incompetente. Es la salida de un modelo que es bueno en diseño web en general y no tiene un punto de vista específico sobre esta marca en particular, por lo que recurre a los mismos movimientos que aparecen cada vez que se hace la misma pregunta sin más restricciones. Una ejecución de 63,329 tokens compró una página entregable. No compró una página que alguien recordaría, y es la misma página que esperaríamos de la mayoría de las skills en nuestro resumen de las mejores skills de diseño si se elimina la skill de diseño.

Lo que el brazo de la skill construyó de manera diferente

La ejecución guiada por la skill leyó el SKILL.md real de anthropics/skills frontend-design antes de escribir nada, y la página resultante parece provenir de un brief de diseño completamente diferente. Fondo azul marino oscuro (--bg: #0B1119) combinado con un acento de latón (--brass: #D2A25C), una combinación que no aparece en el espacio de búsqueda de la línea base y se lee como una elección deliberada en lugar de un valor predeterminado. 985 líneas, cuatro gradientes en lugar de once, y cero instancias de texto con gradiente. No menos, cero. El sistema tipográfico era disciplinado de una manera que el de la línea base no lo era: escala consistente, lógica de peso consistente, titulares que parecen elegidos en lugar de ajustados al tamaño.

Nada en esta página grita "premium" de la misma manera que una foto de archivo de un apretón de manos grita "corporativo". Es más sutil que eso. La paleta es lo suficientemente inusual como para no parecer una plantilla, y la restricción en los gradientes significa que los que quedan realmente tienen peso en lugar de decorar todo lo que tocan. Si entregaras ambas páginas a un cliente y preguntaras cuál enviaría un fundador consciente del diseño, esto no sería una decisión difícil.

Los números

	Línea base (sin skill)	Brazo de skill (frontend-design)	Delta
Tokens usados	63,329	125,165	+98%
Llamadas a herramientas	6	57	+51
Longitud de salida	890 líneas	985 líneas	+95 líneas
Gradientes	11	4	-7
Instancias de texto con gradiente	2	0	-2
Paleta	Clara, papel + ámbar	Azul marino oscuro + latón	—

El número de tokens es el titular y no es sutil: la ejecución con skill costó casi el doble. Eso no es un error de redondeo que se pueda atribuir al ruido, y es el número contra el que debe leerse cada otra afirmación en este artículo.

Por qué la skill cuesta más

La brecha de tokens no se trata realmente del tamaño del archivo de la skill. Los archivos SKILL.md suelen ser de unos pocos miles de tokens, no lo suficiente por sí solos para duplicar una ejecución de 63k tokens. Lo que realmente sucedió es visible en el recuento de llamadas a herramientas: 6 versus 57. La ejecución de la línea base escribió la página y terminó. La ejecución de la skill leyó la skill, luego iteró contra ella, verificando su propia salida contra una lista de verificación que la skill establece, ajustando el espaciado, revisando las elecciones de color, reconsiderando una decisión de diseño que ya había tomado una vez.

Ese es el mecanismo, y vale la pena mencionarlo porque significa que el costo de tokens no es "leer un documento más largo". Es "hacer el trabajo más de una vez". Una skill que describe cómo se ve un buen diseño convierte una tarea de generación de una sola pasada en algo más parecido a un bucle de auto-revisión, y los bucles de auto-revisión son caros en tokens por naturaleza, ya sea que los ejecute un humano o un modelo.

Cuándo un +98% de tokens es una ganga, y cuándo no lo es

Si el entregable es el diseño, esto no es una decisión difícil. Una landing page que un cliente verá, una pieza de portafolio, cualquier cosa donde "esto parece hecho por alguien con buen gusto" sea parte de la descripción del trabajo: el costo de tokens aquí está más cerca de un error de redondeo que de una línea presupuestaria. Nadie discute pagar a un diseñador por un segundo borrador. Pagar a un modelo en tokens por la iteración equivalente es el mismo trato a un precio mucho más bajo, incluso al doble del costo de la línea base.

Si el entregable es una herramienta interna, un prototipo que nadie fuera del equipo verá, o una página que existe para probar que un endpoint de API funciona en lugar de representar una marca, omítelo. La página de papel y ámbar de la línea base con sus gradientes dispersos cumple la función. Nadie que evalúe un panel de administración interno notará que el titular usó background-clip: text, y pagar el doble de tokens para corregir un defecto que nadie verá no es una compra de calidad, es solo una factura más grande.

El punto de decisión no es la calidad de la skill, que es real. Es si alguien va a mirar el resultado lo suficientemente de cerca como para importarle.

Cómo reproducir esto tú mismo

No necesitas nuestro brief exacto para ejecutar esta comparación en tu propio trabajo. La configuración es lo suficientemente simple como para rehacerla en una tarde.

• Escribe un brief con restricciones concretas: un nombre de producto, un conjunto específico de secciones, una estructura de precios específica, "sin frameworks" si eso te importa. Los briefs vagos producen deltas vagos, porque hay menos contra lo que una skill de diseño puede trabajar.
• Ejecútalo una vez con un modelo limpio y sin skills instaladas. Guarda la salida y anota el recuento de tokens de tu telemetría de arnés, no una estimación.
• Instala frontend-design (o cualquier skill de diseño que estés evaluando), reinicia tu sesión para que la descripción de la skill se cargue de nuevo, y ejecuta el brief idéntico de nuevo, sin cambiar nada excepto una línea que le dice al modelo que lea y siga la skill.
• Compara las dos salidas en busca de las señales específicas que encontramos aquí: recuento de gradientes, uso de background-clip: text, si la paleta parece elegida o predeterminada, si la escala tipográfica es consistente. Lee nuestro protocolo de pruebas para la versión más completa de este proceso, incluyendo la batería de disparadores que ejecutamos antes de cualquier comparación de salida.
• Compara los recuentos de tokens al final, después de haberte formado una opinión sobre la salida. Si miras la factura primero, influye en cuán generoso eres con la comparación visual, y ese orden importa más de lo que parece.

Preguntas frecuentes

¿La skill frontend-design siempre duplica el uso de tokens? No necesariamente, y no estamos afirmando un multiplicador fijo. Esta ejecución mostró un +98% en un brief con un modelo. El mecanismo detrás del aumento, más llamadas a herramientas porque el modelo verifica su salida contra la propia guía de la skill, debería generalizarse, pero el porcentaje exacto variará con la complejidad del brief y la cantidad de ida y vuelta que el modelo decida que necesita.

¿Es una ejecución por brazo suficiente para confiar en estos números? Suficiente para confiar en el patrón, no suficiente para confiar en el porcentaje preciso. Llamamos a esto N=1 deliberadamente para que nadie lo confunda con un estudio controlado. Lo que podemos decir con más confianza es la dirección: la iteración guiada por skills cuesta más y produce un resultado visiblemente más considerado, un patrón que aparece en cada comparación de skills de diseño que hemos ejecutado de manera menos formal en pruebas normales.

¿Por qué no simplemente pedirle a Claude que "evite el texto con gradiente y el diseño genérico de IA"? Puedes hacerlo, y ayudará un poco. Pero una instrucción de una línea no conlleva el razonamiento que sí tiene una skill completa, la lógica específica de la paleta, las reglas de escala tipográfica, la lista de verificación contra la que el modelo itera. Nuestro protocolo de prueba completo cubre por qué las instrucciones a nivel de prompt y a nivel de skill tienden a producir diferentes profundidades de resultado incluso cuando apuntan al mismo objetivo.

¿Cómo se compara esto con la salida de Claude en otros tipos de tareas? Las tareas de diseño son el caso donde una skill tiene el espacio más obvio para ayudar, porque "esto parece distintivo" es legible incluso sin una tarjeta de puntuación. Nuestras otras entradas de Skill Bench prueban skills contra la construcción de un bot de Telegram, una sesión de depuración y una auditoría de script, tres dominios donde la victoria, si la hay, se ve diferente a una paleta más agradable. Consulta la metodología completa para saber cómo puntuamos en los cuatro.

Elegimos este brief porque una landing page defiende el caso de una skill de diseño por sí misma sin necesidad de interpretación. Mira las dos páginas una al lado de la otra y la paleta, el recuento de gradientes y la disciplina tipográfica te dirán todo lo que la tabla de tokens no puede. La próxima entrada de esta serie cambia esa claridad visual por algo más difícil de evaluar a simple vista: un bot funcional, donde "mejor" debe juzgarse por si la cosa funciona.