designing-frontend
독특한 프론트엔드 인터페이스 디자인
평범한 인터페이스는 사용자의 관심을 끌지 못하고 브랜드 정체성을 희석시킵니다. 이 스킬은 AI 어시스턴트가 독특한 미학, 강력한 시각적 계층 구조, 프로덕션 수준의 코드 품질을 갖춘 대담하고 기억에 남는 프론트엔드 디자인을 만들 수 있도록 안내합니다.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“designing-frontend”。 brutalist 미학을 가진 로그인 페이지를 디자인하세요
预期结果:
- 모노스페이스 디스플레이 폰트를 사용한 크고 굵은 타이포그래피
- 고대비 색상 구성 (검정/흰색과 강렬한 강조색)
- 두꺼운 테두리를 가진 대형 입력 필드
- border-radius 없음 - 날카로운 기하학적 모서리
- 공격적인 색상 반전을 가진 호버 상태
- 쉬운 테마 적용을 위한 CSS 커스텀 속성
- 접근성을 위한 ARIA 레이블 및 포커스 관리
正在使用“designing-frontend”。 유기적인 디자인의 히어로 섹션을 생성하세요
预期结果:
- 부드럽고 흐르는 형태와 자연스러운 색상 팔레트
- 레이어드 투명도와 깊이 효과
- 스크롤 인터랙션에 따른 미묘한 애니메이션
- 모바일 우선 접근 방식의 반응형 레이아웃
- 적절한 랜드마크를 가진 시맨틱 HTML 구조
安全审计
安全This is a pure markdown prompt skill containing only design guidelines. The static scanner misidentified common English words and JSON structure as security threats. No executable code, network calls, file system access, cryptographic operations, or external commands exist in this skill. Safe for immediate publication.
风险因素
🌐 网络访问 (1)
质量评分
你能构建什么
기억에 남는 웹 인터페이스 구축
평범한 템플릿과 패턴에서 벗어난 독특하고 프로덕션 수준의 사용자 인터페이스를 생성합니다.
개념을 코드로 변환
디자인 비전을 독특한 시각적 아이덴티티를 가진 깔끔하고 접근 가능한 프론트엔드 코드로 변환합니다.
프로젝트에 시각적 임팩트 추가
대담한 미학, 신중한 모션, 일관된 디자인 언어로 웹 애플리케이션을 향상시킵니다.
试试这些提示
[brutalist/minimalist/retro] 미학을 가진 [button/card/modal] 컴포넌트를 디자인하세요. 호버 상태와 접근성을 포함하세요.
[luxury/organic/tech] 테마를 가진 [제품 유형] 랜딩 페이지를 생성하세요. 독특한 타이포그래피와 일관된 색상 팔레트를 사용하세요.
단계적 애니메이션, 스크롤 트리거 효과, 부드러운 전환을 가진 인터랙티브 [navigation/modal/gallery]를 디자인하세요.
독특한 [미학 방향]을 가진 완전한 [dashboard/application/landing]을 구축하세요. 반응형 레이아웃, 타이포그래피 시스템, 색상 변수, 모션 가이드라인, 모든 핵심 컴포넌트를 포함하세요. 접근성 준수를 검증하세요.
最佳实践
- 모든 디자인 결정을 안내하기 위해 미학 방향(brutalist, maximalist, organic)을 미리 지정하세요
- 요청에 기술적 제약사항(프레임워크, 성능 예산, 접근성 요구사항)을 포함하세요
- 점진적으로 반복하세요 - 핵심 레이아웃부터 시작한 다음 모션과 시각 효과를 추가하세요
- 접근성 준수 검증(키보드 탐색, 스크린 리더 지원)을 요청하세요
避免
- 평범한 미학 선택 사용 (Inter 폰트, 보라색 그라디언트, 중앙 정렬 레이아웃)
- 시각적 임팩트를 위해 접근성 간과
- 독창성을 추구하는 대신 익숙한 패턴으로 수렴
- 무거운 애니메이션이나 효과의 성능 영향 무시