frontend-design
대담한 디자인으로 독특한 프론트엔드 인터페이스 만들기
Également disponible depuis: sickn33,7Spade,CesarAugustusGroB,am-will,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,anthropics,YYH211,pbakaus,92Bilal26,ZhanlinCui,Azeem-2,AdamAugustinsky,AI-Vibe-Prompts,AgentWorkforce,AJV009,anthropics
이 스킬은 기억에 남는 미학을 갖춘 프로덕션급 웹 인터페이스를 구축하는 데 도움이 됩니다. 일반적인 AI가 생성한 디자인을 피하기 위해 타이포그래피, 색상, 모션 및 레이아웃에 대한 창의적인 선택을 안내합니다.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "frontend-design". Create a settings panel with dark mode toggle
Résultat attendu:
- Complete React component with animated toggle switch
- Smooth theme transition using CSS custom properties
- Accessibility attributes for keyboard navigation and screen readers
- Settings persistence using local storage
- Responsive layout for mobile and desktop
Utilisation de "frontend-design". Build a hero section for a tech startup landing page
Résultat attendu:
- Bold typography with distinctive font pairing
- Animated gradient background with subtle motion
- Staggered text reveal on page load
- Call-to-action buttons with hover effects
- Responsive grid layout with creative asymmetry
Utilisation de "frontend-design". Design a card component for a product gallery
Résultat attendu:
- Card layout with image, title, description, and price
- Hover animation with shadow lift and scale effect
- Color-coded tags with custom styling
- Smooth transitions between states
- Grid system for responsive gallery layout
Audit de sécurité
SûrThis is a prompt-based skill containing design guidelines and documentation. Static analysis flagged 66 findings, all of which are false positives from pattern matching in documentation text. The JavaScript plugin file contains only basic logging template code with no network, filesystem, or command execution capabilities. No actual security risks identified.
Facteurs de risque
⚙️ Commandes externes (1)
🌐 Accès réseau (2)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
프로덕션 UI 컴포넌트 빠르게 구축
독특한 미학, 애니메이션 및 완전한 접근성 지원을 갖춘 세련된 React 또는 Vue 컴포넌트 생성
비주얼 컨셉 신속하게 프로토타이핑
아이디어 테스트를 위한 대담한 디자인 방향과 인터랙티브 요소를 갖춘 고충실도 프로토타입 생성
랜딩 페이지 및 인터페이스 제작
자연어 설명에서 반응형 레이아웃이 적용된 완전한 랜딩 페이지 또는 애플리케이션 인터페이스 구축
Essayez ces prompts
Create a button component with hover animation, focus states, and ripple effect on click
Build a landing page for a sustainable coffee shop with warm earth tones, smooth scroll animations, and organic shapes
Create a dark-mode analytics dashboard with animated charts, real-time data filters, hover tooltips, and staggered reveal animations
Build a music streaming player with album art carousel, playback controls, playlist management, drag-and-drop sorting, and synchronized animations matching audio playback
Bonnes pratiques
- 더 나은 디자인 결정을 위해 목적, 대상 사용자 및 기술적 제약 조건에 대한 명확한 맥락 제공
- 미니멀리즘, 브루탈리즘, 레트로, 오가닉, 럭셔리 등 원하는 미학적 방향 명시
- React 또는 Vue와 같은 특정 프레임워크와 필요한 라이브러리를 언급하여 최적화된 코드 출력 얻기
Éviter
- 디자인 방향이나 브랜드 개인성을 지정하지 않고 일반적인 컴포넌트 요청
- 성능 영향을 고려하지 않고 많은 애니메이션이 포함된 지나치게 복잡한 디자인 요청
- 양식, 버튼, 탐색과 같은 인터랙티브 요소에 대한 접근성 요구사항 생략
Foire aux questions
이 스킬은 어떤 프레임워크를 지원합니까?
완전한 웹 애플리케이션을 만들 수 있습니까?
반응형 디자인을 자동으로 처리합니까?
내 코드와 프로젝트 데이터가 안전하게 보호됩니까?
왜 디자인이 매번 다르게 보입니까?
표준 코드 생성과 어떻게 다릅니까?
Détails du développeur
Structure de fichiers