frontend-design, la skill de Anthropic para diseñar webs: la hemos probado con y sin ella

Pídele a una IA la web de una panadería y es muy probable que te devuelva un fondo crema, un titular grande con letra de periódico y una palabra en cursiva de color. frontend-design es la skill con la que Anthropic intenta que Claude deje de hacer eso. Es gratuita, está publicada con licencia Apache 2.0 y, según skills.sh, lleva 932.900 instalaciones. La hemos leído entera y la hemos puesto a prueba.

Qué le dice a Claude

Una skill es un conjunto de instrucciones que Claude carga cuando la tarea lo pide; en qué son las skills de Claude lo explicamos desde el principio. Esta ocupa unas 1.500 palabras en inglés y se activa sola cuando le pides diseñar o rediseñar una interfaz. Le pide a Claude cuatro cosas:

• Que trabaje como el director de diseño de un estudio cuyo cliente ya ha rechazado propuestas por parecer de plantilla, y que tome decisiones con opinión propia.
• Que empiece por el tema: el sector, sus materiales y su forma de hablar son de donde salen las ideas. Una web para una juguetería no se parece a un panel para analistas financieros.
• Que evite los rasgos típicos del diseño generado por IA, y los enumera: el fondo crema con acento terracota (que describe como el propio color de Claude), el fondo casi negro con un único acento verde ácido, la maqueta de periódico con líneas finas, las tarjetas idénticas con la misma sombra gris, y adornos de plantilla como etiquetas en mayúsculas encima de cada título, datos unidos con puntos medios («A · B · C») o una flecha «→» al final de cada botón.
• Que trabaje en dos pasadas: primero un plan (de 4 a 6 colores con nombre, las letras y un boceto), luego lo compara con el encargo, cambia lo que le parezca genérico y solo entonces escribe el código.

Además le recuerda lo mínimo que tiene que cumplir cualquier web (que se vea bien en el móvil, que se pueda usar con el teclado, que respete a quien prefiere menos animaciones), le pide gastar la audacia en un solo elemento y le da reglas de escritura: botones que dicen lo que hacen («Guardar cambios», no «Enviar») y mensajes de error que explican cómo arreglarlo.

La prueba: ocho páginas, con y sin la skill

Le hemos hecho a Claude Code, con Claude Opus 5.5, el mismo encargo en dos situaciones: con frontend-design instalada y sin ninguna skill añadida. Dos encargos, cada uno dos veces en cada situación:

• «Haz la página de inicio de un obrador de pan de barrio en Valencia que acaba de abrir y quiere que la gente reserve pan de masa madre para recoger el fin de semana. Todo en un solo archivo index.html, con el CSS dentro. En español.»
• «Haz la página de inicio de una aplicación para que equipos pequeños lleven el control de sus gastos compartidos. Todo en un solo archivo index.html, con el CSS dentro. En español.»

Cada pasada empezó desde cero, en una carpeta vacía, sin otras skills ni instrucciones. En las cuatro pasadas con la skill, Claude la cargó por su cuenta; en las otras cuatro no había ninguna que cargar. Después abrimos las ocho páginas en un navegador y medimos lo mismo en todas.

Sin la skill, cuatro veces la misma página

Las cuatro salieron de un mismo molde, aunque dos eran de una panadería y dos de una aplicación de gastos. Fondo crema, titular con letra de periódico (Fraunces en tres de ellas) y una palabra en cursiva de color, una etiqueta encima del título y, en dos, flechas en los botones. Las dos panaderías tienen el mismo titular, palabra por palabra: «Pan de masa madre, hecho despacio en tu barrio». Las dos aplicaciones se llaman igual, Bote, y su titular solo cambia en una palabra. Una de ellas se inventa además que la usan «más de 4.000 equipos pequeños».

Con la skill, cuatro páginas distintas

Cada página abre con lo más propio de su tema. En una de las panaderías, lo primero que ves es el propio pedido, con aspecto de papel de estraza, los panes que quedan y los botones para sumar hogazas. La otra usa el color del cartón de panadería y un sello de «Recién abierto». Las dos aplicaciones de gastos enseñan arriba una demostración que funciona: apuntas un gasto y cambia quién debe a quién.

La última fila es importante: lo mínimo ya lo cumplía Claude sin la skill. Lo que cambia es la personalidad, no la calidad técnica. Las páginas con la skill son también más cortas: van al grano.

Lo que no hace tan bien

• Cambia unos tópicos por otros. Tres de las cuatro páginas con la skill usan azul cobalto como color de acento y dos repiten la misma letra en los titulares. Esquiva el molde de siempre, pero empieza a tener el suyo.
• No revisa el móvil por ti. Una de las cuatro, en el móvil, deja el botón de la cabecera pegado al logotipo y corta los conceptos de su tabla de ejemplo.

• Quiere preguntar y no siempre puede. Si el encargo no dice para quién es la web, la skill le pide a Claude que proponga un público y lo confirme. Cuando se usa sin conversación de por medio, como en esta prueba, decide solo.

Cómo instalarla

• En Claude Code viene en el mercado oficial de plugins: escribe /plugin install frontend-design@claude-plugins-official. También se puede instalar con npx skills add https://github.com/anthropics/skills --skill frontend-design.
• En Claude (web y aplicaciones), según Anthropic, ya está disponible en los planes de pago, junto al resto de skills de ejemplo de su repositorio.

skills.sh publica tres auditorías de seguridad de la skill (Gen Agent Trust Hub, Socket y Snyk) y las tres la dan por buena. Es normal: son solo instrucciones de texto, sin programas que se ejecuten.

¿Merece la pena?

Si usas Claude para hacer páginas web, sí: es gratis, es oficial y cumple lo que promete. Las páginas dejan de parecer hechas con plantilla y se parecen más al tema del encargo. Lo que no hace es sustituir tu criterio: revisa el resultado en el móvil y, si ves que se repite (el azul cobalto, la misma letra), díselo. Y dale un buen encargo: para quién es la web y qué tiene que conseguir. Es justo con lo que mejor trabaja.