high-end-visual-design
프리미엄 에이전시 수준의 인터페이스 디자인
대부분의 AI 도구는 세련되지 못하고 템플릿에 가까운 일반적인 UI 디자인을 생성합니다. 이 스킬은 고가 디자인 에이전시에서 나온 것처럼 보이는 인터페이스를 만들기 위해 폰트, 간격, 그림자, 카드 구조 및 애니메이션에 대한 정확한 디자인 규칙을 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"high-end-visual-design" 사용 중입니다. Create a hero section for an AI startup with dark glassmorphism style
예상 결과:
- 넓은 마진이 있는 상단에 글래스 필 모양의 플로팅 네비게이션 바가 있습니다. 히로는 미묘한 보라색 방사형 그래디언트와 함께 깊은 OLED 블랙 배경을 사용합니다. 헤드라인은 위에 눈썹 태그 배지가 있는 큰 Grotesk 폰트를 사용합니다. CTA 버튼에는 중첩된 후행 화살표 아이콘이 있습니다. 전체 섹션은 인터랙티브 요소에 부드러운 cubic-bezier 전환과 함께 너끈한 수직 패딩을 사용합니다.
"high-end-visual-design" 사용 중입니다. Design a card component for a premium dashboard
예상 결과:
- 카드는 1.5rem border radius와 미묘한 링 테두리가 있는 외부 쉘 래퍼가 있는 더블 베젤 패턴을 사용합니다. 내부 코어는 인셋 하이라이트 그림자와 동심원 커브를 위한 계산된 더 작은 radius가 있는 자체 배경색을 가집니다. 호버 상태는 미묘한 scale과 대각선 아이콘 트랜슬레이션을 포함합니다. 카드는 주변 확산 그림자와 함께 어두운 배경 위에 있습니다.
보안 감사
안전The static analyzer flagged 107 patterns, but all are false positives. The 94 external_commands detections are markdown inline code backticks (e.g., `Vanguard_UI_Architect`, `backdrop-blur-2xl`), not shell execution. The 13 high-risk cryptographic detections are CSS hex color values (e.g., #050505, #FDFBF7) misidentified as weak algorithms. The 4 system reconnaissance detections are triggered by dollar signs in prices ($150k) and unrelated text. The file contains only markdown design guidance with no executable code, no network access, and no filesystem operations. Safe to publish.
품질 점수
만들 수 있는 것
프리미엄 랜딩 페이지 구축
글래스모피즘 효과, 단계적 애니메이션 및 비대칭 벤토 그리드 레이아웃이 적용된 높은 전환율을 자랑하는 랜딩 페이지 생성.
기존 대시보드 리디자인
중첩된 카드 아키텍처와 부드러운 호버 인터랙션이 적용된 기본 관리 대시보드를 에이전시 수준의 인터페이스로 변환.
포트폴리오 웹사이트 제작
대규모 타이포그래피, 부드러운 그림자 및 시네마틱 스크롤 애니메이션이 적용된 에디토리얼 스타일의 포트폴리오 구축.
이 프롬프트를 사용해 보세요
비대칭 벤토 레이아웃과 함께 에테리얼 글래스 아키타입을 사용하는 SaaS 제품용 히어로 섹션 생성.
더블 베젤 중첩 아키텍처와 기본 CTA 버튼에 대한 자기장 호버 효과가 있는 3단계 가격 카드 섹션 구축.
스태거드 링크 리빌이 있는 전체 화면 오버레이로 확장되는 변형 햄버거 메뉴가 있는 플로팅 필 모양 내비게이션 바 디자인.
Z-축 캐스케이드 레이아웃, 세리프 타이포그래피 및 스크롤 트리거 페이드업 애니메이션이 있는 에디토리얼 럭셔리 아키타입을 사용하는 testimonial 섹션 생성.
모범 사례
- 일관된 디자인 언어를 보장하기 위해 코드 생성 전에 항상 하나의 바이브 아키타입과 하나의 레이아웃 아키타입을 선택하세요
- 레이아웃 트리거 속성을 피하고 GPU 성능을 유지하려면 모든 애니메이션에 transform과 opacity를 사용하세요
- 고정 또는 스티키 요소에만 backdrop-blur 필터만 적용하고 스크롤 컨테이너에는 절대 적용하지 마세요
피하기
- 프리미엄 디자인에 Inter, Roboto 또는 Arial과 같은 일반 폰트를 사용하지 마세요
- 플랫하고 생동감 없는 모션을 만드는 linear 또는 ease-in-out 전환을 적용하지 마세요
- 모바일 성능에 부정적인 영향을 미치는 지속적인 reflow를 일으키므로 스크롤 애니메이션에 window.scroll 이벤트 리스너를 사용하지 마세요