frontend-design
Diseñar interfaces frontend de calidad de producción
또한 다음에서 사용할 수 있습니다: anthropics,AI-Vibe-Prompts,Azeem-2,92Bilal26,AdamAugustinsky,1bertogit,7Spade,1bertogit,pbakaus,sickn33,7Spade,ZhanlinCui,AgentWorkforce,AJV009,YYH211,anthropics,am-will,92Bilal26,davila7,DennisLiuCk
Crear componentes web y páginas distintivos con estética pulida. Evitar visuales genéricos generados por IA y crear interfaces de usuario memorables y de alta calidad.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"frontend-design" 사용 중입니다. Create a login page with a distinctive aesthetic
예상 결과:
- Un formulario de inicio de sesión pulido con combinación de fuentes personalizada (display + body)
- Tema oscuro con colores de acento y gradientes sutiles
- Transiciones de enfoque fluidas y animaciones de validación de entrada
- Diseño responsivo que funciona en todos los tamaños de pantalla
- Etiquetas de formulario accesibles y navegación por teclado
"frontend-design" 사용 중입니다. Design a pricing cards section with modern style
예상 결과:
- Tres niveles de precios con jerarquía visual audaz
- Efectos hover que resaltan la tarjeta seleccionada
- Animaciones de escala suaves y transiciones de borde
- Tipografía limpia con fuente display distintiva
- Diseño de grid responsivo que se adapta al tamaño de pantalla
"frontend-design" 사용 중입니다. Build a navigation menu with creative interactions
예상 결과:
- Menú horizontal con animación de revelación escalonada
- Estados hover con efectos de subrayado personalizados
- Menú hamburguesa responsivo para móvil con animación de deslizamiento
- Indicador de estado activo con transición suave
- Soporte de navegación por teclado accesible
보안 감사
안전This is a pure documentation skill containing only design guidance and metadata. No executable code, scripts, network calls, filesystem access, or external command execution capabilities exist. All static findings are false positives from documentation files being incorrectly scanned for code patterns.
위험 요인
🌐 네트워크 접근 (2)
📁 파일 시스템 액세스 (1)
품질 점수
만들 수 있는 것
Construir componentes UI pulidos
Crear componentes React o Vue distintivos con estéticas refinadas y animaciones fluidas.
Prototipar conceptos visuales
Transformar conceptos de diseño en código funcional con direcciones visuales audaces y memorables.
Diseñar interfaces coherentes
Construir páginas frontend completas con tipografía consistente, temas de color y diseño de movimiento.
이 프롬프트를 사용해 보세요
Crear un componente de botón distintivo con estilo único, efectos hover y transiciones fluidas.
Diseñar una página de destino con dirección estética audaz, tipografía personalizada y animaciones de revelación escalonada.
Construir una interfaz de dashboard con gráficos, filtros y transiciones de estado fluidas usando una estética de diseño brutalista.
Crear una interfaz SaaS completa con navegación, formularios, tablas de datos y diálogos modales con un lenguaje de diseño de lujo coherente y efectos de movimiento.
모범 사례
- Elegir una dirección estética audaz antes de programar y comprometerse completamente con ella
- Usar variables CSS para theming coherente entre componentes
- Priorizar animaciones de alto impacto sobre micro-interacciones dispersas
피하기
- Usar fuentes genéricas como Arial, Inter o Roboto para todos los proyectos
- Usar por defecto gradientes púrpura y esquemas de color predecibles
- Crear diseños sin una visión conceptual clara o intención de diseño