frontend-design
독특한 프론트엔드 인터페이스 만들기
Également disponible depuis: 92Bilal26,AdamAugustinsky,AgentWorkforce,AJV009,DennisLiuCk,anthropics,anthropics,YYH211,7Spade,1bertogit,7Spade,92Bilal26,1bertogit,CesarAugustusGroB,davila7,AI-Vibe-Prompts,Azeem-2
사용자들은 시각적 개성이 부족한 일반화된 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". 대담하고 현대적인 미학을 가진 SaaS 제품용 가격 페이지 만들기
Résultat attendu:
3 가지 티어, 그라디언트 액센트가 특징인 커스텀 가격 카드, 로드 시 staggered reveal 애니메이션, 호버 마이크로 인터랙션, 월간/연간 가격 토글, 선명한 액센트 컬러가 돋보이는 다크 테마로 구성된 완성된 가격 페이지. 타이포그래피는 대담한 디스플레이 폰트와 깔끔한 바디 폰트를 조합합니다.
Utilisation de "frontend-design". 개성 있는 로그인 폼 만들기
Résultat attendu:
독특한 분할 화면 레이아웃을 가진 애니메이션 로그인 폼. 왼쪽에는 그레인 텍스처가 있는 추상적 기하학적 배경이 있습니다. 오른쪽에는 플로팅 라벨이 있는 커스텀 스타일 입력 필드, 호버 애니메이션이 있는 기억에 남는 제출 버튼, 부드러운 전환 효과가 있는 에러 상태가 있는 폼이 있습니다.
Audit de sécurité
SûrAll 16 static findings are false positives. The scanner incorrectly flagged 'weak cryptographic algorithm' on design guideline text (lines mentioning 'design', 'bold', 'retro-futuristic', 'art deco'). The 'system reconnaissance' flags on lines 7, 30, 34 refer to design context ('purpose', 'spatial composition'), not actual system scanning. This is a pure documentation skill with no scripts, network calls, filesystem access, environment access, or external commands. Safe to publish.
Score de qualité
Ce que vous pouvez construire
런딩 페이지 처음부터 만들기
대담한 미적 방향성을 가진 스타트업 제품용 시각적으로 돋보이는 런딩 페이지 생성
React 컴포넌트 라이브러리 디자인
일관된 디자인 언어를 가진 조화롭고 스타일링된 React 컴포넌트 세트 개발
와이어프레임을 완성된 UI 로 변환
기본 요구사항을 받아들여 창의적이고 프로덕션 준비 완료된 인터페이스로 업그레이드
Essayez ces prompts
[use case] 를 위한 [component type] 을 (를) 생성하세요. [style preference] 스타일로 시각적으로 독특하고 프로덕션 준비 완료되게 만드세요.
완전한 [page type] 페이지를 구축하세요. [aesthetic direction like brutalist/minimalist/retro-futuristic] 미학을 사용하세요. [specific sections] 을 (를) 포함하세요.
일관된 [specific aesthetic] 을 공유하는 관련 [component names] 세트를 생성하세요. [context] 애플리케이션에서 함께 작동해야 합니다.
데이터 시각화, 필터, 인터랙티브 요소를 갖춘 [dashboard type] 을 (를) 구축하세요. [industry/use case] 에 맞는 독특한 시각적 정체성을 선택하세요.
Bonnes pratiques
- 하나의 명확한 미적 방향성을 선택하고 끝까지 고수하세요 - 세련된 미니멀리즘이나 대담한 맥시멀리즘 모두 효과적이지만, 혼합된 의도는 일반적 결과를 초래합니다
- 독특한 폰트 페어링을 사용하세요: Inter/Roboto/Arial 을 피하고, 대신 기억에 남는 디스플레이 폰트를 정제된 바디 타입과 조합하세요
- 산재한 마이크로 인터랙션보다 소수의 고품격 애니메이션을 우선시하세요 - 하나의 조율된 리빌이 더 큰 즐거움을 줍니다
Éviter
- Space Grotesk, 퍼플 그라디언트, 예측 가능한 컴포넌트 패턴 같은 일반적인 AI 선택으로 수렴하기
- 선명한 액센트가 있는 지배적 색상 대신 소심하고 고르게 분포된 컬러 팔레트 사용
- 텍스처, 깊이, 상황별 시각적 분위기 없이 단색 배경으로 기본 설정하기
Foire aux questions
이 스킬이 모든 프론트엔드 프레임워크에서 작동하나요?
이 스킬이 접근성 향상에 도움을 줄 수 있나요?
이것은 일반적 코드 생성과 어떻게 다른가요?
다크 모드를 지원하나요?
이 스킬로 커스텀 폰트를 사용할 수 있나요?
생성된 인터페이스는 얼마나 상세한가요?
Détails du développeur
Structure de fichiers
📄 SKILL.md