high-end-visual-design
Diseñar interfaces de calidad de agencia premium
La mayoría de las herramientas de IA producen diseños de interfaz genéricos, similares a plantillas, que carecen de refinamiento. Esta habilidad proporciona reglas de diseño exactas para fuentes, espaciado, sombras, estructuras de tarjetas y animaciones para crear interfaces que parecen provenir de una agencia de diseño de alta gama.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "high-end-visual-design". Crea una sección hero para una startup de IA con estilo dark glassmorphism
Resultado esperado:
- Una barra de navegación flotante con forma de píldora de cristal se encuentra en la parte superior con márgenes generosos. El hero usa un fondo negro OLED profundo con un gradiente radial púrpura sutil. El titular usa una fuente Grotesk grande con una etiqueta de eyebrow badge encima. Un botón de llamada a la acción con un icono de flecha trailing anidado se encuentra debajo. Toda la sección usa relleno vertical generoso con transiciones cubic-bezier suaves en elementos interactivos.
Usando "high-end-visual-design". Diseña un componente de tarjeta para un dashboard premium
Resultado esperado:
- La tarjeta usa el patrón double-bezel con un contenedor de shell externo en 1.5 rem de radio de borde y un borde de anillo sutil. El núcleo interno tiene su propio color de fondo con una sombra highlight inset y un radio más pequeño calculado para curvas concéntricas. Los estados hover incluyen una escala sutil y traducción diagonal del icono. La tarjeta descansa sobre un fondo oscuro con sombra ambiental difusa.
Auditoría de seguridad
SeguroThe static analyzer flagged 107 patterns, but all are false positives. The 94 external_commands detections are markdown inline code backticks (e.g., `Vanguard_UI_Architect`, `backdrop-blur-2xl`), not shell execution. The 13 high-risk cryptographic detections are CSS hex color values (e.g., #050505, #FDFBF7) misidentified as weak algorithms. The 4 system reconnaissance detections are triggered by dollar signs in prices ($150k) and unrelated text. The file contains only markdown design guidance with no executable code, no network access, and no filesystem operations. Safe to publish.
Puntuación de calidad
Lo que puedes crear
Construir una landing page premium
Genera una landing page de alta conversión con efectos de glassmorphism, animaciones escalonadas y diseño de cuadrícula bento asimétrica.
Rediseñar un dashboard existente
Transforma un dashboard administrativo básico en una interfaz de calidad de agencia con arquitectura de tarjetas anidadas e interacciones suaves al pasar el cursor.
Crear un sitio web de portafolio
Construye un portafolio con estilo editorial con tipografía masiva, sombras suaves y animaciones de scroll cinematográficas.
Prueba estos prompts
Crea una sección hero para un producto SaaS usando el arquetipo ethereal glass con un diseño bento asimétrico.
Construye una sección de tarjetas de precios de tres niveles con arquitectura anidada double-bezel y efectos magnéticos al pasar el cursor en el botón principal de llamada a la acción.
Diseña una barra de navegación flotante con forma de píldora de cristal con un menú hamburguesa que se transforma en un overlay de pantalla completa con revelaciones de enlaces escalonadas.
Crea una sección de testimonios usando el arquetipo de lujo editorial con un diseño en cascada en eje z, tipografía serif y animaciones de aparición gradual activadas por scroll.
Mejores prácticas
- Siempre selecciona un arquetipo de vibe y un arquetipo de layout antes de generar código para asegurar un lenguaje de diseño consistente
- Usa transform y opacity para todas las animaciones para mantener el rendimiento de la GPU y evitar propiedades que desencadenen layout
- Aplica filtros backdrop-blur solo a elementos fixed o sticky, nunca a contenedores con scroll
Evitar
- Nunca uses fuentes genéricas como Inter, Roboto o Arial en diseños premium
- Nunca apliques transiciones lineales o ease-in-out, las cuales crean movimiento plano y sin vida
- Nunca uses listeners de eventos window.scroll para animaciones de scroll, ya que causan reflows continuos y dañan el rendimiento móvil