frontend-design
독창적인 프로덕션급 프론트엔드 인터페이스 제작
Également disponible depuis: sickn33,7Spade,CesarAugustusGroB,am-will,1bertogit,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,anthropics,YYH211,pbakaus,92Bilal26,ZhanlinCui,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 card component for a coffee shop website with bold typography and warm colors
Résultat attendu:
- 인라인 스타일 또는 CSS 모듈을 사용하는 프로덕션 준비 React 컴포넌트
- 따뜻한 색상 팔레트의 맞춤 폰트 선택
- 호버 상태와 마이크로 인터랙션을 위한 CSS 애니메이션
- 모바일 퍼스트 접근의 반응형 디자인
- aria 레이블과 키보드 내비게이션을 포함한 접근성 고려
Utilisation de "frontend-design". Design a landing page for a creative agency
Résultat attendu:
- 히어로 섹션을 포함한 완전한 HTML/CSS 레이아웃
- 커스텀 아이콘 스타일링이 포함된 기능 그리드
- 스태거 애니메이션이 적용된 고객 후기 섹션
- 인터랙티브 호버 상태가 있는 CTA 섹션
- 모바일과 태블릿을 위한 반응형 브레이크포인트
Utilisation de "frontend-design". Build an analytics dashboard with charts and data tables
Résultat attendu:
- 사이드바 내비게이션이 있는 대시보드 레이아웃
- CSS 차트를 사용하는 데이터 시각화 컴포넌트
- 정렬 가능한 헤더와 페이지네이션이 있는 테이블
- 애니메이션 전환이 있는 상태 표시기
- 부드러운 색상 전환이 있는 다크 테마 옵션
Audit de sécurité
SûrThis is a pure prompt-based skill containing only markdown documentation and design guidelines. No executable code, scripts, network calls, filesystem access, or command execution capabilities exist. All 58 static findings are false positives triggered by legal terminology in the Apache license and documentation text.
Facteurs de risque
🌐 Accès réseau (2)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
신속한 프로덕션 UI 프로토타입
프로덕션 준비가 되었고 시각적으로 독창적인 프론트엔드 컴포넌트와 페이지를 생성
콘셉트를 코드로 변환
디자인 콘셉트를 미학에 세심한 주의를 기울인 HTML/CSS/JS 또는 React 구현으로 변환
완전한 프론트엔드 인터페이스 구축
랜딩 페이지, 대시보드, 인터랙티브 웹 애플리케이션을 포함한 완전한 사용자 인터페이스를 생성
Essayez ces prompts
Create a button component for a coffee shop website with bold typography and warm colors using a brutalist aesthetic.
Build a complete landing page for a SaaS startup. Include hero section, features grid, testimonials, and CTA. Use a maximalist design with custom typography.
Design a dashboard interface for analytics with charts, tables, and navigation. Use a clean, functional aesthetic with subtle animations.
Create an interactive portfolio web application with React. Include smooth animations, hover states, and responsive layout.
Bonnes pratiques
- 더 나은 결과를 위해 목적, 대상, 브랜드 정체성에 대한 명확한 맥락을 제공
- 디자인 선택을 이끌기 위해 미니멀리스트, 브루탈리스트, 레트로 퓨처리즘 등 미학적 방향을 지정
- 프레임워크 선호, 브라우저 지원, 성능 요구사항 등 기술적 제약을 언급
Éviter
- 미학적 방향을 지정하지 않고 일반적인 디자인을 요청
- 접근성과 성능을 고려하지 않은 프로덕션 배포 요청
- 모바일 및 태블릿 뷰에 대한 반응형 요구사항을 निर्द시하지 않음