frontend-design (Anthropic)

Reseña

Codex CLI 0.166 (gpt-6-astra, razonamiento bajo), un proyecto temporal nuevo en cada ejecución, la skill instalada o ausente, dos ejecuciones por grupo, sin red. Nunca mencionamos la skill en el prompt, así que esto también prueba la activación automática. Tres tareas: una landing page para una suscripción inventada de snacks de algas (Tidepool), un panel de monitorización de la calidad del agua con datos de muestra y el rediseño de la página de inicio, deliberadamente sosa, de un rocódromo, que debía conservar todo su contenido. Renderizamos cada página con Playwright (escritorio de 1440 px y móvil de 390 px) en un sandbox sin red y las puntuamos a ciegas a partir de capturas, de 0 a 5. También contamos características concretas en el HTML.

Comparación de tres ramas

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

Veredicto: Según el caso (25.5 / 30, la más alta de nuestras tres primeras). Fuente: anthropics/skills, skills/frontend-design, fijada en el commit ca45fc4. Instalación: npx skills@latest add anthropics/skills --skill frontend-design. Apache-2.0.

Qué es

Un único archivo de prosa, sin scripts. Indica al agente que actúe como el responsable de diseño de un estudio que ya ha rechazado propuestas cliché: elige una paleta, tipografías y un diseño específicos para el encargo, evita los valores predeterminados típicos del "diseño con IA" (fondo crema con acento terracota, un antetítulo en mayúsculas sobre cada encabezado, marcadores numerados 01/02/03 que no señalan una secuencia), trabaja en dos pasadas (planifica, revisa el plan contra el encargo y luego construye) y termina con una autocrítica. También enumera mínimos de calidad: adaptable a móvil, foco de teclado visible, movimiento reducido respetado.

Cómo lo probamos

Codex CLI 0.166 (gpt-6-astra, razonamiento bajo), un proyecto temporal nuevo por ejecución, skill instalada o ausente, dos ejecuciones por grupo, red desactivada. Nunca mencionamos la skill en el prompt, así que esto también prueba la activación automática. Tres tareas: una landing page para una suscripción inventada de snacks de algas (Tidepool), un panel de monitorización de calidad del agua con datos de muestra y un rediseño de la página de inicio deliberadamente anodina de un rocódromo que debía conservar todo su contenido. Renderizamos cada página con Playwright (escritorio 1440 px y móvil 390 px) en un sandbox sin red y las puntuamos a ciegas a partir de capturas, de 0 a 5. También contamos características concretas en el HTML.

Qué ocurrió

Se activa sola. El archivo de la skill se leyó en las seis ejecuciones de tratamiento, sin indicación alguna. Nadie tuvo que escribir un comando.

Los tics que nombra desaparecen. Por página, las páginas de control usaron 3.2 etiquetas en mayúsculas y 1.5 marcadores numerados de media; las páginas creadas con la skill usaron 0.3 y 0. Es el propio consejo de la skill reflejado en el resultado. Ningún grupo usó los valores hex crema y terracota contra los que advierte, y el uso de degradados fue idéntico (0.17 por página). Las familias tipográficas se limitaron a fuentes del sistema en ambos grupos porque el sandbox estaba sin conexión, lo que perjudica a una skill que se preocupa por la tipografía. Esperamos resultados distintos con fuentes web.

La calidad general fue más o menos la misma. Las puntuaciones ciegas promediaron 3.75 con la skill y 3.5 sin ella. Las landing pages fueron mejor con la skill (4.0 vs 3.25); el panel y el rediseño empataron. Con dos ejecuciones por celda, eso es ruido. Todas las páginas eran competentes: jerarquía clara, espaciado sensato, ningún diseño roto.

La uniformidad sigue intacta. Tres de las cuatro landing pages, con y sin la skill, usaron el mismo titular, "Un poco de océano. Mucho crujiente."; la cuarta (una ejecución de tratamiento) escribió "Un poco de mar." con otro texto. Las cuatro compartían el mismo diseño general: bolsas de producto y una tarjeta de precios a mitad de página. La skill pide "un punto de vista distintivo y específico para este encargo", pero un modelo ejecutado dos veces desde el mismo prompt sigue convergiendo en su propio valor predeterminado. La skill elimina los clichés superficiales; no diversifica la idea de fondo. La tarea de rediseño produjo algo más de variedad tipográfica: las ejecuciones de control usaron Arial/Helvetica y Courier, las de tratamiento eligieron tipografía display estilo Impact con Helvetica Neue o Avenir Next. Es variedad solo dentro de las fuentes del sistema.

Los mínimos de calidad se cumplieron por igual. La etiqueta meta viewport, las consultas @media y los estilos :focus aparecieron en todas las páginas de ambos grupos. La gestión de movimiento reducido faltaba en ambos paneles en los dos grupos. El desbordamiento móvil fue cero en 10 de 12 páginas; una landing page de cada grupo se desbordó entre 2 y 6 píxeles.

Sin coste. Las ejecuciones con la skill usaron 87,900 tokens de media frente a 93,000 sin ella (0.95x) y tardaron 155 segundos frente a 189. Leer el archivo es barato comparado con las páginas en sí.

Una advertencia sobre nuestras propias comprobaciones

Nuestra comprobación automática de "mantiene los precios $22 / $79 / $720" falló en tres de las cuatro ejecuciones de rediseño, en ambos grupos. Es un fallo de nuestra regex, no de las páginas: los precios estaban divididos entre etiquetas <span>, y las capturas muestran los tres precios presentes. No usamos esa comprobación en las puntuaciones.

Revisión de seguridad

Un archivo markdown y un archivo de licencia. El escáner no encontró nada; el único dominio es apache.org dentro del texto de la licencia. Sin scripts, binarios, caracteres ocultos ni instrucciones sobre secretos. Consulta security.md.

Puntuaciones

Quién debería usarla

Si las páginas de tu agente siguen llegando con los mismos antetítulos en mayúsculas y marcadores 01/02/03, esta skill lo detiene de forma fiable, sin coste extra de tokens, así que hay pocas razones para no mantenerla instalada. Si esperas que haga que un modelo medio produzca un diseño visiblemente más original, no lo vimos: seguirás obteniendo una página competente que se parece a lo que el modelo suele hacer. La solución fiable contra la uniformidad es un encargo más fuerte por tu parte (una paleta, una referencia, un mood), y la skill dice que las palabras del propio encargo siempre mandan.

Límites de esta prueba

Dos ejecuciones por celda, un modelo, sandbox sin conexión con fuentes del sistema, tres tareas, puntuadas por un único revisor a ciegas en lugar de un panel. El juicio de diseño es subjetivo. El tier de Codex cuenta para Codex y Claude Code según la regla del sitio.

Actualización (2 nov 2026): se añade el grupo de una frase

Añadimos un tercer grupo: sin skill, pero con una frase añadida al prompt que lleva la regla central de la skill ("Da a la página un punto de vista visual concreto y audaz ... evita los tics genéricos del diseño con IA, como degradados morados, antetítulos en mayúsculas, marcadores numerados 01/02 e idénticas rejillas de tres tarjetas"). 6 ejecuciones, en una máquina Windows con la misma versión de Codex, red desactivada.

La frase única iguala a la skill (ganancia de la skill sobre ella: 0.00) y supera a sin skill en 0.25, todo dentro del ruido con n=2. Las ejecuciones de una frase gastaron unas 1.4x los tokens del control; la skill no. La página de mejor aspecto del conjunto (un titular de panel en serif, "Una vista clara de tu agua.") salió de una ejecución de una frase, y la única página claramente defectuosa (un ticker corrupto con el texto literal ?/b>) salió de la otra ejecución de una frase en la tarea de rediseño. Las puntuaciones del nuevo grupo se dieron en una sesión ciega separada de la comparación original de seis ejecuciones, así que es posible una pequeña deriva (la misma landing page puntuó 4.5 en una sesión y 3.25 de media en la otra). La parte sin coste de la skill sigue igual: elimina los tics concretos que nombra. Un prompt de una frase hace casi lo mismo.