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". 다크 모드 토글이 있는 설정 패널 생성
Résultat attendu:
- 토글 스위치 애니메이션이 포함된 완전한 React 컴포넌트 반환
- 적절한 접근성 속성 및 키보드 내비게이션 포함
- CSS 커스텀 속성으로 다크 모드 부드럽게 적용
- 설정이 로컬 스토리지에 유지됨
Audit de sécurité
SûrThis is a prompt-based skill containing design guidelines and documentation. The JavaScript plugin file contains only basic logging and template code with no network, filesystem, or command execution capabilities. No malicious patterns detected.
Score de qualité
Ce que vous pouvez construire
프로덕션 UI 컴포넌트 구축
독특한 미학과 완전한 기능으로 다듬어진 React 또는 Vue 컴포넌트 생성
시각적 컨셉 프로토타이핑
대담한 디자인 방향과 높은 충실도의 인터랙션이 포함된 시각적 프로토타입 생성
빠른 랜딩 페이지
자연어 설명으로부터 애니메이션과 반응형 레이아웃이 포함된 완전한 랜딩 페이지 구축
Essayez ces prompts
호버 애니메이션과 포커스 상태가 있는 버튼 컴포넌트 생성
따뜻한 색상과 부드러운 애니메이션이 있는 커피숍을 위한 랜딩 페이지 구축
차트, 필터 및 호버 인터랙션이 있는 다크 모드 분석 대시보드 생성
앨아트 아트, 재생 컨트롤, 재생목록 관리 및 순차 애니메이션이 있는 음악 스트리밍 플레이어 구축
Bonnes pratiques
- 목표, 대상 사용자 및 기술적 제약 조건에 대한 명확한 컨텍스트 제공
- 원하는 미학 방향 명시(미니멀리즘, 브루탈리즘, 레트로 등)
- 사용하려는 특정 프레임워크나 라이브러리 언급
Éviter
- 디자인 방향을 지정하지 않고 일반적인 컴포넌트 요청
- 성능 고려 없이 지나치게 복잡한 디자인 요청
- 인터랙티브 요소에 대한 접근성 요구사항 생략
Foire aux questions
이 스킬은 어떤 프레임워크를 지원합니까?
완전한 웹 애플리케이션을 만들 수 있습니까?
반응형 디자인을 처리합니까?
내 코드 데이터가 안전합니까?
왜 내 디자인이 매번 다르게 보입니까?
표준 코드 생성과 어떻게 다릅니까?
Détails du développeur
Structure de fichiers