anthropics/skills
Diseñar interfaces distintivas más allá de las plantillas habituales
Acerca de esta habilidad
Guía para crear interfaces web o rediseñar las existentes con una identidad visual deliberada y distintiva. Abarca una dirección estética basada en el producto y su público, tokens de colores, tipografía y composición, y la revisión del plan frente al encargo para evitar patrones habituales del diseño generado por IA. También trata el movimiento moderado, la accesibilidad, la adaptación móvil y textos claros desde la perspectiva del usuario.
¿Cómo se utiliza esta habilidad?
1. Proporciona un encargo con el producto o tema, el público y el objetivo principal de la página. Si faltan, el agente propone un tema, público y función para que los confirmes.
2. Ejemplo: «Diseña una página para una aplicación que ayude a aficionados a las plantas de interior a recordar el riego. No quiero que parezca una plantilla».
3. Primero prepara un plan breve: entre 4 y 6 colores base con nombre y valor hex, fuentes y funciones, composición con esquemas ASCII y pautas de alineación, y principios distintivos.
4. Contrasta el plan con el encargo, modifica elecciones que parezcan predeterminadas y explica los cambios antes de programar.
5. Escribe el código atendiendo a la especificidad CSS, la adaptación móvil, el foco de teclado visible y la preferencia de movimiento reducido. Si el entorno lo permite, revisa su trabajo mediante capturas durante el desarrollo.
6. Revisa el resultado y pide cambios concretos. Una dirección visual explícita en el encargo tiene prioridad aunque sea un estilo habitual.
Requisitos y limitaciones
Los archivos no incluyen scripts, dependencias ni cuentas necesarias: contienen instrucciones en SKILL.md con licencia Apache License 2.0. Se necesita un agente capaz de escribir código frontend, como HTML y CSS. Las capturas para revisión son opcionales y dependen del entorno. La calidad estética depende de la claridad del encargo, no está garantizada y puede variar entre sesiones.
Instalación según el agente
Descarga y descomprime el ZIP. Contiene la carpeta frontend-design y el archivo SKILL.md con los adjuntos originales y la licencia.
Claude Code
- Crea esta ruta dentro de tu proyecto si no existe:
.claude/skills/ - Copia la carpeta completa de la habilidad en esta ruta:
.claude/skills/frontend-design/SKILL.md - Abre el proyecto en el agente o actualiza la lista y busca frontend-design.
- Solicita la tarea del ejemplo y selecciona la habilidad. Concede solo los permisos necesarios.