frontend-design
Diseñar Interfaces Frontend de Producción
También disponible en: davila7,ZhanlinCui,AdamAugustinsky,DennisLiuCk,CesarAugustusGroB,7Spade,sickn33,anthropics,7Spade,anthropics,92Bilal26,Azeem-2,AgentWorkforce,AJV009,AI-Vibe-Prompts,1bertogit,1bertogit,92Bilal26,YYH211
Construye interfaces frontend distintivas que evitan las genéricas aestheticias de IA. Esta guía de habilidades orienta decisiones creativas de diseño con tipografía audaz, temas de color cohesivos y animaciones pulidas para experiencias de usuario memorables.
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". Create a button component with a luxury aesthetic
Resultado esperado:
Un botón pulido con tipografía refinada, acentos dorados sutiles, transiciones suaves en hover y una sombra refinada que crea profundidad sin pesadez.
Usando "frontend-design". Design a landing page for a tech startup
Resultado esperado:
Una página de aterrizaje audaz con tema oscuro, patrones geométricos, colores de acento neón, animaciones de revelación escalonadas al hacer scroll y una sección hero asimétrica.
Usando "frontend-design". Build a card component for a blog
Resultado esperado:
Una tarjeta elegante con tipografía serif distintiva, espacios en blanco generosos, fondo con textura sutil y una animación de elevación suave al hacer hover.
Auditoría de seguridad
SeguroStatic analysis detected 15 patterns (weak cryptographic algorithm, system reconnaissance) but all are false positives. The skill is a frontend design guide - words like 'code' (source code), 'cryptographic', 'context' triggered false positive matches. No actual security risks found. Skill is safe for publication.
Problemas de riesgo alto (2)
Puntuación de calidad
Lo que puedes crear
Construir una Página de Aterrizaje
Crear una página de aterrizaje visualmente impactante para un producto o servicio con tipografía única, elecciones de color audaces y animaciones atractivas.
Diseñar una Biblioteca de Componentes
Desarrollar un conjunto cohesivo de componentes UI (botones, tarjetas, formularios) con lenguaje de diseño consistente y estados interactivos.
Prototipar una UI de Aplicación
Prototipar rápidamente una interfaz de aplicación completa con múltiples páginas, navegación y elementos interactivos.
Prueba estos prompts
Create a [component name] with a [specific aesthetic direction]. Use [framework or plain HTML/CSS]. Focus on distinctive typography and cohesive color scheme.
Design a landing page for [product/service]. Choose an extreme aesthetic direction like [brutalist/minimalist/retro-futuristic]. Include hero section, features, and call-to-action. Use [framework] with custom CSS.
Build a small design system with [number] components. Each should follow [aesthetic theme]. Include buttons, cards, inputs, and a navigation component. Use CSS variables for theming.
Create a [application type] interface with multiple views. Aesthetic direction: [specific style]. Include [list of features]. Use [framework]. Focus on motion, spatial composition, and attention to detail.
Mejores prácticas
- Comprométete con una dirección estética clara antes de codificar y ejecútala con precisión durante todo el proceso
- Elige tipografía distintiva: combina una fuente de visualización única con una fuente de cuerpo refinada
- Usa la animación con propósito: una carga de página bien orquestada crea más impacto que micro-interacciones dispersas
Evitar
- Usar fuentes genéricas como Inter, Roboto o valores del sistema que carecen de carácter
- Usar por defecto gradientes morados o esquemas de color trillados
- Crear layouts predecibles y simétricos sin interés visual ni tensión