frontend-design
Diseña interfaces frontend distintivas listas para producción
También disponible en: davila7,AdamAugustinsky,DennisLiuCk,7Spade,1bertogit,am-will,anthropics,7Spade,anthropics,92Bilal26,ZhanlinCui,Azeem-2,AgentWorkforce,AJV009,AI-Vibe-Prompts,CesarAugustusGroB,1bertogit,92Bilal26,YYH211
Las interfaces de usuario genéricas generadas por IA carecen de identidad visual y memorabilidad. Esta habilidad aplica el framework DFII para crear interfaces intencionales, de alta artesanía, con estéticas cohesivas que destacan.
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 "frontend-design". Diseña una sección hero con estética retro-futurista para una startup de turismo espacial
Resultado esperado:
Sección hero con: fondo de malla de degradado con transición de púrpura profundo a teal, fuente display personalizada (Orbitron) para titular, layout de texto asimétrico con elementos superpuestos, textura de superposición de grano, única animación flotante de alto impacto en botón CTA, efecto de partículas de campo de estrellas usando solo CSS. Puntaje DFII: 13 (ejecución excelente con fuerte cohesión estética).
Usando "frontend-design". Crea un componente de tarjeta de precios con estética minimalista de lujo
Resultado esperado:
Tarjetas de precios de tres niveles con: whitespace generoso (unidad base de 48px), fuente serif display refinada (Playfair Display) combinada con sans geométrica (Jost), base monocromática con acento dorado solo en CTA primario, box-shadow sutil con 20% de opacidad, transformación de escala suave en hover, íconos de marca de verificación como SVG. Evita degradados púrpuras genéricos y layouts simétricos.
Auditoría de seguridad
SeguroAll 36 static analysis findings are false positives. The skill contains only markdown documentation describing a frontend design methodology (DFII framework). No executable code, network calls, or command execution present. The LICENSE.txt is standard Apache 2.0 text. Safe for publication.
Puntuación de calidad
Lo que puedes crear
Diseño de Landing Page
Crea una landing page memorable con estética de brutalismo editorial, incluyendo jerarquía tipográfica personalizada, layout asimétrico y animaciones de entrada de alto impacto.
Biblioteca de Componentes de Dashboard
Construye un conjunto cohesivo de componentes de dashboard con estética minimalista de lujo, usando paleta de colores contenida, espaciado preciso y micro-interacciones refinadas.
Rediseño de Sitio Web de Marca
Rediseña un sitio web existente con dirección estética retro-futurista, implementando mallas de degradado personalizadas, translucidez en capas y patrones de movimiento distintivos.
Prueba estos prompts
Diseña un componente de formulario de registro usando estética minimalista de lujo. Incluye elecciones tipográficas intencionales, una historia de color dominante con un acento, y whitespace con propósito. Proporciona HTML y CSS completos.
Crea una landing page de producto. Primero, evalúa la dirección de diseño usando el framework DFII a través de las cinco dimensiones. Apunta a un puntaje de 12 o superior. Usa estética utilitaria industrial con composición asimétrica intencional.
Define un sistema de diseño completo para un dashboard fintech. Especifica: pares de fuentes display y body con justificación, sistema de colores con variables CSS con un tono dominante y un acento, ritmo de espaciado, y filosofía de movimiento. Luego implementa un componente de tarjeta de ejemplo.
Transforma este componente de botón genérico en algo memorable usando estética de brutalismo editorial. Explica qué lo hace distintivo de UIs típicas generadas por IA. Incluye estados hover y estilos de foco para accesibilidad.
Mejores prácticas
- Declara siempre la dirección estética explícitamente antes de escribir código
- Usa el framework DFII para validar que las decisiones de diseño alcancen un puntaje de 8 o superior
- Incluye al menos un ancla de diseño memorable que diferencie de plantillas genéricas
Evitar
- Usar fuentes del sistema o defaults de IA como Inter, Roboto, o Arial sin justificación intencional
- Aplicar degradados genéricos púrpura-a-blanco de SaaS sin justificación estética
- Crear layouts de sección simétricos y predecibles que podrían ser cualquier plantilla